/* UnplugFirst's landing in the D4U Store. No identity is approved yet, so this is a neutral typographic
   treatment: the name in a bold system sans and the proposal palette (graphite, ivory, amber). Amber is only
   used for fills and lines, never as text on ivory.
   Only what is inside <main class="up">. The shell keeps its header and footer; sizes are the shell's --sh-fs-* tokens. */

body { margin: 0; background: var(--sh-bg); color: var(--sh-ink); font-family: var(--sh-font); -webkit-font-smoothing: antialiased; }

.up {
  --up-bg: #F6F3EC; --up-card: #FFFDF8; --up-ink: #20252B; --up-muted: #555C65; --up-line: #E3DDCF;
  --up-amber: #F2B544; --up-port: #20252B; --up-focus: #20252B;
  --up-shadow: 0 1px 2px rgba(32, 37, 43, .05), 0 12px 28px -18px rgba(32, 37, 43, .25);
  --up-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

  display: block; background: var(--up-bg); color: var(--up-ink); font: 400 var(--sh-fs-body)/1.6 var(--up-body);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .up {
    --up-bg: #20252B; --up-card: #282E35; --up-ink: #F6F3EC; --up-muted: #B3B8BF; --up-line: #39404A;
    --up-port: #F6F3EC; --up-focus: #F2B544;
    --up-shadow: inset 0 1px 0 rgba(246, 243, 236, .04), 0 12px 28px -16px rgba(0, 0, 0, .7);
  }
}
:root[data-theme="dark"] .up {
  --up-bg: #20252B; --up-card: #282E35; --up-ink: #F6F3EC; --up-muted: #B3B8BF; --up-line: #39404A;
  --up-port: #F6F3EC; --up-focus: #F2B544;
  --up-shadow: inset 0 1px 0 rgba(246, 243, 236, .04), 0 12px 28px -16px rgba(0, 0, 0, .7);
}

.up *, .up *::before, .up *::after { box-sizing: border-box; }
.up a { color: inherit; }
.up :focus-visible { outline: 2px solid var(--up-focus); outline-offset: 3px; }

.up .wrap { max-width: 960px; margin: 0 auto; padding: 0 16px; }

/* Hero: the mark (a connector apart from its port), the name, the status and the D4U button */
.up .hero { padding: 64px 0 48px; }
.up .mark { display: block; width: 88px; height: 88px; margin: 0 0 20px; }
.up .mark .port { stroke: var(--up-port); }
.up .mark .port-in { fill: var(--up-port); }
.up .mark .plug { fill: var(--up-amber); }
.up .mark .cable { stroke: var(--up-amber); }
.up .name { margin: 0 0 6px; font: 800 var(--sh-fs-display)/1 var(--up-body); letter-spacing: -.035em; }
.up .tagline { margin: 0 0 20px; font: 700 var(--sh-fs-h3)/1.2 var(--up-body); letter-spacing: -.02em; color: var(--up-muted); }
.up .lead { margin: 0 0 12px; max-width: 34em; font-size: var(--sh-fs-lead); }
.up .lead + .lead { color: var(--up-muted); font-size: var(--sh-fs-body); }
.up .status { display: inline-flex; align-items: center; gap: 8px; margin: 16px 0 0; padding: 6px 14px; border: 1px solid var(--up-line); border-radius: 999px; font-size: var(--sh-fs-label); font-weight: 700; }
.up .status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--up-amber); }
/* Future home: plain text until the site is live. */
.up .domain { margin: 12px 0 0; font-size: var(--sh-fs-small); color: var(--up-muted); }
.up .domain span { font-weight: 700; color: var(--up-ink); }

/* Points */
.up .band { padding: 32px 0 56px; }
.up .points { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.up .points li { padding: 20px 22px; border-top: 3px solid var(--up-amber); border-radius: 18px; background: var(--up-card); box-shadow: var(--up-shadow); }
.up .points h3 { margin: 0 0 4px; font-size: var(--sh-fs-h3); line-height: 1.3; }
.up .points p { margin: 0; color: var(--up-muted); }
@media (max-width: 620px) { .up .points { grid-template-columns: 1fr; } }
.up .note { margin: 28px 0 0; color: var(--up-muted); font-size: var(--sh-fs-small); }

/* Close (same text on every store landing) */
.up .d4u-close { padding: 48px 0 72px; border-top: 1px solid var(--up-line); }
.up .d4u-close h2 { margin: 0 0 12px; font-size: var(--sh-fs-h2); line-height: 1.15; letter-spacing: -.02em; }
.up .d4u-close p { margin: 0; max-width: 34em; color: var(--up-muted); }

/* Buttons: calm pill in the ink color */
.up .actions, .up .d4u-close .actions { margin: 28px 0 0; }
.up .btn { display: inline-flex; align-items: center; min-height: 48px; padding: 12px 24px; border-radius: 999px; background: var(--up-ink); color: var(--up-bg); font-size: var(--sh-fs-button); font-weight: 700; text-decoration: none; }
.up .btn:hover { box-shadow: var(--up-shadow); }