/*!********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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/legal.css ***!
  \********************************************************************************************************************************************************************************************************************************************************************************/
/*
 * The two legal documents: /terms-of-service and /privacy-policy. One
 * stylesheet for both, imported by each page, so the pair cannot drift apart
 * the way two hand-styled copies of the same document would.
 *
 * Both pages are MDX, so - exactly as in `components/marketing/prose.css` -
 * everything is reached by tag selector: the author writes plain markdown and
 * never sees a className. Body typography comes from `.lp-prose`; this file
 * adds only the page frame and the document header, which each MDX file
 * carries as a `## TITLE` line followed by a "Last updated ..." line.
 */

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

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

/* The documents shout their headings in capitals; the rest of the site does
 * not. Lower-casing and then re-capitalising the first letter turns
 * "PRIVACY POLICY" into the house voice without touching the legal text.
 *
 * It reads every heading as prose, so an acronym would come out as "Gdpr".
 * The three headings these documents have today contain none; a new heading
 * that does needs its own casing rather than this rule. */
.lp-legal h2,
.lp-legal h3 {
  text-transform: lowercase;
  color: var(--lp-ink);
  font-weight: 800;
  letter-spacing: -0.01em;
}

.lp-legal h2::first-letter,
.lp-legal h3::first-letter {
  text-transform: uppercase;
}

.lp-legal h2 {
  font-size: 34px;
  line-height: 1.15;
  margin: 0 0 10px;
}

.lp-legal h3 {
  font-size: 21px;
  line-height: 1.3;
  margin: 34px 0 10px;
}

@media (max-width: 480px) {
  .lp-legal h2 {
    font-size: 27px;
  }
}

/* The "Last updated ..." line: in both documents it is the first paragraph,
 * directly under the title, and it reads as a date stamp rather than as the
 * opening of the text. It doubles as the rule under the page header. */
.lp-legal .lp-prose > p:first-of-type {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--lp-muted-2);
  margin: 0 0 30px;
  padding: 0 0 22px;
  border-bottom: 1px solid var(--lp-border-warm);
}

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