/* The Mail Box Store — website theme
   Light, professional, conversion-focused. Brand navy + red on white,
   light-gray section separation, Inter. Fonts are loaded async from index.html. */

:root{
  /* brand */
  --navy:      #1f2d6e;   /* headers, headings, footer */
  --navy-deep: #16204f;   /* darker navy for gradients / hovers */
  --navy-700:  #26327a;
  --blue:      #2e5bd0;   /* links, secondary accents */
  --red:       #e02b26;   /* primary CTA */
  --red-dark:  #c0201c;
  --gold:      #d9a441;   /* small trust accents */

  /* neutrals */
  --bg:        #ffffff;
  --bg-soft:   #f4f6fa;   /* light gray sections */
  --bg-softer: #eef1f7;
  --ink:       #14161c;   /* body text */
  --ink-soft:  #3c4250;
  --muted:     #6b7280;
  --border:    #e3e7ef;
  --border-2:  #d5dbe8;

  /* semantic */
  --success: #17924e;

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 18px;
  --shadow-sm: 0 1px 2px rgba(20,30,60,.06), 0 1px 3px rgba(20,30,60,.08);
  --shadow: 0 6px 20px -6px rgba(20,30,60,.16), 0 2px 6px rgba(20,30,60,.06);
  --shadow-lg: 0 18px 48px -14px rgba(20,30,60,.28);

  --container: 1200px;
  --header-h: 76px;

  --ease: cubic-bezier(.4,0,.2,1);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:var(--blue); text-decoration:none; }
h1,h2,h3,h4{ color:var(--navy); font-weight:800; line-height:1.15; letter-spacing:-.02em; margin:0; }
p{ margin:0 0 1rem; }
button{ font-family:inherit; }
:focus-visible{ outline:3px solid var(--blue); outline-offset:2px; border-radius:4px; }

.container{ max-width:var(--container); margin:0 auto; padding:0 24px; }
.section{ padding:72px 0; }
.section--soft{ background:var(--bg-soft); }
.section--navy{ background:var(--navy); }
.eyebrow{ display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--red); margin-bottom:14px; }
.section__head{ max-width:720px; margin:0 auto 44px; text-align:center; }
.section__head.left{ margin-left:0; text-align:left; }
.section__head h2{ font-size:clamp(28px,3.4vw,40px); }
.section__head p{ color:var(--ink-soft); font-size:18px; margin-top:12px; }

.lede{ font-size:19px; color:var(--ink-soft); }
.muted{ color:var(--muted); }

/* utility bar links */
.ub-link{ color:#c9d2ee; display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:500; }
.ub-link:hover{ color:#fff; }

/* grids */
.grid{ display:grid; gap:24px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:1024px){ .grid-4{ grid-template-columns:repeat(2,1fr);} .grid-3{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:640px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr;} .section{ padding:52px 0; } }

/* reveal on scroll */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } html{ scroll-behavior:auto; } }

/* plain page hero (no photo) — used by legal pages */
.pg-hero--plain{ background:linear-gradient(120deg,var(--navy-deep),var(--navy)); }

/* legal / long-form document */
.legal{ max-width:820px; margin:0 auto; }
.legal__block{ margin-bottom:34px; }
.legal__block:last-child{ margin-bottom:0; }
.legal h2{ font-size:clamp(20px,2.4vw,26px); margin-bottom:14px; }
.legal p{ color:var(--ink-soft); font-size:16px; line-height:1.75; margin:0 0 14px; }
.legal p:last-child{ margin-bottom:0; }
.legal__list{ margin:0 0 16px; padding-left:22px; }
.legal__list li{ color:var(--ink-soft); font-size:16px; line-height:1.7; margin-bottom:8px; }
.legal a{ color:var(--blue); text-decoration:underline; }