/* ==========================================================================
   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: cover;
  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 {
  background-image: url("../media/Subtract.png");
  background-color: var(--color-peach);
  background-repeat: no-repeat;
  background-size: cover;
  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 {
  background: var(--color-primary);
  padding: 70px 8px;
  text-align: center;
}

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

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

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

.cta-band .btn-pill-primary {
  background: var(--color-secondary);
  color: var(--color-primary);
  box-shadow: none;
}

.cta-band .btn-pill-primary:hover { background: #fff; }

.cta-band .btn-pill-outline {
  color: #fff;
}

.cta-band .btn-pill-outline:hover { background: rgba(255, 255, 255, 0.12); }

@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: cover;
  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 {
  background-color: var(--color-peach);
  background-image: url("../media/Subtract.png");
  background-repeat: no-repeat;
  background-size: cover;
  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 {
  background-color: var(--color-primary);
  background-image: url("../media/Desktop.png");
  background-repeat: no-repeat;
  background-size: cover;
  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"] {
  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;
}

.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;
}

.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; }
}