
/* ==========================================================================
   sell for money — its own palette, taken from the logo:
   navy #001A44, a single bright blue #007DFB, and cool paper.
   Every component reads these tokens, so one block re-themes the whole page.
   ========================================================================== */
body.sfm-sell{
  --ink:#001A44;
  --ink-2:#062552;
  --ink-3:#123A6E;
  --muted:#4B5D7A;
  --dim:#7C8CA6;
  --rule:#D2DEF0;
  --rule-ink:#0A2A55;
  --red:#007DFB;          /* the accent slot the rest of the system uses */
  --red-dark:#0059C4;
  --paper:#FFFFFF;
  --paper-2:#F1F6FD;
  --paper-3:#FFFFFF;
  --bg:#FFFFFF;
  --sheet:#FFFFFF;
  --sand:#E8F0FB;
  --line-2:rgba(0,26,68,.07);
  --shadow-2:0 2px 8px rgba(0,26,68,.06), 0 40px 80px -46px rgba(0,26,68,.38);
}
body.sfm-sell .cta{background:#007DFB;border-color:#007DFB;color:#fff}
body.sfm-sell .cta:hover{background:#0059C4;border-color:#0059C4}
body.sfm-sell .opt.sel{background:#001A44;color:#fff;border-color:#001A44}
body.sfm-sell .badge.ok{background:#E4F1E6;color:#1F6B33}
body.sfm-sell .qpager-bar i{background:#007DFB}

/* brand lockup in the header and footer */
.sfm-brand img{height:38px;width:auto;border-radius:0}
.sfm-brand b{font-family:var(--display);font-size:17px;letter-spacing:-.02em;color:#001A44;text-transform:none}
.sfm-brand b em{font-style:normal;color:#007DFB}
.sfm-foot-brand{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.sfm-foot-brand .sfm-logo-box{background:#fff;border-radius:10px;padding:8px 12px;display:inline-block}
.sfm-foot-brand img{height:34px;width:auto;display:block}

/* sell for money — its own layout: centred hero, the valuation card sits under the
   headline rather than beside it, and the page runs as a single column of blocks. */

.sfm-hdr .hdr-in{max-width:1180px}
.sfm-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.sfm-brand img{height:34px;width:34px;display:block;border-radius:9px}
.sfm-brand b{font-family:var(--sans);font-size:16.5px;font-weight:600;letter-spacing:-.02em}
.sfm-brand b em{font-style:normal;color:var(--red)}

/* centred hero */
.sfm-hero{padding:74px 0 58px;text-align:center;position:relative;overflow:hidden;
  /* the valuation card is white — the hero has to be tinted or the card disappears into the page */
  background:linear-gradient(180deg,#E9F1FC 0%,#F2F7FE 48%,#FBFCFF 100%)}
.sfm-hero .wrap{max-width:920px}
.sfm-hero h1{font-size:clamp(34px,5.4vw,64px);line-height:1.02;letter-spacing:-.045em;margin:20px auto 0;max-width:19ch}
.sfm-hero h1 em{font-style:normal;color:var(--red)}
.sfm-hero .sub{margin:20px auto 0;max-width:60ch;font-size:16.5px;line-height:1.65;color:var(--muted)}
.sfm-facts{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;margin-top:22px;
  font-family:var(--mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--dim)}
.sfm-facts span::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;
  background:#007DFB;vertical-align:2px;margin-right:7px}

/* the valuation card, centred and wider than on the other site */
.sfm-vwrap{max-width:760px;margin:38px auto 0;text-align:left}
/* the card is the page's main action: it must never depend on a script to become visible */
.sfm-vwrap .vcard{opacity:1;transform:none;margin:0;
  box-shadow:0 26px 60px -30px rgba(22,21,15,.40), 0 2px 8px rgba(22,21,15,.08);
  border:1px solid rgba(22,21,15,.12)}

/* three steps */
.sfm-steps{padding:56px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);background:var(--paper-2)}
.sfm-steps .wrap{max-width:1080px}
.sfm-steps h2{font-size:clamp(22px,2.6vw,30px);letter-spacing:-.03em;margin-bottom:26px}
.sfm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
@media(max-width:820px){.sfm-grid{grid-template-columns:1fr}}
.sfm-step{padding:0 26px;border-left:1px solid var(--rule)}
.sfm-step:first-child{padding-left:0;border-left:0}
.sfm-step .n{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--red)}
.sfm-step h3{font-size:17px;margin:10px 0 8px;letter-spacing:-.01em}
.sfm-step p{font-size:14.5px;line-height:1.6;color:var(--muted)}

/* price ledger gets more air on this page */
.sfm-sell #prices .ledger{border-top-width:2px}
.sfm-sell .snum{color:var(--red)}

/* footer: single tidy band */
.sfm-foot{border-top:1px solid var(--ink);padding:44px 0 40px;background:var(--ink);color:var(--paper)}
.sfm-foot a{color:var(--paper)}
.sfm-foot .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:34px}
@media(max-width:820px){.sfm-foot .foot-grid{grid-template-columns:1fr;gap:22px}}
.sfm-foot h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:#8E8A80;margin-bottom:10px}
.sfm-foot p,.sfm-foot a{font-size:14px;line-height:1.7;color:#D9D4C8}
.sfm-legal{margin-top:30px;padding-top:18px;border-top:1px solid #2A2F36;font-family:var(--mono);
  font-size:10.5px;line-height:1.9;color:#7E7A70}
.sfm-legal b{color:#C9C4B8;font-weight:600}

/* footer brand mark for this site */
.sfm-foot-brand{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.sfm-foot-brand img{height:42px;width:auto;max-width:230px;border-radius:0;display:block}
.sfm-foot-brand b{font-family:var(--sans);font-size:16px;font-weight:600;letter-spacing:-.02em;color:var(--paper)}
.sfm-foot-brand b em{font-style:normal;color:#E4402F}
.foot .foot-logo{display:none}

body.sfm-sell .sfm-hero .eyebrow{color:#3E5474;opacity:1!important;font-weight:500}
body.sfm-sell .sfm-hero .eyebrow .pulse{background:#007DFB}
body.sfm-sell .sfm-steps{background:#F4F8FE;border-color:#D8E4F5}
body.sfm-sell .sfm-step{border-color:#D8E4F5}
body.sfm-sell .sfm-step .n{color:#007DFB}
body.sfm-sell .sfm-vwrap .vcard{border-color:rgba(0,26,68,.10)}
body.sfm-sell .foot{background:#001A44}
body.sfm-sell .first-price{border-top-color:#001A44}
