/* FluenTea marketing pages: one source for colour, type, radius, shadow and
   spacing. Linked by index.html and for-schools.html (and later pricing).
   Brand rules: CLAUDE.md "Styling & Design System" and
   docs/development/STYLE_CONSUMER.md. Solid colours only, no gradients,
   shadows at most --ft-shadow. Every rule here is scoped to .ft-mkt so this
   sheet can never restyle the app. */

:root {
  /* colour */
  --ft-ink: #1A1A1A;          /* headings */
  --ft-body: #454838;         /* running text */
  --ft-muted: #686B59;        /* labels, captions. Was #767967 until 2026-10-11:
                                 4.07:1 on cream, 3.84:1 on sage, under AA. This is
                                 4.99:1 on cream, 5.47:1 on white, 4.71:1 on sage. */
  --ft-olive: #5C7A3E;        /* primary actions, brand accent, icons, large
                                 display text. NOT small text on cream: 4.45:1 */
  --ft-olive-ink: #466229;    /* olive TEXT on light grounds, eyebrows: 6.30:1 on cream */
  --ft-olive-hover: #4A6431;
  --ft-sage: #EAF0E2;         /* soft olive tint */
  --ft-sage-2: #C8D6BF;
  --ft-orange: #E8592A;       /* links, secondary accent, italic headline accent */
  --ft-orange-ink: #A73B15;   /* orange text on light grounds */
  --ft-peach: #FBF1E8;        /* soft orange tint */
  --ft-ground: #F7F4F0;       /* page background (cream) */
  --ft-cream: #FFFDF9;        /* lighter cream */
  --ft-surface: #FFFFFF;      /* cards */
  --ft-line: #DDD8CC;         /* hairlines */
  --ft-line-soft: #ECE7DD;
  --ft-attention: #C8302C;    /* "needs attention" edge, sparingly */
  --ft-on-olive: #FFFFFF;

  /* type */
  --ft-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --ft-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --ft-display: clamp(2.6rem, 5vw, 4.1rem);
  --ft-h2: clamp(1.9rem, 3.4vw, 2.6rem);
  --ft-h3: 1.375rem;
  --ft-body-size: 1.0625rem;  /* 17px */
  --ft-small: 0.875rem;
  --ft-eyebrow: 0.75rem;

  /* shape */
  --ft-r-sm: 8px;
  --ft-r-card: 14px;
  --ft-r-lg: 20px;
  --ft-r-pill: 999px;
  --ft-shadow: 0 2px 4px rgb(0 0 0 / 0.1);
  --ft-ring: 0 0 0 1px var(--ft-line);

  /* space */
  --ft-section-y: 80px;
  --ft-gutter: 24px;
  --ft-max: 1200px;

  /* motion */
  --ft-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ft-ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
}
@media (max-width: 768px) {
  :root { --ft-section-y: 56px; --ft-gutter: 18px; }
}

.ft-mkt { background: var(--ft-ground); color: var(--ft-body); font: 400 var(--ft-body-size)/1.65 var(--ft-sans); }
.ft-mkt .ft-wrap { max-width: var(--ft-max); margin-inline: auto; padding-inline: var(--ft-gutter); }
.ft-mkt .ft-section { padding-block: var(--ft-section-y); }
.ft-mkt .ft-section--white { background: var(--ft-surface); }
.ft-mkt .ft-section--sage { background: var(--ft-sage); }

.ft-mkt .ft-display, .ft-mkt .ft-h2, .ft-mkt .ft-h3 {
  font-family: var(--ft-serif); color: var(--ft-ink); font-weight: 600; margin: 0; text-wrap: balance;
}
.ft-mkt .ft-display { font-size: var(--ft-display); line-height: 1.05; letter-spacing: -0.02em; }
.ft-mkt .ft-display em, .ft-mkt .ft-h2 em { color: var(--ft-orange); font-style: italic; font-weight: 500; }
.ft-mkt .ft-h2 { font-size: var(--ft-h2); line-height: 1.12; letter-spacing: -0.015em; }
.ft-mkt .ft-h3 { font-size: var(--ft-h3); line-height: 1.25; }
.ft-mkt .ft-lede { font-size: 1.1875rem; line-height: 1.6; color: var(--ft-body); max-width: 60ch; }
.ft-mkt .ft-eyebrow {
  display: inline-block; font: 600 var(--ft-eyebrow)/1 var(--ft-sans); letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ft-olive-ink);
}
.ft-mkt .ft-muted { color: var(--ft-muted); }

.ft-mkt .ft-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px;
  padding: 0 24px; border-radius: var(--ft-r-pill); font: 600 1rem/1 var(--ft-sans); text-decoration: none;
  cursor: pointer; border: 1px solid transparent; transition: background-color .2s var(--ft-ease), transform .2s var(--ft-ease);
}
.ft-mkt .ft-btn--primary { background: var(--ft-olive); color: var(--ft-on-olive); box-shadow: var(--ft-shadow); }
.ft-mkt .ft-btn--primary:hover { background: var(--ft-olive-hover); }
.ft-mkt .ft-btn--secondary { background: var(--ft-surface); color: var(--ft-olive-ink); border-color: var(--ft-line); }
.ft-mkt .ft-btn--secondary:hover { background: var(--ft-sage); }
.ft-mkt .ft-btn:active { transform: translateY(1px); }
.ft-mkt .ft-btn:focus-visible, .ft-mkt a:focus-visible, .ft-mkt button:focus-visible {
  outline: 2px solid var(--ft-olive); outline-offset: 3px;
}

.ft-mkt .ft-card {
  background: var(--ft-surface); border-radius: var(--ft-r-card); box-shadow: var(--ft-ring); padding: 20px;
}
.ft-mkt .ft-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding-inline: 10px;
  border-radius: var(--ft-r-pill); font: 600 12px/1 var(--ft-sans); background: var(--ft-sage); color: var(--ft-olive-ink);
}
.ft-mkt .ft-chip--peach { background: var(--ft-peach); color: var(--ft-orange-ink); }

/* Reveal on scroll. Content is VISIBLE AT REST: the hidden start state is only
   applied once motion.js has run and marked <html class="ft-motion">, and it
   is short (≤ .5s, 16px) so a fast scroll never shows a blank page. */
.ft-motion .ft-mkt [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .5s var(--ft-ease), transform .5s var(--ft-ease); }
.ft-motion .ft-mkt [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .ft-motion .ft-mkt [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ---- Phone layout helpers (<= 640px). Desktop is untouched by all three. ----
   Nancy, 2026-10-11: "everything seems too wordy and too much scrolling" on
   mobile. One idea per screen; stacks of cards become a swipe row.

   .ft-swipe        a row of cards that scrolls sideways and snaps, the next
                    card peeking so it is obviously swipeable. Put it on the
                    element whose children are the cards.
   .ft-m-hide       supporting copy that phones skip (it stays in the page for
                    desktop, search and screen readers on desktop).
   .ft-stickycta    a bottom bar with the one primary action; motion.js shows
                    it once the element named by its data-after has scrolled
                    away, and hides it again near the page's own final CTA
                    (data-until). */
@media (max-width: 640px) {
  .ft-mkt .ft-swipe {
    display: flex !important; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    margin-inline: calc(var(--ft-gutter) * -1); padding-inline: var(--ft-gutter); scroll-padding-inline: var(--ft-gutter);
    grid-template-columns: none !important;
  }
  .ft-mkt .ft-swipe::-webkit-scrollbar { display: none; }
  .ft-mkt .ft-swipe > * { flex: 0 0 84%; min-width: 0; scroll-snap-align: start; }
  .ft-mkt .ft-m-hide { display: none !important; }
  .ft-mkt .ft-stickycta {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    padding: 10px var(--ft-gutter) calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgb(247 244 240 / .96); backdrop-filter: blur(8px); box-shadow: 0 -1px 0 var(--ft-line);
    display: flex; gap: 10px; align-items: center;
    transform: translateY(110%); transition: transform .3s var(--ft-ease);
  }
  .ft-mkt .ft-stickycta.is-on { transform: none; }
  .ft-mkt .ft-stickycta .ft-btn { flex: 1; min-height: 48px; }
}
@media (min-width: 641px) { .ft-mkt .ft-stickycta { display: none; } }
@media (prefers-reduced-motion: reduce) { .ft-mkt .ft-stickycta { transition: none; } }