/* © Uni 2026 


*/

@font-face {
    font-family: 'Geist';
    src: url('https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-sans/Geist-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
  }
  @font-face {
    font-family: 'Geist';
    src: url('https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-sans/Geist-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
  }
  @font-face {
    font-family: 'Geist';
    src: url('https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-sans/Geist-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
  }

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

  html { scroll-behavior: smooth; }

  :root {
    --ink: #171717;
    --ink-mid: #4d4d4d;
    --ink-soft: #808080;
    --ink-faint: #ebebeb;
    --line: #ebebeb;
    --bg: #fff;
    --card-bg: #fff;
    --surface: #fafafa;
    --shadow-border: rgba(0,0,0,0.08) 0px 0px 0px 1px;
    --shadow-card: rgba(0,0,0,0.08) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 2px, rgba(0,0,0,0.04) 0px 8px 8px -8px, #fafafa 0px 0px 0px 1px;
    --shadow-ring: rgb(235,235,235) 0px 0px 0px 1px;
    --uni-blue: #0068d6;
  }

  * { font-feature-settings: "liga" 1; }

  body {
    font-family: 'Geist', -apple-system, Arial, sans-serif;
    font-weight: 400;
    background: var(--bg);
    color: var(--ink);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    transition: background 0.7s ease;
  }

  body.focus-mode { background: #000; }

  /* ─── LAYOUT ─────────────────────────────────────── */

  .left-col {
    max-width: 440px;
    margin: 0 auto;
    padding: 0 1.5rem;
    width: 100%;
  }

  .right-col { display: none; }

  /* ─── MOBILE NAV ─────────────────────────────────── */
  nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    transition: background 0.7s ease, border-color 0.7s ease;
  }

  body.focus-mode nav {
    background: rgba(0, 0, 0, 0.88);
    border-bottom-color: rgba(255, 255, 255, 0.06);
  }

  body.focus-mode nav img { filter: invert(1); }

  body.focus-mode .nav-links a { color: rgba(255, 255, 255, 0.5); }
  body.focus-mode .nav-links a:hover { color: #fff; }

  .intro { padding-top: 110px; }

  .nav-links {
    display: flex;
    gap: 1.5rem;
    list-style: none;
    align-items: center;
  }

  .nav-links a {
    font-size: 1rem;
    color: var(--ink-mid);
    text-decoration: none;
    transition: color 0.15s;
  }

  .nav-links a:hover { color: var(--ink); }

  /* ─── INTRO ──────────────────────────────────────── */
  .intro {
    margin-bottom: 2.5rem;
    scroll-margin-top: 70px;
  }

  .intro h1 {
    font-size: 2.5rem;
    font-weight: 600;
    line-height: 1;
    margin-bottom: 1rem;
    color: var(--ink);
    letter-spacing: -0.6rem;
  }

  .break {
    display: block;
  }
  .intro p {
    font-size: 1.25rem;
    color: var(--ink-mid);
    max-width: 500px;
    line-height: 1.5;
  }

  .section-wrap, .signup-card {
    scroll-margin-top: 80px;
  }

  .section-label {
    font-size: 1.15rem;
    color: var(--ink);
    margin-bottom: 1rem;
    font-weight: 600;
    letter-spacing: -0.01rem;
  }

  .section-wrap {
    margin-bottom: 2rem;
  }

  /* ─── CARD ───────────────────────────────────────── */
  .card {
    box-shadow: var(--shadow-card);
    border-radius: 8px;
    overflow: hidden;
    background: var(--card-bg);
  }

  .how-row {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    padding: 0.9rem 1.25rem;
    border-bottom: 1px solid var(--line);
    font-size: 1rem;
    color: var(--ink-mid);
  }

  .how-row:last-child { border-bottom: none; }

  .how-num {
    font-size: 11px;
    font-weight: 600;
    width: 18px;
    flex-shrink: 0;
    line-height: 1.8;
    text-align: center;
    border-radius: 9999px;
    padding: 0 5px;
  }

  .how-num-1 { background: #ebf5ff; color: #0068d6; }
  .how-num-2 { background: #fdf0f8; color: #de1d8d; }
  .how-num-3 { background: #fff1f0; color: #ff5b4f; }

  .msg-card {
    box-shadow: var(--shadow-border);
    border-radius: 8px;
    background: var(--card-bg);
    padding: 1.125rem 1.25rem;
    margin-top: 0.75rem;
  }

  .msg-from {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 0.9rem;
  }

  .msg-from-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #0a72ef;
    flex-shrink: 0;
  }

  .msg-from-label {
    color: #0068d6;
    background: #ebf5ff;
    border-radius: 9999px;
    padding: 2px 8px;
  }

  .msg-group { margin-bottom: 0.85rem; }
  .msg-group:last-child { margin-bottom: 0; }

  .msg-day {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-soft);
    font-weight: 600;
    margin-bottom: 0.3rem;
  }

  .msg-line {
    font-size: 1rem;
    color: var(--ink-mid);
    padding: 0.18rem 0 0.18rem 0.7rem;
    border-left: 1px solid var(--ink-soft);
    line-height: 1.5;
  }

  /* ─── FAQ ────────────────────────────────────────── */
  .faq-row {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--line);
  }

  .faq-row:last-child { border-bottom: none; }

  .faq-q {
    font-size: 1rem;
    font-weight: 500;
    color: var(--ink);
    margin-bottom: 0.3rem;
  }

  .faq-a {
    font-size: 1rem;
    color: var(--ink-mid);
    line-height: 1.6;
  }

  /* ─── TAG PILLS ──────────────────────────────────── */
  .tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .tag {
    font-size: .75rem;
    font-weight: 500;
    border-radius: 9999px;
    padding: 5px 14px;
    white-space: nowrap;
  }

  /* Default — subtle badge tint */
  .tag-default { background: #ebf5ff; color: #0068d6; }
  /* Develop — solid blue */
  .tag-develop { background: #0a72ef; color: #fff; }
  /* Preview — solid pink */
  .tag-preview { background: #de1d8d; color: #fff; }
  /* Ship — solid coral/red */
  .tag-ship    { background: #ff5b4f; color: #fff; }

  /* ─── SIGNUP CARD ────────────────────────────────── */
  .signup-card {
    background: #fafafa;
    box-shadow: var(--shadow-card);
    border-radius: 12px;
    padding: 2.25rem 1.75rem;
    text-align: center;
    margin-bottom: 2.5rem;
  }

  .signup-card h2 {
    font-size: 2rem;
    font-weight: 600;
    color: #171717;
    margin-bottom: 0.75rem;
    letter-spacing: -0.04rem;
  }

  .signup-card .signup-desc {
    font-size: 0.9rem;
    color: #4d4d4d;
    line-height: 1.65;
    max-width: 340px;
    margin: 0 auto 1.5rem;
  }

  .signup-fields {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 340px;
    margin: 0 auto;
  }

  .signup-fields input {
    width: 100%;
    padding: 11px 16px;
    border-radius: 10px;
    border: none;
    box-shadow: var(--shadow-ring);
    background: #fff;
    color: #171717;
    font-family: 'Geist', -apple-system, Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    outline: none;
    transition: box-shadow 0.12s;
  }

  .signup-fields input:focus {
    box-shadow: 0 0 0 2px #171717;
  }
  .signup-fields input::placeholder { color: #808080; }

  .price-block {
    border-top: 1px solid #ebebeb;
    margin-top: 0.5rem;
    padding-top: 1.1rem;
  }

  .price-question {
    font-size: 0.9rem;
    font-weight: 500;
    color: #171717;
    margin-bottom: 0.75rem;
  }

  .price-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-bottom: 0.2rem;
  }

  .price-option input[type="radio"] { display: none; }

  .price-option label {
    display: block;
    padding: 10px 14px;
    border: none;
    box-shadow: var(--shadow-ring);
    border-radius: 10px;
    background: #fff;
    color: #808080;
    font-size: 13px;
    cursor: pointer;
    transition: box-shadow 0.12s, color 0.12s;
    user-select: none;
    text-align: center;
  }

  .price-option label:hover { box-shadow: 0 0 0 1.5px #aaa; color: #4d4d4d; }
  .price-option input[type="radio"]:checked + label { box-shadow: 0 0 0 2px #171717; color: #171717; }

  .consent-label {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-top: 0.2rem;
    cursor: pointer;
  }

  .consent-label input[type="checkbox"] {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    margin-top: 2px;
    accent-color: #171717;
    cursor: pointer;
  }

  .consent-label span {
    font-size: .75rem;
    color: #808080;
    line-height: 1.5;
    text-align: left;
  }

  .consent-label a {
    color: #4d4d4d;
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .consent-label a:hover { color: #171717; }

  .signup-btn {
    width: 100%;
    padding: 11px 16px;
    border-radius: 6px;
    border: none;
    background: #171717;
    color: #fff;
    font-family: 'Geist', -apple-system, Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }

  .signup-btn:hover { opacity: 0.88; }
  .signup-btn:disabled { opacity: 0.4; cursor: not-allowed; }

  .signup-note {
    font-size: 12px;
    color: #808080;
    margin-top: 1rem;
  }

  .signup-success {
    display: none;
    font-size: 1.1rem;
    font-weight: 600;
    color: #171717;
    letter-spacing: -0.02em;
    margin-top: 1rem;
  }

  .signup-error {
    display: none;
    font-size: 13px;
    color: #e07070;
    margin-top: 0.75rem;
  }

  /* ─── DESKTOP BAR ────────────────────────────────── */
  .desktop-bar { display: none; }

  /* ─── FOCUS SWEEP ────────────────────────────────── */
  .intro, .section-wrap {
    transition: opacity 0.7s ease;
  }

  body.focus-mode footer { border-top-color: #000; }

  body.focus-mode .intro,
  body.focus-mode .section-wrap {
    opacity: 0.04;
    pointer-events: none;
  }

  /* Fade nav links + bar link individually — don't touch logo parent */
  .nav-links, .desktop-bar-inner > a:last-child {
    transition: opacity 0.7s ease;
  }

  body.focus-mode .nav-links,
  body.focus-mode .desktop-bar-inner > a:last-child {
    opacity: 0.06;
    pointer-events: none;
  }

  /* Logo inverts to white on black bg, back to black on white */
  nav img, .desktop-bar img {
    transition: filter 0.7s ease;
  }

  body.focus-mode nav img,
  body.focus-mode .desktop-bar img {
    filter: invert(1);
  }

  /* ─── FOOTER ─────────────────────────────────────── */
  footer {
    padding: 1.5rem 0 2rem;
    border-top: 1px solid #ebebeb;
    transition: border-color 0.7s ease;
  }

  .footer-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
  }

  .footer-brand {
    font-size: 13px;
    color: #808080;
  }

  .footer-links {
    display: flex;
    gap: 1.25rem;
    list-style: none;
  }

  .footer-links a {
    font-size: 13px;
    color: #808080;
    text-decoration: none;
    transition: color 0.15s;
  }

  .footer-links a:hover { color: #171717; }

  .footer-status {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #808080;
  }

  .footer-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #0a72ef;
    flex-shrink: 0;
  }

  @media (max-width: 480px) {
    .left-col { padding: 0 1.5rem; }
    .signup-card { padding: 1.75rem 1.25rem; }
    .intro h1 {
      font-size: 2rem;
      font-weight: 600;
      line-height: 1;
      margin-bottom: 1rem;
      color: var(--ink);
      letter-spacing: -0.06rem; 
    }
  }

  /* ─── TABLET/DESKTOP BAR (≥641px) ───────────────────── */
  @media (min-width: 641px) {
    nav { display: none; }

    body { overflow-x: hidden; }

    .left-col {
      max-width: 720px;
      margin: 0 auto;
      padding: 0 4rem;
    }

    .intro { padding-top: 120px; }
    .intro h1 {
      font-size: 3rem;
      font-weight: 600;
      line-height: 1;
      margin-bottom: 1rem;
      color: var(--ink);
      letter-spacing: -0.1rem;
    }

    /* DESKTOP BAR */
    .desktop-bar {
      display: block;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 100;
      background: rgba(255, 255, 255, 0.88);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-bottom: 1px solid rgba(0,0,0,0.06);
      transition: background 0.7s ease, border-color 0.7s ease, backdrop-filter 0.7s ease;
    }

    body.focus-mode .desktop-bar {
      background: transparent;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      border-bottom-color: transparent;
    }

    .desktop-bar-inner {
      padding: 0.9rem 4rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .desktop-bar a {
      font-size: 1rem;
      font-weight: 500;
      color: var(--ink);
      text-decoration: none;
    }

    .desktop-bar a:hover { opacity: 0.6; }
  }

  /* ─── DESKTOP SPLIT (≥1280px) ────────────────────────── */
  @media (min-width: 1280px) {
    .page-layout {
      display: flex;
      align-items: flex-start;
      min-height: 100vh;
    }

    /* LEFT COLUMN — 50% content */
    .left-col {
      width: 50%;
      min-width: 300px;
      max-width: none;
      margin: 0;
      padding: 8rem;
      flex-shrink: 0;
    }

    .intro h1 {
      font-size: 3.5rem;
      letter-spacing: -0.2rem;
    }

    /* RIGHT COLUMN — 50% chaos */
    .right-col {
      display: block;
      width: 50%;
      position: sticky;
      top: 0;
      height: 100vh;
      overflow: hidden;
      background: #000;
      flex-shrink: 0;
    }

    /* chaos images — stacked, crossfade + parallax */
    .chaos-img {
      position: absolute;
      inset: -5%;
      width: 110%;
      height: 110%;
      object-fit: cover;
      opacity: 0;
      transition: opacity 2s ease;
      will-change: opacity, transform;
      transform: scale(1) translate(0px, 0px);
    }

    .chaos-img.active { opacity: 1; }
  }

  /* ─── LARGE DESKTOP SPLIT (≥1280px) ─────────────────── */
  @media (min-width: 1280px) {
    .desktop-bar { width: 50%; }
    .desktop-bar-inner { max-width: none; padding: 0.9rem 8rem; }
    .intro { padding-top: 0; }
  }