/* Caseback — navy & gold theme.
 * Loaded after shared/style.css. Overrides the shared blue palette so the site
 * echoes the app: a deep navy surface, a single gold accent (the app icon's
 * gold), and a serif face matching Caseback's serif-everywhere UI. Touches only
 * this site — shared/ is untouched. */

:root {
  --navy-0: #0a1322;
  --navy-1: #0f1c33;
  --navy-2: #1b2a4a;
  --blue-1: #7a5e18;
  --blue-2: #9a7420;
  --blue-3: #d9b45e;
  --ink:    #11192b;
  --ink-2:  #2c3a54;
  --mute:   #6d7894;
  --line:   #e6e9f1;
  --line-2: #eef1f7;

  /* Gold accent — the single colour used consistently across the site. */
  --accent: #c49a3b;

  /* Serif everywhere, matching the app's system-serif UI (New York on Apple). */
  --sans: ui-serif, "Iowan Old Style", "Palatino Linotype", Georgia, "Times New Roman", serif;
}

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

/* Body — deep navy radial */
body {
  background:
    radial-gradient(120% 80% at 50% -10%, #2a3c64 0%, #101c33 55%, #0a1322 100%);
  background-attachment: fixed;
}

/* Topbar — dark navy glass */
.topbar {
  background: linear-gradient(180deg, rgba(15,28,51,0.7), rgba(15,28,51,0.3));
}

/* Hero glow — gold halo */
.hero::before {
  background: radial-gradient(circle, rgba(196,154,59,0.18) 0%, transparent 60%);
}

/* Hero headline — white to pale gold. padding-bottom protects gradient-clipped
 * descenders from the shared tight line-height. */
h1.title {
  background: linear-gradient(180deg, #fff 0%, #e8d3a0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-bottom: 0.1em;
}

/* CTA hover — deepen to navy, keep white text legible */
.nav .cta:hover  { background: #1b2a4a; color: #fff; }
.btn-primary:hover { background: #1b2a4a; color: #fff; }

/* App icon shadow — deep navy drop with a gold whisper */
.app-icon { box-shadow: 0 8px 28px rgba(6,12,28,0.6); }

/* Phone underside — gold 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(196,154,59,0.16);
}

/* List row thumbs — navy ladder (watch cases), so gold accents pop */
.list-row .thumb    { background: linear-gradient(135deg, #3a4a6e, #1b2a4a); }
.list-row .thumb.t2 { background: linear-gradient(135deg, #33446a, #182542); }
.list-row .thumb.t3 { background: linear-gradient(135deg, #2d3e62, #16223c); }
.list-row .thumb.t4 { background: linear-gradient(135deg, #3e4f74, #20304e); }
.list-row .thumb.t5 { background: linear-gradient(135deg, #2a3b5e, #141f38); }
.list-row .thumb.t6 { background: linear-gradient(135deg, #32445e, #18253f); }

/* Status dots — gold for "in your collection", muted otherwise */
.list-row .gdot { background: var(--accent); box-shadow: 0 0 0 2px rgba(196,154,59,0.18); }
.list-row .rdot { background: #6d7894; box-shadow: 0 0 0 2px rgba(109,120,148,0.18); }

/* Map placeholder + pin — navy card, gold marker */
.addr-card .map { background: linear-gradient(135deg, #3a4a6e, #1b2a4a); }
.addr-card .map::after { color: var(--accent); }

/* Menu item thumbs — navy ladder */
.menu-item .mi-img      { background: linear-gradient(135deg, #3a4a6e, #1b2a4a); }
.menu-item .mi-img.alt2 { background: linear-gradient(135deg, #33446a, #16223c); }
.menu-item .mi-img.alt3 { background: linear-gradient(135deg, #2d3e62, #141f38); }
.menu-item .mi-img.alt4 { background: linear-gradient(135deg, #3e4f74, #20304e); }

/* Row dots — gold */
.mi-station .leaf,
.mi-station .meat { color: var(--accent); }

/* Settings group icons — gold steps, navy glyphs */
.gi.b1 { background: #d9b45e; }
.gi.b2 { background: #c89c40; }
.gi.b3 { background: #b88c2e; }
.gi.b4 { background: #cfa848; }
.gi.b5 { background: #a87c24; }
.gi.b6 { background: #8a6a1c; }
.grp-row .gi { color: #1b2a4a; }

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

/* Feature card icons — gold, with navy glyphs for contrast */
.feat .ico,
.feat .ico.g,
.feat .ico.o,
.feat .ico.r,
.feat .ico.p,
.feat .ico.t {
  background: linear-gradient(135deg, #d9b45e, #b8902f);
  color: #1b2a4a;
  box-shadow: 0 6px 16px rgba(196,154,59,0.30), inset 0 1px 0 rgba(255,255,255,0.35);
}

.feat:hover {
  border-color: var(--accent);
  box-shadow: 0 24px 48px -16px rgba(196,154,59,0.20);
}

/* Download band — navy radial with a gold glow */
.download {
  background:
    radial-gradient(80% 100% at 50% 0%, rgba(196,154,59,0.16) 0%, transparent 60%),
    linear-gradient(180deg, #0f1c33, #0a1322);
}
.download .h2 {
  background: linear-gradient(180deg, #fff, #e8d3a0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Room for clipped descenders (e.g. the "g" in "go further") */
  padding-bottom: 0.12em;
}
/* Stack the download heading as three lines: prefix / accent / suffix.
 * The shared template only breaks once (accent stays inline with the prefix);
 * making the accent span a block and dropping the template <br/> gives three
 * clean centred lines with no empty gap. */
.download .h2 span { -webkit-text-fill-color: var(--accent); display: block; }
.download .h2 br { display: none; }

/* Platform tile glyph + hover — gold tile, navy glyph */
.platform .gl {
  background: linear-gradient(135deg, #d9b45e, #b8902f);
  color: #1b2a4a;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35);
}
.platform:hover {
  background: rgba(196,154,59,0.12);
  border-color: var(--accent);
}

/* ============ Gold 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(6,12,28,0.6), 0 24px 80px rgba(196,154,59,0.16);
}
footer ul a:hover { color: var(--accent); }