/* The artwork and logo are exact pixel cut-outs of the approved boards (see gateway/README.md).
   They are CSS backgrounds so only the active theme's image downloads. The live copy and
   controls below are normal HTML.
   One-screen layout: .page is exactly the visible screen height. The artwork takes whatever
   height is left (keeping its proportions), and sizes/spacing scale down a little on shorter
   screens (svh units), so phones don't need to scroll. Very short screens fall back to scrolling. */
:root {
  color-scheme: light;
  --bg: #fefdf9;
  --ink: #111210;
  --muted: #4d5157;
  --gold: #e7ac24;
  --gold-ink: #b67a08;
  --soft: #fcf2d7;
  --border: #ecd08b;
  --card: #fffefa;
  --focus: #856000;
  --gap: clamp(8px, 1.9svh, 16px);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0d0d0b;
  --ink: #faf9f6;
  --muted: #e0dfd9;
  --gold-ink: #f4bc30;
  --soft: #29251b;
  --border: #514526;
  --card: #181914;
  --focus: #ffd775;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; }
button { font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.page { display: flex; flex-direction: column; max-width: 430px; margin: 0 auto; height: 100vh; height: 100svh; padding: max(clamp(10px, 2.2svh, 20px), env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(clamp(8px, 1.8svh, 18px), env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); }
.page > * { flex-shrink: 0; }
.toolbar { display: flex; justify-content: space-between; align-items: center; min-height: 44px; }
.theme-toggle { width: 44px; height: 44px; border-radius: 50%; border: 1px solid transparent; display: grid; place-items: center; background: var(--soft); color: var(--gold-ink); }
[data-theme="dark"] .theme-toggle { border-color: #35352e; color: var(--ink); background: #20211c; }
.theme-toggle svg { width: 25px; height: 25px; }
.language-switch { display: flex; padding: 0; border: 1px solid var(--border); border-radius: 13px; }
.language-switch button { min-width: 44px; min-height: 44px; border: 0; border-radius: 10px; color: var(--ink); background: transparent; font-size: 13px; }
.language-switch button[aria-pressed="true"] { background: linear-gradient(120deg,#f3c950,#e9ad26); color: #111210; font-weight: 700; }
.brand { width: clamp(140px, 25svh, 214px); aspect-ratio: 645 / 407; margin: clamp(-20px, -2.4svh, -10px) auto var(--gap); background: url("/__lashale/assets/logo-light.png") center / 100% 100% no-repeat; mix-blend-mode: multiply; }
[data-theme="dark"] .brand { background-image: url("/__lashale/assets/logo-dark.png"); mix-blend-mode: screen; }
.status { width: fit-content; max-width: 100%; margin: 0 auto; padding: clamp(7px, 1.2svh, 10px) 20px; border-radius: 99px; background: var(--soft); font-size: clamp(13.5px, 1.8svh, 15px); font-weight: 600; text-align: center; line-height: 1.25; }
[data-page="maintenance"] .status::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 10px; background: var(--gold); }
/* The artwork area grows/shrinks with the free space; the art inside keeps its proportions. */
.hero { flex: 1 1 0; min-height: 110px; width: calc(100% + 8px); margin: var(--gap) -4px 2px; display: flex; align-items: center; justify-content: center; container-type: size; }
.hero-art { width: 100%; width: min(100cqw, 100cqh * 474 / 315); aspect-ratio: 474 / 315; background: center / 100% 100% no-repeat; -webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent), linear-gradient(to bottom, transparent, #000 3%, #000 93%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent), linear-gradient(to bottom, transparent, #000 3%, #000 93%, transparent); mask-composite: intersect; }
[data-page="coming-soon"] .hero-art { background-image: url("/__lashale/assets/coming-soon-light.png"); }
[data-page="coming-soon"][data-theme="dark"] .hero-art { background-image: url("/__lashale/assets/coming-soon-dark.png"); }
[data-page="maintenance"] .hero-art { background-image: url("/__lashale/assets/maintenance-light.png"); }
[data-page="maintenance"][data-theme="dark"] .hero-art { background-image: url("/__lashale/assets/maintenance-dark.png"); }
.message { text-align: center; }
h1 { font-size: clamp(23px, min(8.6vw, 4.1svh), 34px); font-weight: 700; line-height: 1.06; letter-spacing: -1px; margin: 0 auto; white-space: pre-line; max-width: 370px; }
.launch-line { color: var(--gold-ink); font-size: clamp(25px, min(8.6vw, 4.1svh), 34px); font-weight: 700; line-height: 1.05; letter-spacing: -1px; margin: 4px 0 0; }
.body-copy { font-size: clamp(14px, 2svh, 16.5px); line-height: 1.36; max-width: 340px; margin: clamp(6px, 1svh, 10px) auto clamp(8px, 1.4svh, 12px); text-wrap: pretty; }
.info-card { display: flex; align-items: center; gap: 14px; padding: clamp(7px, 1.3svh, 12px) 14px; border: 1px solid var(--border); background: var(--card); border-radius: 14px; }
.info-icon { width: clamp(38px, 5.7svh, 48px); height: clamp(38px, 5.7svh, 48px); flex-shrink: 0; display: grid; place-items: center; border-radius: 12px; background: var(--soft); color: var(--gold-ink); }
.info-icon svg { width: 60%; height: 60%; }
.info-card h2 { font-size: clamp(13.5px, 1.75svh, 14.5px); font-weight: 650; line-height: 1.3; margin: 0 0 2px; letter-spacing: -.2px; }
:lang(es) .info-card h2 { font-size: clamp(13px, 1.7svh, 14px); letter-spacing: -.3px; }
.info-card p { font-size: clamp(12.5px, 1.6svh, 13.5px); line-height: 1.3; color: var(--muted); margin: 0; }
.launch-status { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: clamp(38px, 5.4svh, 46px); padding: 6px 14px; margin: clamp(6px, 1.2svh, 10px) 0 0; background: var(--soft); color: var(--ink); font-size: clamp(14px, 1.8svh, 15px); font-weight: 700; border-radius: 99px; text-align: center; }
.clock-icon svg { width: 23px; height: 23px; vertical-align: middle; }
[data-theme="dark"] .launch-status { color: #f6cf6e; border: 1px solid var(--border); }
footer { margin-top: clamp(6px, 1.2svh, 10px); text-align: center; color: var(--muted); }
.heart-icon { display: inline-flex; color: var(--gold-ink); }
.heart-icon svg { width: clamp(18px, 2.5svh, 21px); height: clamp(18px, 2.5svh, 21px); }
footer p { font-size: clamp(13.5px, 1.8svh, 15px); line-height: 1.3; margin: 2px 0 0; }
.retry { display: flex; justify-content: center; align-items: center; gap: 13px; width: 100%; min-height: clamp(46px, 6.4svh, 54px); padding: 8px 16px; border: 0; border-radius: 16px; background: linear-gradient(115deg,#f0c345,#e6aa20); color: #111210; font-size: clamp(16px, 2.1svh, 18px); font-weight: 700; }
.retry:hover { filter: brightness(1.04); }
.retry:active { transform: translateY(1px); }
.retry-icon svg { width: 26px; height: 26px; vertical-align: middle; }
.maintenance-actions { margin-top: clamp(6px, 1.2svh, 10px); }
.auto-note { font-size: clamp(12px, 1.55svh, 13px); line-height: 1.3; text-align: center; color: var(--muted); margin: clamp(5px, 1svh, 10px) 0 0; }
.expected-return { text-align: center; font-size: 13px; line-height: 1.4; margin: 6px 0 0; color: var(--gold-ink); }
@media (min-width: 600px) { .page { padding-top: clamp(16px, 3svh, 28px); padding-bottom: clamp(16px, 3svh, 28px); } }
@media (max-width: 380px) { h1 { text-wrap: balance; } }
@media (max-width: 350px) { .page { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); } .body-copy { font-size: 14px; } .info-card { gap: 10px; padding-left: 11px; padding-right: 11px; } .info-card h2 { font-size: 12.5px; } .info-card p { font-size: 12px; } }
/* Small phones (iPhone SE and similar in a browser): tuck the logo between the top buttons,
   put the heart beside the footer text, and let the artwork get a little smaller. */
@media (max-height: 620px) {
  .brand { margin-top: -34px; }
  .hero { min-height: 84px; }
  footer { display: flex; align-items: center; justify-content: center; gap: 6px; }
  footer p { margin: 0; }
  .auto-note { margin-top: 4px; }
}
/* Too short to fit everything (e.g. a phone held sideways): scroll normally instead of squeezing. */
@media (max-height: 540px) { .page { height: auto; min-height: 100svh; } .hero { flex: none; height: 200px; } }
.retry[aria-busy="true"] { cursor: progress; filter: saturate(.85); }
@media (prefers-reduced-motion: no-preference) {
  button { transition: background-color .15s, transform .15s; }
  /* Live status dot: a soft gold ring breathes out from the dot. */
  [data-page="maintenance"] .status::before { animation: status-pulse 2s ease-out infinite; }
  .retry[aria-busy="true"] .retry-icon svg { animation: retry-spin .9s linear infinite; }
}
@keyframes status-pulse {
  0% { box-shadow: 0 0 0 0 rgba(231, 172, 36, .55); }
  70% { box-shadow: 0 0 0 7px rgba(231, 172, 36, 0); }
  100% { box-shadow: 0 0 0 0 rgba(231, 172, 36, 0); }
}
@keyframes retry-spin { to { transform: rotate(360deg); } }