/* ============================================
   SHIPPER.NOW — Complete Design System CSS
   Pixel-perfect clone from screenshots
   ============================================ */

/* ---------- CSS Custom Properties ---------- */
:root {
  --black: #111;
  --grey-text: #808292;
  --purple-ui-1: #771ee6;
  --purple-ui-2: #6b22c7;
  --white: white;
  --ui-green: #1e9a80;
  --peach: #ff895a;
  --lighter-purple: #b780ffc7;
  --baked-purple: #632fe4;
  --soft-lavender: #f3ebff;
  --brown-ui-wpb: #2d2520;
  --bg-purple-ui-for-cta-button: #782cdb;
  --hero-bg: #EDF2FA;
  --card-shadow: rgba(0, 0, 0, 0.08) 0px 4px 24px -2px;
  --dark-panel: #1E2533;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  color: rgb(102, 109, 128);
  background-color: #F9F9F9;
  overflow-x: hidden;
  max-width: 100vw;
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; height: auto; }
button { font-family: inherit; cursor: pointer; }

/* ---------- Typography ---------- */
h1 { font-family: 'Inter', sans-serif; font-size: 48px; font-weight: 500; line-height: 52.8px; letter-spacing: -1.2px; color: rgb(28, 28, 28); }
h2 { font-family: 'Inter', sans-serif; font-size: 42px; font-weight: 500; line-height: 50.4px; color: rgb(28, 28, 28); text-align: center; }
h3 { font-family: 'Inter', sans-serif; font-size: 36px; font-weight: 700; line-height: 46.8px; color: rgb(28, 28, 28); }
.italic-accent { font-family: 'Playfair Display', serif; font-weight: 400; font-style: italic; }
.text-size-22px { font-size: 22px; }
.text-size-20px { font-size: 20px; font-weight: 400; line-height: 28px; color: rgb(28, 28, 28); }
.text-size-18px { font-size: 18px; font-weight: 400; color: rgb(28, 28, 28); }
.text-size-16px { font-size: 16px; font-weight: 400; line-height: 24px; color: rgb(102, 109, 128); }
.text-size-14px { font-size: 14px; font-weight: 400; line-height: 19.6px; color: rgb(102, 109, 128); }
.text-size-12px { font-size: 12px; }
.text-size-30px { font-size: 24px; font-weight: 500; color: rgb(17, 17, 17); }
.weight-light { font-weight: 300; }
.weight-medium { font-weight: 500; }
.weight-semibold { font-weight: 600; }
.weight-bold { font-weight: 700; }
.white-text { color: #fff !important; }
.lavender-text { color: #F3EBFF !important; }
.grey-text { color: rgb(102, 109, 128) !important; }
.purple-text { color: var(--purple-ui-1) !important; }
.muted-text { color: rgba(255,255,255,0.5) !important; }

/* ---------- Layout ---------- */
.container-large { max-width: 1680px; margin: 0 auto; width: 100%; }
.padding-global { padding-left: 40px; padding-right: 40px; }
.padding-section-large { padding-top: 128px; padding-bottom: 128px; }
.section { border-radius: 28px; margin: 16px; background: #fff; box-shadow: rgba(0,0,0,0.05) 0px 4px 8px -1px; overflow: hidden; }
.section-header { text-align: center; margin-bottom: 64px; }
.section-header p { margin-top: 16px; }


/* ── nfstay System Tokens ── */
:root {
  --green: #1e9a80;
  --green-light: rgba(30,154,128,0.08);
  --green-mid: rgba(30,154,128,0.15);
  --bg: #f3f3ee;
  --bg-warm: #e8e5df;
  --card: #fff;
  --text: #1a1a1a;
  --text-2: #6b7280;
  --border: rgba(0,0,0,0.08);
  --border-light: rgba(0,0,0,0.04);
  --shadow-1: 0 2px 12px rgba(0,0,0,0.06);
  --shadow-2: 0 8px 32px rgba(0,0,0,0.12);
  --glass-bg: rgba(255,255,255,0.65);
  --glass-border: rgba(255,255,255,0.35);
  --glass-shadow: 0 4px 24px rgba(0,0,0,0.08);
  --radius: 16px;
  --radius-sm: 10px;
  --radius-xs: 6px;
  --ease: cubic-bezier(0.22,1,0.36,1);
  --section-py: 96px;
  --section-py-m: 56px;
}