/* Marketing design system (redesigned pages only): everything shared across
 * marketing pages that isn't a variable override — fonts, tinted backgrounds,
 * type scale, components. Variable overrides live in _bootstrap_variables.css;
 * page-specific styles live in a per-page file (features.css etc.).
 *
 * Loaded ONLY by layouts/marketing (with vendored Bootstrap 5.3), so nothing
 * here needs scoping — the rest of the app (including the legacy /pages/*
 * marketing site) never loads this file, and this layout never loads the
 * app's Tailwind bundles. Lives outside app/assets/stylesheets on purpose:
 * application.css `require_tree`s that whole directory.
 *
 * Conventions for new pages/sections are documented in
 * app/views/marketing/README.md.
 */

/* Fonts -------------------------------------------------------------------- */

@font-face {
  font-family: "Avenir-Medium";
  src: url(/assets/38ED6F_0_0-38dda1c77117aa9f5084f4e9cd222929b952d630c5fb2643c6e730ccec4589de.woff2) format("woff2"), url(/assets/38ED6F_0_0-8dd9b124e24e2de48dc32cc5a98cebe67c2da34212c1b025299b3cfb97c0a9dd.ttf) format("truetype");
}

@font-face {
  font-family: "Avenir-Black";
  src: url(/assets/38ED6F_1_0-42f780697f493bec3abe03ca74c2ec87816ba6fa138490db2193cb845ce9c15f.woff2) format("woff2"), url(/assets/38ED6F_1_0-86a93c713b7aba1b2d11134f469fb4b1f974a4cb23853101c97971e809c01ebc.ttf) format("truetype");
}

@font-face {
  font-family: "Bitter";
  font-weight: 100 900;
  src: url(/assets/Bitter-VariableFont_wght-c2244c62e4fefcf102503ae9568c76b05600c5a75fc65420f98031ecb6e6a4c6.ttf) format("truetype");
}

@font-face {
  font-family: "Bitter";
  font-style: italic;
  font-weight: 100 900;
  src: url(/assets/Bitter-Italic-VariableFont_wght-158d8a63895b9a55ab6d5f56f9723a6e97096ca67297f6595fdc19cb36dddd24.ttf) format("truetype");
}

/* Tinted section/card backgrounds, one per brand accent. */
.bg-teal-subtle { background-color: var(--tt-teal-50); }
.bg-teal-tint { background-color: var(--tt-teal-100); }
.bg-teal-soft { background-color: var(--tt-teal-200); }

.bg-teal-strong {
  background-color: var(--tt-teal-850);
  color: #fff;
}
.bg-lavender-faint { background-color: var(--tt-lavender-50); }
.bg-lavender-subtle { background-color: var(--tt-lavender-200); }
.bg-lavender-tint { background-color: var(--tt-lavender-300); }
.bg-raspberry-faint { background-color: var(--tt-raspberry-25); }
.bg-raspberry-subtle { background-color: var(--tt-raspberry-50); }
.bg-raspberry-tint { background-color: var(--tt-raspberry-100); }

/* Type scale --------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--tt-font-display);
  line-height: 1.2;
  text-wrap: balance;
}

h1 {
  font-size: 3.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

h2 {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 2.5rem;
}

h3 {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

p {
  margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
  h1 { font-size: 3.75rem; }
  h2 { font-size: 1.8rem; }
  h3 { font-size: 1.4rem; }
}

@media (min-width: 992px) {
  h2 { font-size: 2.25rem; }
}

/* Copy comes from marketing.yml as Markdown (no HTML there); **emphasis**
   renders as <strong>, and the design system decides what emphasis looks
   like per context. */
h1 strong {
  font-weight: inherit;
  color: var(--hero-emphasis, var(--tt-teal-500));
}

/* Footer CTA: gradient send-off panel — big ink heading whose **callout** is
   weight-only, muted one-liner subtitle, pink primary action beside a soft
   teal one. */
/* Bottom stop matches the teal-50 footer that follows, so the gradient hands
   off seamlessly. Top stop is a comp-sampled periwinkle (not yet a token). */
.footer-cta {
  background: linear-gradient(180deg, #c2cde7, var(--tt-teal-50));
}

/* Concave top of the footer CTA. The curve is the complement fill (gradient's
   top color below the line) and overlaps the page's LAST SECTION by its own
   height, so the dip above the line reveals that section's real background —
   dark, tinted, or white — with no per-page configuration. */
footer {
  /* flex children's margins never collapse, so the curve's negative margin
     overlaps the section above instead of dragging the whole footer up */
  display: flex;
  flex-direction: column;
}

.footer-cta-curve {
  display: block;
  width: 100%;
  height: 110px;
  color: #c2cde7; /* keep in sync with the .footer-cta gradient's top stop */
  margin-block-start: -110px;
  /* tuck 1px under the gradient section below: periwinkle-on-periwinkle,
     hides any subpixel seam */
  margin-block-end: -1px;
}

/* Reserve the curve's overlap zone at the bottom of every page's final
   section, so the curve never sits on top of its content. The curve dips
   110px only at the horizontal center (~20px at the edges), so a partial
   reservation reads fine. */
main > :last-child {
  padding-block-end: calc(2rem + 110px);
}

.footer-cta .marketing-section {
  padding-block: 6rem;
}

/* Sized to match the page-top hero h1 (3.5rem, 3.75rem at md+). */
.footer-cta h2 {
  font-size: 3.5rem;
  font-weight: 500;
}

.footer-cta h2 + p {
  font-size: 1.125rem;
  color: var(--bs-secondary-color);
  max-width: 42rem;
  margin-inline: auto;
  margin-bottom: 2.5rem;
}

.footer-cta .btn {
  font-weight: 600;
}

@media (min-width: 768px) {
  .footer-cta h2 { font-size: 3.75rem; }
}

/* Components --------------------------------------------------------------- */

/* Page section rhythm: every top-level <section> on a marketing page. */
.marketing-section {
  padding-block: 4rem;
}

/* Page wrapper (the layout's body content). Pages can retint the header +
   hero + curve (and the hero's **emphasis** color) by setting a theme class
   via content_for :page_theme; teal is the default. */
.marketing-page {
  background-color: #fff;
  --hero-tint: var(--tt-teal-50);
  --hero-emphasis: var(--tt-teal-500);
}

.marketing-page.theme-raspberry {
  --hero-tint: var(--tt-raspberry-25);
  --hero-emphasis: var(--tt-raspberry-600);
}

.marketing-page.theme-white {
  --hero-tint: #fff;
}

/* Hero: the header and hero share a solid tint, and the curve svg follows
   the hero in normal flow, sweeping the tint into the white page. Rendered
   by marketing/sections/_hero. */
.marketing-page > header,
.marketing-hero {
  background-color: var(--hero-tint);
}

.marketing-hero {
  padding-block-start: 3rem;
  padding-block-end: 1rem;   /* ← eyeball this */
}

@media (min-width: 768px) {
  .marketing-hero {
    padding-block-start: 6rem;
    padding-block-end: 2rem; /* ← and this, for md+ */
  }
}

/* All hero copy after the h1 — subtitle or body paragraphs — reads at the
   same size. */
.marketing-hero p {
  font-size: 1.5rem;
}

/* No bottom padding, and the last element's margin would otherwise collapse
   out of the section as a white gap — keep the curve tight to the text. */
.marketing-hero :last-child {
  margin-bottom: 0;
}

/* Same reveal trick as the footer curve, mirrored: the tinted band overlaps
   the NEXT section's top, so the transparent area below the curve line shows
   that section's real background — white, tinted, anything — with no
   per-page configuration. */
.marketing-hero-curve {
  display: block;
  width: 100%;
  height: 110px;
  color: var(--hero-tint);
  /* Overlap the hero by a pixel: subpixel rounding otherwise leaves a
     hairline between the two tinted boxes. */
  margin-block-start: -1px;
  margin-block-end: -110px;
  position: relative;
  z-index: 1;
  pointer-events: none;
}

/* Reserve the curve's overlap zone at the top of whatever follows the hero,
   so the curve never sits on top of its content. */
.marketing-hero-curve + * {
  padding-block-start: calc(2rem + 110px);
}

/* Heartbeat divider (marketing/_divider): filled with the LOWER section's
   color and overlapping the section above, so the transparent area above the
   spikes reveals that section's background — same reveal mechanics as the
   hero/footer curves. */
.divider-heartbeat {
  /* 133 matches the Figma export's viewBox, so its units map 1:1 to px
     vertically (the width stretches; preserveAspectRatio is none). */
  height: 133px;
  margin-block-start: -133px;
  /* The exported path's bottom edge sags — ~125 at the sides, 132.7 at
     center — leaving up to 7.7px empty at the bottom corners. Overlapping the
     next section by 8px puts that gap over a background of the same color as
     the fill, so it disappears without editing Figma's path. */
  margin-block-end: -8px;
  position: relative;
  z-index: 1;
  pointer-events: none;
}

.divider-heartbeat svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Reserve the divider's overlap zone in whatever section precedes one. */
:has(+ .divider-heartbeat) {
  padding-block-end: calc(2rem + 133px);
}

/* Feature card: tinted tile with a compact Bitter heading. */
.feature-card {
  height: 100%;
  padding: 1.5rem;
  border-radius: var(--bs-border-radius-lg);
  box-shadow: var(--bs-box-shadow-sm);
}

.feature-card h3 {
  font-size: 1.05rem;
  margin-bottom: 0.75rem;
}

.feature-card p,
.feature-card ul {
  font-size: 0.875rem;
  margin-bottom: 0;
}

.feature-card ul {
  padding-left: 1.25rem;
}

.feature-card li::marker {
  color: var(--tt-teal-850);
}

/* Media split accents: each accent is four custom properties, consumed by the
   section itself, the check-list, headings, and the testimonial card below.
   One-off tweaks can override any knob inline, e.g.
   style="--accent-tint: var(--tt-mint-50)". */
.media-split-teal {
  --accent-section-bg: #fff;
  /* This accent alone sits on a white section, so its odd check rows need a
     tint of their own — plain white would vanish into the background. */
  --accent-row: var(--tt-teal-200);
  --accent-tint: var(--tt-teal-50);       /* even check rows + quote box bg */
  --accent-check: var(--tt-teal-500);     /* check circle icon */
  --accent-highlight: var(--tt-teal-500); /* heading callout + quote role */
}

.media-split-lavender {
  --accent-section-bg: var(--tt-lavender-50);
  --accent-tint: var(--tt-lavender-300);
  --accent-check: var(--tt-lavender-950);
  --accent-highlight: var(--tt-lavender-900);
}

.media-split-raspberry {
  --accent-section-bg: var(--tt-raspberry-50);
  --accent-tint: var(--tt-raspberry-100);
  --accent-check: var(--tt-raspberry-700);
  --accent-highlight: var(--tt-raspberry-600);
}

.media-split-dark {
  --accent-section-bg: var(--tt-teal-850);
  --accent-tint: var(--tt-teal-100);
  --accent-check: var(--tt-teal-500);
  --accent-highlight: var(--tt-teal-200);
  color: #fff;
}

.media-split {
  background-color: var(--accent-section-bg);
}

/* **callouts** inside a media split heading take the accent highlight —
   color only, no extra weight. */
.media-split h2 strong {
  font-weight: inherit;
  color: var(--accent-highlight);
}

/* Split section type: heading a step smaller than the global h2 scale, while
   the lead paragraph and check items sit larger — and equal to each other. */
.media-split h2 {
  font-size: 1.4rem;
}

.media-split h2 ~ p,
.check-list li {
  font-size: 1.5rem;
}

.media-split h2 ~ p {
  max-width: 42rem;
}

@media (min-width: 768px) {
  .media-split h2 { font-size: 1.6rem; }
}

@media (min-width: 992px) {
  .media-split h2 { font-size: 1.75rem; }
}

/* Checklist: bulleted benefits with a leading check icon per item; even rows
   carry the accent tint. */
.check-list {
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
  display: grid;
  gap: 1rem;
  max-width: 36rem;
}

.check-list li {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.75rem 2rem;
  border-radius: var(--bs-border-radius-lg);
  background-color: var(--accent-row, #fff);
  color: var(--tt-ink);
}

.check-list li:nth-child(even) {
  background-color: var(--accent-tint);
}

.check-list svg {
  /* ~two lines of the 1.5rem/1.625 item text */
  width: 4rem;
  height: 4rem;
  flex-shrink: 0;
  color: var(--accent-check);
}

/* The icon file hardcodes its fill (it's also used as a list-image URL by the
   legacy expo page, so the file itself can't change); since inline_svg_tag
   inlines the markup, re-point the fill at our color. */
.check-list svg path {
  fill: currentColor;
}

/* Testimonial: quote card inside an accent section. The square bottom-right
   corner gives it a speech-bubble feel. */
.testimonial-card {
  max-width: 36rem;
  margin-top: 2.5rem;
  padding: 3rem;
  border-radius: 5rem;
  border-end-end-radius: 0;
  background-color: var(--accent-tint);
  box-shadow: var(--bs-box-shadow);
}

.testimonial-card .testimonial-person {
  font-family: var(--tt-font-display);
  font-weight: 700;
  font-size: 2rem;
  display: block;
  margin-top: 1rem;
}

.testimonial-card .testimonial-role {
  color: var(--accent-highlight);
}

/* Media split: once the photo and copy sit side by side (lg+), give them a
   wider gutter than Bootstrap's g-5 maximum; stacked layouts keep g-5. */
@media (min-width: 992px) {
  .media-split-row {
    --bs-gutter-x: 6rem;
  }
}

/* Media block: photo panel used opposite copy in split sections. */
.section-media {
  display: block;
  width: 100%;
  min-height: 250px;
  border-radius: var(--bs-border-radius-xl);
  box-shadow: var(--bs-box-shadow);
  -o-object-fit: cover;
     object-fit: cover;
  filter: grayscale(1);
}

@media (min-width: 768px) {
  .section-media { min-height: 400px; }
}

@media (min-width: 992px) {
  .section-media { min-height: 500px; }
}

/* Badge cards: centered tinted cards with a floating pill badge over the top
   edge (e.g. mission/vision on About). */
.badge-card {
  position: relative;
  height: 100%;
  padding: 3rem 2.5rem 2.5rem;
  border-radius: var(--bs-border-radius-xl);
  background-color: var(--tt-lavender-200);
  text-align: center;
}

.badge-card-pill {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--tt-lavender-950);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 50rem;
  padding: 0.5rem 1.25rem;
  white-space: nowrap;
}

.badge-card h3 {
  color: var(--tt-lavender-950);
}

.badge-card p {
  margin-bottom: 0;
}

/* Value cards: pain/response pairs under a display-face kicker + a light
   headline whose **callout** is bold. */
.value-cards h2 {
  color: var(--tt-lavender-950);
  font-weight: 500;
  font-size: 2.5rem;
}

@media (min-width: 768px) {
  .value-cards h2 { font-size: 3rem; }
}

.value-cards h2 strong {
  font-weight: 700;
}

.value-kicker {
  font-family: var(--tt-font-display);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--tt-lavender-950);
  margin-bottom: 0.5rem;
}

.value-card {
  width: 100%;
  max-width: 24rem;
  padding: 2rem;
  border-radius: var(--bs-border-radius-xl);
  border: 1px solid var(--bs-border-color);
  box-shadow: var(--bs-box-shadow-sm);
  background-color: #fff;
}

.value-card h3 {
  font-size: 1.05rem;
  text-align: center;
  margin-bottom: 1rem;
}

.value-card p {
  font-size: 0.875rem;
}

.value-label {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.75rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.value-pain,
.value-response {
  border-radius: var(--bs-border-radius-lg);
  padding: 1rem;
}

.value-pain {
  background-color: #f7f6f8; /* comp-sampled; not yet a token */
}

.value-response {
  background-color: var(--tt-lavender-200);
  margin-top: 1rem;
}

.value-pain p:last-child,
.value-response p:last-child {
  margin-bottom: 0;
}