:root {
  /* Brand colors, unchanged from the rest of the project. */
  --teal: #1ca78b;
  --charcoal: #3c3c3c;
  --purple: #6a11cb;
  --red: #f2182a;
  --light: #e8e8e8;
  --white: #ffffff;
  --muted: #6b7280;
  --font: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;

  /*
    Accessible variants, added for WCAG 2.2 AA contrast.
    Base --teal is roughly 3:1 against white, which only passes
    for large text or graphical UI elements, not body copy or
    small links. --red is roughly 4.2:1 against white, borderline
    for small text. These variants exist so brand color choices
    stay consistent while text always clears 4.5:1 (or 3:1 for
    large/bold text, per WCAG 1.4.3).
  */
  --teal-text: #0e6d5a;       /* teal for links/text on light backgrounds, ~6.3:1 on white */
  --teal-on-dark: #5fd9bf;    /* teal for links/text on dark backgrounds, ~6.4:1 on charcoal */
  --red-text: #c1121f;        /* red for text/backgrounds that carry white text, ~6.2:1 */
  --focus-ring: #0e6d5a;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  color: var(--charcoal);
  background: var(--white);
  line-height: 1.6;
  font-size: 16px;
  overflow-x: hidden;
}
.container { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
a { color: var(--teal-text); }
a:hover { text-decoration-thickness: 2px; }

/* ---------- Accessibility utilities ---------- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--teal-text);
  color: #fff;
  padding: 12px 20px;
  z-index: 100;
  border-radius: 0 0 8px 0;
  font-weight: 700;
}
.skip-link:focus { left: 0; }

/* Visible, high-contrast focus state for every interactive element,
   rather than relying on (or removing) the browser default. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ---------- Slanted parallelogram accents ----------
   Recurring shape used across the page: a small skewed
   rectangle, mostly in the teal-to-purple gradient. All
   instances here are purely decorative and marked
   aria-hidden in the markup. */
.tab-shape {
  display: inline-block;
  width: 10px;
  height: 18px;
  transform: skewX(-16deg);
  background: linear-gradient(180deg, var(--teal), var(--purple));
  border-radius: 2px;
}

.eyebrow-tab {
  display: inline-block;
  width: 8px;
  height: 12px;
  margin-right: 8px;
  transform: skewX(-16deg);
  background: var(--white);
  opacity: 0.9;
  border-radius: 2px;
  vertical-align: middle;
}

.tagline-tab {
  display: inline-block;
  width: 9px;
  height: 20px;
  margin-right: 10px;
  transform: skewX(-16deg) translateY(2px);
  background: linear-gradient(180deg, var(--teal), var(--purple));
  border-radius: 2px;
  vertical-align: middle;
}

.card-tab {
  display: block;
  width: 28px;
  height: 14px;
  margin-bottom: 16px;
  transform: skewX(-18deg);
  background: linear-gradient(100deg, var(--teal), var(--purple));
  border-radius: 3px;
}

.parallelogram-cluster {
  position: relative;
  width: 200px;
  height: 140px;
}
.parallelogram-cluster .p {
  position: absolute;
  transform: skewX(-18deg);
  border-radius: 4px;
}
.parallelogram-cluster .p1 { width: 90px; height: 56px; background: rgba(255,255,255,0.95); top: 10px; left: 20px; }
.parallelogram-cluster .p2 { width: 60px; height: 38px; background: rgba(255,255,255,0.55); top: 76px; left: 6px; }
.parallelogram-cluster .p3 { width: 48px; height: 30px; background: rgba(255,255,255,0.35); top: 4px; left: 128px; }
.parallelogram-cluster .p4 { width: 70px; height: 44px; background: rgba(255,255,255,0.2); top: 60px; left: 108px; }
.parallelogram-cluster .p5 { width: 34px; height: 20px; background: rgba(255,255,255,0.75); top: 100px; left: 150px; }

.free-tab {
  display: inline-block;
  width: 16px;
  height: 40px;
  margin-left: 14px;
  transform: skewX(-16deg);
  background: linear-gradient(180deg, var(--teal), var(--purple));
  border-radius: 4px;
  vertical-align: middle;
}
.big-word-row {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.founder-portrait-wrap {
  position: relative;
}
.founder-portrait-wrap::after {
  content: '';
  position: absolute;
  bottom: -16px;
  right: -16px;
  width: 84px;
  height: 56px;
  background: linear-gradient(135deg, var(--teal), var(--purple));
  transform: skewX(-18deg);
  z-index: -1;
  border-radius: 6px;
  opacity: 0.9;
}

/* ---------- Hero / banner ----------
   Slanted bottom edge, taking the diagonal cut from the
   reference profile-page banner instead of the previous
   curved wave-divider. The cut is a fixed 48px band at the
   very bottom of the section (not a percentage), so it can
   never encroach on the text above it regardless of how
   tall the hero gets on a given screen. */
.hero {
  background: linear-gradient(160deg, #3c3c3c 0%, 6a11cb 60%, #1ca78b 130%);
  color: #fff;
  padding: 88px 24px 96px;
  text-align: center;
  position: relative;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 48px), 0 100%);
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--light);
  background: rgba(255,255,255,0.14);
  padding: 6px 16px;
  border-radius: 999px;
  margin-bottom: 28px;
}
.hero h1 {
  font-size: clamp(2.2rem, 5.5vw, 4rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  max-width: 760px;
  margin: 0 auto 20px;
}
.hero p.lead {
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  color: rgba(255,255,255,0.92);
  max-width: 560px;
  margin: 0 auto 40px;
}
.signup-form {
  display: flex;
  gap: 10px;
  max-width: 460px;
  margin: 0 auto;
  flex-wrap: wrap;
  justify-content: center;
}
.signup-form input[type="email"] {
  flex: 1 1 260px;
  padding: 15px 20px;
  border-radius: 999px;
  border: 2px solid transparent;
  font-size: 1rem;
  font-family: var(--font);
  min-height: 48px;
}
.signup-form input[type="email"]:focus-visible {
  outline: 3px solid var(--white);
  outline-offset: 2px;
}
.signup-form button {
  padding: 15px 30px;
  border-radius: 999px;
  border: none;
  background: var(--white);
  color: var(--charcoal);
  font-weight: 700;
  font-size: 1rem;
  font-family: var(--font);
  cursor: pointer;
  min-height: 48px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.signup-form button:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.25); }
.signup-form input[type="email"]:disabled,
.signup-form button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Honeypot field: invisible to sighted users and removed from the
   tab order and accessibility tree, but still present in the DOM
   for simple bots that blindly fill in every input. Real users
   never see or reach this. */
.hp-field {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  left: -9999px;
}

.compliance {
  max-width: 460px;
  margin: 14px auto 0;
  font-size: 0.8rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.8);
}
.compliance a { color: var(--white); text-decoration: underline; }
.final-cta .compliance { color: rgba(255,255,255,0.8); }

.form-message {
  max-width: 460px;
  margin: 14px auto 0;
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 0.9rem;
  line-height: 1.5;
}
.form-message:empty { display: none; margin: 0; padding: 0; }
.form-message.success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.form-message.error { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }

.trust-line {
  margin-top: 18px;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.85);
}

/* ---------- Sections ---------- */
section { padding: 96px 0; }
.alt-bg { background: #fafafa; }
.section-title {
  font-size: clamp(1.8rem, 3.5vw, 2.4rem);
  font-weight: 700;
  text-align: center;
  margin-bottom: 16px;
}
.section-lead {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 56px;
  color: var(--muted);
  font-size: 1.1rem;
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.tagline {
  display: flex;
  align-items: center;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--teal-text);
  margin: 0 0 16px;
}
.about-grid p { color: var(--muted); font-size: 1.05rem; margin-bottom: 16px; }
.about-visual {
  background: linear-gradient(135deg, var(--charcoal), var(--purple), var(--teal));
  border-radius: 24px;
  padding: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.content-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.content-card {
  border: 1px solid #e5e7eb;
  border-radius: 20px;
  padding: 36px 28px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.content-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(28,167,139,0.12);
  border-color: var(--teal);
}
.content-card h3 { font-size: 1.25rem; margin-bottom: 10px; }
.content-card p { color: var(--muted); font-size: 0.95rem; }
.content-card .examples {
  margin-top: 14px;
  font-size: 0.85rem;
  color: var(--teal-text);
  font-weight: 700;
}
.coming-soon-strip {
  margin-top: 40px;
  text-align: center;
  color: var(--muted);
  font-size: 0.95rem;
}
.coming-soon-strip .badge {
  display: inline-block;
  background: var(--light);
  color: var(--charcoal);
  font-weight: 700;
  font-size: 0.78rem;
  padding: 4px 12px;
  border-radius: 999px;
  margin: 0 4px;
}

.free-band {
  background: var(--white);
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  text-align: center;
}
.free-band .big-word {
  font-size: clamp(3rem, 8vw, 5.5rem);
  font-weight: 700;
  color: var(--teal-text);
  line-height: 1;
}
.free-band p { max-width: 560px; margin: 0 auto; color: var(--charcoal); font-size: 1.05rem; }

.founder {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 56px;
  align-items: start;
}
.founder-portrait {
  aspect-ratio: 1;
  border-radius: 24px;
  background: linear-gradient(135deg, var(--purple), var(--teal));
}
.founder blockquote {
  font-size: 1.15rem;
  color: var(--charcoal);
  margin-bottom: 20px;
}
.founder p { color: var(--muted); margin-bottom: 16px; }
.founder .signoff { font-weight: 700; color: var(--charcoal); margin-top: 24px; }

.final-cta {
  background: linear-gradient(160deg, var(--charcoal) 0%, var(--purple) 60%, var(--teal) 130%);
  color: var(--white);
  text-align: center;
}
.final-cta h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 16px; }
.final-cta p { color: rgba(255,255,255,0.92); margin-bottom: 36px; }

/* ---------- Footer ----------
   Flat grey, back in line with the rest of the site (same
   off-white used elsewhere) rather than the dark gradient/
   diagonal-cut version. No more bookend match with the hero,
   but that's the tradeoff for keeping this simple and flat. */
.site-footer {
  background: var(--light);
  color: var(--charcoal);
  padding: 64px 0 40px;
  text-align: center;
}
.footer-tagline {
  font-size: 16px;
  font-weight: 700;
  color: var(--charcoal);
  margin-bottom: 32px;
}
.footer-social { margin-bottom: 28px; }
.social-icon {
  display: inline-flex;
  color: var(--teal-text);
  transition: color 0.2s ease, transform 0.2s ease;
}
.social-icon:hover { color: var(--charcoal); transform: translateY(-2px); }

.footer-links {
  padding: 22px 0;
  margin-bottom: 24px;
  border-top: 1px solid rgba(60,60,60,0.16);
  border-bottom: 1px solid rgba(60,60,60,0.16);
}
.footer-links a {
  color: var(--charcoal);
  margin: 0 16px;
  font-size: 14px;
}
.footer-links a:hover { color: var(--teal-text); }

.footer-contact { margin-bottom: 20px; font-size: 14px; color: var(--charcoal); }
.footer-contact a { color: var(--teal-text); }

.footer-address {
  font-style: normal;
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
  margin-bottom: 20px;
}

.footer-copyright {
  font-size: 12px;
  color: var(--muted);
  padding-top: 16px;
}

@media (max-width: 820px) {
  .about-grid, .founder { grid-template-columns: 1fr; }
  .founder-portrait { width: 120px; height: 120px; }
  .founder-portrait-wrap { width: 120px; }
  .content-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .hero { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 28px), 0 100%); }
}