/* SellMyFone design system — single source of truth for colour, type, spacing,
   radii and the shared component set. Pages consume these tokens; nothing should
   hardcode a hex value. */

:root{
  /* ---- canonical design tokens ----------------------------------------
     These are the source of truth for the palette. Everything below is an
     alias kept so existing rules keep working without a rewrite of every file. */
  --color-navy:#17324D;
  --color-navy-dark:#10283C;
  --color-steel-blue:#5F7F95;
  --color-mist:#EAF2F5;
  --color-ivory:#F8F6F0;
  --color-surface:#FFFDF9;
  --color-yellow:#F4C95D;
  --color-yellow-hover:#E6B946;
  --color-text:#18232C;
  --color-text-muted:#66727C;
  --color-border:#D8E1E5;
  --color-success:#34745B;

  /* brand */
  --navy:var(--color-navy); --navy-dark:var(--color-navy-dark);
  --steel:var(--color-steel-blue); --mist:var(--color-mist);
  --teal:var(--navy);         /* primary — sections, headings on light, links */
  --teal-dk:var(--navy-dark);      /* hover */
  --accent:var(--color-yellow);       /* warm yellow — primary CTA, selected states */
  --accent-dk:var(--color-yellow-hover);
  --hi:#FBEFCB;           /* pale yellow highlight */
  --price:var(--color-success);        /* money + success */

  /* surfaces */
  --bg:var(--color-ivory);           /* warm ivory page */
  --surface:var(--color-surface);      /* soft white cards */
  --ink:var(--color-text);          /* main text */
  --muted:var(--color-text-muted);        /* secondary text */
  --line:var(--color-border);         /* borders */

  /* legacy aliases — pages were written against these names, so remapping them
     recolours every existing rule instead of forcing a rewrite of each file */
  --blue:var(--teal);
  --blue-dk:var(--teal-dk);
  --green:var(--price);
  --cash:var(--price);
  --gray:var(--muted);
  --soft:var(--surface);
  --white:#fff;

  /* type */
  --disp:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --body:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* shape + motion */
  --r-sm:8px; --r:10px; --r-lg:12px; --r-xl:16px;
  --shadow:0 1px 2px rgba(24,35,32,.04);
  --shadow-lift:0 6px 20px -12px rgba(24,35,32,.22);
  --t:160ms ease;
  --wrap:1280px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--body); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; margin:0;
}
img{max-width:100%}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}

h1,h2,h3,h4{font-family:var(--disp);letter-spacing:-.03em;line-height:1.12;margin:0 0 .4em;color:var(--ink)}
h1{font-size:clamp(38px,5vw,64px);font-weight:700}
h2{font-size:clamp(28px,3.4vw,40px);font-weight:700}
h3{font-size:20px;font-weight:600;letter-spacing:-.02em}
p{margin:0 0 1em;max-width:62ch}
a{color:inherit;text-decoration:none}
.lede{font-size:18px;color:var(--muted);max-width:620px}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}

/* ---- buttons: yellow primary, quiet secondary, no pills ---- */
.btn,.btn-cash,.btn-gold,.btn-add,.btn-ghost{
  font-family:var(--body);font-size:16px;font-weight:600;
  border-radius:var(--r);padding:13px 22px;border:1px solid transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  cursor:pointer;transition:background var(--t),border-color var(--t),color var(--t);
}
.btn-cash,.btn-primary{background:var(--accent);color:var(--ink);border-color:var(--accent)}
.btn-cash:hover,.btn-primary:hover{background:var(--accent-dk);border-color:var(--accent-dk)}
.btn-gold,.btn-secondary,.btn-ghost,.btn-add{background:var(--surface);color:var(--teal);border-color:var(--line)}
.btn-gold:hover,.btn-secondary:hover,.btn-ghost:hover,.btn-add:hover{border-color:var(--teal);background:#fff}
.btn-teal{background:var(--teal);color:#fff;border-color:var(--teal)}
.btn-teal:hover{background:var(--teal-dk)}
.btn:disabled,.btn-cash:disabled{opacity:.45;cursor:not-allowed}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:4px}

/* mist-blue supporting surfaces — info panels, quote summaries, alternate bands */
.mistpanel,.assure,.cosum,.quotecard{background:var(--mist)}
.sec-alt{background:var(--mist)}

/* ---- surfaces ---- */
.card,.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow)}
.tag{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:5px 11px;font-size:13px;font-weight:600;background:var(--hi);color:var(--ink)}

/* line icons — one stroke weight everywhere, never emoji */
.ic{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.ic-lg{width:26px;height:26px}

/* ---- sections ---- */
.sec{padding:76px 0}
.sec-head{margin-bottom:36px;max-width:620px}
.sec-head p{color:var(--muted)}
.band{background:var(--teal);color:#fff}
.band h1,.band h2,.band h3{color:#fff}
.band p{color:rgba(255,255,255,.78)}

@media (max-width:760px){
  body{font-size:16px}
  .sec{padding:52px 0}
  .wrap{padding:0 18px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* ---- logo -----------------------------------------------------------------
   Navy wordmark on light surfaces, white on the navy footer. Height-driven so
   one file works at every size; the package sets a 120px minimum width for the
   primary lockup, and the wordmark alone sits comfortably above that here. */
.brand-logo{height:28px;width:auto;display:block}
.brand{display:inline-flex;align-items:center}
.ft-brand .brand-logo,.brand-logo-rev{height:30px}
@media(max-width:600px){.brand-logo{height:24px}}