/*
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.).

ONLY loaded 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. */
/* TKTK create full list of background token utilities: .bg-$TOKEN-$PERCENT */
.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); }

/* TKTK ??? need this? more of these? */
.bg-teal-strong {
  background-color: var(--tt-teal-850);
  color: #fff;
}

.bg-lavender-50,
.bg-lavender-faint   { background-color: var(--tt-lavender-50) !important; }
.bg-lavender-100     { background-color: var(--tt-lavender-100) !important; }
.bg-lavender-200,
.bg-lavender-subtle  { background-color: var(--tt-lavender-200) !important; }
.bg-lavender-300,
.bg-lavender-tint    { background-color: var(--tt-lavender-300) !important; }
.bg-lavender-350     { background-color: var(--tt-lavender-350); }

.bg-raspberry-25,
.bg-raspberry-faint  { background-color: var(--tt-raspberry-25) !important; }
.bg-raspberry-50,
.bg-raspberry-subtle { background-color: var(--tt-raspberry-50) !important; }
.bg-raspberry-66     { background-color: var(--tt-raspberry-66) !important; }
.bg-raspberry-100,
.bg-raspberry-tint   { background-color: var(--tt-raspberry-100) !important; }

/* Text token utilities, for the palette entries Bootstrap's theme colors don't already cover. */
/* TKTK create full list of text token utilities: .text-$TOKEN-$PERCENT */
.text-raspberry-deep { color: var(--tt-raspberry-700); }

.text-lavender-50  { color: var(--tt-lavender-50)  !important; }
.text-lavender-100 { color: var(--tt-lavender-100) !important; }
.text-lavender-200 { color: var(--tt-lavender-200) !important; }
.text-lavender-300 { color: var(--tt-lavender-300) !important; }
.text-lavender-400 { color: var(--tt-lavender-400) !important; }
.text-lavender-500 { color: var(--tt-lavender-500) !important; }
.text-lavender-800 { color: var(--tt-lavender-800) !important; }
.text-lavender-900 { color: var(--tt-lavender-900) !important; }
.text-lavender-950 { color: var(--tt-lavender-950) !important; }

.tt-form-check-input-lavender {
  border-color: var(--tt-lavender-500) !important;
}
.tt-form-check-input-lavender:checked {
  background-color: var(--tt-lavender-800) !important;
  border-color: transparent !important;
}

/* For elements that default to the display the wrong sans/serif,
   named after Bootstrap's .font-monospace. */
.font-body    { font-family: var(--tt-font-body); }
.font-display { font-family: var(--tt-font-display); }

/* keep links white when in an element with white text */
.text-white a { color: white !important; }

/* link color utilities */
.link-color-pink       { color: var(--tt-pink); }
.link-color-pink:hover { color: var(--tt-pink-hover); }

/* 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;
}

/* adding another size smaller than Bootstrap's .fs-6 */
.fs-7 {
  font-size: 0.875rem;
}

/* form control labels */
.fw-900 { font-weight: 900 !important; }
.fw-800 { font-weight: 800 !important; }
.fw-700 { font-weight: 700 !important; }
.fw-600 { font-weight: 600 !important; }
.fw-500 { font-weight: 500 !important; }
.fw-400 { font-weight: 400 !important; }
.fw-300 { font-weight: 300 !important; }
.fw-200 { font-weight: 200 !important; }
.fw-100 { font-weight: 100 !important; }

/* form control labels */
.form-label {
  margin-bottom: 0.25rem;
}

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

/* Square corner utilities */
.square-corner-top-left     { border-top-left-radius:     0 !important; }
.square-corner-top-right    { border-top-right-radius:    0 !important; }
.square-corner-bottom-left  { border-bottom-left-radius:  0 !important; }
.square-corner-bottom-right { border-bottom-right-radius: 0 !important; }

/* 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-lavender {
  --hero-tint: var(--tt-lavender-50);
  --hero-emphasis: var(--tt-lavender-900);
}

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

/* The same sweep, for a tinted section handing off to the next one mid-page
   rather than out of the hero. Colored by the section ABOVE it. */
.section-curve-teal {
  display: block;
  width: 100%;
  height: 80px;
  color: var(--tt-teal-50);
  margin-block-start: -1px;
}

/* 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);
}

/* Curve divider (marketing/_curve_divider): the same overlap-and-reveal as
   the heartbeat, drawn as a curve that peaks at center — the lower section
   swelling up into the one above. Unlike the heartbeat's exported path, this
   one meets the bottom of its box across the full width, so it needs only the
   1px tuck against a subpixel seam. */
.divider-curve {
  display: block;
  width: 100%;
  height: 110px;
  margin-block-start: -110px;
  margin-block-end: -1px;
  position: relative;
  z-index: 1;
  pointer-events: none;
}

:has(+ .divider-curve) {
  padding-block-end: calc(2rem + 110px);
}

/* 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)". The .accent-* aliases let other
   components (e.g. the homepage testimonial bubbles) reuse the same tokens
   without borrowing the media-split class name. */
.media-split-teal,
.accent-teal {
  /*
  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-section-bg: #fff;
  --accent-light:     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-lavender {
  --accent-section-bg: var(--tt-lavender-50);
  --accent-light:      var(--tt-lavender-100);
  --accent-tint:       var(--tt-lavender-200);
  --accent-check:      var(--tt-lavender-950);
  --accent-highlight:  var(--tt-lavender-900);
  /* No --accent-row: lavender sections are tinted, so a white base row reads
     against them. The healthcare grid wants a deeper alternate than the tint;
     it sets --accent-row-alt on itself rather than here, which would follow
     the accent onto every lavender list. */
}

.media-split-lavender {
  --accent-tint: var(--tt-lavender-100);
  --accent-check: var(--tt-lavender-900);
}

.media-split-raspberry,
.accent-raspberry {
  --accent-section-bg: var(--tt-raspberry-50);
  --accent-tint:       var(--tt-raspberry-100);
  --accent-light:      var(--tt-raspberry-200);
  --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
changes 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 {
  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;
  margin: 2rem 0 0;
}

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

/* The alternating row. --accent-tint is the default because every accent
   defines one; --accent-row-alt lets a single section override it without
   touching the accent (the tint is also the quote-bubble and banner color).
   Don't key this off --accent-row: only the accents whose section is white
   set that, so the others would land on the fallback and stop alternating. */
.check-list:not(.crisscross) li:nth-child(even),
.check-list.crisscross li:nth-child(2),
.check-list.crisscross li:nth-child(3) {
  background-color: var(--accent-row-alt, 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;
}

/* Check grid: the check-list laid out two-up. The list item's own padding is
   its card padding, so a Bootstrap column would double it up — grid gives the
   two columns without touching the item. Rendered by sections/_check_grid. */
@media (min-width: 768px) {
  .check-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
}

/* Transform quotes: the heading rides a tinted banner that the photo overlaps
   at desktop, and the two bubbles step down beneath it. The section's own
   ground is passed in, because the teal accent alone sits on white and would
   leave this section untinted. Rendered by sections/_transform_quotes. */
.transform-banner {
  background-color: var(--accent-light);
}

/* The teal accent's tint is the same pale value as this section's ground, so
   the banner and bubble would vanish into it; deepen it, as the homepage
   bubbles already do. Its highlight needs the same treatment — teal-500 on
   the deepened tint doesn't clear the contrast floor for the heading callout
   or the Before/After labels. */
.transform-quotes.accent-teal {
  --accent-tint:      var(--tt-teal-200);
  --accent-highlight: var(--tt-teal-700);
}

.transform-banner h2 {
  color: var(--accent-highlight);
}

/*
The "after" bubble answers the "before" one:
tail on the opposite corner, and white,
so the pair reads as a progression out of the tint
*/
.quote-bubble.transform-before {
  background-color: var(--accent-tint);
}

.quote-bubble.transform-after {
  border-radius: 2.5rem;
  border-end-end-radius: 0;
  background-color: white;
}

@media (min-width: 992px) {
  /* Pull the banner behind the photo's edge so the two read as one unit. */
  .transform-banner {
    margin-inline-start: -3rem;
    padding-inline-start: 4rem !important;
  }
}

/*
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;
  /* Falls back to white outside an accent scope (e.g. pricing testimonials). */
  background-color: var(--accent-tint, #fff);
  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);
}

/* Talk bubbles: the customer's words in an accent-tinted speech bubble, one
   squared corner giving it the tail-side anchor. Accent tokens come from the
   .accent-* aliases above. */
.quote-bubble {
  width: 100%;
  padding: 2.5rem;
  border-radius: 2.5rem;
  border-end-start-radius: 0;
  background-color: var(--accent-tint);
}

/* Hanging punctuation: the quote marks sit out in the margin so the words
   themselves line up flush. Only Safari implements this today; elsewhere the
   quotes just stay in the text block. */
.quote-bubble blockquote {
  margin-bottom: 1.5rem;
  hanging-punctuation: first last;
}

.bubble-person {
  font-family: var(--tt-font-display);
  font-weight: 700;
  font-size: 1.5rem;
}

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

/* Client strip: the dividing rules only make sense while the names sit on one
   line; once the grid wraps, the gutters do the separating. */
@media (min-width: 1200px) {
  .client-list li + li {
    border-inline-start: 1px solid var(--bs-border-color);
  }
}

/* Tracked-out uppercase entries. Neither size maps to a utility: `small`
   (0.875em) would re-wrap the longest name and flatten the name/industry
   hierarchy. */
.client-name {
  font-size: 0.9375rem;
  letter-spacing: 0.03em;
}

.client-industry {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
}

/* 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: 300px; }
}

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

/* 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;
}

/* Hero icon (client industry pages). */
.marketing-hero-icon {
  width: 6rem;
  height: 6rem;
  margin-bottom: 2rem;
}

/* Testimonial band: full-width quote + display-face attribution. */
.testimonial-band .band-person {
  font-family: var(--tt-font-display);
  font-weight: 700;
  font-size: 2rem;
}

.testimonial-band .band-role {
  color: var(--tt-teal-500);
}


/* FAQ accordion: a Markdown answer ends with a paragraph whose bottom margin
   would double up with the body's own padding as a blank band. */
.accordion-body > :last-child {
  margin-bottom: 0;
}

/* /signup ... */
/*
Form placeholders: use lavender-500 to match form field backgrounds
*/
.text-lavender-500 .form-control::-moz-placeholder {
  color: var(--tt-lavender-500);
}
.text-lavender-500 .form-control::placeholder {
  color: var(--tt-lavender-500);
}

/*
CSS-only (no JS) way to hide/show the 'Other' textarea based on a checked box
*/
:checked ~ .toggleable { display: block; }
           .toggleable { display: none; }
/* ... /signup */