/* ==========================================================================
   Ticklet — replica stylesheet
   ========================================================================== */

@font-face {
  font-family: "Awesome Newbie";
  src: url("../media/Awesome-Newbie.otf") format("opentype");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-primary: #435372;
  --color-primary-a80: rgba(67, 83, 114, 0.8);
  --color-secondary: #B1DCCB;
  --color-white: #FFFFFF;
  --color-peach: #F7AA9E;
  --header-border: #E9F4E880;
  --container-max: 1410px;
  --font-heading: "Awesome Newbie", sans-serif;
  --font-body: "Rubik", sans-serif;
  --font-copyright: "Roboto", sans-serif;

  /* Tints used across the About/Vendor/FAQ/Contact pages, kept as tokens
     so they read as one deliberate palette rather than ad-hoc greys. */
  --tint-mint: #F4FAF7;
  --tint-peach: #FDF0EC;
  --tint-mint-card: #EEF8F3;
  --border-neutral: #D9E2E8;
  --border-neutral-soft: #E7EEF1;
  --color-error: #C0392B;
  --color-error-border: #D9534F;

  /* Used for movement (scale/translate/rotate) — gives hovers and reveals
     a weighted, decelerating feel instead of linear ease. Left off simple
     color/opacity fades, which don't benefit from it. */
  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-primary);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { text-decoration: none; color: inherit; }

ul { margin: 0; padding: 0; }

h1, h2, p { margin: 0; }

h1, h2 { text-wrap: balance; }

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  width: 100%;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Focus visibility (keyboard nav) */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Skip link */
.skip-link {
  position: absolute;
  top: -60px;
  left: 8px;
  z-index: 1000;
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  padding: 12px 20px;
  border-radius: 0 0 8px 8px;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 0;
}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  border-bottom: 1px solid var(--header-border);
  position: sticky;
  top: 0;
  z-index: 90;
  background: #fff;
  transition: box-shadow 0.25s ease;
}

.site-header.is-scrolled {
  box-shadow: 0 4px 24px rgba(67, 83, 114, 0.12);
}

.header-row {
  max-width: var(--container-max);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 8px;
  min-height: 117px;
  position: relative;
}

.site-logo {
  transition: opacity 0.2s ease;
}

.site-logo:hover { opacity: 0.75; }

.site-logo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.site-logo img {
  height: 90px;
  width: auto;
}

.header-nav-group {
  display: flex;
  align-items: center;
  gap: 15px;
}

.nav-menu {
  display: flex;
  align-items: center;
  list-style: none;
  gap: 30px;
}

.nav-menu a {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 400;
  letter-spacing: 0.4px;
  color: var(--color-primary);
  padding: 10px 0;
  position: relative;
  display: inline-block;
}

.nav-menu a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 4px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease-premium);
}

.nav-menu a:hover::after { transform: scaleX(1); }

/* Active page: the little confetti burst that tops the ticket mascot
   reappears above the first letter instead of a plain underline, paired
   with a deeper ink color so the state still reads unambiguously without
   the icon alone carrying all the meaning. */
.nav-menu a.is-active {
  color: #2c394f;
}

.nav-menu a.is-active::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -3px;
  width: 20px;
  height: 21px;
  background-image: url("../media/Group-7.png");
  background-size: contain;
  background-repeat: no-repeat;
  transform: rotate(-60deg);
  transform-origin: bottom center;
  pointer-events: none;
}

.contact-pill {
  display: block;
  flex-shrink: 0;
  transition: transform 0.25s var(--ease-premium);
}

.contact-pill:hover { transform: rotate(-4deg) scale(1.04); }
.contact-pill:active { transform: rotate(-4deg) scale(0.98); }

.contact-pill img {
  width: 206px;
  height: auto;
  transform: rotate(-8deg);
}

.contact-pill:hover img,
.contact-pill:active img { transform: none; }

.store-badge {
  display: inline-block;
  cursor: default;
  transition: opacity 0.2s ease;
}

.store-badge:hover { opacity: 0.8; }

.menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: var(--color-secondary);
  padding: 0;
  transition: background-color 0.2s ease, transform 0.15s var(--ease-premium);
}

.menu-toggle:hover { background: rgba(177, 220, 203, 0.25); }
.menu-toggle:active { transform: scale(0.92); }

.menu-toggle svg {
  width: 27px;
  height: 27px;
  fill: currentColor;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(0deg);
  opacity: 1;
  transition: opacity 200ms var(--ease-premium), transform 200ms var(--ease-premium);
}

.menu-toggle .icon-close {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(-45deg);
}

.menu-toggle.is-active .icon-open {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(45deg);
}

.menu-toggle.is-active .icon-close {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(0deg);
}

.nav-dropdown {
  display: flex;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border-bottom: 2px solid var(--color-primary);
  z-index: 99;
  flex-direction: column;
  transform-origin: top;
  opacity: 0;
  transform: scaleY(0.96) translateY(-8px);
  visibility: hidden;
  pointer-events: none;
  transition: opacity 200ms var(--ease-premium), transform 200ms var(--ease-premium), visibility 0s linear 200ms;
}

.nav-dropdown.is-open {
  opacity: 1;
  transform: scaleY(1) translateY(0);
  visibility: visible;
  pointer-events: auto;
  transition: opacity 200ms var(--ease-premium), transform 200ms var(--ease-premium), visibility 0s linear 0s;
}

.nav-dropdown a {
  display: block;
  font-family: var(--font-heading);
  font-size: 20px;
  color: var(--color-primary);
  padding: 26px 37px;
  border-top: 1px solid var(--header-border);
  transition: background-color 0.2s ease, transform 0.2s var(--ease-premium);
}

.nav-dropdown a:hover,
.nav-dropdown a.is-active {
  background: rgba(177, 220, 203, 0.35);
  transform: translateX(8px);
}

.nav-dropdown-contact {
  color: var(--color-secondary) !important;
  font-weight: 700;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 14px 34px;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.2s var(--ease-premium), box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.btn-pill:hover { transform: translateY(-2px); }
.btn-pill:active { transform: translateY(0) scale(0.98); }

.btn-pill-primary {
  background: var(--color-primary);
  color: #fff;
  box-shadow: 0 10px 24px -8px rgba(67, 83, 114, 0.55);
}

.btn-pill-primary:hover { background: #33415a; }

.btn-pill-light {
  background: #fff;
  color: var(--color-primary);
  margin-top: 30px;
  box-shadow: 0 10px 24px -8px rgba(120, 55, 40, 0.35);
}

.btn-pill-light:hover { background: var(--color-secondary); }

.btn-pill-outline {
  background: transparent;
  border-color: currentColor;
  color: var(--color-primary);
}

.btn-pill-outline:hover { background: rgba(67, 83, 114, 0.08); }

.btn-pill:disabled {
  cursor: not-allowed;
  opacity: 0.6;
  transform: none;
}

/* ==========================================================================
   Page header (About / Become a Vendor intro banners)
   ========================================================================== */

.page-header {
  background-color: var(--color-secondary);
  background-image: url("../media/Vector.jpg");
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: top left;
  padding: 160px 8px 70px;
  text-align: left;
}

/* Left-aligned to the same container edge as every other section on the
   site (and Home's own hero, which is a left/right split, not centered) —
   pairs naturally with the notch's own top-left diagonal instead of
   floating dead-center over it. */
.page-header-inner {
  max-width: var(--container-max);
  margin-inline: auto;
}

.page-header-eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-primary);
  opacity: 0.7;
  margin-bottom: 10px;
}

.page-header h1 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 65px;
  line-height: 1.1;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-primary);
  max-width: 700px;
  margin: 0;
}

.page-header p {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--color-primary);
  max-width: 520px;
  margin: 18px 0 0;
}

.page-header.on-peach {
  /* No background-color here: Subtract.png's diagonal notch is real alpha
     transparency (not white pixels), meant to reveal the page behind it.
     A same-color fallback would paint through that transparency and erase
     the diagonal — see .peach-region below for the full explanation. The
     image is opaque peach for the rest of its height, so stretching it to
     100% 100% gives full, gapless coverage without needing a fallback. */
  background-image: url("../media/Subtract.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: top left;
  padding-top: 130px;
}

.page-header.on-peach h1,
.page-header.on-peach p,
.page-header.on-peach .page-header-eyebrow {
  color: #fff;
  opacity: 1;
}

@media (max-width: 767px) {
  .page-header { padding: 70px 16px 50px; }
  .page-header h1 { font-size: 32px; letter-spacing: 1px; }
  .page-header p { font-size: 15px; }
}

/* ==========================================================================
   About page — feature grid
   ========================================================================== */

.about-section {
  padding: 90px 8px;
}

.about-section-tight {
  padding-top: 0;
}

.about-section-heading {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 50px;
}

.about-section-heading .eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #6ea88f;
  margin-bottom: 10px;
}

.about-section-heading h2 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 44px;
  line-height: 1.15;
  color: var(--color-primary);
}

.about-section-heading p {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-primary-a80);
  margin-top: 14px;
}

.feature-grid {
  max-width: var(--container-max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

/* Cascading entrance instead of the whole grid snapping in at once. */
.feature-grid .feature-card:nth-child(1) { transition-delay: 0ms; }
.feature-grid .feature-card:nth-child(2) { transition-delay: 90ms; }
.feature-grid .feature-card:nth-child(3) { transition-delay: 180ms; }
.feature-grid .feature-card:nth-child(4) { transition-delay: 270ms; }

.feature-card {
  background: var(--tint-mint);
  border-radius: 20px;
  padding: 32px 24px;
  text-align: center;
  transition: background-color 0.25s ease;
}

.feature-card:hover {
  background: var(--color-secondary);
}

.feature-card img {
  width: 48px;
  height: 48px;
  margin: 0 auto 18px;
  transition: transform 0.25s var(--ease-premium);
}

.feature-card:hover img {
  transform: scale(1.12) rotate(-4deg);
}

.feature-card h3 {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 20px;
  color: var(--color-primary);
  margin-bottom: 8px;
}

.feature-card p {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-primary-a80);
}

@media (max-width: 1024px) {
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  .about-section { padding: 60px 16px; }
  .about-section-heading h2 { font-size: 30px; }
  .feature-grid { grid-template-columns: 1fr; gap: 16px; }
}

/* ==========================================================================
   About page — benefit columns
   ========================================================================== */

.benefit-columns {
  max-width: var(--container-max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

.benefit-card {
  border-radius: 24px;
  padding: 40px;
}

.benefit-card.for-vendors {
  background: var(--tint-peach);
  border: 2px solid var(--color-peach);
}

.benefit-card.for-parents {
  background: var(--tint-mint-card);
  border: 2px solid var(--color-secondary);
}

.benefit-card h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 28px;
  color: var(--color-primary);
  margin-bottom: 6px;
}

.benefit-card .benefit-sub {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-primary-a80);
  margin-bottom: 24px;
}

.benefit-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.benefit-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-primary);
}

.benefit-list .check {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

.for-vendors .benefit-list .check { background: var(--color-peach); }
.for-parents .benefit-list .check { background: var(--color-secondary); }

.benefit-card-cta { margin-top: 28px; }

.benefit-list .check svg { width: 13px; height: 13px; fill: #fff; }

@media (max-width: 767px) {
  .benefit-columns { grid-template-columns: 1fr; gap: 20px; }
  .benefit-card { padding: 28px; }
}

/* ==========================================================================
   About page — process steps as a torn ticket strip
   (Ticklet's own mascot is a ticket stub with a dashed tear line — this
   section is the one place that motif gets used at full expression: three
   stubs, perforated where you'd actually tear them apart.)
   ========================================================================== */

.ticket-strip {
  max-width: 1000px;
  margin-inline: auto;
  background: var(--tint-mint);
  border-radius: 24px;
  box-shadow: 0 24px 60px -32px rgba(67, 83, 114, 0.35);
  display: flex;
}

.ticket-segment {
  flex: 1;
  padding: 48px 32px;
  text-align: center;
}

.ticket-stub-label {
  display: block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--color-primary);
  opacity: 0.55;
  margin-bottom: 14px;
  font-variant-numeric: tabular-nums;
}

.ticket-segment h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 10px;
}

.ticket-segment p {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-primary-a80);
  max-width: 240px;
  margin-inline: auto;
}

.ticket-perforation {
  width: 0;
  flex-shrink: 0;
  border-left: 2px dashed rgba(67, 83, 114, 0.28);
  position: relative;
}

.ticket-perforation::before,
.ticket-perforation::after {
  content: "";
  position: absolute;
  left: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
}

.ticket-perforation::before { top: 0; }
.ticket-perforation::after { top: 100%; }

@media (max-width: 767px) {
  .ticket-strip { flex-direction: column; }
  .ticket-segment { padding: 32px 24px; }
  .ticket-perforation {
    width: auto;
    height: 0;
    border-left: none;
    border-top: 2px dashed rgba(67, 83, 114, 0.28);
  }
  .ticket-perforation::before,
  .ticket-perforation::after {
    top: 0;
  }
  .ticket-perforation::before { left: 0; }
  .ticket-perforation::after { left: 100%; }
}

/* ==========================================================================
   About / Home shared — closing CTA band
   ========================================================================== */

.cta-band {
  /* Light, not navy: this band sits directly above the footer, which is
     also solid navy. Two identical full-bleed navy blocks back to back
     read as one heavy mass and cancel out the footer's diagonal-cut top
     edge (its transparent notch just reveals more of the same navy).
     --tint-mint is the site's standard soft section tint (used on the
     FAQ page and form success states) — it keeps this band visually
     distinct from the plain-white sections above it while giving the
     footer's diagonal something to actually cut against, matching the
     light-section-into-navy-footer pattern the homepage already uses. */
  background: var(--tint-mint);
  padding: 70px 8px;
  text-align: center;
}

.cta-band h2 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 40px;
  color: var(--color-primary);
  margin-bottom: 14px;
}

.cta-band p {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-primary-a80);
  max-width: 480px;
  margin: 0 auto 30px;
}

.cta-band-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

@media (max-width: 767px) {
  .cta-band h2 { font-size: 28px; }
}

/* ==========================================================================
   Section heading styles
   ========================================================================== */

.h1-loud {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 65px;
  line-height: 84px;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: var(--color-primary);
}

.h1-loud.accent { color: var(--color-secondary); }
.h1-loud.on-dark { color: #fff; }

.h1-quiet {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 90px;
  line-height: 90px;
  letter-spacing: 0.4px;
  color: var(--color-primary);
}

.h1-quiet.on-dark { color: #fff; }

.body-copy {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1;
  color: var(--color-primary);
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  padding: 40px 8px;
}

.hero .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 0;
}

.hero-badge {
  width: 273px;
  max-width: 100%;
  margin-bottom: 10px;
}

.hero-copy p.body-copy {
  max-width: 50%;
  margin: 10px 0;
  line-height: 1.5;
}

.hero-stores {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 10px;
  padding: 10px 0;
}

.hero-stores img {
  display: block;
  width: 171px;
  height: auto;
}

.hero-visual { display: flex; justify-content: center; align-items: center; }
.hero-visual img { width: 100%; max-width: 800px; height: auto; }

/* ==========================================================================
   What You'll Find (mint region incl. stats)
   ========================================================================== */

.mint-region {
  background-color: var(--color-secondary);
  background-image: url("../media/Vector.jpg");
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: top left;
  padding-top: 200px;
}

.find-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 20px;
  padding: 10px 0;
}

.find-image img { width: 100%; max-width: 720px; height: auto; margin-inline: auto; }

/* accordion — shared base */
.accordion { width: 100%; }
.accordion-item { }
.accordion-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  outline: none;
  transition: background-color 0.2s ease;
}
.accordion-item summary::-webkit-details-marker { display: none; }

.accordion-item .title-row {
  display: flex;
  align-items: center;
}

/* Height is driven by JS as an explicit pixel value (see the "toggle"
   handler in js/main.js) rather than CSS grid-template-rows. The grid
   0fr->1fr technique looks correct on paper, but fr-unit interpolation
   inside grid-template-rows — especially wrapped in minmax(), which was
   needed to stop padding from blocking a full collapse — is a newer,
   inconsistently-supported animation feature. A plain `height` transition
   has been reliably animatable for decades and needs no such workaround:
   an explicit height never lets a child's padding force it taller. */
.accordion-body {
  height: 0px;
  overflow: hidden;
  padding: 0;
  transition: height 300ms var(--ease-premium);
}

.accordion-body p {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-primary-a80);
  margin: 0 0 10px;
}

.accordion-body ul {
  padding-left: 20px;
  margin: 0;
}

.accordion-body li {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-primary-a80);
}

/* mint accordion (plain) */
.accordion-plain .accordion-item {
  border-radius: 12px;
}

.accordion-plain .accordion-body-inner {
  padding-left: 34px;
  padding-top: 12px;
  padding-bottom: 20px;
}

.accordion-plain .accordion-item summary {
  padding: 10px 12px;
  border-radius: 12px;
}

.accordion-plain .accordion-item summary:hover {
  background: rgba(255, 255, 255, 0.4);
}

.accordion-plain .icon-badge {
  height: 40px;
  width: 40px;
  margin-right: 15px;
  flex-shrink: 0;
  transition: transform 0.25s var(--ease-premium);
}

.accordion-plain .accordion-item[open] .icon-badge {
  transform: scale(1.1) rotate(-4deg);
}

.accordion-plain .title-text {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.2;
  color: var(--color-primary);
}

/* ==========================================================================
   Stats
   ========================================================================== */

.stats {
  background: var(--color-secondary);
  padding: 80px 8px;
}

.stats .container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 40px;
}

/* flex:1 with a 220px basis — each stat claims an equal share of the
   container's full width instead of shrinking to its own text, so the
   three spread out rather than clustering in the middle. The basis still
   forces a wrap once there isn't room for three across. */
.stat {
  flex: 1 1 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.stat-title {
  font-family: var(--font-heading);
  font-size: 19px;
  color: var(--color-primary);
  margin-bottom: 6px;
}

.stat-number {
  font-family: var(--font-heading);
  font-size: 70px;
  color: var(--color-primary);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Planner section
   ========================================================================== */

.planner {
  padding: 50px 8px;
  margin: 40px 0;
}

.planner .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 20px;
}

.planner-heading-block {
  border-left: 2px solid var(--color-secondary);
  padding-left: 40px;
}

.planner-copy {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-primary);
  width: 80%;
  padding-left: 42px;
  margin-top: 10px;
}

.planner-image img { width: 100%; max-width: 654px; height: auto; margin-inline: auto; }

/* ==========================================================================
   Grow your audience (peach region)
   ========================================================================== */

.peach-region {
  /* No background-color: Subtract.png's diagonal notch is real alpha
     transparency, not white pixels, so it's meant to reveal the page
     behind it. A same-color (peach) fallback sits *behind* the image in
     the paint order and would show straight through that transparency,
     silently erasing the diagonal and leaving what looks like a flat
     peach block. The image is fully opaque peach below the notch, so
     stretching it to 100% 100% covers the whole element with no gap to
     fill in the first place. */
  background-image: url("../media/Subtract.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: top left;
  margin-top: 100px;
  padding: 100px 8px;
}

.grow-heading { text-align: left; padding-bottom: 40px; }

.grow-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 20px;
  position: relative;
}

.grow-visual {
  position: relative;
}

.grow-visual img {
  position: absolute;
  top: -60px;
  left: 40px;
  width: 531px;
  max-width: calc(100% - 40px);
}

/* peach accordion (cards w/ +/-) */
.accordion-cards { padding: 0 30px; }

.accordion-cards .accordion-item {
  border-radius: 20px;
  margin-bottom: 20px;
  overflow: hidden;
  transition: box-shadow 0.25s ease, transform 0.25s var(--ease-premium);
}

.accordion-cards .accordion-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -8px rgba(120, 55, 40, 0.28);
}

.accordion-cards .accordion-item[open] {
  box-shadow: 0 16px 32px -10px rgba(120, 55, 40, 0.3);
}

.accordion-cards .accordion-item summary {
  background: #FFFFFF66;
  border: 1px solid #fff;
  border-radius: 20px;
  padding: 20px 30px;
}

.accordion-cards .accordion-item[open] summary {
  background: #fff;
  border-radius: 20px 20px 0 0;
}

.accordion-cards .title-text {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 24px;
  color: var(--color-primary);
}

.accordion-cards .accordion-body {
  background: #fff;
  border-radius: 0 0 20px 20px;
}

.accordion-cards .accordion-body-inner {
  padding: 0 30px 20px 34px;
}

.accordion-toggle-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: 15px;
}

.accordion-toggle-icon {
  transition: transform 0.25s var(--ease-premium);
}

.accordion-item[open] .accordion-toggle-icon {
  transform: rotate(180deg);
}

.accordion-toggle-icon svg { width: 15px; height: 15px; fill: var(--color-primary); }
.accordion-toggle-icon .icon-minus { display: none; }
.accordion-item[open] .accordion-toggle-icon .icon-plus { display: none; }
.accordion-item[open] .accordion-toggle-icon .icon-minus { display: block; }

/* ==========================================================================
   Get Started
   ========================================================================== */

.get-started {
  padding: 100px 8px;
  margin: 40px 0;
}

.get-started .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 20px;
}

.get-started p.body-copy {
  width: 70%;
  margin: 10px 0;
  line-height: 1.5;
}

.get-started-visual img { width: 100%; max-width: 674px; height: auto; margin-inline: auto; }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer-top {
  /* No background-color: same reasoning as .peach-region above —
     Desktop.png's diagonal notch is real alpha transparency, and a
     same-color (navy) fallback would paint through it and erase the
     diagonal. The image is opaque navy for the rest of its height, so
     stretching to 100% 100% gives full coverage without a fallback. */
  background-image: url("../media/Desktop.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: top left;
  padding-top: 100px;
  min-height: 600px;
}

/* Both footer rows share the same 1410px container boundary: logo and
   headline side by side on one row, the three link columns on the next. */
.footer-brand {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 30px;
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 50px 10px 10px;
}

.footer-brand img {
  width: 170px;
  height: auto;
  flex-shrink: 0;
}

.footer-brand h2 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 55px;
  line-height: 1.1;
  color: #fff;
}

.footer-columns {
  display: flex;
  /* flex-start, not center: the columns hold different numbers of links,
     so centering them vertically would stagger the three headings down
     the page instead of lining them up. */
  align-items: flex-start;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 50px 10px 0;
}

.footer-col {
  flex: 1 1 220px;
}

.footer-col h3 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 30px;
  color: #fff;
  margin-bottom: 10px;
}

/* 20px above/below the list as a whole (per the source site), rather than
   20px stacked on top of every item — that was pushing the links far
   further apart than the reference. */
.footer-col ul {
  list-style: none;
  padding: 20px 0;
}

.footer-col li {
  padding: 0;
  margin-bottom: 6px;
}

.footer-col li a,
.footer-col li .footer-soon {
  font-family: var(--font-body);
  font-size: 15px;
  color: #fff;
  display: inline-block;
}

.footer-col li a {
  transition: opacity 0.2s ease, transform 0.2s var(--ease-premium);
}

.footer-col li a:hover {
  opacity: 0.75;
  transform: translateX(4px);
}

.footer-col li .footer-soon {
  opacity: 0.55;
  cursor: default;
}

.site-footer-bottom {
  background: var(--color-primary);
  padding: 0 8px;
  text-align: center;
}

.site-footer-bottom p {
  font-family: var(--font-copyright);
  font-size: 16px;
  line-height: 25px;
  color: #fff;
}

.site-footer-bottom a { text-decoration: underline; }
.site-footer-bottom a:hover { opacity: 0.8; }

/* ==========================================================================
   Back to top
   ========================================================================== */

.back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: var(--color-primary);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(12px) scale(0.9);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.2s ease;
  box-shadow: 0 8px 20px -4px rgba(67, 83, 114, 0.45);
  z-index: 80;
}

.back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.back-to-top:hover { background: #33415a; }
.back-to-top:active { transform: scale(0.94); }
.back-to-top svg { width: 20px; height: 20px; fill: currentColor; }

@media (max-width: 767px) {
  .back-to-top { right: 16px; bottom: 16px; width: 44px; height: 44px; }
}

/* ==========================================================================
   Scroll-reveal
   ========================================================================== */

/* Scoped under .js-ready (set by main.js) so content stays visible by
   default if JavaScript fails to load — no permanently-hidden sections. */
.js-ready .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s var(--ease-premium);
}

.js-ready .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .js-ready .reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   Responsive — tablet (≤1024px)
   ========================================================================== */

@media (max-width: 1024px) {
  .contact-pill { display: none; }

  .menu-toggle { display: flex; }

  .nav-menu { display: none; }

  .h1-loud { font-size: 48px; line-height: 1.2em; letter-spacing: 15px; }

  .accordion-plain .title-text { font-size: 48px; }
  .accordion-cards .title-text { font-size: 24px; }

  .hero .container,
  .find-grid,
  .planner .container,
  .grow-grid,
  .get-started .container {
    grid-template-columns: 1fr;
  }

  .hero-copy { text-align: center; }
  .hero-copy p.body-copy { max-width: 90%; margin-inline: auto; }
  .hero-stores { justify-content: center; }
  .hero-visual { margin-top: 20px; }

  .find-image { order: 2; }

  .planner-heading-block { text-align: left; }
  .planner-copy { width: 100%; padding-left: 0; text-align: left; }

  .grow-heading { text-align: center; }
  .grow-visual { display: none; }

  .get-started-visual { order: 2; }
  .get-started p.body-copy { width: 100%; }
}

/* ==========================================================================
   Responsive — mobile (≤767px)
   ========================================================================== */

@media (max-width: 767px) {
  .header-row { padding: 10px; }
  .site-logo img { height: 64px; }

  .nav-dropdown a { padding: 15px 30px; font-size: 20px; }

  .hero { padding: 10px; }
  .hero-copy { text-align: center; }
  .h1-loud { font-size: 44px; line-height: 1em; letter-spacing: 2px; }
  .hero-copy p.body-copy { font-size: 16px; }
  .hero-badge { margin-inline: auto; }

  .mint-region { padding-top: 200px; }
  .find-grid { padding: 10px; gap: 5px; }
  .h1-quiet { font-size: 44px; line-height: 1em; letter-spacing: 2px; }
  .accordion-plain .title-text { font-size: 22px; }
  .accordion-plain .icon-badge { height: 30px; width: 30px; margin-right: 10px; }

  .stats { padding: 10px; }
  .stats .container { gap: 20px; }

  .planner { padding: 10px; margin: 20px 0; }
  .planner-heading-block { text-align: center; border-left: none; padding-left: 0; }
  .planner-copy { text-align: center; font-size: 16px; }

  .peach-region { padding: 100px 10px; }
  .grow-heading .h1-quiet { font-size: 44px; line-height: 1em; letter-spacing: 2px; text-align: center; }
  .accordion-cards { padding: 20px; }
  .accordion-cards .title-text { font-size: 18px; }

  .get-started { padding: 10px; margin: 20px 0; }
  .get-started p.body-copy { text-align: center; margin-inline: auto; font-size: 16px; }

  /* Narrow screens can't fit the logo and headline side by side —
     stack and center them, matching the source site's mobile footer. */
  .footer-brand {
    flex-direction: column;
    text-align: center;
  }
  .footer-brand img { width: 150px; }
  .footer-brand h2 { font-size: 22px; line-height: 1.2; letter-spacing: 1px; }
  .footer-columns { gap: 30px; text-align: center; justify-content: center; }
  .footer-col { flex: 1 1 100%; }
}

/* ==========================================================================
   Become a Vendor — form
   ========================================================================== */

.vendor-layout {
  max-width: 1000px;
  margin: -60px auto 0;
  padding: 0 8px 100px;
  position: relative;
  z-index: 2;
}

.vendor-recap {
  background: var(--tint-mint);
  border-radius: 24px;
  padding: 36px 40px;
  margin-bottom: 40px;
}

.vendor-recap h2 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 26px;
  color: var(--color-primary);
  margin-bottom: 16px;
}

.vendor-recap ul {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 24px;
}

.vendor-recap li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-primary);
}

.vendor-recap li::before {
  content: "";
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-secondary);
  margin-top: 7px;
}

.vendor-form-card {
  background: #fff;
  border: 1px solid rgba(67, 83, 114, 0.1);
  border-radius: 24px;
  padding: 48px;
  box-shadow: 0 24px 60px -30px rgba(67, 83, 114, 0.35);
}

/* A quiet echo of the ticket-strip motif: two punched notches on the top
   edge, like a stub torn from a longer form. Used sparingly — just here
   and on the contact form — not on every card on the site. */
.ticket-edge {
  position: relative;
}

.ticket-edge::before,
.ticket-edge::after {
  content: "";
  position: absolute;
  top: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(67, 83, 114, 0.15);
  transform: translateY(-50%);
}

.ticket-edge::before { left: 36px; }
.ticket-edge::after { right: 36px; }

@media (max-width: 767px) {
  .ticket-edge::before { left: 22px; }
  .ticket-edge::after { right: 22px; }
}

.vendor-form-card h2 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 28px;
  color: var(--color-primary);
  margin-bottom: 6px;
}

.vendor-form-card .form-intro {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-primary-a80);
  margin-bottom: 32px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.form-group {
  margin-bottom: 22px;
}

.form-group label {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  color: var(--color-primary);
  margin-bottom: 8px;
}

.form-group .required {
  color: var(--color-peach);
}

.form-group input[type="text"],
.form-group input[type="tel"],
.form-group input[type="email"] {
  width: 100%;
  min-height: 48px;
  border: 1.5px solid var(--border-neutral);
  border-radius: 12px;
  padding: 0 16px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-primary);
  background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-group input::placeholder { color: #A7B2C0; }

.form-group input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(177, 220, 203, 0.45);
}

.form-group input[aria-invalid="true"] {
  border-color: var(--color-error-border);
}

.form-group input[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 4px rgba(217, 83, 79, 0.15);
}

.field-error {
  display: block;
  min-height: 18px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-error);
  margin-top: 6px;
}

/* Honeypot: real visitors never see or reach this field, but bots that fill
   in every input give themselves away. Moved off-screen rather than
   display:none, which some bots know to skip. */
.form-hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Turnstile stays invisible unless the visitor has to interact with it; the
   space is only reserved while it's showing. */
.turnstile-slot.is-interactive { margin-bottom: 20px; }

/* Form-level errors: send failures, an expired security check, and so on.
   Field-level problems use .field-error under the field instead. */
.form-alert {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-error);
  background: rgba(192, 57, 43, 0.07);
  border: 1px solid rgba(217, 83, 79, 0.35);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 16px;
}

.offering-fieldset {
  border: none;
  padding: 0;
  margin: 0 0 30px;
}

.offering-fieldset legend {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  color: var(--color-primary);
  padding: 0;
  margin-bottom: 12px;
}

.offering-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.offering-option {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1.5px solid var(--border-neutral);
  border-radius: 12px;
  padding: 12px 16px;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
  min-height: 44px;
}

.offering-option:hover { border-color: var(--color-secondary); }

.offering-option input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--color-primary);
  flex-shrink: 0;
}

.offering-option:has(input:checked),
.offering-option.is-checked {
  border-color: var(--color-primary);
  background: rgba(177, 220, 203, 0.25);
}

.offering-option span {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-primary);
}

.vendor-form-card button[type="submit"] {
  width: 100%;
  border: none;
}

.vendor-form-card button[type="submit"].is-loading {
  opacity: 0.85;
}

.vendor-form,
.contact-form {
  transition: opacity 200ms var(--ease-premium), transform 200ms var(--ease-premium);
}

.vendor-form.is-exiting,
.contact-form.is-exiting {
  opacity: 0;
  transform: translateY(-8px);
}

.vendor-form-success {
  background: #fff;
  border: 1px solid rgba(67, 83, 114, 0.1);
  border-radius: 24px;
  padding: 56px 48px;
  text-align: center;
  box-shadow: 0 24px 60px -30px rgba(67, 83, 114, 0.35);
  opacity: 0;
  transform: translateY(12px) scale(0.97);
  transition: opacity 350ms var(--ease-premium), transform 350ms var(--ease-premium);
}

.vendor-form-success.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.vendor-form-success .success-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

.vendor-form-success .success-icon svg {
  width: 28px;
  height: 28px;
  fill: var(--color-primary);
}

.vendor-form-success h2 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 28px;
  color: var(--color-primary);
  margin-bottom: 10px;
}

.vendor-form-success p {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-primary-a80);
  max-width: 420px;
  margin: 0 auto 24px;
}

@media (max-width: 767px) {
  .vendor-layout { margin-top: -30px; padding-bottom: 60px; }
  .vendor-recap { padding: 26px; }
  .vendor-recap ul { grid-template-columns: 1fr; }
  .vendor-form-card { padding: 28px; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .offering-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   FAQ page
   ========================================================================== */

.faq-layout {
  max-width: 900px;
  margin: 0 auto;
  padding: 80px 8px 100px;
}

.faq-jump {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 60px;
}

.faq-jump a {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  color: var(--color-primary);
  background: var(--tint-mint);
  border: 1.5px solid transparent;
  border-radius: 999px;
  padding: 9px 18px;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.faq-jump a:hover { border-color: var(--color-secondary); }

.faq-jump a:active {
  transform: scale(0.97);
  transition: transform 120ms ease-out;
}

.faq-category { margin-bottom: 56px; }

.faq-category:last-child { margin-bottom: 0; }

.faq-category h2 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 30px;
  color: var(--color-primary);
  margin-bottom: 20px;
  scroll-margin-top: 130px;
}

.accordion-faq .accordion-item {
  background: #fff;
  border: 1.5px solid var(--border-neutral-soft);
  border-radius: 16px;
  margin-bottom: 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.accordion-faq .accordion-item:hover {
  border-color: var(--color-secondary);
}

.accordion-faq .accordion-item[open] {
  border-color: var(--color-secondary);
  box-shadow: 0 12px 28px -18px rgba(67, 83, 114, 0.4);
}

.accordion-faq .accordion-item summary {
  padding: 20px 24px;
}

.accordion-faq .title-text {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.4;
  color: var(--color-primary);
  padding-right: 16px;
}

.accordion-faq .accordion-toggle-icon {
  width: 30px;
  height: 30px;
  background: var(--tint-mint);
  margin-left: 12px;
}

.accordion-faq .accordion-toggle-icon svg { width: 12px; height: 12px; }

.accordion-faq .accordion-body-inner {
  padding: 0 24px 22px;
}

.accordion-faq .accordion-body p {
  font-size: 15px;
  line-height: 1.6;
}

@media (max-width: 767px) {
  .faq-layout { padding: 50px 16px 70px; }
  .faq-category h2 { font-size: 24px; }
  .accordion-faq .accordion-item summary { padding: 16px 18px; }
  .accordion-faq .accordion-body-inner { padding: 0 18px 18px; }
}

/* ==========================================================================
   Contact page
   ========================================================================== */

.contact-layout {
  max-width: 640px;
  margin: -60px auto 0;
  padding: 0 8px 100px;
  position: relative;
  z-index: 2;
}

.contact-form-card {
  background: #fff;
  border: 1px solid rgba(67, 83, 114, 0.1);
  border-radius: 24px;
  padding: 48px;
  box-shadow: 0 24px 60px -30px rgba(67, 83, 114, 0.35);
}

.contact-form-card h2 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 28px;
  color: var(--color-primary);
  margin-bottom: 6px;
}

.contact-form-card .form-intro {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-primary-a80);
  margin-bottom: 32px;
}

.form-group select {
  width: 100%;
  min-height: 48px;
  border: 1.5px solid var(--border-neutral);
  border-radius: 12px;
  padding: 0 16px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-primary);
  background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23435372' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  /* Without an explicit size, this SVG (no intrinsic width/height of its
     own) renders at the browser's default replaced-element size instead
     of icon-size — this is what made the arrow huge. */
  background-size: 11px 7px;
  padding-right: 40px;
}

.form-group select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(177, 220, 203, 0.45);
}

.form-group textarea {
  width: 100%;
  min-height: 140px;
  border: 1.5px solid var(--border-neutral);
  border-radius: 12px;
  padding: 14px 16px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-primary);
  background: #fff;
  resize: vertical;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-group textarea::placeholder { color: #A7B2C0; }

.form-group textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(177, 220, 203, 0.45);
}

.form-group textarea[aria-invalid="true"] { border-color: var(--color-error-border); }

.contact-form-card button[type="submit"] {
  width: 100%;
  border: none;
}

@media (max-width: 767px) {
  .contact-layout { margin-top: -30px; padding-bottom: 60px; }
  .contact-form-card { padding: 28px; }
}