/* SMSProxy — orange/red theme.
 * Loaded after shared/style.css. Overrides the navy/blue palette baked into
 * the shared stylesheet so the site echoes the orange-to-red app icon (cream
 * speech bubble on a warm gradient). Touches only this site — shared/ is
 * untouched. */

:root {
  --navy-0: #140400;
  --navy-1: #240800;
  --navy-2: #3c1206;
  --blue-1: #b32a05;
  --blue-2: #e8431a;
  --blue-3: #ff8a5c;
  --ink:    #1a0a04;
  --ink-2:  #3a241c;
  --mute:   #8a766e;
  --line:   #f0e6e1;
  --line-2: #f7efeb;

  /* Warm accent — a single orange-red used consistently across the site. */
  --accent: #ff5722;
}

::selection { background: var(--accent); color: #fff; }

/* Body — warm charcoal radial that glows toward the icon's orange */
body {
  background:
    radial-gradient(120% 80% at 50% -10%, #6e1a06 0%, #2a0a02 52%, #140400 100%);
  background-attachment: fixed;
}

/* Topbar — dark warm glass */
.topbar {
  background: linear-gradient(180deg, rgba(36,8,0,0.7), rgba(36,8,0,0.3));
}

/* Hero glow — orange halo, not blue */
.hero::before {
  background: radial-gradient(circle, rgba(255,87,34,0.22) 0%, transparent 60%);
}

/* Hero headline — white to warm cream.
 * padding-bottom keeps gradient-clipped descenders (the "y" in Proxy) from
 * being cut off by the shared line-height: 0.96. */
h1.title {
  background: linear-gradient(180deg, #fff 0%, #ffd9c8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-bottom: 0.12em;
}

/* CTA hover — go DARK, not light. Keeps white text legible. */
.nav .cta:hover  { background: #2a0a02; color: #fff; }
.btn-primary:hover { background: #2a0a02; color: #fff; }

/* App icon shadow — warm black drop */
.app-icon { box-shadow: 0 8px 28px rgba(60,12,0,0.55); }

/* Phone underside — warm hint replaces blue glow */
.phone {
  box-shadow:
    0 1px 0 rgba(255,255,255,0.08) inset,
    0 -1px 0 rgba(0,0,0,0.5) inset,
    0 30px 60px -10px rgba(0,0,0,0.55),
    0 80px 100px -40px rgba(255,87,34,0.14);
}

/* List row thumbs — warm ladder (country / number tiles) */
.list-row .thumb    { background: linear-gradient(135deg, #ffb38a, #ff6a3c); }
.list-row .thumb.t2 { background: linear-gradient(135deg, #ffa377, #f4582a); }
.list-row .thumb.t3 { background: linear-gradient(135deg, #ff9466, #e8481c); }
.list-row .thumb.t4 { background: linear-gradient(135deg, #ff8552, #d83c14); }
.list-row .thumb.t5 { background: linear-gradient(135deg, #f5743f, #c8330e); }
.list-row .thumb.t6 { background: linear-gradient(135deg, #e8632e, #b32a05); }

/* Status dots — warm, not the shared mensa-green/red */
.list-row .gdot { background: #ff7a4d; box-shadow: 0 0 0 2px rgba(255,122,77,0.18); }
.list-row .rdot { background: #b32a05; box-shadow: 0 0 0 2px rgba(179,42,5,0.18); }

/* Map placeholder + pin — warm neutral (the number card) */
.addr-card .map { background: linear-gradient(135deg, #ffd0b8, #ff8a5c); }
.addr-card .map::after { color: #b32a05; }

/* Menu item thumbs — warm ladder (service tiles) */
.menu-item .mi-img      { background: linear-gradient(135deg, #ffb38a, #ff6a3c); }
.menu-item .mi-img.alt2 { background: linear-gradient(135deg, #ffa377, #e8481c); }
.menu-item .mi-img.alt3 { background: linear-gradient(135deg, #ff8552, #d83c14); }
.menu-item .mi-img.alt4 { background: linear-gradient(135deg, #f5743f, #b32a05); }

/* Inbox row dots — warm, not green/orange semantics */
.mi-station .leaf,
.mi-station .meat { color: #ff7a4d; }

/* Settings group icons — six warm steps */
.gi.b1 { background: #e8431a; }
.gi.b2 { background: #ff6a3c; }
.gi.b3 { background: #d83c14; }
.gi.b4 { background: #ff8552; }
.gi.b5 { background: #c8330e; }
.gi.b6 { background: #b32a05; }

/* Toggle — orange when on, light gray when off */
.toggle { background: var(--accent); }
.toggle.off { background: #c8ccd6; }

/* Feature card icons — solid orange, one tint */
.feat .ico,
.feat .ico.g,
.feat .ico.o,
.feat .ico.r,
.feat .ico.p,
.feat .ico.t {
  background: var(--accent);
  box-shadow: 0 6px 16px rgba(255,87,34,0.32), inset 0 1px 0 rgba(255,255,255,0.22);
}

.feat:hover {
  border-color: var(--accent);
  box-shadow: 0 24px 48px -16px rgba(255,87,34,0.18);
}

/* Download band — warm dark radial */
.download {
  background:
    radial-gradient(80% 100% at 50% 0%, rgba(255,87,34,0.18) 0%, transparent 60%),
    linear-gradient(180deg, #240800, #140400);
}
.download .h2 {
  background: linear-gradient(180deg, #fff, #ffd9c8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Room for clipped descenders ("g"/"p" in "No sign-up.") under line-height: 1 */
  padding-bottom: 0.12em;
}
.download .h2 span { -webkit-text-fill-color: var(--accent); }

/* Platform tile glyph + hover — orange device icons */
.platform .gl {
  background: var(--accent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3);
}
.platform:hover {
  background: rgba(255,87,34,0.12);
  border-color: var(--accent);
}

/* ============ Warm accent moments ============ */
.phone-cell .caption span { color: var(--accent); }
.alt .eyebrow          { color: var(--accent); }
.alt .eyebrow::before  { background: var(--accent); }
.alt .h2 span          { color: var(--accent); }
.hero-icon.app-icon {
  box-shadow: 0 8px 28px rgba(60,12,0,0.55), 0 24px 80px rgba(255,87,34,0.14);
}
footer ul a:hover { color: var(--accent); }