/* Hallmark · macrostructure: Marquee Hero · genre: atmospheric · tone: electric marquee stage
 * theme: studied-DNA (source: user image) · anchor hue: magenta or red
 * display: Manrope 800 hero, DM Serif Display sections · body: Manrope
 * Original crown and CSS light beams replace reference photography.
 * Hallmark pre-emit critique: P4 H4 E4 S4 R4 V3.
 */
@import url("tokens.css");
@font-face {
  font-family: "DM Serif Display";
  src: url("fonts/dm-serif-display.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
body.t-marquee[data-variant="neon"] { --color-stage: oklch(43% 0.255 267); }
body.t-marquee[data-variant="navy-red"] {
  --color-paper: oklch(14% 0.035 260);
  --color-panel: oklch(20% 0.053 260);
  --color-panel-raised: oklch(25% 0.065 260);
  --color-muted: oklch(82% 0.022 260);
  --color-accent: oklch(67% 0.23 24);
  --color-link: oklch(80% 0.14 24);
  --color-accent-deep: oklch(43% 0.17 24);
  --color-stage: oklch(30% 0.115 263);
  --color-stage-deep: oklch(19% 0.065 263);
  --color-secondary: oklch(44% 0.15 262);
  --color-cool: oklch(92% 0.035 250);
  --color-line: oklch(47% 0.065 260 / 0.6);
  --color-glow: oklch(63% 0.23 24 / 0.3);
  --color-light-glow: oklch(95% 0.045 24 / 0.8);
  --color-spotlight: oklch(58% 0.21 24 / 0.75);
  --color-button-top: oklch(52% 0.21 24);
  --color-button-bottom: oklch(39% 0.15 24);
}
@font-face {
  font-family: "Manrope";
  src: url("fonts/manrope-400.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("fonts/manrope-600.woff2") format("woff2");
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("fonts/manrope-800.woff2") format("woff2");
  font-style: normal;
  font-weight: 800 900;
  font-display: swap;
}
html:has(body.t-marquee) { overflow-x: clip; }
body.t-marquee {
  --bg: var(--color-paper);
  --ink: var(--color-ink);
  --accent: var(--color-link);
  --muted: var(--color-muted);
  --line: var(--color-line);
  --card: var(--color-panel);
  overflow-x: clip;
  background: var(--bg);
  color: var(--ink);
  font: 400 var(--text-body)/1.7 var(--font-body);
  -webkit-font-smoothing: antialiased;
}
.t-marquee *, .t-marquee *::before, .t-marquee *::after { box-sizing: border-box; }
.t-marquee .wrap {
  max-width: 1440px;
  width: 100%;
  padding-inline: var(--space-gutter);
  min-width: 0;
}
.t-marquee a { color: var(--color-link); text-underline-offset: 0.22em; }
.t-marquee a:hover { text-decoration-thickness: 2px; }
.t-marquee :focus-visible { outline: 3px solid var(--color-focus); outline-offset: 5px; }
.t-marquee ::selection { color: var(--color-paper); background: var(--color-link); }
.t-marquee header {
  position: relative;
  z-index: 1;
  color: var(--color-white);
  background: linear-gradient(120deg, var(--color-stage), var(--color-stage-deep) 58%, var(--color-paper));
  border: 0;
}
.t-marquee header .wrap {
  gap: var(--space-xs) var(--space-xl);
  padding-block: var(--space-sm);
}
.t-marquee .brand {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  font: 800 1.125rem/1.15 var(--font-body);
  letter-spacing: 0.045em;
  text-transform: uppercase;
  color: var(--color-white);
}
.t-marquee .brand .word { color: var(--color-white); }
.t-marquee .brand .word > span { display: block; color: var(--color-white); }
.t-marquee .brand .mark {
  display: block;
  flex: 0 0 44px;
  height: 44px;
  background: linear-gradient(135deg, var(--color-cool) 24%, var(--color-accent) 58%, var(--color-cool) 90%);
  mask: url("crown.svg") center / contain no-repeat;
}
.t-marquee nav {
  gap: var(--space-xs) var(--space-md);
  width: 100%;
}
.t-marquee[data-variant="neon"] nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-sm); }
.t-marquee nav a {
  display: flex;
  align-items: center;
  min-height: 32px;
  color: var(--color-white);
  font: 600 0.75rem/1.3 var(--font-body);
  white-space: nowrap;
  border-bottom: 2px solid var(--color-clear);
  width: fit-content;
}
.t-marquee nav a[aria-current="page"] { color: var(--color-white); border-color: var(--color-accent); }
.t-marquee nav a:hover { border-color: var(--color-cool); }
.t-marquee .hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  color: var(--color-white);
  background: linear-gradient(120deg, var(--color-stage) 0%, var(--color-stage-deep) 58%, var(--color-paper) 100%);
  padding-block: var(--space-md) 72px;
}
.t-marquee .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(139deg, var(--color-clear) 55%, var(--color-spotlight) 55.1%, var(--color-light-glow) 55.3%, var(--color-spotlight) 62%, var(--color-clear) 78%),
    radial-gradient(ellipse at 90% 65%, var(--color-glow), var(--color-clear) 55%);
  mask-image: linear-gradient(to bottom, var(--color-clear) 52%, var(--color-white) 75%);
}
.t-marquee .hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 100px;
  z-index: -1;
  background: linear-gradient(0deg, var(--color-paper), var(--color-clear));
}
.t-marquee .hero .wrap { position: relative; }
.t-marquee h1, .t-marquee h2, .t-marquee h3, .t-marquee h4 {
  min-width: 0;
  overflow-wrap: anywhere;
  font-style: normal;
}
.t-marquee .hero h1 {
  margin: 0 0 var(--space-md);
  max-width: 12ch;
  font: 800 var(--text-display)/1.04 var(--font-body);
  letter-spacing: -0.065em;
  text-wrap: balance;
}
.t-marquee .hero .lede {
  max-width: 52ch;
  color: var(--color-white);
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  line-height: 1.6;
}
.t-marquee .hero .lede p { margin: 0; }
.t-marquee .hero .note { color: var(--color-muted); margin: 0 0 var(--space-sm); }
.t-marquee .hero .wrap::before {
  content: "";
  display: block;
  margin-top: var(--space-lg);
  height: 240px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  background:
    radial-gradient(circle at 50% 50%, var(--color-glow), var(--color-clear) 62%),
    radial-gradient(circle at 50% 50%, var(--color-clear) 38%, var(--color-accent) 38.3%, var(--color-clear) 38.8%, var(--color-clear) 46%, var(--color-line) 46.4%, var(--color-clear) 46.9%),
    linear-gradient(150deg, var(--color-panel-raised), var(--color-paper));
  box-shadow: 0 0 44px var(--color-glow), inset 0 1px 0 var(--color-line);
}
.t-marquee .hero .wrap::after {
  content: "";
  position: absolute;
  inset: auto var(--space-gutter) 0;
  height: 240px;
  background: linear-gradient(145deg, var(--color-cool), var(--color-accent) 65%);
  mask: url("crown.svg") center / 43% auto no-repeat;
}
.t-marquee .hero .wrap { display: flex; flex-direction: column; }
.t-marquee .hero .wrap::before { order: 1; }
.t-marquee main.wrap {
  position: relative;
  padding-block: 0 var(--space-section);
}
.t-marquee main > .tw:first-child {
  margin-top: -40px;
  border-color: var(--color-accent);
  box-shadow: 0 0 28px var(--color-glow);
}
.t-marquee main > h2 {
  font: 400 var(--text-heading)/1.12 var(--font-display);
  letter-spacing: -0.035em;
  margin: var(--space-section) 0 var(--space-md);
  max-width: 30ch;
}
.t-marquee main > h2::before {
  content: "";
  display: block;
  height: 3px;
  width: 32px;
  background: var(--color-accent);
  box-shadow: 0 0 12px var(--color-glow);
  margin-bottom: var(--space-sm);
}
.t-marquee main > p, .t-marquee main > ul, .t-marquee main > ol { max-width: 76ch; }
.t-marquee main > p { color: var(--color-muted); margin-block: var(--space-sm); }
.t-marquee h3 { font: 800 1.125rem/1.3 var(--font-body); }
.t-marquee h4 { font-family: var(--font-body); }
.t-marquee .cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--space-md); }
.t-marquee .card {
  min-width: 0;
  padding: var(--space-lg);
  margin: 0;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  background: var(--color-panel);
  box-shadow: inset 0 1px 0 var(--color-line), 0 8px 28px var(--color-shadow);
}
.t-marquee .card h3 { color: var(--color-white); }
.t-marquee .card p { color: var(--color-muted); }
.t-marquee .tw {
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-color: var(--color-accent) var(--color-panel);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  background: var(--color-panel);
  margin-block: var(--space-lg);
}
.t-marquee .tw table {
  width: 100%;
  max-width: none;
  padding: 0;
  margin: 0;
  border-collapse: collapse;
  font: 400 var(--text-small)/1.6 var(--font-body);
  font-variant-numeric: tabular-nums;
}
.t-marquee .tw table.wrap { min-width: min(640px, 100%); }
.t-marquee .tw table:not(.wrap) { min-width: 720px; }
.t-marquee th, .t-marquee td { padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--color-line); }
.t-marquee thead { background: var(--color-panel-raised); color: var(--color-white); }
.t-marquee thead th { font-size: var(--text-small); font-weight: 800; }
.t-marquee tbody th { color: var(--color-white); font-weight: 600; }
.t-marquee tbody td { color: var(--color-muted); }
.t-marquee tbody tr:last-child > * { border-bottom: 0; }
.t-marquee caption { background: var(--color-panel); color: var(--color-muted); padding: var(--space-sm) var(--space-md); font-size: 0.8125rem; border-top: 1px solid var(--color-line); }
.t-marquee details { border-bottom: 1px solid var(--color-line); padding: 0; }
.t-marquee summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  list-style: none;
  min-height: 72px;
  padding-block: var(--space-md);
  color: var(--color-white);
  font: 600 var(--text-small)/1.6 var(--font-body);
}
.t-marquee summary::-webkit-details-marker { display: none; }
.t-marquee summary::after { content: "+"; color: var(--color-link); font-size: 1.5rem; flex-shrink: 0; }
.t-marquee details[open] summary::after { content: "−"; }
.t-marquee details[open] summary { color: var(--color-link); }
.t-marquee details p { max-width: 76ch; margin: 0 0 var(--space-md); color: var(--color-muted); }
.t-marquee .note { color: var(--color-muted); font: 400 var(--text-small)/1.6 var(--font-body); }
.t-marquee .cta {
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-lg);
  margin-block: var(--space-section) 0;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-card);
  color: var(--color-white);
  background: linear-gradient(130deg, var(--color-stage-deep), var(--color-panel-raised));
  box-shadow: inset 0 1px 0 var(--color-line), 0 0 32px var(--color-glow);
  font: 400 var(--text-small)/1.6 var(--font-body);
}
.t-marquee .cta > span { flex: 1 1 24rem; max-width: 58ch; }
.t-marquee a.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  max-width: 100%;
  min-height: 52px;
  padding: 12px 24px;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-button);
  color: var(--color-white);
  background: linear-gradient(155deg, var(--color-button-top), var(--color-button-bottom));
  box-shadow: inset 0 2px 3px var(--color-light-glow), 0 5px 22px var(--color-glow);
  font: 800 0.8125rem/1.3 var(--font-body);
  white-space: nowrap;
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-out);
}
.t-marquee a.btn::after { content: "→"; font-size: 1.25rem; font-weight: 400; }
.t-marquee a.btn:hover { transform: translateY(-2px); }
.t-marquee a.btn:active { transform: translateY(1px); }
.t-marquee a.btn[aria-disabled="true"] { opacity: 0.6; pointer-events: none; }
.t-marquee audio { max-width: 100%; color-scheme: dark; }
.t-marquee .video { max-width: 100%; overflow: clip; border-radius: var(--radius-card); border: 1px solid var(--color-line); }
.t-marquee footer {
  border-top: 1px solid var(--color-line);
  color: var(--color-muted);
  background: var(--color-stage-deep);
  padding-block: var(--space-xl);
  font: 400 var(--text-small)/1.8 var(--font-body);
}
.t-marquee footer strong { color: var(--color-white); }
.t-marquee footer p { max-width: 110ch; margin-block: 0 var(--space-sm); }
@media (min-width: 48rem) {
  .t-marquee nav, .t-marquee[data-variant="neon"] nav { display: flex; width: auto; gap: var(--space-md); }
  .t-marquee nav a { min-height: 40px; font-size: 0.8125rem; }
  .t-marquee header .wrap { min-height: 104px; }
  .t-marquee .hero { padding-block: 48px 100px; min-height: 550px; }
  .t-marquee .hero::before { mask-image: linear-gradient(90deg, var(--color-clear) 55%, var(--color-white) 80%); }
  .t-marquee .hero h1 { max-width: 13ch; }
  .t-marquee header:has(a[href="/enter-from-the-us/"][aria-current="page"]) + .hero h1 {
    font-size: clamp(2.375rem, 4.5vw, 4.125rem);
    max-width: 17ch;
  }
  .t-marquee .hero .lede { max-width: 53%; }
  .t-marquee .hero .wrap::before, .t-marquee .hero .wrap::after {
    position: absolute;
    width: 32%;
    height: 340px;
    margin: 0;
    inset: 36px var(--space-gutter) auto auto;
  }
  .t-marquee .hero .wrap::after { mask-size: 55% auto; }
  .t-marquee main > .tw:first-child { margin-top: -52px; }
  .t-marquee #faq { float: left; width: 34%; }
  .t-marquee #faq ~ details { margin-inline-start: 42%; }
  .t-marquee #faq + details { margin-top: var(--space-section); }
  .t-marquee .cta { clear: both; }
  .t-marquee th, .t-marquee td { padding: 20px 28px; }
}
@media (min-width: 64rem) {
  .t-marquee nav { gap: var(--space-lg); }
  .t-marquee .hero .wrap::before, .t-marquee .hero .wrap::after { width: 30%; height: 380px; right: 16%; }
}
@media (prefers-reduced-motion: reduce) {
  .t-marquee *, .t-marquee *::before, .t-marquee *::after { transition: none; animation: none; scroll-behavior: auto; }
}