/* ============================================================
   The Salt Rim — Bar Calculator (public page)
   Mobile-first, on-brand (navy / gold / cream, Playfair + Inter)
   Relies on /css/tokens.css for --navy / --gold / --cream / etc.
   ============================================================ */

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--font-sans);background:var(--cream);color:var(--navy);line-height:1.55;-webkit-font-smoothing:antialiased}
.serif{font-family:var(--font-serif)}
a{color:inherit}
img{max-width:100%;display:block}
em{font-style:italic;color:var(--gold-dark)}

.bc-wrap{max-width:1040px;margin:0 auto;padding:0 22px}

/* ---------- Header ---------- */
.bc-header{position:sticky;top:0;z-index:30;background:var(--navy);color:var(--cream);display:flex;align-items:center;justify-content:space-between;padding:12px 22px}
.bc-header__logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.bc-header__mark{border-radius:50%}
.bc-header__wordmark{font-family:var(--font-serif);font-weight:700;font-size:1.15rem;letter-spacing:.3px;color:var(--cream)}
.bc-header__nav{display:flex;align-items:center;gap:18px}
.bc-header__nav a{font-size:.9rem;font-weight:600;text-decoration:none;color:var(--cream)}
.bc-header__nav a:hover{color:var(--gold-light)}
.bc-header__cta{background:var(--gold);color:var(--navy)!important;padding:8px 16px;border-radius:30px}
.bc-header__cta:hover{background:var(--gold-light)}
@media(max-width:520px){
  .bc-header__nav a:not(.bc-header__cta){display:none}
}

/* ---------- Hero / intro ---------- */
.bc-hero{padding:42px 0 14px;text-align:center}
.bc-eyebrow{font-size:.72rem;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--gold-dark)}
.bc-h1{font-family:var(--font-serif);font-size:clamp(2.1rem,7vw,3.2rem);line-height:1.06;margin:12px 0 16px}
.bc-lede{font-size:1.08rem;color:var(--gray-700);max-width:62ch;margin:0 auto 16px}
.bc-intro{font-size:.96rem;color:var(--gray-600);max-width:68ch;margin:0 auto}
.bc-intro strong,.bc-lede strong{color:var(--navy)}

/* ---------- Calculator layout ---------- */
.bc-calc{padding:24px 0 10px}
.bc-grid{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:860px){
  .bc-grid{grid-template-columns:0.9fr 1.1fr;align-items:start}
  .bc-results{position:sticky;top:84px}
}

.bc-card{background:var(--white);border:1px solid var(--cream-dark);border-radius:var(--radius-lg,16px);padding:24px;box-shadow:var(--shadow-lg,0 8px 32px rgba(19,30,53,.12))}
.bc-card__title{font-size:1.35rem;margin-bottom:18px}

/* Inputs */
.bc-field{margin-bottom:20px}
.bc-field>label,.bc-field__lbl{display:flex;justify-content:space-between;align-items:baseline;font-weight:600;font-size:.94rem;margin-bottom:8px}
.bc-field__val{color:var(--gold-dark);font-weight:700;font-size:1rem}
.bc-field input[type=range]{width:100%;accent-color:var(--gold);cursor:pointer;height:26px}

.bc-types{display:flex;flex-wrap:wrap;gap:8px}
.bc-chip{background:var(--cream);border:2px solid var(--cream-dark);border-radius:30px;padding:9px 14px;font-family:var(--font-sans);font-weight:600;font-size:.86rem;color:var(--navy);cursor:pointer;transition:var(--transition-fast,.15s)}
.bc-chip:hover{border-color:var(--gold-light)}
.bc-chip.is-on{border-color:var(--gold);background:#fff;box-shadow:0 4px 14px rgba(201,168,76,.18)}

.bc-seg{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.bc-seg__btn{background:var(--cream);border:2px solid var(--cream-dark);border-radius:12px;padding:11px 6px;cursor:pointer;font-family:var(--font-sans);font-weight:700;font-size:.9rem;color:var(--navy);transition:var(--transition-fast,.15s);display:flex;flex-direction:column;gap:2px;align-items:center;min-height:52px}
.bc-seg__btn span{font-weight:500;font-size:.7rem;color:var(--gray-500)}
.bc-seg__btn:hover{border-color:var(--gold-light)}
.bc-seg__btn.is-on{border-color:var(--gold);background:#fff;box-shadow:0 4px 14px rgba(201,168,76,.16)}
.bc-seg__btn.is-on span{color:var(--gold-dark)}

/* Results */
.bc-results{background:var(--navy);color:var(--cream);border-color:var(--navy-light)}
.bc-headline{text-align:center;margin-bottom:6px}
.bc-headline__lbl{display:block;font-size:.72rem;letter-spacing:2px;text-transform:uppercase;color:var(--gold-light);margin-bottom:2px}
.bc-headline__num{font-family:var(--font-serif);font-size:3.6rem;font-weight:700;color:var(--gold);line-height:1}
.bc-summary{text-align:center;font-size:.9rem;color:#cfc9bf;margin:6px auto 18px;max-width:46ch}

.bc-cost{display:flex;justify-content:space-between;align-items:center;border-top:1px dashed rgba(255,255,255,.2);border-bottom:1px dashed rgba(255,255,255,.2);padding:14px 0;margin-bottom:18px;font-weight:600;font-size:.94rem}
.bc-cost__amt{font-family:var(--font-serif);font-size:1.6rem;color:var(--gold)}

.bc-list{display:flex;flex-direction:column;gap:16px}
.bc-cat__title{font-size:.72rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold-light);margin-bottom:8px}
.bc-row{display:flex;justify-content:space-between;gap:12px;align-items:baseline;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.12);font-size:.92rem}
.bc-cat .bc-row:last-child{border-bottom:none}
.bc-row__name{flex:1}
.bc-row__note{display:block;font-size:.76rem;color:#9c958a;font-style:normal;margin-top:2px}
.bc-row__qty{font-weight:700;color:var(--gold);white-space:nowrap;font-variant-numeric:tabular-nums}

.bc-disclaimer{font-size:.76rem;color:#9c958a;margin-top:18px;line-height:1.5}

/* ---------- Lead capture ---------- */
.bc-lead{padding:36px 0}
.bc-lead__card{background:linear-gradient(160deg,#16243f,var(--navy));color:var(--cream);border-radius:20px;padding:34px 28px;text-align:center;box-shadow:var(--shadow-xl,0 16px 48px rgba(19,30,53,.16))}
.bc-lead__title{font-size:clamp(1.5rem,4.5vw,2rem);line-height:1.15;max-width:24ch;margin:0 auto 10px}
.bc-lead__sub{color:#cfc9bf;font-size:.98rem;max-width:54ch;margin:0 auto 22px}
.bc-lead__ctas{display:flex;flex-direction:column;gap:18px;align-items:center}

.bc-btn{display:inline-block;text-decoration:none;text-align:center;font-family:var(--font-sans);font-weight:700;border:none;border-radius:30px;padding:14px 26px;cursor:pointer;transition:var(--transition-fast,.15s)}
.bc-btn--lg{padding:16px 32px;font-size:1.05rem}
.bc-btn--gold{background:var(--gold);color:var(--navy)}
.bc-btn--gold:hover{background:var(--gold-light)}
.bc-btn--navy{background:var(--navy-light);color:var(--cream);border:1.5px solid var(--gold)}
.bc-btn--navy:hover{background:var(--gold);color:var(--navy)}

.bc-lead__form{width:100%;max-width:560px}
.bc-lead__formlabel{font-size:.86rem;color:#cfc9bf;margin-bottom:10px}
.bc-lead__row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.bc-input{flex:1 1 160px;min-width:140px;border:1.5px solid rgba(255,255,255,.25);background:rgba(255,255,255,.06);color:var(--cream);border-radius:12px;padding:13px 14px;font-family:var(--font-sans);font-size:16px}
.bc-input::placeholder{color:#9c958a}
.bc-input:focus{outline:none;border-color:var(--gold)}
.bc-lead__row .bc-btn{flex:1 1 130px}
.bc-lead__msg{margin-top:12px;font-size:.88rem;font-weight:600}
.bc-lead__msg.is-ok{color:var(--gold-light)}
.bc-lead__msg.is-err{color:#f0a3a3}
.bc-lead__giveaway{margin-top:20px;font-size:.9rem;color:#cfc9bf}
.bc-lead__giveaway a{color:var(--gold-light);font-weight:700;text-decoration:none}
.bc-lead__giveaway a:hover{text-decoration:underline}

/* ---------- FAQ ---------- */
.bc-faq{padding:20px 0 50px}
.bc-section-title{font-size:clamp(1.6rem,5vw,2.2rem);text-align:center;margin-bottom:24px}
.bc-faq__item{background:var(--white);border:1px solid var(--cream-dark);border-radius:14px;padding:6px 20px;margin-bottom:12px;box-shadow:var(--shadow-sm,0 1px 3px rgba(19,30,53,.08))}
.bc-faq__item summary{font-weight:700;font-size:1.02rem;padding:14px 0;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px}
.bc-faq__item summary::-webkit-details-marker{display:none}
.bc-faq__item summary::after{content:'+';color:var(--gold-dark);font-size:1.5rem;font-weight:400;line-height:1}
.bc-faq__item[open] summary::after{content:'–'}
.bc-faq__item p{padding:0 0 16px;font-size:.95rem;color:var(--gray-700)}
.bc-faq__item p strong{color:var(--navy)}

/* ---------- Footer ---------- */
.bc-footer{background:var(--navy);color:var(--cream);padding:34px 0 28px}
.bc-footer__cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;padding-bottom:22px;border-bottom:1px solid rgba(255,255,255,.12);margin-bottom:18px}
.bc-footer__cta span{font-family:var(--font-serif);font-size:1.1rem}
.bc-footer__links{display:flex;flex-wrap:wrap;gap:18px;margin-bottom:14px}
.bc-footer__links a{font-size:.9rem;color:var(--cream);text-decoration:none;font-weight:500}
.bc-footer__links a:hover{color:var(--gold-light)}
.bc-footer__brand{font-size:.78rem;color:#9c958a}