/* Marketing site stylesheet — copied tokens, not a live reference to the
   React app's src/index.css (same "duplicate, never reference live" pattern
   used for porting Ticklists' design into this app). If the brand palette
   changes, update BOTH files.

   Everything landing-page-specific (headings, section titles, eyebrows,
   pricing figures) is its own swappable class driven by variables in the
   second :root block below — change one line there to restyle every
   instance of that element across all four pages at once. */

:root {
  --dark: #491749;
  --dark-rgb: 73, 23, 73;
  --bright: #ffce00;
  --bright-rgb: 255, 206, 0;
  --light: #e8afe7;
  --light-rgb: 232, 175, 231;

  --glass-hi: rgba(255, 255, 255, 0.5);
  --glass-card: rgba(255, 255, 255, 0.6);
  --glass-line: rgba(255, 255, 255, 0.65);
  --glass-chip: rgba(255, 255, 255, 0.55);

  --text: #1d1d1d;
  --text-muted: #3f4a4d;
  --danger: #c9683f;

  --radius-lg: 24px;
  --radius-md: 18px;
  --radius-sm: 14px;
  --shadow-soft: 0 8px 30px rgba(var(--dark-rgb), 0.18);

  --font-sans: 'Open Sans', system-ui, sans-serif;
  --font-condensed: 'Open Sans Condensed', var(--font-sans);
}

/* Landing-page-only typographic tokens — swap any of these in one place to
   restyle every "H2 landing", eyebrow, etc. across index.html, search.html
   and both course pages at once. Keep separate from the brand palette above
   since these are about type treatment, not color. */
:root {
  --landing-h1-size: clamp(34px, 5vw, 56px);
  --landing-h1-weight: 800;
  --landing-h1-color: var(--dark);

  --landing-h2-size: clamp(26px, 3.4vw, 36px);
  --landing-h2-weight: 800;
  --landing-h2-color: var(--dark);

  --landing-h3-size: 20px;
  --landing-h3-weight: 700;
  --landing-h3-color: var(--dark);

  --landing-eyebrow-size: 13px;
  --landing-eyebrow-weight: 700;
  --landing-eyebrow-color: var(--dark);
  --landing-eyebrow-tracking: 0.08em;

  --landing-body-size: 17px;
  --landing-body-weight: 400;
  --landing-body-color: var(--text);
  --landing-body-line-height: 1.6;

  --landing-section-padding: 88px 24px;
  --landing-section-max-width: 1100px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--text);
  background: #f4eef7;
}

a {
  color: inherit;
}

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

.landing-h1 {
  font-size: var(--landing-h1-size);
  font-weight: var(--landing-h1-weight);
  color: var(--landing-h1-color);
  line-height: 1.12;
  margin: 0 0 20px;
}

.landing-h2 {
  font-size: var(--landing-h2-size);
  font-weight: var(--landing-h2-weight);
  color: var(--landing-h2-color);
  line-height: 1.2;
  margin: 0 0 14px;
  text-align: center;
}

.landing-h3 {
  font-size: var(--landing-h3-size);
  font-weight: var(--landing-h3-weight);
  color: var(--landing-h3-color);
  margin: 0 0 8px;
}

.landing-eyebrow {
  display: inline-block;
  font-size: var(--landing-eyebrow-size);
  font-weight: var(--landing-eyebrow-weight);
  color: var(--landing-eyebrow-color);
  letter-spacing: var(--landing-eyebrow-tracking);
  text-transform: uppercase;
  margin: 0 0 10px;
}

.landing-body {
  font-size: var(--landing-body-size);
  font-weight: var(--landing-body-weight);
  color: var(--landing-body-color);
  line-height: var(--landing-body-line-height);
}

.landing-section {
  padding: var(--landing-section-padding);
}

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

.landing-section-intro {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 48px;
}

.landing-section.alt {
  background: rgba(255, 255, 255, 0.5);
}

.stages-explainer {
  display: flex;
  align-items: center;
  gap: 56px;
  flex-wrap: wrap;
}

.stages-explainer-text {
  flex: 1 1 380px;
  max-width: 440px;
}

.stages-explainer-text .landing-h2 {
  text-align: left;
}

.stages-list {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.stages-list li {
  font-size: 15px;
  color: var(--landing-body-color);
  padding-left: 16px;
  border-left: 3px solid var(--dark);
}

.stages-list li strong {
  color: var(--dark);
}

.stages-explainer-image {
  /* Deliberately given more of the row than the text column (flex-grow
     1.6 vs the text column's implicit 1) rather than sizing the <img>
     as a percentage of an even 50/50 split — a 50%-wide image inside an
     already-half-width column rendered far smaller than intended. */
  flex: 1.6 1 420px;
}

.question-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  max-width: 984px;
  margin: 0 auto;
}

@media (max-width: 640px) {
  .question-preview-grid {
    grid-template-columns: 1fr;
  }
}

.question-preview-grid img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  display: block;
}

.stages-explainer-image img {
  /* The <img> tag deliberately carries no width/height attributes here —
     combined with those attributes, this rule's height:auto was resolving
     to the attribute's raw pixel value instead of the ratio-correct one,
     squashing the image. Explicit aspect-ratio + object-fit:contain below
     is the robust fix, verified against the real rendered box, not just
     the stylesheet. */
  width: 100%;
  height: auto;
  aspect-ratio: 1000 / 629;
  object-fit: contain;
  margin: 0 auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  display: block;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  border: none;
  white-space: nowrap;
}

.btn-primary {
  background: var(--dark);
  color: #fff;
  box-shadow: var(--shadow-soft);
}

.btn-primary:hover {
  background: #5c1d5c;
}

.btn-secondary {
  background: #fff;
  color: var(--dark);
  border: 2px solid var(--dark);
}

.btn-secondary:hover {
  background: rgba(var(--dark-rgb), 0.06);
}

.btn-block {
  width: 100%;
}

/* Header / nav */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 24px;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--glass-line);
}

.site-header-left {
  display: flex;
  /* baseline (not center) so the DE/EN text's actual text baseline lines up
     with the logo's own bottom edge — flexbox computes this from real font
     metrics instead of guessed pixel offsets. */
  align-items: baseline;
  gap: 18px;
}

.site-logo {
  height: 30px;
  width: auto;
  display: block;
}

.site-header-nav {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 5px;
}

.site-header-nav a {
  font-size: 15px;
  font-weight: 600;
  color: var(--dark);
  text-decoration: none;
}

.site-header-nav a:hover {
  text-decoration: underline;
}

.site-header-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* The header's own Sign in button was using the same padding as the big
   page CTAs (14px/28px, ~50px tall) and was the tallest thing in the bar,
   forcing the whole header taller than it needed to be. Scoped smaller
   size for just this one instance. */
.site-header-right .btn-primary {
  padding: 9px 18px;
  font-size: 14px;
}

/* Plain text + a custom chevron, no visible button/pill — matches the
   app's own lang-trigger treatment. appearance:none strips the native
   select chrome (border/background/OS arrow); the chevron is a background
   SVG so no extra DOM element is needed. position:relative for the
   fine-alignment nudge below (not margin-top) specifically because
   margin-top pushes the whole flex row taller — position offsets are
   purely visual and can't inflate the header's height. */
.lang-select {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: transparent
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23491749' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat right center / 14px;
  color: var(--dark);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  padding: 0 18px 0 0;
  cursor: pointer;
  position: relative;
  top: -2px;
}

/* Hero */
.hero {
  position: relative;
  overflow: hidden;
  min-height: 560px;
  display: flex;
  align-items: center;
}

.hero-slides {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.6s ease-in-out;
}

.hero-slide.is-active {
  opacity: 1;
}

.hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 255, 255, 0.82) 38%,
    rgba(255, 255, 255, 0.35) 68%,
    rgba(255, 255, 255, 0.15) 100%
  );
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: var(--landing-section-max-width);
  margin: 0 auto;
  padding: 64px 24px;
  width: 100%;
}

.hero-content-inner {
  max-width: 560px;
}

.hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid var(--glass-line);
  font-size: 13px;
  font-weight: 700;
  color: var(--dark);
}

.hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.hero-dots {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 8px;
  padding: 0 24px 24px;
  max-width: var(--landing-section-max-width);
  margin: -40px auto 0;
}

.hero-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(var(--dark-rgb), 0.25);
  border: none;
  padding: 0;
  cursor: pointer;
}

.hero-dot.is-active {
  background: var(--dark);
  width: 22px;
  border-radius: 5px;
}

/* Search bar (homepage) */
.search-bar-form {
  display: flex;
  gap: 10px;
  max-width: 560px;
  margin: 0 auto 8px;
}

.search-bar-input {
  flex: 1;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--glass-line);
  background: #fff;
  font-size: 16px;
  font-family: var(--font-sans);
}

.search-bar-hint {
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 40px;
}

/* Course cards */
.course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.course-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  text-decoration: none;
  color: inherit;
}

/* 2026-09-17 — reworked from a full-bleed background photo (with the text
   panel floating over it, translucent) to a normal top-of-card image block,
   after Rachael found the full-bleed version still didn't look good.
   Photo now occupies a fixed-height strip at the top only — it never runs
   behind .course-card-body, so the body can go back to a plain opaque
   background instead of a blur-over-photo panel. `background-size: 100%
   auto` (not the earlier `auto <N>%`) is deliberate: width is pinned to
   exactly the card's full width, so the whole width of the photo is
   always visible edge-to-edge; height is `auto` (preserves the image's
   own aspect ratio) and simply crops top/bottom if the scaled photo is
   taller than this strip, which is the correct trade-off per Rachael's
   request ("whole width shown... wherever possible") — width must never
   be sacrificed, height may be. The background-color fallback covers the
   rare case where a photo's aspect ratio is wide enough that the scaled
   height comes in under the strip height, leaving thin letterboxing. */
.course-card-photo {
  height: 190px;
  flex-shrink: 0;
  background-size: 100% auto;
  background-position: center;
  background-repeat: no-repeat;
  background-color: rgba(0, 0, 0, 0.04);
}

.course-card-view-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.85);
  color: var(--dark);
  font-size: 13px;
  font-weight: 700;
  box-shadow: var(--shadow-soft);
}

.course-card-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #fff;
}

.course-card-meta {
  font-size: 13px;
  color: var(--text-muted);
}

.course-card-note {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Features */
/* Explicit breakpoints rather than auto-fit — auto-fit's opportunistic
   wrapping could leave an awkward 3-then-1 split with 4 items depending on
   exact width. Always 4 / 2 / 1 across instead. */
.features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

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

@media (max-width: 480px) {
  .features-grid {
    grid-template-columns: 1fr;
  }
}

.feature-item {
  text-align: center;
}

.feature-item .landing-h3 {
  font-size: 17px;
}

.feature-item .landing-body {
  font-size: 14px;
}

.feature-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: rgba(var(--bright-rgb), 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

/* Testimonials marquee */
.testimonial-track-wrap {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.testimonial-track {
  display: flex;
  gap: 20px;
  width: max-content;
  animation: testimonial-scroll 45s linear infinite;
}

.testimonial-track:hover {
  animation-play-state: paused;
}

@keyframes testimonial-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.testimonial-card {
  width: 340px;
  flex-shrink: 0;
  background: #fff;
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-soft);
}

.testimonial-quote {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  margin: 0 0 16px;
}

.testimonial-author {
  font-size: 14px;
  font-weight: 700;
  color: var(--dark);
}

/* Pricing */
.pricing-table {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  margin-bottom: 32px;
}

.pricing-tile {
  text-align: center;
  background: #fff;
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-md);
  padding: 22px 14px;
}

.pricing-tile.is-best {
  border: 2px solid var(--bright);
  position: relative;
}

.pricing-best-tag {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bright);
  color: var(--dark);
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.pricing-tile-period {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pricing-tile-price {
  font-size: 30px;
  font-weight: 800;
  color: var(--dark);
  margin: 8px 0 0;
}

.pricing-free-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: rgba(var(--bright-rgb), 0.18);
  border: 1px solid rgba(var(--bright-rgb), 0.5);
  border-radius: var(--radius-lg);
  padding: 22px 26px;
}

/* FAQ */
.faq-list {
  max-width: 760px;
  margin: 0 auto;
}

.faq-item {
  border-bottom: 1px solid var(--glass-line);
  padding: 18px 0;
}

.faq-item summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--dark);
  font-size: 17px;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: '+';
  float: right;
  font-weight: 700;
}

.faq-item[open] summary::after {
  content: '\2212';
}

.faq-answer {
  margin-top: 12px;
  color: var(--text-muted);
  line-height: 1.6;
}

/* Final CTA */
.final-cta {
  text-align: center;
  background: var(--dark);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 56px 32px;
}

.final-cta .landing-h2 {
  color: #fff;
}

.final-cta .landing-body {
  color: rgba(255, 255, 255, 0.85);
}

/* Footer */
.site-footer {
  padding: 48px 24px 32px;
  border-top: 1px solid var(--glass-line);
}

.site-footer-inner {
  max-width: var(--landing-section-max-width);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 24px;
  font-size: 14px;
  color: var(--text-muted);
}

.site-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.site-footer-links a {
  text-decoration: none;
  color: var(--text-muted);
}

.site-footer-links a:hover {
  color: var(--dark);
}

/* Request-course inline form */
.request-course-box {
  margin-top: 24px;
  padding: 24px;
  border-radius: var(--radius-md);
  border: 2px dashed var(--glass-line);
  background: #fff;
  text-align: left;
}

.request-course-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 16px 0;
}

.request-course-fields .full-width {
  grid-column: 1 / -1;
}

.field-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 6px;
}

.field-input,
.field-select {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-line);
  background: #fff;
  font-family: var(--font-sans);
  font-size: 15px;
}

.form-status {
  margin-top: 12px;
  font-size: 14px;
  font-weight: 700;
}

.form-status.is-success {
  color: #2f7a4f;
}

.form-status.is-error {
  color: var(--danger);
}

/* Search results */
.search-results-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.search-result-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px;
  background: #fff;
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
}

.search-empty-state {
  text-align: center;
  padding: 40px 20px;
}

@media (max-width: 700px) {
  .site-header-nav {
    display: none;
  }

  .request-course-fields {
    grid-template-columns: 1fr;
  }

  .hero {
    min-height: 480px;
  }
}