

.land {
  --land-max: 90rem;
  --land-pad: max(var(--page-gutter), calc((100% - var(--land-max)) / 2));
  --land-gap: clamp(4.5rem, 8vw, 7.5rem);
  --land-big: clamp(1.75rem, 2.7vw, 2.5rem);
  --land-lead: clamp(1.1875rem, 1.5vw, 1.375rem);
  --land-read: 1.0625rem;
  --land-note: 0.8125rem;
  
  --land-seam: calc(var(--land-pad) + (100% - 2 * var(--land-pad) - var(--step-6)) * 0.64 + var(--step-6) / 2);
  --land-line: color-mix(in oklab, var(--brand-obsidian) 60%, transparent);
  position: relative;
  isolation: isolate;
  display: block;
  padding: 0;
  color: var(--ink-1);
  font-size: var(--land-read);
  line-height: 1.5;
}
.land-hero, .land > section, .land-marks { padding-inline: var(--land-pad); }


.land-monument {
  position: relative;
  overflow: hidden;
  aspect-ratio: 756 / 84;
  margin-bottom: var(--step-6);
}
.land-monument-img { display: block; width: 110.58%; max-width: none; height: auto; margin: -8.73% 0 0 -5.29%; }



.land-hero {
  position: relative;
  padding-block: var(--step-5) var(--land-gap);
  background:
    linear-gradient(to bottom, transparent calc(100% - var(--step-8)), var(--surface-ground)),
    var(--rift-field) right center / cover no-repeat;
}
.land-hero-body { display: grid; grid-template-columns: minmax(0, 64fr) minmax(0, 36fr); column-gap: var(--step-6); align-items: start; }
.land-hero:not(.has-shots) .land-hero-body { grid-template-columns: minmax(0, 1fr); }
.land-hero-text { grid-column: 2; grid-row: 1; display: grid; gap: var(--step-4); align-content: start; }
.land-hero:not(.has-shots) .land-hero-text { grid-column: 1; max-width: 40rem; }
.land-shot-hero { grid-column: 1; grid-row: 1; margin: 0; position: relative; z-index: 1; }
.land-hero-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 3.3vw, 3rem); line-height: 1.05; letter-spacing: var(--track-display); margin: 0; }
.land-hero-lead { margin: 0; font-size: var(--land-lead); line-height: 1.4; }

.land-badge { margin: 0; font-weight: 600; }
.land-mission { margin: 0; max-width: 52ch; line-height: 1.4; color: var(--ink-2); }
.land-mission-block { display: grid; gap: var(--step-3); padding-inline: var(--land-pad); padding-block-start: var(--step-6); max-width: calc(60ch + 2 * var(--land-pad)); }
.land-mission-body { margin: 0; line-height: 1.5; }


.land-start { display: grid; gap: var(--step-3); margin-top: var(--step-2); }
.land-buttons { display: flex; flex-wrap: wrap; gap: var(--step-3); }
.land-buttons .ui-btn { flex: 1 1 14rem; }
.land-signup, .land-hint { margin: 0; color: var(--ink-1); font-size: var(--land-note); line-height: 1.5; }
.land-signup { font-size: var(--land-read); font-weight: 600; }
.land-hint { color: var(--ink-2); }
.land-hint a, .land-link, .land-discord { color: var(--ink-1); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
@media (hover: hover) { .land-hint a:hover, .land-link:hover, .land-discord:hover { text-decoration-thickness: 3px; } }
.land-link { display: inline-flex; align-items: center; min-height: var(--touch); font-size: var(--land-read); }


.land-shot { display: block; width: 100%; height: auto; border-radius: 0; background: var(--surface-well); }


.land-section { position: relative; padding-block: var(--land-gap); display: grid; grid-template-columns: minmax(0, 36fr) minmax(0, 64fr); column-gap: var(--step-6); align-items: start; }
.land-sec-text { display: grid; gap: var(--step-4); align-content: start; min-width: 0; }
.land-h2-head { font-family: var(--font-display); font-weight: 500; font-size: var(--land-big); line-height: 1.1; letter-spacing: var(--track-display); margin: 0; }
.land-sec-lead { margin: 0; font-size: var(--land-lead); line-height: 1.4; max-width: 60ch; }
.land-points { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--step-3); max-width: 60ch; line-height: 1.5; }
.land-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--step-4); }
.land-sec-shot { margin: 0; min-width: 0; position: relative; z-index: 1; }
.land-marks { margin: 0; padding-block: var(--step-6); font-size: var(--land-note); color: var(--ink-2); }
.land-pt .land-sec-lead { color: var(--ink-1); }


.land-compare { display: grid; gap: var(--step-4); position: relative; z-index: 1; }
.land-compare-switch { display: flex; flex-wrap: wrap; gap: var(--step-3); }
.land-compare-switch .ui-btn { min-height: var(--touch); }
.land-compare-switch .ui-btn[aria-pressed="true"] { background: var(--ink-1); border-color: var(--ink-1); color: var(--surface-ground); font-weight: 600; }
.land-compare-shot[hidden] { display: none; }


.land-faq-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--step-5) var(--step-6); position: relative; z-index: 1; background: var(--surface-1); padding: var(--step-5); }
.land-q { margin: 0 0 var(--step-2); font-size: var(--land-read); font-weight: 600; line-height: 1.35; }
.land-a { margin: 0; color: var(--ink-1); max-width: 60ch; }


.land-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--step-4); font-size: var(--land-lead); line-height: 1.3; max-width: 40ch; }
.land-how .land-monument { grid-column: 1 / -1; margin-bottom: var(--step-6); }
.land-how-doors { display: grid; gap: var(--step-3); align-content: start; }
.land-how-more { display: grid; gap: var(--step-3); align-content: start; }
.land-how-more .land-links .ui-btn { min-height: var(--touch); }


.land-spark { display: none; }


@media (min-width: 1024px) {
  .land-hero::before, .land-section::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 var(--land-seam);
    width: 1px;
    background: var(--land-line);
  }
  
  .land-how::before { display: none; }
  .land-how .land-monument::after { content: ""; position: absolute; inset: 0 auto 0 calc((100% - var(--step-6)) * 0.64 + var(--step-6) / 2); width: 1px; background: var(--land-line); }
  .land-spark {
    display: block;
    position: absolute;
    inset: 50% auto auto var(--land-seam);
    width: 2px;
    height: 5rem;
    margin: -2.5rem 0 0 -0.5px;
    background: linear-gradient(to bottom, transparent, var(--rift-light), transparent);
    pointer-events: none;
    z-index: 0;
  }

  .land-section { grid-template-columns: minmax(0, 64fr) minmax(0, 36fr); }

  
  .land-rules .land-sec-text, .land-oracle .land-sec-text, .land-faq .land-sec-text, .land-play .land-sec-text, .land-how .land-sec-text { display: contents; }
  .land-rules .land-h2-head, .land-oracle .land-h2-head, .land-faq .land-h2-head, .land-play .land-h2-head { grid-column: 1; grid-row: 1 / span 3; }
  .land-rules .land-sec-lead, .land-oracle .land-sec-lead, .land-play .land-sec-lead { grid-column: 2; grid-row: 1; }
  .land-rules .land-sec-lead, .land-oracle .land-sec-lead { font-size: clamp(1.375rem, 2.1vw, 1.875rem); line-height: 1.3; }
  .land-rules .land-points, .land-play .land-points { grid-column: 2; grid-row: 2; margin-top: var(--step-3); }
  .land-rules .land-links, .land-play .land-links { grid-column: 2; grid-row: 3; margin-top: var(--step-3); }

  
  .land-play .land-sec-shot { grid-column: 1 / -1; grid-row: 4; margin-top: var(--step-7); padding: var(--step-5); background: var(--surface-1); }

  
  .land-faq .land-faq-list { grid-column: 1 / -1; grid-row: 2; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--step-6); padding: var(--step-6); }

  
  .land-events .land-sec-shot, .land-decks .land-sec-shot, .land-pt .land-compare { grid-column: 1; grid-row: 1; }
  .land-events .land-sec-text, .land-decks .land-sec-text, .land-pt .land-sec-text { grid-column: 2; grid-row: 1; }

  
  .land-ai, .land-learn { grid-template-columns: minmax(0, 36fr) minmax(0, 64fr); }
  .land-ai .land-sec-text, .land-learn .land-sec-text { grid-column: 1; grid-row: 1; }
  .land-ai .land-sec-shot, .land-learn .land-sec-shot { grid-column: 2; grid-row: 1; }

  
  .land-how { row-gap: var(--step-4); }
  .land-how .land-h2-head { grid-column: 1; grid-row: 2; }
  .land-how .land-steps { grid-column: 1; grid-row: 3; }
  .land-how .land-how-doors { grid-column: 2; grid-row: 2 / span 2; align-self: center; }
  .land-how .land-how-more { grid-column: 2; grid-row: 4; margin-top: var(--step-4); }
}


@media (max-width: 1023px) {
  .land-section, .land-hero-body { grid-template-columns: minmax(0, 1fr); row-gap: var(--step-5); }
  .land-hero-text, .land-shot-hero { grid-column: 1; }
  .land-shot-hero { grid-row: 2; }
  .land-play .land-sec-shot { padding: var(--step-3); background: var(--surface-1); }
  .land-faq .land-faq-list { padding: var(--step-4); }
  .land-section::before, .land-section::after {
    content: "";
    position: absolute;
    top: 0;
    left: var(--land-pad);
    height: 1px;
  }
  .land-section::before { right: var(--land-pad); background: var(--land-line); }
  
  .land-section::after { width: 4rem; background: linear-gradient(to right, transparent, var(--rift-light), transparent); transform: translateX(calc((100vw - 2 * var(--land-pad)) / 2 - 2rem)); }
}

@media (max-width: 599px) {
  .land { --land-gap: 3.5rem; --land-pad: 16px; }
  .land-monument { margin-bottom: var(--step-5); }
  .land-hero-title { font-size: clamp(2rem, 9vw, 2.5rem); }
  .land-hero-lead, .land-oracle .land-sec-lead, .land-rules .land-sec-lead { font-size: var(--land-lead); }
  .land-buttons .ui-btn { min-height: 44px; width: 100%; flex-basis: 100%; }
  .land-links .ui-btn, .land-how-doors .ui-btn { min-height: 44px; }
  .land-shot-hero picture.has-phone img, .land-sec-shot picture.has-phone img { max-width: 20rem; margin: 0 auto; }
  .land-play .land-sec-shot { padding: var(--step-2); }
  .land-steps { font-size: var(--land-lead); }
}



@keyframes land-rise {
  from { transform: translateY(1.75rem); }
  to { transform: none; }
}
@keyframes land-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes land-spark-down {
  from { transform: translateY(0); }
  to { transform: translateY(calc(100vh - 5rem)); }
}
@keyframes land-spark-across {
  from { transform: translateX(0); }
  to { transform: translateX(calc(100vw - 2 * var(--land-pad) - 4rem)); }
}
.land-hero-title, .land-hero-lead, .land-badge, .land-start, .land-shot-hero { animation: land-rise var(--motion-5) var(--ease-standard) both; }
.land-hero-title { animation-delay: var(--stagger); }
.land-hero-lead { animation-delay: calc(var(--stagger) * 2); }
.land-badge { animation-delay: calc(var(--stagger) * 3); }
.land-start { animation-delay: calc(var(--stagger) * 4); }
.land-shot-hero { animation-delay: calc(var(--stagger) * 2); }
.land-compare-shot:not([hidden]) { animation: land-fade var(--motion-3) var(--ease-standard) both; }
@supports (animation-timeline: view()) {
  .land-rise { animation: land-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 38%; }
  .land-h2-head.land-rise { animation-range: entry 0% entry 34%; }
  .land-sec-lead.land-rise { animation-range: entry 6% entry 42%; }
  .land-points.land-rise { animation-range: entry 12% entry 48%; }
  .land-links.land-rise { animation-range: entry 18% entry 54%; }
  
  @media (min-width: 1024px) {
    .land-spark { position: fixed; inset: 0 auto auto var(--land-seam); margin: 0 0 0 -0.5px; animation: land-spark-down linear both; animation-timeline: scroll(root); }
  }
  @media (max-width: 1023px) {
    .land-section::after { animation: land-spark-across linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
  }
}
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) :is(.land-hero-title, .land-hero-lead, .land-badge, .land-start, .land-shot-hero, .land-rise, .land-compare-shot) { animation: none; }
  :root:not([data-motion="full"]) .land-section::after { animation: none; }
  :root:not([data-motion="full"]) .land-spark { animation: none; position: absolute; inset: 50% auto auto var(--land-seam); margin: -2.5rem 0 0 -0.5px; }
}
:root[data-motion="reduce"] :is(.land-hero-title, .land-hero-lead, .land-badge, .land-start, .land-shot-hero, .land-rise, .land-compare-shot) { animation: none; }
:root[data-motion="reduce"] .land-section::after { animation: none; }
:root[data-motion="reduce"] .land-spark { animation: none; position: absolute; inset: 50% auto auto var(--land-seam); margin: -2.5rem 0 0 -0.5px; }
