/* ==========================================================================
   POM - Piece of Mind, holding page.

   The full site lives in /v1 and carries its own stylesheet. This one only
   needs the brand tokens and the layout signature: the floating dark panel
   on the off-white ground. Palette and theme cascade match v1/styles.css
   exactly, so the two pages never look like different products.
   ========================================================================== */

:root {
  color-scheme: light;

  --blue:  #123f8f;
  --cyan:  #0d7297;
  --teal:  #0b8279;

  /* the panel is dark in both themes, so anything sitting on it uses the
     bright end of the gradient and never follows the theme */
  --blue-bright: #4f9bff;
  --cyan-bright: #35c9f0;
  --teal-bright: #2fdcc8;

  --bg:        #f8f6f7;
  --ink:       #18151b;
  --ink-3:     #6d6775;
  --line:      rgba(24, 21, 27, .12);
  --line-soft: rgba(24, 21, 27, .07);
  --card-solid:#ffffff;
  --shadow-lg: 0 45px 120px rgba(6, 30, 62, .22);

  --accent:      var(--blue);
  --accent-soft: rgba(18, 63, 143, .10);

  /* the floating dark panel: identical in both themes */
  --panel:       #080f18;
  --panel-line:  rgba(255, 255, 255, .13);
  --panel-ink:   #ffffff;
  --panel-ink-2: rgba(255, 255, 255, .66);
  --panel-ink-3: rgba(255, 255, 255, .42);

  --pad: clamp(18px, 4vw, 34px);

  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Declared twice on purpose, the same way v1/styles.css does it: once behind
   the system preference and once behind the explicit choice, so a reader who
   picked a theme on the real site keeps it here. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --blue: #4f9bff; --cyan: #35c9f0; --teal: #2fdcc8;
    --bg:        #0b0a0f;
    --ink:       #f4f2f7;
    --ink-3:     #8f8a99;
    --line:      rgba(255, 255, 255, .14);
    --line-soft: rgba(255, 255, 255, .08);
    --card-solid:#16141d;
    --shadow-lg: 0 45px 120px rgba(0, 0, 0, .65);
    --accent-soft: rgba(79, 155, 255, .14);
    --panel: #0b1421;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --blue: #4f9bff; --cyan: #35c9f0; --teal: #2fdcc8;
  --bg:        #0b0a0f;
  --ink:       #f4f2f7;
  --ink-3:     #8f8a99;
  --line:      rgba(255, 255, 255, .14);
  --line-soft: rgba(255, 255, 255, .08);
  --card-solid:#16141d;
  --shadow-lg: 0 45px 120px rgba(0, 0, 0, .65);
  --accent-soft: rgba(79, 155, 255, .14);
  --panel: #0b1421;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100svh;
  display: flex; flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  letter-spacing: -.015em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 999px; }

.soon-top, .soon-foot {
  display: flex; justify-content: flex-end;
  padding: 18px var(--pad);
}
.soon-foot { flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.soon-links { display: flex; gap: 18px; font: 700 10px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.soon-links a { color: var(--ink-3); text-decoration: none; }
.soon-links a:hover { color: var(--accent); }
.soon-company { max-width: 100%; margin: 0; color: var(--ink-3); font-size: 11px; text-align: center; overflow-wrap: anywhere; }

.soon-wrap {
  flex: 1 1 auto;
  display: grid; place-items: center;
  padding: clamp(12px, 3vw, 28px) var(--pad);
}

.soon {
  position: relative;
  isolation: isolate;
  width: min(720px, 100%);
  text-align: center;
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-radius: clamp(26px, 4vw, 44px);
  box-shadow: var(--shadow-lg);
  color: var(--panel-ink);
  padding: clamp(44px, 7vw, 84px) clamp(24px, 5vw, 64px);
  overflow: hidden;
}
.soon::before {
  content: "";
  position: absolute; inset: -40% -20% auto -20%; height: 150%;
  background:
    radial-gradient(52% 60% at 50% 6%,  rgba(79, 155, 255, .30), transparent 68%),
    radial-gradient(44% 52% at 84% 44%, rgba(40, 186, 232, .16), transparent 70%),
    radial-gradient(38% 48% at 10% 66%, rgba(47, 220, 200, .12), transparent 72%);
  z-index: -1; pointer-events: none;
}

.soon-mark {
  width: min(260px, 62%);
  margin: 0 auto clamp(14px, 2vw, 20px);
}

.soon-sub {
  margin: 0 0 clamp(26px, 4vw, 38px);
  font-family: var(--mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: .28em; color: var(--panel-ink-3);
}

.soon-title {
  margin: 0 0 18px;
  font-size: clamp(38px, 8vw, 68px);
  font-weight: 900;
  letter-spacing: -.082em;
  /* the tight tracking of the reference eats the space between words, and at
     two words it is the only gap there is */
  word-spacing: .14em;
  line-height: .89;
  background: linear-gradient(96deg, var(--blue-bright) 0%, var(--cyan-bright) 48%, var(--teal-bright) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
/* fallback if background-clip:text is unsupported */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .soon-title { color: var(--panel-ink); background: none; }
}

.soon-line {
  margin: 0 auto clamp(30px, 5vw, 44px);
  max-width: 34ch;
  font-size: clamp(15.5px, 1.7vw, 18px);
  color: var(--panel-ink-2);
  text-wrap: balance;
}

.soon-domain {
  margin: 0;
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: .2em; color: var(--panel-ink-3);
}