/* Tokens read from profitpaws.com (November 10, 2026). Where the live site's
   value falls short of WCAG AA, a darker step is used and noted. */
:root {
  color-scheme: light;
  --background: hsl(0 0% 100%);
  --foreground: hsl(205 100% 21%);
  --primary: hsl(205 100% 21%);
  --primary-hover: hsl(205 100% 16%);
  --primary-foreground: hsl(0 0% 100%);
  --primary-tint: hsl(205 100% 21% / 0.1);
  --primary-tint-border: hsl(205 100% 21% / 0.2);
  --accent: hsl(173 73% 46%);
  --cta: hsl(355 78% 50%);
  --cta-hover: hsl(355 78% 44%);
  --cta-foreground: hsl(0 0% 100%);
  --secondary: hsl(210 25% 97%);
  /* The site uses 45% lightness, which is under 4.5:1 on the tinted cards. */
  --muted-foreground: hsl(205 16% 40%);
  --border: hsl(210 20% 90%);
  /* The site's input border is too faint for a form, so fields use a 3:1 step. */
  --input: hsl(205 15% 55%);
  --destructive: hsl(355 78% 42%);
  --dots: hsl(210 20% 86%);
  --shadow-card: 0 4px 20px hsl(205 100% 21% / 0.08);
  --radius: 12px;
  --radius-small: 10px;
  --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;
  /* The same stacks as profitpaws.com, which also loads no web fonts. */
  --font-headline: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

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

[hidden] { display: none !important; }

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

/* Short pages keep the footer at the bottom of the screen. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  overflow-wrap: break-word;
}

main { flex: 1; }

h1, h2, h3, p, ul, dl, dd { margin: 0; }

h1, h2, h3, legend, .header-cta, .cta {
  font-family: var(--font-headline);
}

a { color: var(--primary); }

/* Header: logo left, apply link right, as on profitpaws.com. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid var(--border);
  background: var(--background);
}

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  max-width: 68rem;
  margin-inline: auto;
  padding: var(--space-2) var(--space-4);
}

.logo {
  display: block;
  width: auto;
  height: 2.5rem;
}

.header-cta, .cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  border-radius: var(--radius-small);
  background: var(--cta);
  color: var(--cta-foreground);
  font-weight: 650;
  text-decoration: none;
}

.header-cta {
  padding-inline: var(--space-4);
  font-size: 0.9375rem;
}

.preview-banner {
  background: var(--primary);
  color: var(--primary-foreground);
  font-size: 0.875rem;
  font-weight: 600;
  padding: var(--space-2) var(--space-4);
  text-align: center;
}

/* Hero: the dotted band from the top of profitpaws.com. */
.hero {
  background-color: var(--background);
  background-image: radial-gradient(circle, var(--dots) 1px, transparent 1px);
  background-size: 24px 24px;
  padding: var(--space-7) var(--space-4);
  text-align: center;
}

.hero-inner {
  display: grid;
  justify-items: center;
  gap: var(--space-4);
  max-width: 48rem;
  margin-inline: auto;
}

.eyebrow {
  border: 1px solid var(--primary-tint-border);
  border-radius: 999px;
  background: var(--primary-tint);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: var(--space-2) var(--space-4);
  text-transform: uppercase;
}

.hero h1 {
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.hero h2 {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
}

.lede {
  max-width: 40rem;
  color: var(--muted-foreground);
  font-size: 1.1875rem;
}

.cta {
  margin-top: var(--space-2);
  font-size: 1.0625rem;
  padding-inline: var(--space-6);
}

/* A hero further down the page sits as a tinted band inside the content. */
.content .hero {
  border-radius: var(--radius);
  background-color: var(--secondary);
  padding: var(--space-6) var(--space-4);
}

.content {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-7);
  max-width: 46rem;
  margin-inline: auto;
  padding: var(--space-6) var(--space-4) var(--space-8);
}

.block h2, .panel h2 {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.block > * + * { margin-top: var(--space-3); }

.block ul {
  display: grid;
  gap: var(--space-2);
  padding-left: var(--space-5);
}

.block li::marker { color: var(--accent); }

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--space-3);
}

.facts div {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--secondary);
  padding: var(--space-3) var(--space-4);
}

.facts dt {
  color: var(--muted-foreground);
  font-size: 0.875rem;
  font-weight: 600;
}

.facts dd {
  font-family: var(--font-headline);
  font-size: 1.0625rem;
  font-weight: 650;
}

.faq-item {
  border-top: 1px solid var(--border);
  padding-top: var(--space-4);
}

.faq-item + .faq-item { margin-top: var(--space-4); }

.faq-item h3 {
  font-size: 1.0625rem;
  font-weight: 650;
}

.faq-item p { margin-top: var(--space-2); }

/* Application form. */
.panel {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--background);
  box-shadow: var(--shadow-card);
  padding: var(--space-5) var(--space-4);
}

.trap {
  position: absolute;
  left: -100vw;
}

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

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

.error, .form-error {
  color: var(--destructive);
  font-size: 0.875rem;
  font-weight: 600;
}

.form-error {
  display: grid;
  justify-items: start;
  gap: var(--space-3);
  border: 1px solid var(--destructive);
  border-radius: var(--radius-small);
  padding: var(--space-3);
}

#thanks {
  margin-top: var(--space-5);
  outline: none;
}

#thanks h3 {
  font-size: 1.1875rem;
  font-weight: 650;
}

#thanks p { margin-top: var(--space-2); }

form {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-5);
}

.field {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
  margin: 0;
  border: 0;
  padding: 0;
}

label, legend { font-weight: 600; }

legend {
  padding: 0;
  margin-bottom: var(--space-2);
  font-family: var(--font-body);
}

.optional {
  color: var(--muted-foreground);
  font-weight: 400;
}

input, textarea {
  width: 100%;
  min-height: 2.75rem;
  border: 1px solid var(--input);
  border-radius: var(--radius-small);
  background: var(--background);
  color: var(--foreground);
  font: inherit;
  padding: var(--space-2) var(--space-3);
}

textarea { resize: vertical; }

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

[aria-invalid="true"] { border-color: var(--destructive); }

/* Each choice is a full-width row, so the whole row is the tap target. */
.choice {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 2.75rem;
  border: 1px solid var(--input);
  border-radius: var(--radius-small);
  font-weight: 400;
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
}

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

.choice:has(input:checked) {
  border-color: var(--primary);
  background: var(--primary-tint);
}

.choice:has([aria-invalid="true"]) { border-color: var(--destructive); }

:is(a, input, textarea, button):focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

button {
  width: 100%;
  min-height: 3rem;
  border: 1px solid var(--primary);
  border-radius: var(--radius-small);
  background: var(--primary);
  color: var(--primary-foreground);
  font: inherit;
  font-family: var(--font-headline);
  font-weight: 650;
  cursor: pointer;
}

button.secondary {
  width: auto;
  min-height: 2.75rem;
  background: var(--background);
  color: var(--primary);
  padding-inline: var(--space-4);
}

button[aria-disabled="true"], button:disabled {
  border-color: var(--input);
  background: var(--secondary);
  color: var(--muted-foreground);
  cursor: not-allowed;
}

.site-footer {
  background: var(--primary);
  color: var(--primary-foreground);
  font-size: 0.875rem;
  padding: var(--space-6) var(--space-4);
  text-align: center;
}

.site-footer a { color: inherit; }

/* Privacy notice and other plain pages. */
.prose {
  max-width: 38rem;
  margin-inline: auto;
  padding: var(--space-7) var(--space-4) var(--space-8);
}

.prose h1 {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.prose p { margin-top: var(--space-4); }

@media (min-width: 48rem) {
  .bar { padding-inline: var(--space-6); }

  .logo { height: 3rem; }

  .hero { padding: var(--space-8) var(--space-6); }

  .hero h1 { font-size: 3.5rem; }

  .content { padding-inline: var(--space-6); }

  .panel { padding: var(--space-6); }
}

@media (hover: hover) {
  .header-cta:hover, .cta:hover { background: var(--cta-hover); }

  button:not([aria-disabled="true"], :disabled, .secondary):hover { background: var(--primary-hover); }

  button.secondary:hover { background: var(--primary-tint); }

  .choice:hover { border-color: var(--primary); }
}