/* ShopAccess design system.
   Every color pair below is checked for contrast in both themes:
   text 4.5:1 or more, control borders and focus rings 3:1 or more. */

/* Display font for headings only. Self hosted (SIL Open Font License, see
   fonts/OFL.txt). Until it loads, headings use the system font. */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/fonts/bricolage-grotesque-latin.woff2") format("woff2");
  font-weight: 600 800;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */

:root {
  color-scheme: light;

  /* Neutrals */
  --bg: #f7f7fb;
  --surface: #ffffff;
  --surface-2: #f1f2f8;
  --text: #0f172a;
  --muted: #3d4556;
  --line: #e2e4ee; /* decorative dividers and card edges */
  --control: #767e93; /* borders of inputs and outlined buttons */

  /* Indigo accent, warm (coral) accent for calls to action, and states */
  --accent: #4338ca;
  --accent-hover: #3730a3;
  --accent-soft: #eef0ff;
  --on-accent: #ffffff;
  --focus: #4338ca;
  --warm: #c8401d;
  --warm-hover: #a8341a;
  --warm-soft: #fff0e8;
  --warm-text: #b3391a;
  --on-warm: #ffffff;
  --highlight: #ffcdb8; /* marker stroke behind a few words */
  --error: #b42318;
  --error-soft: #fef3f2;
  --success: #067647;

  /* Score and impact swatches: white text on each passes in both themes */
  --good: #067647;
  --warning: #b54708;
  --bad: #b42318;
  --critical: #7a1a12;
  --minor: #475467;

  /* Score ring strokes (graphics only, never behind text) */
  --ring-good: #079455;
  --ring-warning: #dc6803;
  --ring-bad: #d92d20;
  --ring-track: #e2e4ee;

  /* The only two gradients: hero background and score card */
  --hero-gradient:
    radial-gradient(55% 70% at 88% 18%, #ffe9dd 0%, transparent 70%),
    radial-gradient(60% 80% at 8% 0%, #e9ebff 0%, transparent 70%),
    #f7f7fb;
  --score-gradient: linear-gradient(135deg, #fff1e9 0%, #f8eff6 50%, #eceeff 100%);

  /* Older names still used by a few scripts and the report */
  --border: var(--control);
  --link: var(--accent);
  --btn-bg: var(--accent);
  --btn-text: var(--on-accent);

  /* Shape and depth */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow: 0 1px 3px rgba(15, 23, 42, 0.07), 0 6px 16px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 2px 6px rgba(15, 23, 42, 0.07), 0 18px 40px rgba(30, 27, 75, 0.12);

  /* Motion. Everything is 300ms or less and off for reduced motion. */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --quick: 180ms;
  --slow: 300ms;

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;

  --content: 71.25rem; /* 1140px */
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: "Bricolage Grotesque", var(--font);
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Dark mode: deep navy layers, lighter accents, same swatches. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0a0f24;
  --surface: #111831;
  --surface-2: #18213f;
  --text: #eef1fb;
  --muted: #bcc4dc;
  --line: #24305a;
  --control: #7884b0;
  --accent: #9ba3ff;
  --accent-hover: #b8bdff;
  --accent-soft: #1d2452;
  --on-accent: #0a0f24;
  --focus: #b8bdff;
  --warm: #ff8a66;
  --warm-hover: #ffa587;
  --warm-soft: #33201f;
  --warm-text: #ff9b7a;
  --on-warm: #1a0a05;
  --highlight: #6b2e24;
  --error: #ff8177;
  --error-soft: #2e1420;
  --success: #47cd89;
  --ring-good: #3ccf8e;
  --ring-warning: #ffb057;
  --ring-bad: #ff7a70;
  --ring-track: #24305a;
  --hero-gradient:
    radial-gradient(55% 70% at 88% 18%, #2a1b33 0%, transparent 70%),
    radial-gradient(60% 80% at 8% 0%, #18204c 0%, transparent 70%),
    #0a0f24;
  --score-gradient: linear-gradient(135deg, #2b1c30 0%, #221c3d 50%, #1a2150 100%);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 6px 16px rgba(2, 6, 23, 0.45);
  --shadow-lg: 0 2px 8px rgba(0, 0, 0, 0.5), 0 18px 44px rgba(2, 6, 23, 0.6);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0a0f24;
    --surface: #111831;
    --surface-2: #18213f;
    --text: #eef1fb;
    --muted: #bcc4dc;
    --line: #24305a;
    --control: #7884b0;
    --accent: #9ba3ff;
    --accent-hover: #b8bdff;
    --accent-soft: #1d2452;
    --on-accent: #0a0f24;
    --focus: #b8bdff;
    --warm: #ff8a66;
    --warm-hover: #ffa587;
    --warm-soft: #33201f;
    --warm-text: #ff9b7a;
    --on-warm: #1a0a05;
    --highlight: #6b2e24;
    --error: #ff8177;
    --error-soft: #2e1420;
    --success: #47cd89;
    --ring-good: #3ccf8e;
    --ring-warning: #ffb057;
    --ring-bad: #ff7a70;
    --ring-track: #24305a;
    --hero-gradient:
      radial-gradient(55% 70% at 88% 18%, #2a1b33 0%, transparent 70%),
      radial-gradient(60% 80% at 8% 0%, #18204c 0%, transparent 70%),
      #0a0f24;
    --score-gradient: linear-gradient(135deg, #2b1c30 0%, #221c3d 50%, #1a2150 100%);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 6px 16px rgba(2, 6, 23, 0.45);
    --shadow-lg: 0 2px 8px rgba(0, 0, 0, 0.5), 0 18px 44px rgba(2, 6, 23, 0.6);
  }
}

/* ---------- Base ---------- */

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

/* Keep the hidden attribute working on elements that set their own display. */
[hidden] {
  display: none !important;
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  /* Keeps focused elements and skip link targets clear of the sticky header. */
  scroll-padding-top: 6rem;
}

/* The footer sits at the bottom even on short pages. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1.125rem; /* 18px */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* The hero background spans the full window; this stops it from making
     the page scroll sideways. */
  overflow-x: clip;
}

h1,
h2,
h3,
h4 {
  font-family: var(--display);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 700;
  margin: 0 0 var(--space-3);
}

h1 {
  font-size: clamp(2rem, 1.4rem + 2.2vw, 2.75rem);
  letter-spacing: -0.03em;
  overflow-wrap: anywhere;
}

h2 {
  font-size: clamp(1.45rem, 1.2rem + 0.9vw, 1.8rem);
  margin-top: var(--space-7);
}

h3 {
  font-size: 1.2rem;
  margin-top: var(--space-5);
}

h4 {
  font-size: 1.05rem;
  margin-top: var(--space-4);
}

p {
  margin: 0 0 var(--space-4);
}

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  text-decoration-thickness: 2px;
}

code,
pre {
  font-family: var(--mono);
}

/* ---------- Focus ---------- */

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

/* Form fields always show focus. Date fields need this: Chrome moves focus
   into their day, month, and year parts and their calendar button, so the
   outline follows focus anywhere inside the field. */
input:focus,
input:focus-within,
select:focus,
textarea:focus {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

main:focus {
  outline: none;
}

/* ---------- Helpers ---------- */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

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

.lead {
  font-size: 1.25rem;
  color: var(--muted);
  max-width: 44rem;
}

.prose {
  max-width: 46rem;
}

.prose h2 {
  margin-top: var(--space-6);
}

.wrap {
  width: 100%;
  max-width: var(--content);
  margin: 0 auto;
  padding-left: var(--space-5);
  padding-right: var(--space-5);
}

.wrap.wide {
  max-width: var(--content);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

/* Skip link: hidden until it gets keyboard focus. */
.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -10rem;
  z-index: 100;
  padding: var(--space-3) var(--space-4);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  border-radius: var(--radius-sm);
}

.skip-link:focus {
  top: var(--space-3);
}

/* ---------- Header and footer ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.header-bar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 4rem;
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text);
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.brand:hover {
  text-decoration: none;
}

.brand svg {
  width: 1.75rem;
  height: 1.75rem;
  flex: none;
}

.brand-mark rect {
  fill: var(--accent);
}

.brand-mark path {
  fill: none;
  stroke: var(--on-accent);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Page links next to the logo. The current page gets a soft pill. */
.site-nav {
  display: flex;
  min-width: 0;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 1rem;
}

.nav-list a {
  display: block;
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.nav-list a:hover {
  background: var(--surface-2);
  text-decoration: underline;
}

.nav-list a[aria-current="page"] {
  background: var(--accent-soft);
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25em;
}

/* Right side: dark mode toggle, then the account menu or log in links */
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

.icon-button {
  width: 2.6rem;
  min-height: 2.6rem;
  padding: 0;
  background: var(--surface);
  color: var(--text);
  border-color: var(--control);
  box-shadow: none;
}

.icon-button:hover {
  background: var(--surface-2);
  border-color: var(--text);
}

.icon-button svg {
  width: 1.3rem;
  height: 1.3rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.theme-toggle[aria-pressed="true"] .icon-moon,
.theme-toggle[aria-pressed="false"] .icon-sun {
  display: none;
}

/* The menu button only shows on small screens (see the 48rem rule below). */
.nav-toggle {
  display: none;
}

.account-nav {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Log in (quiet) and Sign up (primary): two buttons of the same height and
   text size as the icon button next to them. .account-nav in front so
   these win over the general button rules further down. */
.account-nav .nav-login,
.account-nav .nav-signup {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.6rem;
  padding: 0.45rem 1rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

.account-nav .nav-login {
  color: var(--text);
}

.account-nav .nav-login:hover {
  background: var(--surface-2);
}

.account-nav .nav-login[aria-current="page"] {
  background: var(--accent-soft);
  color: var(--accent);
}

/* Account menu: avatar button and its dropdown */
.account-wrap {
  position: relative;
}

.account-button {
  gap: var(--space-1);
  min-height: 2.6rem;
  padding: 0.2rem 0.5rem 0.2rem 0.2rem;
  border-color: var(--control);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  box-shadow: none;
}

.account-button:hover,
.account-button[aria-expanded="true"] {
  background: var(--surface-2);
  border-color: var(--text);
}

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
}

.chevron {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.account-button[aria-expanded="true"] .chevron {
  transform: rotate(180deg);
}

.account-menu {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  z-index: 60;
  width: max-content;
  min-width: 14rem;
  max-width: min(20rem, calc(100vw - 2rem));
  padding: var(--space-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}

.account-menu-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3) var(--space-3);
  color: var(--muted);
  font-size: 0.95rem;
  overflow-wrap: anywhere;
}

.admin-badge {
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: 700;
}

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

.account-menu-list [role="menuitem"] {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  min-height: 2.6rem;
  padding: 0.5rem var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  font-size: 1rem;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  box-shadow: none;
}

.account-menu-list [role="menuitem"]:hover,
.account-menu-list [role="menuitem"]:focus-visible {
  background: var(--surface-2);
}

.account-menu-list [role="menuitem"][aria-current="page"] {
  color: var(--accent);
}

.account-menu-list [role="separator"] {
  height: 1px;
  margin: var(--space-2) 0;
  background: var(--line);
}

/* 768px and below: the page links fold behind the menu button on the left
   and open as a panel under the header. */
@media (max-width: 48rem) {
  .header-bar {
    gap: var(--space-2);
  }

  .nav-toggle {
    display: inline-flex;
  }

  .site-nav {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
  }

  .nav-list {
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-1);
    padding: var(--space-3) var(--space-4) var(--space-4);
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
  }

  .nav-list.is-open {
    display: flex;
  }

  .nav-list a {
    padding: 0.7rem var(--space-3);
    border-radius: var(--radius-sm);
  }
}

/* Narrow phones: the logo keeps its mark and loses the word, so everything
   fits on one line. The link still reads "ShopAccess". */
@media (max-width: 26rem) {
  .brand .brand-word {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .account-nav .nav-login,
  .account-nav .nav-signup {
    padding: 0.45rem 0.7rem;
  }
}

.site-footer {
  margin-top: var(--space-8);
  padding: var(--space-6) 0;
  border-top: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  font-size: 1rem;
}

.site-footer p {
  max-width: 44rem;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-links a {
  color: var(--text);
}

/* ---------- Page layout ---------- */

main {
  flex: 1;
  padding-top: var(--space-7);
}

#issue-sections + p {
  margin-top: var(--space-7);
}

.hero-card .status {
  min-height: 0;
  margin: var(--space-2) 0 0;
}

.hero-card .status:empty {
  margin: 0;
}

.page-head {
  margin-bottom: var(--space-6);
}

.page-head p {
  color: var(--muted);
  font-size: 1.2rem;
  max-width: 44rem;
}

/* ---------- Buttons ---------- */

button,
.button,
input,
select,
textarea {
  font: inherit;
}

/* Primary: solid accent */
button,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 2.9rem;
  padding: 0.6rem 1.15rem;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--on-accent);
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition:
    background-color var(--quick),
    border-color var(--quick),
    color var(--quick),
    box-shadow var(--quick),
    transform var(--quick) var(--ease);
}

button:hover,
.button:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  text-decoration: none;
}

button:disabled,
button[aria-disabled="true"] {
  opacity: 0.65;
  cursor: wait;
}

/* Warm: the main call to action on a page */
button.warm,
.button.warm {
  background: var(--warm);
  border-color: var(--warm);
  color: var(--on-warm);
}

button.warm:hover,
.button.warm:hover {
  background: var(--warm-hover);
  border-color: var(--warm-hover);
}

/* Secondary: outlined */
button.secondary,
.button.secondary {
  background: var(--surface);
  color: var(--text);
  border-color: var(--control);
}

button.secondary:hover,
.button.secondary:hover {
  background: var(--surface-2);
  border-color: var(--text);
}

/* Quiet: text only */
button.quiet,
.button.quiet {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--accent);
  font-weight: 650;
  min-height: 2.5rem;
  padding: 0.4rem 0.7rem;
}

button.quiet:hover,
.button.quiet:hover {
  background: var(--accent-soft);
  border-color: transparent;
  text-decoration: underline;
}

/* Destructive */
button.danger {
  background: var(--bad);
  border-color: var(--bad);
  color: #ffffff;
}

button.danger:hover {
  background: var(--critical);
  border-color: var(--critical);
}

.nav-button {
  min-height: 2.4rem;
  padding: 0.35rem 0.85rem;
  font-size: 0.95rem;
  background: var(--surface);
  color: var(--text);
  border-color: var(--control);
  box-shadow: none;
}

.nav-button:hover {
  background: var(--surface-2);
  border-color: var(--text);
}

/* ---------- Forms ---------- */

label,
.label-text {
  font-weight: 650;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="tel"],
input[type="date"],
input:not([type]),
select,
textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--control);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-size: 1.05rem;
}

input::placeholder {
  color: var(--muted);
  opacity: 1;
}

input[type="file"] {
  font-size: 1rem;
  padding: var(--space-2);
  border: 1px dashed var(--control);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

input[aria-invalid="true"] {
  border-color: var(--error);
  border-width: 2px;
}

.stack-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-width: 34rem;
  margin: var(--space-5) 0;
}

.stack-form button[type="submit"] {
  align-self: flex-start;
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.field p {
  margin: 0;
}

.hint {
  color: var(--muted);
  font-size: 1rem;
}

.field-error,
.form-error:not(:empty) {
  color: var(--error);
  font-weight: 650;
  font-size: 1rem;
  padding: var(--space-2) var(--space-3);
  border-left: 4px solid var(--error);
  background: var(--error-soft);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.form-error {
  margin: 0;
}

.checkbox-field {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.checkbox-field input {
  width: 1.3rem;
  height: 1.3rem;
  margin: 0.2rem 0 0;
  flex: none;
  accent-color: var(--accent);
}

.checkbox-field label {
  font-weight: 400;
}

.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-4) var(--space-5) var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.checkbox-group legend {
  padding: 0 var(--space-2);
  font-weight: 650;
}

#done-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Scan form: input and button side by side on wide screens */
.scan-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-2) var(--space-3);
  align-items: end;
  max-width: 44rem;
  margin: var(--space-5) 0;
}

.scan-form label,
.scan-form .field-error {
  grid-column: 1 / -1;
}

.scan-form button {
  min-height: 3rem;
}

@media (max-width: 40rem) {
  .scan-form {
    grid-template-columns: 1fr;
  }
}

/* Status and notices */

.status {
  font-weight: 650;
  min-height: 1.6em;
}

.status.error {
  color: var(--error);
}

.notice,
.card-note,
.scan-progress {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--accent-soft);
  font-weight: 600;
}

.notice:empty {
  display: none;
}

/* ---------- Cards ---------- */

.plan-card,
.site-card,
.site-item,
.issue-card,
.statement-preview,
.help-details,
.sample-card,
.step,
.audience-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

pre {
  margin: var(--space-2) 0;
  padding: var(--space-3) var(--space-4);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 0.9rem;
  line-height: 1.5;
}

/* ---------- Scores and badges ---------- */

/* Score card: ring on the left, words on the right. */
.score {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
  max-width: 40rem;
  padding: var(--space-6);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--score-gradient);
  box-shadow: var(--shadow-lg);
}

.score-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

.score-out-of {
  font-size: 1.15rem;
  font-weight: 650;
  color: var(--muted);
}

.score-label {
  font-family: var(--display);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

/* Colored pill with the rating word, so color is never the only signal. */
.score-pill {
  display: inline-flex;
  padding: 0.2rem 0.75rem;
  border-radius: 999px;
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 750;
}

.score-pill.score-good,
.page-score.score-good       { background: var(--good); color: #ffffff; }
.score-pill.score-warning,
.page-score.score-warning    { background: var(--warning); color: #ffffff; }
.score-pill.score-bad,
.page-score.score-bad        { background: var(--bad); color: #ffffff; }

/* Score ring. The number is real text in the middle, so it reads the same
   with or without the fill animation. */
.ring {
  --ring-color: var(--ring-warning);
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 9.5rem;
  height: 9.5rem;
}

.ring.score-good { --ring-color: var(--ring-good); }
.ring.score-bad  { --ring-color: var(--ring-bad); }

.ring svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.ring-track {
  fill: none;
  stroke: var(--ring-track);
  stroke-width: 10;
}

.ring-fill {
  fill: none;
  stroke: var(--ring-color);
  stroke-width: 10;
  stroke-linecap: round;
  stroke-dasharray: 100 100;
  stroke-dashoffset: calc(100 - var(--score, 0));
}

.ring-number {
  position: relative;
  font-family: var(--display);
  font-size: 3.4rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}

.ring-sm {
  width: 4.75rem;
  height: 4.75rem;
}

.ring-sm .ring-number {
  font-size: 1.7rem;
}

.summary {
  font-size: 1.25rem;
  margin: var(--space-5) 0;
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 750;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: #ffffff;
}

.badge-critical { background: var(--critical); }
.badge-serious  { background: var(--bad); }
.badge-moderate { background: var(--warning); }
.badge-minor    { background: var(--minor); }
.badge-admin    { background: var(--accent); color: var(--on-accent); }

/* ---------- Results: impact sections and issue cards ---------- */
/* Spacing in the cards uses the 8px steps: --space-2 (8), --space-4 (16),
   --space-5 (24), --space-6 (32). */

.impact-section {
  margin-top: var(--space-7);
}

.impact-section h2 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin-top: 0;
}

.impact-section h2 .badge {
  font-size: 1rem;
  padding: 0.25rem 0.75rem;
}

.badge-icon {
  width: 1em;
  height: 1em;
  margin-right: 0.35em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.issue-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* A soft surface with a left accent in the impact's color. */
.issue-card {
  overflow: hidden;
  border-left: 6px solid var(--minor);
  transition: border-color 0.15s;
}

.issue-card.impact-critical { border-left-color: var(--critical); }
.issue-card.impact-serious  { border-left-color: var(--bad); }
.issue-card.impact-moderate { border-left-color: var(--warning); }

.card-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-4) var(--space-5);
  cursor: pointer;
  font-weight: 650;
  list-style: none;
}

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

/* Plus / minus marker so open and closed look different without color. */
.card-summary::before {
  content: "+";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  flex: none;
  border: 1px solid var(--control);
  border-radius: var(--radius-sm);
  font-size: 1.1rem;
  line-height: 1;
}

.issue-card[open] .card-summary::before {
  content: "\2212";
}

.issue-card[open] .card-summary {
  border-bottom: 1px solid var(--line);
}

/* The inner focus ring would be clipped by the card's rounded overflow. */
.card-summary:focus-visible {
  outline-offset: -4px;
}

.issue-title {
  flex: 1;
  min-width: 12rem;
}

.card-body {
  padding: var(--space-5);
  background: var(--surface-2);
}

.card-body h3 {
  margin: var(--space-5) 0 var(--space-2);
  font-size: 1rem;
}

.card-body p {
  margin: 0 0 var(--space-2);
}

/* Text on the left, the first screenshot large on the right. */
.card-main {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 56rem) {
  .card-main {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: var(--space-6);
  }
}

.card-text > h3:first-child,
.card-hero > h3:first-child {
  margin-top: 0;
}

.card-hero figure {
  margin: 0;
}

.card-hero figcaption {
  margin-top: var(--space-2);
}

/* Who it affects */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.chip {
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: 0.95rem;
  font-weight: 600;
}

/* Numbered fix steps with a number in a circle */
.steps {
  counter-reset: step;
  margin: 0;
  padding: 0;
  list-style: none;
}

.steps li {
  counter-increment: step;
  position: relative;
  min-height: 2rem;
  margin-bottom: var(--space-2);
  padding-left: 2.75rem;
}

.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -0.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.95rem;
  font-weight: 750;
}

/* Screenshots: a button that opens the lightbox */
.shot-button {
  display: block;
  width: 100%;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: none;
  cursor: zoom-in;
}

.shot-button:hover {
  background: var(--surface);
  border-color: var(--control);
}

.shot-image {
  display: block;
  width: 100%;
  height: auto;
}

.shot-missing {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 8rem;
  padding: var(--space-4);
  color: var(--muted);
  font-weight: 600;
  text-align: center;
}

.place-page {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.repeats {
  color: var(--muted);
  font-size: 0.95rem;
}

.repeats summary {
  width: fit-content;
  color: var(--accent);
  font-weight: 650;
  cursor: pointer;
}

.repeats ul {
  margin: var(--space-2) 0 0;
  padding-left: var(--space-5);
}

/* The other places, as thumbnails: 3 across, 2 on tablets, 1 on phones */
.card-body .more-heading {
  margin-top: var(--space-6);
}

.thumb-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 56rem) {
  .thumb-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 36rem) {
  .thumb-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.shot-thumb .shot-image {
  aspect-ratio: 8 / 5;
  object-fit: cover;
}

.shot-thumb .shot-missing {
  aspect-ratio: 8 / 5;
  min-height: 0;
}

.thumb-page {
  margin: var(--space-2) 0 0;
  font-size: 0.95rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.show-more {
  margin-top: var(--space-4);
}

.thumb-repeats {
  color: var(--muted);
  font-size: 0.9rem;
}

/* Lightbox: the full screenshot, its page, and the code */
.lightbox {
  width: min(56rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  padding: var(--space-5);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-lg);
}

.lightbox::backdrop {
  background: rgba(15, 23, 42, 0.7);
}

.lightbox-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.lightbox-head h2 {
  margin: 0;
  font-size: 1.35rem;
}

.lightbox-close {
  flex: none;
}

.lightbox-image {
  display: block;
  max-width: 100%;
  height: auto;
  margin-bottom: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* Pages scanned, as a strip that scrolls sideways */
.page-strip-section {
  margin-top: var(--space-6);
}

.page-strip-section h2 {
  margin-bottom: var(--space-2);
}

.page-strip {
  display: flex;
  gap: var(--space-2);
  margin: 0;
  padding: 0 0 var(--space-2);
  overflow-x: auto;
  list-style: none;
  scroll-snap-type: x proximity;
}

.page-chip {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: none;
  max-width: 16rem;
  padding: var(--space-2) var(--space-4) var(--space-2) var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  scroll-snap-align: start;
}

.page-chip .page-score {
  flex: none;
}

.page-chip-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-size: 0.95rem;
}

.page-chip-text a {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

/* Free tier lock */

.locked {
  position: relative;
  margin-top: var(--space-3);
}

.locked-cards {
  padding: var(--space-5) 0; /* room for the unlock button when only one card is locked */
  filter: blur(6px);
  user-select: none;
  pointer-events: none;
}

.unlock-link {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  box-shadow: 0 0 0 6px var(--bg), var(--shadow-lg);
}

/* Code behind a toggle (example code on the card, the place's code in the lightbox) */

.code-toggle {
  margin: var(--space-2) 0 var(--space-3);
}

.code-toggle summary {
  width: fit-content;
  padding: var(--space-1) 0;
  color: var(--accent);
  font-weight: 650;
  cursor: pointer;
}

.code-toggle pre {
  margin-top: var(--space-2);
}

/* Pages behind a login, listed under the scored pages */

.login-pages {
  margin-top: var(--space-6);
}

.login-pages ul {
  padding-left: 1.2rem;
}

/* Page score badge (pages strip on the results page) */

.page-score {
  flex: none;
  min-width: 3.4rem;
  padding: 0.3rem 0.5rem;
  border-radius: var(--radius-sm);
  font-size: 1.2rem;
  font-weight: 800;
  text-align: center;
}

#report-actions {
  margin: var(--space-4) 0;
}

#report-status.error,
.card-status.error {
  color: var(--error);
  font-weight: 650;
}

/* ---------- Dashboard ---------- */

.site-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 30rem), 1fr));
  gap: var(--space-5);
}

.site-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-5);
}

.site-card h3 {
  margin: 0;
  font-size: 1.35rem;
  overflow-wrap: anywhere;
}

.site-url {
  margin: 0 0 var(--space-4);
  color: var(--muted);
  font-size: 1rem;
  overflow-wrap: anywhere;
}

.card-score {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--score-gradient);
}

.card-score-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  font-weight: 650;
  color: var(--muted);
}

.card-facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-1) var(--space-5);
  margin: var(--space-4) 0;
  font-size: 1rem;
}

.card-facts dt {
  color: var(--muted);
  font-weight: 600;
}

.card-facts dd {
  margin: 0;
  font-weight: 600;
}

.card-note,
.scan-progress {
  font-size: 1rem;
  margin: var(--space-2) 0;
}

.trend {
  margin: var(--space-3) 0;
}

.trend-title {
  font-weight: 650;
  font-size: 1rem;
  margin: 0 0 var(--space-1);
}

.trend-chart {
  display: block;
  width: 100%;
  max-width: 440px;
  height: auto;
}

.chart-grid {
  stroke: var(--control);
  stroke-width: 1;
  stroke-dasharray: 3 4;
}

.chart-label {
  fill: var(--muted);
  font-size: 11px;
}

.chart-line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.chart-dot {
  fill: var(--surface);
  stroke: var(--accent);
  stroke-width: 3;
}

.next-scan {
  margin: var(--space-3) 0;
  color: var(--muted);
  font-size: 1rem;
}

.card-actions {
  margin-top: auto;
  padding-top: var(--space-3);
}

.card-actions button,
.card-actions .button {
  min-height: 2.6rem;
  padding: 0.45rem 0.9rem;
  font-size: 0.95rem;
}

.card-status:empty {
  display: none;
}

#dashboard-link {
  margin-top: calc(-1 * var(--space-2));
}

/* ---------- Account ---------- */

.details-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-2) var(--space-6);
  margin: var(--space-5) 0;
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.details-list dt {
  color: var(--muted);
  font-weight: 650;
}

.details-list dd {
  margin: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.site-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.site-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-4);
  padding: var(--space-4) var(--space-5);
}

.site-info {
  display: flex;
  flex-direction: column;
  overflow-wrap: anywhere;
}

.confirm-box {
  flex-basis: 100%;
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}

.confirm-box p {
  margin: 0 0 var(--space-3);
  font-weight: 650;
}

.logo-preview {
  max-height: 80px;
  max-width: 240px;
  padding: var(--space-2);
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.danger-zone {
  margin-top: var(--space-7);
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-left: 4px solid var(--bad);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--surface);
}

.danger-zone h2 {
  margin-top: 0;
}

/* ---------- Statement ---------- */

.statement-preview {
  padding: var(--space-5) var(--space-6);
  overflow-wrap: anywhere;
}

.statement-preview h3 {
  margin-top: var(--space-1);
}

.help-details {
  margin-top: var(--space-5);
  padding: var(--space-4) var(--space-5);
}

.help-details summary {
  font-weight: 650;
  cursor: pointer;
}

.help-details[open] summary {
  margin-bottom: var(--space-3);
}

/* ---------- Pricing ---------- */

.plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--space-4);
  margin: var(--space-6) 0;
}

.plan-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-5);
}

.plan-card h2,
.plan-card h3 {
  margin: 0;
  font-size: 1.35rem;
}

/* The Shopify app lists its plans as a list */
ul.plan-grid {
  list-style: none;
  padding: 0;
}

.price {
  margin: var(--space-2) 0 var(--space-4);
  color: var(--muted);
  font-weight: 600;
}

.amount {
  color: var(--text);
  font-size: 2.6rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.features {
  flex: 1;
  margin: 0 0 var(--space-5);
  padding-left: 1.2rem;
  font-size: 1rem;
}

.features li {
  margin-bottom: var(--space-2);
}

.plan-action .button,
.plan-action button {
  width: 100%;
}

.current-plan {
  margin: 0;
  padding: 0.6rem 1rem;
  border: 1px dashed var(--control);
  border-radius: var(--radius-sm);
  font-weight: 700;
  text-align: center;
}

/* ---------- Landing page ---------- */

/* Hero: words and scan box on the left, sample result on the right. The
   soft gradient runs the full width of the window, behind the header gap. */
.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  align-items: center;
  gap: var(--space-7);
  padding: var(--space-5) 0 var(--space-8);
}

.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: calc(-1 * var(--space-7));
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: var(--hero-gradient);
  border-bottom: 1px solid var(--line);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  padding: 0.3rem 0.85rem 0.3rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 0.95rem;
  font-weight: 650;
}

.eyebrow::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--warm);
}

.hero h1 {
  font-size: clamp(2.5rem, 1.4rem + 3vw, 4.1rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin-bottom: var(--space-4);
}

/* Marker stroke behind a few words. Low enough that it never sits behind
   more than the bottom of the letters. */
.highlight {
  background: linear-gradient(transparent 64%, var(--highlight) 64%, var(--highlight) 92%, transparent 92%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.hero .lead {
  font-size: 1.25rem;
  max-width: 36rem;
}

.hero-card {
  margin-top: var(--space-5);
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.hero-card .scan-form {
  margin: 0 0 var(--space-3);
  max-width: none;
}

.hero-card .scan-form label {
  font-size: 1.05rem;
}

/* The scan box is the most obvious thing on the page. */
.hero-card .scan-form input {
  min-height: 4rem;
  padding: 0.8rem 1.1rem;
  border-width: 2px;
  font-size: 1.2rem;
}

.hero-card .scan-form button {
  min-height: 4rem;
  padding: 0 1.9rem;
  font-size: 1.15rem;
  font-weight: 750;
}

.hero-note {
  color: var(--muted);
  font-size: 1rem;
  margin: 0;
}

/* Sample result illustration, tilted a little. */
.hero-art {
  margin: 0;
  justify-self: center;
  width: 100%;
  max-width: 28rem;
  transform: rotate(2.5deg);
  filter: drop-shadow(0 22px 40px rgba(30, 27, 75, 0.18)) drop-shadow(0 2px 6px rgba(15, 23, 42, 0.08));
  transition: transform var(--slow) var(--ease);
}

.hero-art svg {
  display: block;
  width: 100%;
  height: auto;
}

.art-card { fill: var(--surface); stroke: var(--line); }
.art-bar { fill: var(--surface-2); }
.art-dot { fill: var(--line); }
.art-url { fill: var(--muted); font: 600 13px var(--font); }
.art-title { fill: var(--text); font: 700 17px var(--display); }
.art-strong { fill: var(--text); font: 800 40px var(--display); letter-spacing: -1px; }
.art-text { fill: var(--text); font: 600 14px var(--font); }
.art-muted { fill: var(--muted); font: 600 13px var(--font); }
.art-row { fill: var(--surface); stroke: var(--line); }
.art-pill-text { fill: #ffffff; font: 700 12px var(--font); }
.art-good { fill: var(--good); }
.art-warning { fill: var(--warning); }
.art-bad { fill: var(--bad); }
.art-warm { fill: var(--warm); }
.art-score-bg { fill: var(--warm-soft); }
.art-track { fill: none; stroke: var(--ring-track); stroke-width: 9; }
.art-fill { fill: none; stroke: var(--ring-warning); stroke-width: 9; stroke-linecap: round; }

.section-intro {
  color: var(--muted);
  max-width: 44rem;
}

/* How it works */
.steps {
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--space-4);
}

.step {
  padding: var(--space-5);
}

.step h3 {
  margin-top: var(--space-4);
}

.step p {
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
}

/* Custom two tone icons: indigo lines, warm fills. */
.art-icon {
  display: inline-grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  border-radius: var(--radius);
  background: var(--accent-soft);
}

.art-icon svg {
  width: 2.6rem;
  height: 2.6rem;
}

.ic-line { fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ic-warm { fill: var(--warm-soft); stroke: var(--warm); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ic-solid { fill: var(--warm); }
.ic-check { fill: none; stroke: var(--warm); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.ic-paper { fill: var(--surface); stroke: var(--accent); stroke-width: 2.2; stroke-linejoin: round; }

.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: var(--radius);
  background: var(--warm-soft);
  color: var(--warm);
}

.icon svg {
  width: 1.7rem;
  height: 1.7rem;
}

/* Sample result */
.sample-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: var(--space-5);
  align-items: start;
  margin-top: var(--space-5);
}

.sample-card {
  padding: var(--space-5);
}

.sample-card h3 {
  margin-top: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
}

.sample-card h4 {
  margin-top: var(--space-4);
}

.sample-card p,
.sample-card li {
  font-size: 1rem;
}

.sample-score {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-5);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--score-gradient);
}

.sample-score .ring {
  width: 7.5rem;
  height: 7.5rem;
}

.sample-score .ring-number {
  font-size: 2.6rem;
}

.sample-counts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Before and after */
.compare {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.compare-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 4px solid var(--bad);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.compare-card.after {
  border-top-color: var(--good);
}

.compare-card h3 {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: 0;
}

.compare-card h3 svg {
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
}

.compare-card pre {
  flex: 1;
  margin: var(--space-2) 0 var(--space-4);
  font-size: 0.95rem;
}

.compare-card p {
  margin: 0;
  font-size: 1rem;
  color: var(--muted);
}

.mark-bad { stroke: var(--bad); }
.mark-good { stroke: var(--good); }

/* Who this helps */
.audience {
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
  gap: var(--space-4);
}

.audience-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-1) var(--space-4);
  padding: var(--space-5);
}

.audience-item .icon {
  grid-row: span 2;
}

.audience-item h3 {
  margin: 0;
  font-size: 1.2rem;
}

.audience-item p {
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
}

.teaser {
  margin-top: var(--space-8);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.teaser h2 {
  margin: 0 0 var(--space-2);
}

.teaser p {
  margin: 0;
  color: var(--muted);
  max-width: 40rem;
}

@media (max-width: 56rem) {
  .hero {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .hero-art {
    max-width: 24rem;
    transform: rotate(1.5deg);
  }
}

/* ---------- Auth pages ---------- */

.auth-card {
  max-width: 30rem;
  margin: 0 auto;
  padding: var(--space-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.auth-card h1 {
  font-size: 2rem;
}

.auth-card .stack-form {
  margin-bottom: var(--space-4);
}

.auth-card .stack-form button[type="submit"] {
  align-self: stretch;
}

/* ---------- Small screens ---------- */

@media (max-width: 40rem) {
  .wrap {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  html {
    scroll-padding-top: 1rem;
  }

  main {
    padding-top: var(--space-6);
  }

  .score {
    padding: var(--space-5);
  }

  .hero-card,
  .auth-card,
  .teaser {
    padding: var(--space-5);
  }
}

/* ---------- Scanning indicator ---------- */

/* A page being read by a moving scan line. Decorative: the status text
   next to it says what is happening. */
.scanning {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  max-width: 40rem;
  margin: var(--space-4) 0;
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.scanning .status {
  margin: 0;
  font-size: 1.15rem;
}

.scan-visual {
  flex: none;
  width: 5rem;
  height: 5rem;
}

.scan-visual svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.sv-page { fill: var(--surface-2); stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; }
.sv-line { stroke: var(--control); stroke-width: 3; stroke-linecap: round; }
.sv-beam { fill: var(--warm); opacity: 0.9; }
.sv-glow { fill: var(--warm-soft); }

/* ---------- Empty dashboard ---------- */

.empty-state {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
  padding: var(--space-5) var(--space-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.empty-state svg {
  flex: none;
  width: 11rem;
  height: auto;
}

.empty-state div {
  flex: 1;
  min-width: 16rem;
}

.empty-state h2 {
  margin: 0 0 var(--space-2);
}

.empty-state p {
  margin: 0;
  color: var(--muted);
}

/* ---------- Motion ---------- */
/* Everything here is 300ms or less and only runs when the visitor has not
   asked for reduced motion. The scanning indicator loops while a scan runs. */

@media (prefers-reduced-motion: no-preference) {
  /* Hover lifts */
  button:not(:disabled):not([aria-disabled="true"]):hover,
  .button:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow);
  }

  button:not(:disabled):not([aria-disabled="true"]):active,
  .button:active {
    transform: translateY(0);
  }

  .step,
  .audience-item,
  .sample-card,
  .compare-card,
  .site-card,
  .plan-card {
    transition: transform var(--slow) var(--ease), box-shadow var(--slow) var(--ease), border-color var(--quick);
  }

  .step:hover,
  .audience-item:hover,
  .sample-card:hover,
  .compare-card:hover,
  .site-card:hover,
  .plan-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
  }

  .hero-art:hover {
    transform: rotate(1deg) translateY(-4px);
  }

  /* Sections fade in as they scroll into view. motion.js adds .motion to
     the page and .is-visible to each section, so without it nothing hides. */
  .motion .reveal {
    transition: opacity var(--slow) ease-out, transform var(--slow) var(--ease);
  }

  .motion .reveal:not(.is-visible) {
    opacity: 0;
    transform: translateY(14px);
  }

  /* Score rings fill from empty. The number is already in place. */
  .ring-fill {
    animation: ring-fill var(--slow) var(--ease) 120ms both;
  }

  .motion .reveal:not(.is-visible) .ring-fill {
    animation: none;
  }

  /* Issue cards open smoothly where the browser supports it. */
  .issue-card {
    interpolate-size: allow-keywords;
  }

  .issue-card::details-content {
    height: 0;
    overflow: clip;
    transition: height var(--slow) var(--ease), content-visibility var(--slow) allow-discrete;
  }

  .issue-card[open]::details-content {
    height: auto;
  }

  .card-summary::before {
    transition: transform var(--quick) var(--ease);
  }

  .issue-card[open] .card-summary::before {
    transform: rotate(180deg);
  }

  .sv-beam,
  .sv-glow {
    animation: scan-beam 1.4s ease-in-out infinite alternate;
  }
}

@keyframes ring-fill {
  from {
    stroke-dashoffset: 100;
  }
}

@keyframes scan-beam {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(44px);
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

/* ---------- Beta mode ---------- */

/* Slim notice above the header. It scrolls away; the header stays sticky. */
.beta-banner {
  background: var(--accent-soft);
  border-bottom: 1px solid var(--line);
  font-size: 0.95rem;
}

.beta-banner .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  flex-wrap: wrap;
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
}

.beta-banner p {
  margin: 0;
  font-weight: 600;
}

.beta-banner a {
  font-weight: 700;
}

.beta-banner .beta-dismiss {
  min-height: 2.25rem;
  padding: 0.25rem 0.75rem;
  font-size: 0.9rem;
  background: var(--surface);
  color: var(--text);
  border-color: var(--control);
  box-shadow: none;
}

.beta-banner .beta-dismiss:hover {
  background: var(--surface-2);
  border-color: var(--text);
}

.beta-features li {
  margin-bottom: var(--space-2);
}

/* Feedback form */

textarea {
  min-height: 7rem;
  line-height: 1.5;
  resize: vertical;
}

.choices {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.choice {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.choice input {
  width: 1.3rem;
  height: 1.3rem;
  margin: 0;
  flex: none;
  accent-color: var(--accent);
}

.choice label {
  font-weight: 400;
}

.choice-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  margin-right: var(--space-1);
  border: 1px solid var(--control);
  border-radius: var(--radius-sm);
  font-weight: 750;
}

fieldset:focus {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.thanks {
  max-width: 34rem;
  padding: var(--space-5);
}

.thanks h2 {
  margin-top: 0;
}

/* ---------- Shopify app (inside the Shopify admin) ---------- */

.shopify-embed main {
  padding-top: var(--space-5);
  padding-bottom: var(--space-6);
}

.shopify-brand {
  margin: 0 0 var(--space-5);
}

.shopify-card {
  max-width: 44rem;
  padding: var(--space-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.shopify-embed h1 {
  font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.4rem);
  overflow-wrap: anywhere;
}

.shop-domain {
  display: block;
  color: var(--accent);
}

.shopify-scan-form {
  margin: var(--space-5) 0;
}

.shopify-scan-form .field {
  max-width: 28rem;
}

.shopify-footer {
  padding: var(--space-4) 0 var(--space-6);
  border-top: 1px solid var(--line);
  font-size: 1rem;
}

.shopify-section {
  margin-top: var(--space-7);
}

.plan-summary {
  margin-bottom: var(--space-5);
}

.plan-summary h2 {
  margin-top: 0;
  font-size: 1.35rem;
}

.plan-summary .email-alerts {
  margin: 0 0 var(--space-4);
}

.plan-summary .email-alerts .hint {
  margin: var(--space-1) 0 0;
}

#plan-status:not(:empty) {
  margin: var(--space-3) 0 0;
}

.plan-summary .confirm-box {
  margin-top: var(--space-4);
}