/* elioTax LLC: styles for the one-page site.
   Colors come from CONTENT.md (all text pairings pass WCAG AA contrast). */

:root {
  --navy: #1E255E;       /* brand navy: headings, button, focus outline */
  --navy-hover: #2E3884; /* button hover */
  --green: #72BF44;      /* brand green: decoration only, never text */
  --text: #2B2F42;       /* body text */
  --muted: #5B6075;      /* small notes, footer */
  --tint: #F3F5FA;       /* light background panels */
  --white: #FFFFFF;
  --content: 40rem;      /* comfortable reading width */
  color-scheme: light;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
}

img {
  max-width: 100%;
  height: auto;
}

/* Visible keyboard focus everywhere */
:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 3px;
}

h1,
h2 {
  color: var(--navy);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

h2 {
  font-size: 1.375rem;
  margin: 0 0 1rem;
}

p {
  margin: 0 0 1rem;
}

/* Thin green accent line across the top */
.accent-bar {
  height: 6px;
  background: var(--green);
}

/* ---------- Top of the page ---------- */

.hero {
  max-width: var(--content);
  margin: 0 auto;
  padding: 2rem 1.25rem 2.5rem;
  text-align: center;
}

.logo {
  display: block;
  width: 10.5rem;
  margin: 0 auto 1.75rem;
}

.hero h1 {
  font-size: clamp(1.75rem, 6.5vw, 2.5rem);
  margin: 0 0 0.75rem;
}

.intro {
  font-size: 1.125rem;
  max-width: 32rem;
  margin: 0 auto 1.75rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  max-width: 22rem;
  min-height: 3.5rem;
  padding: 0.9rem 1.5rem;
  border-radius: 0.75rem;
  background: var(--navy);
  color: var(--white);
  font-size: 1.125rem;
  font-weight: 650;
  line-height: 1.3;
  text-decoration: none;
}

.btn:hover {
  background: var(--navy-hover);
}

.btn svg {
  flex: none;
  width: 1.2em;
  height: 1.2em;
}

.btn-note {
  color: var(--muted);
  font-size: 0.9375rem;
  margin: 0.85rem 0 0;
}

/* ---------- Content sections ---------- */

.section {
  padding: 2.25rem 1.25rem;
}

.section.tinted {
  background: var(--tint);
}

.section-inner {
  max-width: var(--content);
  margin: 0 auto;
}

.section-inner > :last-child {
  margin-bottom: 0;
}

/* How it works: numbered navy circles */
.steps {
  list-style: none;
  counter-reset: step;
  margin: 0;
  padding: 0;
}

.steps li {
  counter-increment: step;
  position: relative;
  padding-left: 2.75rem;
  margin-bottom: 1rem;
}

.steps li:last-child {
  margin-bottom: 0;
}

.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0.05rem;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.9rem;
  text-align: center;
}

/* What to send: green check marks (decorative) */
.checklist,
.points {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
}

.checklist li,
.points li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: 0.6rem;
}

.checklist li::before {
  content: "";
  position: absolute;
  left: 0.1rem;
  top: 0.3rem;
  width: 1.15rem;
  height: 1.15rem;
  /* check mark drawn in brand green (#72BF44) */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2372BF44' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Protection and privacy points: small navy markers */
.points li::before {
  content: "";
  position: absolute;
  left: 0.35rem;
  top: 0.62rem;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 2px;
  background: var(--navy);
}

.points:last-child {
  margin-bottom: 0;
}

.help-item {
  margin-bottom: 1rem;
}

/* Second Upload button, after the checklist */
.cta-repeat {
  text-align: center;
  margin-top: 1.75rem;
}

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid #E1E4EE;
  padding: 1.5rem 1.25rem 2rem;
  color: var(--muted);
  font-size: 0.9375rem;
  text-align: center;
}

.site-footer p {
  margin: 0;
}

/* ---------- Larger screens ---------- */

@media (min-width: 48rem) {
  .hero {
    padding-top: 3.5rem;
    padding-bottom: 3rem;
  }

  .logo {
    width: 13rem;
  }

  .section {
    padding: 3rem 1.25rem;
  }
}

/* ---------- Upload shortcut page ---------- */

.redirect {
  max-width: var(--content);
  margin: 0 auto;
  padding: 3rem 1.25rem;
  text-align: center;
}