/* Sea Monkeys VR — palette sampled from the game's store art */
:root {
  --sky-top: #1747B8;
  --sky: #2E6FDB;
  --sky-low: #8CC0F4;
  --lagoon: #22B4D6;
  --shallow: #0E7FA6;
  --mid: #0A5A8E;
  --deep: #083B70;
  --abyss: #05214A;
  --ink: #062A5A;
  --parchment: #F6E7C6;
  --parchment-hi: #FFF8E8;
  --parchment-edge: #CDB27E;
  --wood: #7A4520;
  --wood-dark: #5A3015;
  --red: #D3262E;
  --red-dark: #8E1218;
  --gold: #F5C542;
  --sand: #E9C98B;
  --white: #FFFFFF;

  --font-display: 'Luckiest Guy', 'Baloo 2', system-ui, sans-serif;
  --font-body: 'Baloo 2', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --wrap: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--white);
  background: var(--abyss);
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0 0 1em; }
.defs { position: absolute; }
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 50;
  background: var(--gold); color: var(--ink); padding: 8px 14px; border-radius: 10px; font-weight: 700;
}
.skip:focus { top: 12px; }

:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 6px; }

h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.4rem, 5.2vw, 4rem);
  line-height: 1;
  letter-spacing: .01em;
  margin: 0 0 .45em;
  text-shadow: 0 4px 0 rgba(3, 18, 44, .45);
}
h3 { font-weight: 800; font-size: 1.3rem; line-height: 1.25; margin: 0 0 .25em; }

/* ---------- Buttons: chunky, game-UI style ---------- */
.btn {
  --edge: var(--red-dark);
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font: 800 1.15rem/1 var(--font-body);
  padding: 1rem 1.6rem .9rem;
  border-radius: 14px;
  border: 0;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 6px 0 var(--edge), 0 10px 18px rgba(3, 18, 44, .25);
  transition: transform .08s ease, box-shadow .08s ease, filter .15s;
}
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--edge), 0 4px 8px rgba(3, 18, 44, .25); }
.btn-red { background: var(--red); color: var(--white); }
.btn-white { --edge: #8FC3DA; background: var(--white); color: var(--ink); }
.btn-small { font-size: 1rem; padding: .7rem 1.1rem .6rem; border-radius: 11px; box-shadow: 0 4px 0 var(--edge); }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .7; cursor: progress; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(ellipse 46% 40% at 50% 38%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, var(--sky-top) 0%, var(--sky) 48%, var(--sky-low) 100%);
  overflow: hidden;
}
.sky-art { position: absolute; top: 0; left: 50%; width: max(100%, 1000px); height: auto; transform: translateX(-50%); z-index: -1; }

.nav { display: flex; align-items: center; gap: 1.5rem; padding-top: 18px; padding-bottom: 8px; position: relative; z-index: 3; }
.brand {
  font-family: var(--font-display); font-size: 1.6rem; line-height: 1; text-decoration: none;
  color: var(--white); text-shadow: 0 3px 0 #000;
  margin-right: auto;
}
.nav-links { display: flex; gap: 1.6rem; list-style: none; margin: 0; padding: 0; }
.nav-links a { font-weight: 700; text-decoration: none; text-shadow: 0 2px 0 rgba(3, 18, 44, .35); }
.nav-links a[aria-current="page"], .nav-links a:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; text-decoration-color: var(--gold); }

.ship-wrap { margin: 0 auto; font-size: inherit; position: relative; z-index: 1;
  width: min(90vw, 520px, calc((100svh - 330px) * 600 / 560));
  min-width: 280px;
}
.ship { width: 100%; height: auto; transform-origin: 50% 92%; animation: bob 6s ease-in-out infinite; }
.ship .flag { transform-box: fill-box; transform-origin: 0 50%; animation: flutter 1.6s ease-in-out infinite; }

.sea {
  position: relative; z-index: 2;
  margin-top: clamp(-150px, -16vw, -96px);
  background: linear-gradient(180deg, rgba(34, 180, 214, 0) 0, rgba(34, 180, 214, 0) 150px, var(--lagoon) 150px, var(--lagoon) 220px, #1497C5 75%, var(--shallow) 100%);
}
.waves { width: 100%; height: 220px; display: block; }
.wave path { will-change: transform; }
.wave-1 path { animation: drift 9s linear infinite; }
.wave-2 path { animation: drift 7s linear infinite reverse; }
.wave-3 path { animation: drift 11s linear infinite; }
.sea-copy { text-align: center; padding-top: 4px; padding-bottom: clamp(56px, 8vw, 96px); margin-top: -8px; }
.tagline {
  font-weight: 800; color: var(--ink);
  font-size: clamp(1.35rem, 2.6vw, 1.85rem); line-height: 1.2;
  max-width: 26ch; margin: 0 auto .35em;
}
.beta-note { color: var(--ink); font-weight: 600; margin-bottom: 1.6rem; }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px 18px; justify-content: center; }

@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(-1.4deg); }
  50% { transform: translateY(7px) rotate(1.4deg); }
}
@keyframes flutter {
  0%, 100% { transform: skewY(0deg) scaleX(1); }
  50% { transform: skewY(-4deg) scaleX(.96); }
}
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(240px); } }

/* ---------- Depth bands ---------- */
.band { position: relative; padding-block: clamp(64px, 9vw, 120px); }
.band-shallow { background: linear-gradient(180deg, var(--shallow), #0C6C9C); }
.band-mid { background: linear-gradient(180deg, #0C6C9C, var(--mid) 60%, var(--deep)); }
.band-deep { background: linear-gradient(180deg, var(--deep), var(--abyss) 85%); }
.band-shallow::before {
  /* light shafts from the surface */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(100deg, transparent 18%, rgba(255, 255, 255, .07) 22%, transparent 30%),
    linear-gradient(80deg, transparent 58%, rgba(255, 255, 255, .06) 63%, transparent 71%);
}

/* Features */
.feature-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.feature-intro { position: sticky; top: 32px; }
.feature-intro p { font-size: 1.25rem; max-width: 34ch; }
.feature-list { list-style: none; margin: 0; padding: 0; }
.feature-list li {
  display: grid; grid-template-columns: 72px 1fr; gap: 22px; align-items: center;
  padding: 22px 0;
  border-top: 2px dashed rgba(255, 255, 255, .22);
}
.feature-list li:last-child { border-bottom: 2px dashed rgba(255, 255, 255, .22); }
.feature-list svg { width: 72px; height: 72px; filter: drop-shadow(0 4px 0 rgba(3, 18, 44, .3)); }
.feature-list p { margin: 0; color: #DDF3FA; max-width: 52ch; }

/* Playtests */
.playtest-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.playtest-grid > div:first-child p { max-width: 36ch; font-size: 1.2rem; }
.pt-board {
  background: rgba(5, 33, 74, .5);
  border: 3px solid rgba(255, 255, 255, .14);
  border-radius: 22px;
  padding: clamp(20px, 3.5vw, 36px);
}
.pt-status { display: flex; align-items: center; gap: 14px; font-weight: 800; font-size: clamp(1.3rem, 2.4vw, 1.7rem); line-height: 1.2; margin-bottom: 1.2rem; }
.lantern { flex: none; width: 18px; height: 18px; border-radius: 50%; background: #7C93AE; box-shadow: 0 0 0 5px rgba(124, 147, 174, .2); }
.pt-board.is-live .lantern { background: var(--gold); box-shadow: 0 0 0 6px rgba(245, 197, 66, .25), 0 0 22px 4px rgba(245, 197, 66, .6); animation: glow 2s ease-in-out infinite; }
@keyframes glow { 50% { box-shadow: 0 0 0 9px rgba(245, 197, 66, .12), 0 0 30px 8px rgba(245, 197, 66, .45); } }
.pt-track { position: relative; height: 46px; border-radius: 12px; background: rgba(255, 255, 255, .1); overflow: visible; }
.pt-win { position: absolute; top: 0; bottom: 0; border-radius: 10px; background: var(--gold); box-shadow: inset 0 -5px 0 rgba(122, 69, 32, .35); }
.pt-now { position: absolute; top: -10px; bottom: -10px; width: 4px; margin-left: -2px; background: var(--red); border-radius: 2px; box-shadow: 0 0 0 2px var(--abyss); }
.pt-now span { position: absolute; top: -26px; left: 50%; transform: translateX(-50%); font-size: .8rem; font-weight: 800; background: var(--red); padding: 0 8px; border-radius: 6px; white-space: nowrap; }
.pt-ticks { display: flex; justify-content: space-between; margin-top: 12px; font-size: .85rem; color: #B9D6EA; }
.pt-tz { font-size: .85rem; color: #B9D6EA; margin: 2px 0 1.2rem; }
.pt-windows { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pt-windows li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding: 12px 16px; border-radius: 12px; background: rgba(255, 255, 255, .07); }
.pt-windows strong { font-weight: 800; }
.pt-windows span { color: #CFE6F5; }

/* Gallery (shown once screenshots exist in /img) */
.shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.shots img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 16px; border: 4px solid var(--parchment); box-shadow: 0 8px 0 rgba(3, 18, 44, .35); }

/* ---------- Support ---------- */
.support-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  grid-template-areas: "intro letter" "faq letter";
  grid-template-rows: auto 1fr;
  gap: 28px clamp(32px, 6vw, 88px);
}
.support-intro { grid-area: intro; }
.support-intro p { font-size: 1.2rem; max-width: 34ch; }
.letter { grid-area: letter; align-self: start; }
.faq { grid-area: faq; }

.letter {
  position: relative;
  background: var(--parchment);
  color: var(--ink);
  border-radius: 20px;
  padding: clamp(22px, 3.6vw, 40px);
  box-shadow: 0 0 0 6px var(--wood), 0 0 0 9px var(--wood-dark), 0 22px 40px rgba(0, 0, 0, .35);
}
.ticket-form { display: grid; gap: 18px; }
.field { margin: 0; padding: 0; border: 0; min-width: 0; }
.field label, .field legend { display: block; font-weight: 800; margin-bottom: 6px; padding: 0; }
.opt { font-weight: 500; color: #5B6E86; font-size: .95rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
input[type="text"], input[type="email"], input[type="password"], select, textarea {
  width: 100%;
  font: 500 1.05rem/1.4 var(--font-body);
  color: var(--ink);
  background: var(--parchment-hi);
  border: 2px solid var(--parchment-edge);
  border-radius: 12px;
  padding: 11px 14px 9px;
  transition: border-color .15s, box-shadow .15s;
}
textarea { resize: vertical; min-height: 140px; }
select { appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23062A5A' stroke-width='2.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
input::placeholder, textarea::placeholder { color: #9A8763; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px rgba(245, 197, 66, .7); }
.field.invalid input, .field.invalid textarea { border-color: #B0151C; }
.hint { font-size: .95rem; color: #4A5D75; margin: 6px 0 0; line-height: 1.45; }
.err { color: #B0151C; font-weight: 700; font-size: .95rem; margin: 6px 0 0; }
.err:empty { display: none; }
.form-error { margin: 0; color: #B0151C; font-weight: 700; }
.form-error:empty { display: none; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span {
  display: inline-block; font-weight: 700; font-size: 1rem;
  padding: 7px 14px 5px; border-radius: 999px;
  background: var(--parchment-hi); border: 2px solid var(--parchment-edge);
  transition: background .12s, border-color .12s, color .12s;
}
.chip:hover span { border-color: var(--wood); }
.chip input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--white); }
.chip input:focus-visible + span { outline: 3px solid var(--gold); outline-offset: 2px; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.sent { text-align: center; padding: 12px 0; }
.sent:focus { outline: none; }
.sent svg { width: 120px; margin: 0 auto 8px; }
.sent h3 { font-family: var(--font-display); font-weight: 400; font-size: 2rem; margin-bottom: .3em; }
.sent p { max-width: 36ch; margin: 0 auto 1.4rem; }
.sent .btn-white { --edge: var(--parchment-edge); }

.faq h3 { margin-bottom: .6rem; }
.faq details { border-top: 2px dashed rgba(255, 255, 255, .2); }
.faq details:last-child { border-bottom: 2px dashed rgba(255, 255, 255, .2); }
.faq summary {
  cursor: pointer; list-style: none; font-weight: 700; padding: 14px 36px 14px 0; position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 12px; height: 12px; margin-top: -8px;
  border-right: 3px solid var(--gold); border-bottom: 3px solid var(--gold); transform: rotate(45deg);
  transition: transform .2s;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq details p { color: #CFE0F0; margin: 0 0 16px; max-width: 56ch; }

/* ---------- Seabed footer ---------- */
.seabed { background: linear-gradient(180deg, var(--abyss) 0, var(--abyss) 120px, var(--sand) 120px); color: var(--ink); }
.seabed-art { width: 100%; height: 160px; }
.foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; padding-top: 8px; padding-bottom: 32px; margin-top: -2px; }
.foot-brand { font-family: var(--font-display); font-size: 1.5rem; margin: 0 auto 0 0; color: var(--wood-dark); }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 22px; list-style: none; margin: 0; padding: 0; font-weight: 700; }
.foot-links a { text-decoration-thickness: 2px; text-underline-offset: 4px; }
.foot-legal { width: 100%; margin: 0; font-size: .95rem; color: #5A4A2E; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .feature-grid, .playtest-grid { grid-template-columns: 1fr; }
  .feature-intro { position: static; }
  .support-grid { grid-template-columns: 1fr; grid-template-areas: "intro" "letter" "faq"; grid-template-rows: auto; }
}
@media (max-width: 640px) {
  body { font-size: 1.0625rem; }
  .nav-links li:not(:last-child) { display: none; }
  .nav-links a { background: var(--ink); padding: 7px 14px 5px; border-radius: 999px; text-shadow: none; box-shadow: 0 3px 0 #000; }
  .brand { font-size: 1.4rem; }
  .sea-copy { margin-top: -56px; }
  .nav { gap: 1rem; }
  .nav-cta { display: none; }
  .field-row { grid-template-columns: 1fr; }
  .feature-list li { grid-template-columns: 56px 1fr; gap: 16px; }
  .feature-list svg { width: 56px; height: 56px; }
  .cta-row .btn { width: 100%; max-width: 360px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ship, .ship .flag, .wave path, .pt-board.is-live .lantern { animation: none; }
}

/* ---------- Creators page ---------- */
.btn-discord { --edge: #3C45A5; background: #5865F2; color: var(--white); }
.cta-left { justify-content: flex-start; }

.creators-hero {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(32px, 6vw, 80px); align-items: center;
  padding-top: clamp(28px, 5vw, 64px); position: relative; z-index: 1;
}
.creators-copy h1 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: .98; letter-spacing: .01em;
  max-width: 13ch; margin: 0 0 .35em;
  text-shadow: 0 5px 0 rgba(3, 18, 44, .45);
}
.creators-lede { font-size: clamp(1.2rem, 2vw, 1.45rem); font-weight: 700; line-height: 1.35; max-width: 32ch; text-shadow: 0 2px 0 rgba(3, 18, 44, .3); margin-bottom: 1.4rem; }
.creators-note { font-size: .98rem; max-width: 40ch; margin: 1.4rem 0 0; color: #EAF2FF; text-shadow: 0 1px 0 rgba(3, 18, 44, .35); }

.poster {
  position: relative; justify-self: center;
  width: min(340px, 82vw);
  padding: 26px 24px 22px;
  background: var(--parchment);
  color: #3A1E0B;
  text-align: center;
  border-radius: 4px;
  transform: rotate(3deg);
  box-shadow: inset 0 0 46px rgba(122, 69, 32, .38), 0 22px 36px rgba(3, 18, 44, .35);
}
.poster-nail { position: absolute; top: 10px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: #5B6E86; box-shadow: 0 2px 0 #2A3646; }
.poster-head { font-family: var(--font-display); font-size: clamp(3rem, 7vw, 4.2rem); line-height: 1; letter-spacing: .04em; margin: 8px 0 12px; }
.poster-art { width: 100%; height: auto; border: 4px solid #3A1E0B; }
.poster-sub { font-family: var(--font-display); font-size: 2.1rem; line-height: 1; margin: 14px 0 6px; }
.poster-reward { font-weight: 800; font-size: 1.1rem; margin: 0; padding-top: 6px; border-top: 2px dashed rgba(58, 30, 11, .4); }

.sea-short {
  margin-top: clamp(8px, 3vw, 32px);
  padding-bottom: 0;
  background: linear-gradient(180deg, rgba(34, 180, 214, 0) 0, rgba(34, 180, 214, 0) 150px, var(--lagoon) 150px, var(--lagoon) 220px, var(--shallow) 100%);
}

.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 4vw, 48px); }
.steps li { counter-increment: step; border-top: 2px dashed rgba(255, 255, 255, .25); padding-top: 18px; }
.steps li::before {
  content: counter(step); display: block;
  font-family: var(--font-display); font-size: 3.4rem; line-height: 1; color: var(--gold);
  text-shadow: 0 4px 0 rgba(3, 18, 44, .4); margin-bottom: 10px;
}
.steps p { color: #DDF3FA; margin: 0; max-width: 34ch; }

.creators-end { text-align: center; background: linear-gradient(180deg, #0C6C9C, var(--deep) 45%, var(--abyss) 90%); }
.creators-end p { font-size: 1.2rem; margin-bottom: 1.6rem; }

@media (max-width: 900px) {
  .creators-hero { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .cta-left .btn { width: 100%; }
  .poster { transform: rotate(2deg); }
}

/* ---------- Legal pages (Terms, Privacy) ---------- */
.legal-hero .legal-title { position: relative; z-index: 1; padding-top: clamp(28px, 5vw, 56px); }
.legal-title h1 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.6rem, 6vw, 4.4rem); line-height: 1; margin: 0 0 .3em;
  text-shadow: 0 5px 0 rgba(3, 18, 44, .45);
}
.legal-title p { font-weight: 700; font-size: 1.15rem; margin: 0; text-shadow: 0 2px 0 rgba(3, 18, 44, .3); }
.legal-main { background: linear-gradient(180deg, var(--shallow), var(--mid) 30%, var(--deep) 70%, var(--abyss)); padding-block: clamp(40px, 6vw, 80px) clamp(64px, 8vw, 110px); }
.legal-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }

.toc { position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow-y: auto; padding-right: 6px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .3) transparent; }
.toc summary { font-weight: 800; font-size: 1.1rem; cursor: pointer; list-style: none; margin-bottom: 10px; }
.toc summary::-webkit-details-marker { display: none; }
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.toc a { display: block; text-decoration: none; color: #CFE6F5; font-size: .95rem; line-height: 1.3; padding: 6px 10px; border-radius: 8px; }
.toc a:hover { background: rgba(255, 255, 255, .1); color: var(--white); }

.doc {
  background: var(--parchment-hi);
  color: var(--ink);
  border-radius: 18px;
  padding: clamp(24px, 5vw, 64px);
  box-shadow: 0 0 0 6px var(--wood), 0 0 0 9px var(--wood-dark), 0 24px 44px rgba(0, 0, 0, .35);
  font-size: 1.0625rem;
  line-height: 1.65;
}
.doc > * { max-width: 72ch; }
.doc section { scroll-margin-top: 24px; }
.doc section + section { margin-top: 2.6em; padding-top: 2.2em; border-top: 2px dashed #E3CC9C; }
.doc h2 { font-family: var(--font-body); font-weight: 800; font-size: clamp(1.4rem, 2.4vw, 1.75rem); line-height: 1.2; text-shadow: none; margin: 0 0 .6em; }
.doc h3 { font-size: 1.15rem; margin: 1.6em 0 .4em; }
.doc p, .doc ul, .doc ol { margin: 0 0 1em; }
.doc ul, .doc ol { padding-left: 1.3em; }
.doc li { margin-bottom: .45em; }
.doc li::marker { color: var(--wood); font-weight: 800; }
.doc a { color: var(--sky-top); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.doc strong { font-weight: 800; }
.doc .lead { font-size: 1.15rem; }
.tldr {
  background: #FFF1C7; border-left: 6px solid var(--gold); border-radius: 0 12px 12px 0;
  padding: 12px 16px; margin: 0 0 1.2em; font-weight: 600;
}
.tldr b { font-weight: 800; }
.notice { background: #FDE3E4; border: 2px solid #F3B3B6; border-radius: 12px; padding: 14px 18px; font-weight: 600; }
.fill { background: #FFE27A; border: 2px dashed #B8860B; border-radius: 6px; padding: 0 6px; font-weight: 800; }
.table-wrap { overflow-x: auto; margin: 0 0 1.2em; border: 2px solid #E3CC9C; border-radius: 12px; max-width: none; }
.doc table { width: 100%; border-collapse: collapse; font-size: .98rem; min-width: 620px; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 10px 14px; border-bottom: 1px solid #EBDDBA; }
.doc th { background: var(--parchment); font-weight: 800; }
.doc tr:last-child td { border-bottom: 0; }

@media (max-width: 900px) {
  .legal-layout { grid-template-columns: minmax(0, 1fr); }
  .toc { position: static; max-height: none; background: rgba(5, 33, 74, .45); border-radius: 14px; padding: 14px 16px; }
  .toc summary { margin: 0; }
  .toc[open] summary { margin-bottom: 10px; }
}
@media print {
  .hero, .toc, .seabed, .skip { display: none !important; }
  .legal-main { background: none; padding: 0; }
  .doc { box-shadow: none; padding: 0; }
  body { background: #fff; }
}
.form-legal { font-size: .92rem; color: #4A5D75; margin: -4px 0 0; text-align: center; line-height: 1.45; }
.form-legal a { color: var(--ink); font-weight: 700; }
@media (max-width: 900px) {
  .toc summary { display: flex; justify-content: space-between; align-items: center; }
  .toc summary::after { content: ""; width: 10px; height: 10px; border-right: 3px solid var(--gold); border-bottom: 3px solid var(--gold); transform: rotate(45deg); margin: -4px 6px 0 0; transition: transform .2s; }
  .toc[open] summary::after { transform: rotate(-135deg); margin-top: 4px; }
}

/* Footer staff login */
.foot-bottom { width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; }
.foot-bottom .foot-legal { width: auto; }
.foot-staff {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 800; font-size: .95rem; text-decoration: none; color: var(--wood-dark);
  border: 2px solid var(--wood-dark); border-radius: 999px; padding: 5px 14px 3px;
  transition: background .15s, color .15s;
}
.foot-staff::before {
  content: ""; width: 10px; height: 12px; border-radius: 2px; background: currentColor;
  box-shadow: 0 -5px 0 -2px transparent;
  -webkit-mask: radial-gradient(circle at 50% 30%, transparent 2px, #000 2.5px);
          mask: radial-gradient(circle at 50% 30%, transparent 2px, #000 2.5px);
}
.foot-staff:hover { background: var(--wood-dark); color: var(--sand); }

/* Honeypot link: invisible to people and screen readers, followed only by bots */
.hp-link { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }