/* Public Word Derby homepage; shared app and sign-in screens keep their styles. */
@font-face { font-family: "Font Awesome 7 Brands"; font-style: normal; font-weight: 400; font-display: block; src: url("/assets/fontawesome/webfonts/fa-brands-400-7e673860.woff2"); }
.marketing-page { container-type: inline-size; background: #fffdf7; overflow-x: clip; }
.marketing-page .site-header { z-index: 1; background: transparent; border: 0; }
.marketing-page .site-backdrop { display: none; }
.marketing-page .site-header__inner,
.marketing-page .site-main,
.marketing-page .site-footer { max-width: var(--site-max); padding-inline: 2rem; }
.marketing-page .site-header__inner { padding-block: 1.25rem; }
.marketing-page .brand__art { width: 11rem; max-width: 100%; aspect-ratio: 943 / 881; }
.marketing-page .site-main { padding-block: 2rem 3rem; }
.marketing-page .site-footer { max-width: 48rem; padding-block: 1.5rem 2rem; border-top: 1px solid var(--line); font-size: .95rem; text-align: center; }
.marketing-page .site-footer > p { margin: 0 0 .5rem; }
.marketing-page .site-footer .policy-links__link { color: var(--ink-soft); font-size: .9rem; font-weight: 400; }
.marketing-page .site-footer .policy-links__link:last-child { display: none; }
.marketing-page .site-footer .policy-links { justify-content: center; }

.marketing { min-width: 0; font-size: 1.3rem; line-height: 1.6; }
.marketing__nav { display: flex; align-items: center; gap: 2rem; font-size: 1.15rem; }
.marketing__nav a { display: inline-flex; align-items: center; min-height: 56px; color: #102c30; font-weight: 500; text-decoration: none; }
.marketing__nav .marketing__sign-in { min-height: 48px; padding-inline: 1.5rem; border-radius: .7rem; background: var(--paper); font-weight: 700; }
.marketing__nav a:hover { text-decoration: underline; }
.marketing-page a:focus-visible { outline: 3px solid var(--teal); outline-offset: 4px; }

.marketing__hero { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; gap: 1.25rem; margin-top: -2rem; padding: 1.1rem 0 2.5rem; }
.marketing__hero::before { content: ""; position: absolute; z-index: -1; top: -25rem; bottom: 0; left: 50%; width: 100cqw; transform: translateX(-50%); background: url("/assets/racetrack-hero-d5e14496.png") center bottom / cover no-repeat; pointer-events: none; }
.marketing__intro { width: 100%; text-align: center; color: #09292c; }
.marketing__title { margin: 0 0 .25rem; font-size: clamp(2.5rem, 4.5vw, 4.2rem); line-height: 1.12; letter-spacing: -.025em; text-shadow: 0 1px #ffffff78; }
.marketing__lede { margin-bottom: .65rem; color: #123438; font-size: clamp(1.2rem, 2.25vw, 1.8rem); }
.marketing__cta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .8rem 1rem; }
.marketing__cta > a { width: min(22rem, 100%); }
.marketing .button { min-height: 3.8rem; padding: .7rem 1.6rem; gap: .8rem; font-size: 1.4rem; white-space: nowrap; }
.marketing .button--primary { background: #17633e; border-color: #17633e; }
.marketing .button--primary:hover { background: var(--teal); }
.marketing__app-store { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 3.8rem; padding: .35rem 1rem; border-radius: .65rem; background: #111; color: white; text-decoration: none; font-size: 1.25rem; font-weight: 600; line-height: 1.05; }
.marketing__apple-icon { width: 1.75rem; font: 400 2.3rem/1 "Font Awesome 7 Brands"; }
.marketing__apple-icon::before { content: "\f179"; }
.marketing__app-store small { display: block; font-size: .72rem; font-weight: 400; }
.marketing__platform-note { margin: .35rem 0 0; color: #123438; font-size: 1rem; }
.marketing__platform-note a { color: var(--green-deep); }
.trial-board {
  --frame-pad: 3px;
  --frame-edge: 1px;
  --board-gap: 2px;
  min-width: 0;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(15rem, .8fr);
  grid-template-rows: auto 1fr;
  grid-template-areas: "score panel" "board panel";
  gap: .5rem 1.5rem;
  width: min(100%, 54rem);
  max-width: none;
  padding: 1rem;
  border: 1px solid #ffffffb8;
  border-radius: var(--radius-lg);
  background: #fffdf7f2;
  box-shadow: 0 1rem 3rem #200e3026;
  justify-self: center;
  scroll-margin-top: 1rem;
  font-size: 1.05rem;
  line-height: 1.5;
}
.trial-board__scoreboard { grid-area: score; }
.trial-board__panel { grid-area: panel; min-width: 0; align-self: center; display: flex; flex-direction: column; gap: .85rem; }
.trial-board__heading h2 { margin: 0; }
.trial-board__heading h2 { font-size: 1.5rem; }
.trial-board__feedback { grid-area: board; align-self: start; z-index: 9; pointer-events: none; min-width: 0; margin: .75rem .6rem; padding: .35rem .9rem; border-radius: 999px; font-size: 1.1rem; line-height: 1.4rem; text-align: center; }
.trial-board__feedback.is-error { padding: .5rem .9rem; border: 1px solid #d18e80; background: #fff0eb; color: #85291f; font-weight: 600; }
.trial-board > #game-state { grid-area: board; }
.trial-board > .board-region { grid-area: board; }
.trial-board .board-tools { display: none; }
.trial-board .square--reserved { pointer-events: none; }
.trial-board .board-scroll::after { content: ""; position: absolute; z-index: 2; inset: 0 0 auto; height: 26.667%; border-radius: 10px 10px 0 0; background: linear-gradient(#fffdf766, #fffdf700); backdrop-filter: blur(1.5px); mask-image: linear-gradient(#000, #0009 45%, transparent); pointer-events: none; }
.trial-board .board-region { margin-bottom: 1rem; }
.trial-board .move-score { pointer-events: none; }
.trial-board .button { min-height: 3.25rem; padding: .5rem .85rem; font-size: 1.1rem; white-space: normal; }
.trial-board__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin-top: 1rem; }
.trial-board__actions > :first-child { grid-column: 1 / -1; }
.trial-board__hint { margin: .5rem 0 0; text-align: center; }
.trial-board__hint button { min-height: 3.25rem; padding: .35rem; border: 0; background: transparent; color: var(--green-deep); font: inherit; text-decoration: underline; cursor: pointer; }
.trial-board__completion { padding: 1.25rem; border: 1px solid #a8d2bb; border-radius: var(--radius); background: var(--teal-soft); }
.marketing__benefits { width: 100%; max-width: var(--site-max); margin: 0 auto; aspect-ratio: 2172 / 440; overflow: hidden; }
.marketing__benefits-art { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.marketing__benefit-items { display: none; }
.trial-board__completion h3 { margin-bottom: .5rem; font-size: 1.4rem; }
.trial-board__completion > p { margin-bottom: .75rem; }
.trial-board__completion .button { width: 100%; }
.trial-board__completion .trial-board__note { margin-block: .75rem 0; color: var(--ink-soft); }
.trial-board__signup { display: block; }
.trial-board__signup .field { margin-block: 1rem; }
.trial-board__signup .input { min-width: 0; width: 100%; min-height: 3.5rem; font-size: 1.25rem; }
.trial-board__signup p { margin-block: .75rem; }
.trial-board__signup a { display: inline-flex; align-items: center; min-height: 3.5rem; color: var(--green-deep); }
.trial-board__signup [role="alert"] { color: var(--danger, #8b2020); }
.trial-board__email-sent { padding-top: .75rem; }
.trial-board__email-sent h4 { margin-top: 1rem; font-size: 1.75rem; line-height: 1.2; }

.marketing__heading { margin: 0 0 .65rem; font-size: 2rem; line-height: 1.2; }

.marketing__footer-platforms { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 1.25rem; margin-bottom: .25rem; }
.marketing__footer-platforms a { display: inline-flex; align-items: center; min-height: 44px; color: var(--green-deep); font-weight: 500; text-decoration: none; }
.marketing__footer-platforms a:hover { text-decoration: underline; }
.marketing__story { max-width: 44rem; margin: 2rem auto 0; padding: 2rem 0 0; border-top: 1px solid var(--line); scroll-margin-top: 2rem; }
.marketing__story p { max-width: 54rem; margin: .75rem 0 0; color: var(--ink-soft); }

@media (max-width: 900px) {
  .marketing__hero { gap: 1.25rem; }
}

@media (max-width: 650px) {
  .marketing-page .site-header__inner,
  .marketing-page .site-main,
  .marketing-page .site-footer { padding-inline: 1.25rem; }
  .marketing-page .site-header__inner { justify-content: center; gap: .25rem; }
  .marketing-page .brand { justify-content: center; width: 100%; }
  .marketing-page .brand__art { width: 9rem; }
  .marketing__hero { margin-top: -2rem; padding: 2rem 0; }
  .trial-board { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; grid-template-areas: "score" "board" "panel"; gap: .35rem; }
  .marketing__benefits { width: auto; margin-inline: 0; aspect-ratio: auto; padding-block: 2rem; }
  .marketing__benefits-art { display: none; }
  .marketing__benefit-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1rem; }
  .marketing__benefit-items > div { text-align: center; color: #164b31; }
  .marketing__benefit-items i { font-size: 2.5rem; margin-bottom: .75rem; }
  .marketing__benefit-items p { display: grid; gap: .35rem; margin: 0; line-height: 1.4; }
  .marketing__benefit-items strong { font-size: 1.1rem; }
  .marketing__benefit-items span { color: var(--ink-soft); font-size: .95rem; }
  .marketing__cta .button { width: 100%; }
  .marketing__title { font-size: clamp(2.5rem, 7vw, 3.5rem); }
  .marketing__story { margin-top: 1rem; padding-top: 1.5rem; }
}

.marketing__hero--guide { min-height: 23rem; justify-content: flex-start; padding-bottom: 6rem; }
.marketing__hero--guide::before { background-size: auto max(100%, 68rem); background-position: center top; }
.marketing__hero--guide .guide-toc { justify-content: center; max-width: 54rem; padding: 1rem 1.5rem; border: 1px solid #ffffffb8; border-radius: var(--radius-lg); background: #fffdf7f2; font-size: 1.05rem; }
.guide-marketing-page .information--guide { position: relative; max-width: 54rem; margin: -4rem auto 0; background: #fffdf7; }