/* =============================================================
   LEGACY → LIGHT BRIDGE
   Loaded after site.css on pages built with the old dark shared.css
   (brands, investors, press, creators, partners, wiki). It maps the old
   token names and component classes onto the light "sunny city" system,
   so those pages' own content and styles render light without a rewrite.
   ============================================================= */

/* ---- Old token names, light values ---- */
:root {
  --bg:        var(--paper);
  --bg2:       #FFFFFF;
  --bg3:       #FFFFFF;
  --bg4:       #EEF4F8;
  --glass:     rgba(29, 36, 51, 0.03);
  --glass2:    rgba(29, 36, 51, 0.05);
  --soft:      var(--ink-2);
  --faint:     #7A8396;
  --border:    var(--line);
  --border-hi: rgba(242, 85, 60, 0.45);

  --purple:    var(--coral);
  --violet:    var(--coral);
  --pink:      var(--coral-dark);
  --blue:      var(--sky);
  --teal:      var(--leaf);

  --grad-brand: linear-gradient(135deg, var(--coral) 0%, var(--coral) 100%);
  --grad-logo:  linear-gradient(135deg, var(--coral) 0%, var(--coral) 100%);
  --grad-sky:   linear-gradient(135deg, var(--sky) 0%, var(--sky) 100%);
  --grad-text:  linear-gradient(90deg, var(--coral) 0%, var(--coral) 100%);
  --grad-warm:  linear-gradient(135deg, var(--sun) 0%, var(--coral) 100%);

  --r-xl: 24px;
  --touch: 48px;
  --section-pad: 64px 0;
}
@media (min-width: 768px)  { :root { --section-pad: 80px 0; } }
@media (min-width: 1024px) { :root { --section-pad: 96px 0; } }

/* ---- Base ---- */
h5 { font-family: var(--f-display); line-height: 1.1; margin: 0; }
.gt, .gt-sky {
  background: none; -webkit-background-clip: initial; background-clip: initial;
  -webkit-text-fill-color: currentColor; color: var(--coral);
}
.gt-sky { color: var(--sky); }

/* ---- Container + sections ---- */
.c { width: 100%; max-width: var(--max); margin-left: auto; margin-right: auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.section { padding: var(--section-pad); }
.section-sm { padding: 48px 0; }
@media (min-width: 768px) { .section-sm { padding: 64px 0; } }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px;
  font-family: var(--f-body); font-size: 13px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--coral);
}
.eyebrow::before { content: none; }
.section-title { font-family: var(--f-display); font-weight: 800; font-size: clamp(2rem, 6vw, 3.2rem); line-height: 1.05; margin-bottom: 14px; color: var(--ink); }
.section-sub { font-size: 17px; color: var(--muted); line-height: 1.7; max-width: 60ch; }

/* ---- Buttons (old names on the new .btn) ---- */
.btn { font-family: var(--f-display); font-weight: 700; white-space: nowrap; }
.btn-primary { background: var(--coral); color: #fff; box-shadow: 0 6px 18px rgba(242, 85, 60, 0.30); }
.btn-primary:hover { background: var(--coral-dark); transform: none; box-shadow: 0 6px 18px rgba(242, 85, 60, 0.30); }
.btn-secondary { background: var(--white); color: var(--ink); border: 2px solid var(--ink); backdrop-filter: none; }
.btn-secondary:hover { background: var(--sky-soft); transform: none; }
.btn-white { background: var(--white); color: var(--ink); }
.btn-white:hover { opacity: 1; background: var(--sun-soft); transform: none; }
.btn-outline-purple { background: transparent; color: var(--coral); border: 2px solid var(--coral); }
.btn-outline-purple:hover { background: var(--coral-soft); transform: none; }
.btn-full { width: 100%; }
@media (min-width: 640px) { .btn-full { width: auto; } }

/* ---- Badges ---- */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 13px; border-radius: var(--r-pill); font-family: var(--f-body); font-size: 12px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.badge-live   { background: var(--leaf-soft); border: 1px solid rgba(19,163,116,0.3); color: var(--leaf); }
.badge-live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--leaf); }
.badge-purple { background: var(--coral-soft); border: 1px solid rgba(242,85,60,0.3); color: var(--coral-dark); }
.badge-pink   { background: var(--sun-soft); border: 1px solid rgba(255,194,61,0.5); color: var(--ink); }
.badge-blue   { background: var(--sky-soft); border: 1px solid rgba(47,159,224,0.3); color: #1D6FA3; }

/* ---- Cards ---- */
.card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease; }
@media (hover: hover) { .card:hover { transform: translateY(-4px); border-color: var(--line); box-shadow: var(--shadow); } }

/* ---- Image placeholder, dividers, decoration ---- */
.img-ph { width: 100%; height: 100%; background: var(--bg4); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--faint); font-size: 12px; text-align: center; padding: 20px; }
.img-ph-icon { font-size: 32px; opacity: 0.5; }
.glow-hr { border: none; height: 1px; background: var(--line); margin: 0; }
.orb { display: none !important; }

/* Content is visible at rest (shared.js still adds .in) */
.reveal, .reveal.in { opacity: 1; transform: none; }

/* ---- Forms ---- */
.f-group { display: flex; flex-direction: column; gap: 6px; }
.f-group label { font-family: var(--f-body); font-size: 13px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2); }
.f-group input, .f-group select, .f-group textarea {
  background: var(--white); border: 1.5px solid var(--line); border-radius: var(--r-sm);
  padding: 13px 16px; font-family: var(--f-body); font-size: 16px; color: var(--ink);
  outline: none; width: 100%; min-height: 48px; -webkit-appearance: none; appearance: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.f-group input:focus, .f-group select:focus, .f-group textarea:focus { border-color: var(--sky); box-shadow: 0 0 0 3px var(--sky-soft); background: var(--white); }
.f-group input::placeholder, .f-group textarea::placeholder { color: #98A1B2; }
.f-group select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%235A6478' stroke-width='2.5' stroke-linecap='round' d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; padding-right: 42px;
}
.f-group select option { background: var(--white); color: var(--ink); }
.f-group textarea { resize: vertical; min-height: 110px; }
.f-row { display: grid; gap: 14px; }
@media (min-width: 640px) { .f-row { grid-template-columns: 1fr 1fr; } }
.f-stack { display: flex; flex-direction: column; gap: 16px; }

/* ---- Proof bar ---- */
.proof-bar { background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 20px 0; }
.proof-items { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border-radius: var(--r-md); overflow: hidden; }
.proof-item { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 12px; background: var(--white); text-align: center; }
@media (min-width: 640px)  { .proof-items { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .proof-items { grid-template-columns: repeat(5, 1fr); } }
.proof-num { font-family: var(--f-display); font-size: 28px; font-weight: 800; line-height: 1; color: var(--ink); background: none; -webkit-text-fill-color: currentColor; }
.proof-label { font-family: var(--f-body); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); text-align: center; }

/* Decorative glow "orbs" from the old dark design: not part of the light look */
[class*="-orb"] { display: none !important; }

/* Proof bar: the old 1px-gap grid trick shows grey blocks in the container padding on light pages */
.proof-items { gap: 0; background: none; border-radius: 0; }
.proof-item { border-right: 1px solid var(--line); }
.proof-item:last-child { border-right: 0; }
@media (max-width: 639px) { .proof-item:nth-child(2n) { border-right: 0; } }