/*!********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[3]!./src/components/marketing/prose.css ***!
  \********************************************************************************************************************************************************************************************************************************************************************************/
/*
 * Long-form typography for every marketing page that renders authored text:
 * the blog article template, and the legal/static pages. Extracted from the
 * article stylesheet on 2026-08-29 so the two cannot drift apart - a privacy
 * policy that sets its own paragraph rhythm is how a site starts looking
 * like two sites.
 *
 * Everything is reachable by tag selector under `.lp-prose`, because MDX
 * authors write plain markdown and never see a className. Colour tokens come
 * from `.landing-v2`.
 */

/* ---- prose ------------------------------------------------------------ */

/* #454034 is the design's body-text ink - a touch warmer and darker than
 * --lp-ink-soft, used for running text only. */
.lp-prose p,
.lp-prose li {
  font-size: 16.5px;
  line-height: 1.7;
  color: #454034;
}

.lp-prose p {
  margin: 0 0 16px;
}

.lp-prose a {
  color: var(--lp-link);
  font-weight: 700;
  text-decoration: none;
}

.lp-prose a:hover {
  color: var(--lp-link-hover);
  text-decoration: underline;
}

.lp-prose strong {
  font-weight: 800;
  color: var(--lp-ink);
}

.lp-prose em {
  font-style: italic;
}

/* Tailwind's preflight strips list styling, so it is restored here rather
 * than inherited. */
.lp-prose ul,
.lp-prose ol {
  margin: 0 0 18px;
  padding-left: 24px;
}

.lp-prose ul {
  list-style: disc;
}

.lp-prose ol {
  list-style: decimal;
}

.lp-prose li {
  margin: 0 0 8px;
}

.lp-prose li::marker {
  color: var(--lp-muted-2);
}

.lp-prose li > ul,
.lp-prose li > ol {
  margin: 8px 0 0;
}

.lp-prose blockquote {
  margin: 0 0 18px;
  padding: 2px 0 2px 18px;
  border-left: 3px solid var(--lp-pink-tint);
  color: var(--lp-ink-soft);
  font-style: italic;
}

.lp-prose blockquote p {
  color: var(--lp-ink-soft);
}

/* The `---` separators the guides use between an aside and the text that
 * follows it. */
.lp-prose hr {
  border: none;
  border-top: 1px solid var(--lp-border-warm);
  margin: 34px 0;
}

.lp-prose code {
  font-family: ui-monospace, monospace;
  font-size: 0.9em;
  background: var(--lp-warm-tint);
  border-radius: 5px;
  padding: 2px 6px;
}

/* ---- tables ----------------------------------------------------------- */

/* Wide tables scroll inside their own box; the page body never does. */
.lp-table-wrap {
  overflow-x: auto;
  margin: 0 0 22px;
  border: 1px solid var(--lp-border-warm);
  border-radius: 14px;
  background: var(--lp-surface);
}

.lp-table-wrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  line-height: 1.5;
}

.lp-table-wrap th,
.lp-table-wrap td {
  padding: 11px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--lp-border-warm);
}

.lp-table-wrap th {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--lp-pink-dark);
  background: var(--lp-warm-tint);
  white-space: nowrap;
}

.lp-table-wrap td {
  color: var(--lp-ink-soft);
}

.lp-table-wrap tr:last-child th,
.lp-table-wrap tr:last-child td {
  border-bottom: none;
}

/*!********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[3]!./src/components/marketing/roles.css ***!
  \********************************************************************************************************************************************************************************************************************************************************************************/
/*
 * The two role pages, /ambassadors and /work-with-us. One stylesheet for
 * both, imported by each page, for the same reason `legal.css` serves both
 * legal documents: the pair must look identical.
 *
 * Both pages are MDX, so everything is reached by tag selector under
 * `.lp-roles` and the author writes plain markdown. Body typography comes
 * from `.lp-prose`; this file adds only the frame, the page title (the MDX's
 * `##` line) and the section headings (`###`).
 */

.lp-roles {
  max-width: 720px;
  margin: 0 auto;
  padding: 52px 24px 90px;
}

@media (max-width: 480px) {
  .lp-roles {
    padding: 32px 18px 64px;
  }
}

.lp-roles .lp-roles-kicker {
  margin: 0 0 10px;
  font-size: 11px;
  color: var(--lp-muted-2);
}

.lp-roles h2,
.lp-roles h3 {
  color: var(--lp-ink);
  font-weight: 800;
  letter-spacing: -0.01em;
}

.lp-roles h2 {
  font-size: clamp(32px, 6vw, 44px);
  line-height: 1.08;
  margin: 0 0 22px;
}

.lp-roles h3 {
  font-size: 22px;
  line-height: 1.3;
  margin: 38px 0 12px;
}

/* The email address is the call to action on both pages, so it gets the
 * house link colour rather than reading as an ordinary bold word. */
.lp-roles strong {
  color: var(--lp-ink);
}

.lp-roles ol {
  padding-left: 24px;
}

/*!***************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[3]!./src/app/[locale]/(landing)/landing-v2.css ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************/
/*
 * Design tokens for the landing page redesign, from
 * design/landing-v2/README.md ("Design tokens"). Scoped under `.landing-v2`
 * so nothing leaks into the game or manage UIs, which have their own token
 * files.
 */
.landing-v2 {
  --lp-bg: #f6f2ea;
  --lp-surface: #fffdf9;
  --lp-border: #e5ded1;
  --lp-border-strong: #d8d0c0;
  --lp-border-warm: #e6ddcc;
  --lp-border-deep: #c9c2b4;
  --lp-ink: #35312a;
  --lp-ink-soft: #55503f;
  --lp-muted: #7d7565;
  --lp-muted-2: #8a8271;
  --lp-muted-3: #a39b88;
  --lp-pink: #b85c7e;
  --lp-pink-dark: #8d4d68;
  --lp-pink-tint: #f5e5eb;
  --lp-blue: #6b7fb0;
  --lp-blue-dark: #4d5d8d;
  --lp-blue-tint: #e8ecf5;
  --lp-link: #8a5a3b;
  --lp-link-hover: #6b4225;
  --lp-warm-tint: #f3ead9;
  --lp-stripe: repeating-linear-gradient(
    45deg,
    #efe8db,
    #efe8db 8px,
    #e6ddcc 8px,
    #e6ddcc 16px
  );
  --lp-cta-shadow: 0 4px 14px rgba(184, 92, 126, 0.35);

  background: var(--lp-bg);
  color: var(--lp-ink);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica,
    Arial, sans-serif;
}

.landing-v2 a {
  color: var(--lp-link);
}
.landing-v2 a:hover {
  color: var(--lp-link-hover);
}

/* Mono all-caps kicker/eyebrow. Capitalisation happens here, never in the
 * catalogue. */
.lp-kicker {
  font-family: ui-monospace, monospace;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Hero: rising emoji particles behind the score bar. */
@keyframes lp-rise {
  0% {
    transform: translateY(0) scale(0.8);
    opacity: 0;
  }
  12% {
    opacity: 0.85;
  }
  45% {
    opacity: 0.4;
  }
  70% {
    opacity: 0;
  }
  100% {
    transform: translateY(-84px) scale(1.05);
    opacity: 0;
  }
}

/* Hero: mobile scoring-chips marquee. */
@keyframes lp-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* The marketing headline voice, shared with the blog: the landing's own
 * headings set this inline; the blog reaches it as a class through
 * `components/blog/fonts.ts`. !important because call sites carry per-size
 * inline font-weights from the Playfair era - the voice wins on purpose. */
.lp-headline {
  font-family: inherit;
  font-weight: 800 !important;
  letter-spacing: -0.01em;
}