/* ================= LIGHT SMOKY THEME =================
   Dark navy is now reserved for three moments: the hero, the 51 Steeves
   proof band, and the closer. Everything else is light smoky grey, which
   gives the page air and, critically, gives the dark phone something to
   sit against so the case actually reads. ==================== */

:root{
  --smoke-l:#e7e8ea;      /* main light surface */
  --smoke-l2:#dcdee1;     /* alternating / inset panels */
  --smoke-l3:#f2f3f4;     /* lightest, for cards on smoke */
  --ink:#131820;
  --ink-2:#39414f;
  --ink-3:#6b7484;
  --hair:rgba(19,24,32,.14);
  --gold-ink:#8a6f13;     /* gold that stays legible on light */
}

body{background:var(--smoke-l);color:var(--ink)}

/* ---------- nav ---------- */
/* the pill carries its own background; only the ink is themed here */
nav.nav{color:var(--paper)}
nav.nav .brand{color:#fff}
nav.nav .brand i{color:var(--gold)}

/* hero sits on navy, so it keeps the dark-theme text colours */
.hero{color:var(--paper)}
.hero h1{color:#fff}
.hero p{color:var(--muted)}
.hero .kicker,.hero h1 em{color:var(--gold)}
.hero-meta{color:var(--muted)}
.hero .btn.ghost{border-color:rgba(242,245,252,.32);color:#fff}
.hero .btn.ghost:hover{background:rgba(242,245,252,.09)}

/* ---------- journey chapters go light so the phone pops ---------- */
.chapter,.chapter.alt{background:var(--smoke-l);border-top:1px solid var(--hair);border-bottom:none}
.chapter.alt{background:var(--smoke-l2)}
.chapter h3{color:var(--ink)}
.chapter p,.chapter.alt p{color:var(--ink-2)}
.chapter .num{color:var(--gold-ink)}
.trigger,.chapter.alt .trigger{background:rgba(210,175,53,.16);border-color:rgba(138,111,19,.38);color:var(--ink-2)}
.trigger b{color:var(--ink)}
.tabs-hint{color:var(--gold-ink)}
.demo-tabs button{border-color:var(--hair);color:var(--ink-2)}
.demo-tabs button:hover{color:var(--ink);border-color:rgba(19,24,32,.34);background:rgba(19,24,32,.04)}
.demo-tabs button[aria-current="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}

.demo-note{background:var(--smoke-l)}
.demo-note .inner{background:var(--smoke-l3);border-color:var(--hair);color:var(--ink-3)}
.demo-note b{color:var(--ink)}

/* ---------- the phone: give the case presence ---------- */
.phonefly .inner > img{
  filter:drop-shadow(0 26px 44px rgba(19,24,32,.42)) drop-shadow(0 3px 8px rgba(19,24,32,.28));
}
.phonefly.fly .inner > img{
  filter:drop-shadow(0 40px 66px rgba(19,24,32,.5)) drop-shadow(0 4px 10px rgba(19,24,32,.3));
}

/* ---------- ledger ---------- */
.ledger{background:var(--smoke-l2);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.ledger-head h2{color:var(--ink)}
.ledger-live{color:var(--gold-ink)}
.ledger-live i{background:var(--gold-ink)}
.ledger-grid{background:var(--hair);border-color:var(--hair)}
.lcell{background:var(--smoke-l3)}
.lcell small{color:var(--ink-3)}
.lcell b{color:var(--ink)}
.lcell b.gold{color:var(--gold-ink)}
.lcell span{color:var(--ink-2)}
.ledger-foot{color:var(--ink-3)}

/* ---------- reveal ---------- */
.reveal-sec{background:var(--smoke-l)}
.reveal-head h2{color:var(--ink)}
.reveal-head .lead{color:var(--ink-2)}
.rv-cap{color:var(--ink-3)}

/* ---------- speed band ---------- */
section.block.band#speed{background:var(--smoke-l);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);color:var(--ink)}
#speed h2{color:var(--ink)}
#speed .lead{color:var(--ink-2)}
#speed .stat{border-top-color:var(--hair)}
#speed .stat b{color:var(--gold-ink)}
#speed .stat span{color:var(--ink-2)}
.addr input[type=text]{background:#fff;border-color:var(--hair);color:var(--ink)}
.addr input[type=text]::placeholder{color:var(--ink-3)}
.addr input[type=text]:focus{border-color:var(--gold-ink);background:#fff}
.addr-note{color:var(--ink-3)}

/* ---------- 51 Steeves proof stays dark, photos pop ---------- */
#proof{background:var(--navy);color:var(--paper);border-top:1px solid rgba(169,184,215,.18)}
#proof h2{color:#fff}
#proof .lead{color:var(--muted)}
#proof .trip figure{background:var(--navy-3);border-color:rgba(169,184,215,.2)}
#proof .trip figcaption{color:var(--muted)}
#proof .trip figcaption b{color:#fff}

/* ---------- breather ---------- */
.breather{background:var(--smoke-l2);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.breather blockquote{color:var(--ink)}
.breather .who{color:var(--ink-3)}

/* ---------- trust cards on light ---------- */
section.block.band:not(#speed){background:var(--smoke-l);border-top:none;border-bottom:1px solid var(--hair);color:var(--ink)}
section.block.band:not(#speed) h2{color:var(--ink)}
.tcard{background:var(--smoke-l3);border-color:var(--hair)}
.tcard h3{color:var(--ink)}
.tcard p{color:var(--ink-2)}

/* ---------- closer returns to navy ---------- */
.closer{background:var(--navy);color:var(--paper)}
.closer h2{color:#fff}
.closer .lead{color:var(--muted)}

footer{background:var(--navy);color:var(--muted);border-top:none}
footer a{color:var(--muted);text-decoration:none}
footer a:hover{color:#fff}

/* ---------- footer sitemap ---------- */
.fmap{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;padding-bottom:28px}
@media(max-width:820px){.fmap{grid-template-columns:repeat(2,1fr)}}
.fmap h4{font-size:.64rem;font-weight:800;letter-spacing:.18em;color:var(--gold);margin-bottom:10px}
.fmap ul{list-style:none;display:grid;gap:7px}
.fmap a{font-size:.86rem}
.fbottom{border-top:1px solid rgba(169,184,215,.18);padding-top:22px;display:flex;
  justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.84rem}

/* ---------- MOBILE: make the phone a real object ---------- */
@media(max-width:1040px){
  .phonefly{width:min(340px,84vw);margin:8px auto 0}
  .phonefly .inner{filter:none}
}
@media(max-width:1040px){
  /* seat the phone on its own light panel so the dark case has contrast */
  .phonefly{padding:26px 0 30px}
  .phonefly::before{content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);
    width:100vw;height:100%;background:var(--smoke-l3);border-top:1px solid var(--hair);
    border-bottom:1px solid var(--hair);z-index:-1}
}