/* ============================================================
   REALTOR MARKETING LABS — shared.css
   Linked by every page. Contains:
   - Reset & base
   - Design tokens (CSS variables)
   - Typography
   - Layout utilities
   - Button system
   - Navigation (desktop + mobile drawer)
   - Footer
   - Scroll-reveal animation
   - Cookie bar
   - Modal (playbook download)
   - Responsive breakpoints
   ============================================================ */

/* ── RESET ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: #1a1a2e;
  background: #fff;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, svg, video, iframe, embed, canvas { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
button { font-family: 'Plus Jakarta Sans', sans-serif; cursor: pointer; }
input, select, textarea { font-family: 'Plus Jakarta Sans', sans-serif; }

/* ── DESIGN TOKENS ───────────────────────────────────────── */
:root {
  /* Brand colours */
  --navy:      #0B1F3A;
  --navy-mid:  #122847;
  --gold:      #B8901F;
  --gold-l:    #D4A832;
  --gold-pale: #FFF8E7;
  --gold-border:#EDD890;
  --teal:      #0F6E56;

  /* Neutrals */
  --off:  #FAFAF8;
  --sl:   #F4F2EE;
  --sm:   #E8E4DC;
  --body: #1a1a2e;
  --muted:#6B6B7B;

  /* Border radius */
  --r4:  4px;
  --r8:  8px;
  --r12: 12px;
  --r16: 16px;
  --r24: 24px;

  /* Shadows */
  --sh1: 0 1px 4px rgba(11,31,58,.08);
  --sh2: 0 4px 20px rgba(11,31,58,.10);
  --sh3: 0 12px 48px rgba(11,31,58,.14);

  /* Layout */
  --max: 1160px;
  --sp:  96px 0;       /* section padding */
  --sp-sm: 64px 0;    /* smaller section padding */
}

/* ── TYPOGRAPHY ──────────────────────────────────────────── */
h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.02em;
  color: var(--navy);
}
h2 {
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.015em;
  color: var(--navy);
}
h3 { font-size: 1.1rem; font-weight: 700; color: var(--navy); line-height: 1.3; }
h4 { font-size: .875rem; font-weight: 700; color: var(--navy); }
p  { font-size: 1rem; color: var(--muted); line-height: 1.75; }

.gold  { color: var(--gold); }
.serif { font-family: 'Lora', serif; }
.lead  { font-size: 1.125rem; color: var(--muted); line-height: 1.75; }

/* ── LAYOUT ──────────────────────────────────────────────── */
.container {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 28px;
}
.section        { padding: var(--sp); }
.section-sm     { padding: var(--sp-sm); }
.bg-off         { background: var(--off); }
.bg-navy        { background: var(--navy); }
.bg-pale        { background: var(--gold-pale); border-top: 1px solid var(--gold-border); border-bottom: 1px solid var(--gold-border); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

.section-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 56px;
}
.section-header p { margin-top: 14px; }

/* label pill above headings */
.label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}
.label::before {
  content: '';
  width: 18px; height: 2px;
  background: var(--gold);
  border-radius: 2px;
  flex-shrink: 0;
}
.label-center { justify-content: center; }
.label-center::before { display: none; }

/* ── BUTTONS ─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: var(--r8);
  font-size: .9375rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all .2s;
  white-space: nowrap;
  line-height: 1;
  text-decoration: none;
}
.btn-lg  { padding: 16px 34px; font-size: 1rem; }
.btn-sm  { padding: 9px 18px;  font-size: .84rem; }

.btn-gold   { background: var(--gold);  color: #fff; }
.btn-gold:hover { background: var(--gold-l); transform: translateY(-1px); box-shadow: var(--sh2); }

.btn-outline  { background: transparent; color: var(--navy); border: 1.5px solid var(--navy); }
.btn-outline:hover { background: var(--navy); color: #fff; }

.btn-outline-w { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.45); }
.btn-outline-w:hover { background: rgba(255,255,255,.12); border-color: #fff; }

.btn-ghost { background: var(--sl); color: var(--navy); border: 1.5px solid var(--sm); }
.btn-ghost:hover { background: var(--sm); }

/* ── SCROLL REVEAL ───────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1);
}
.reveal.visible { opacity: 1; transform: none; }
.reveal.from-left  { transform: translateX(-24px); }
.reveal.from-right { transform: translateX(24px); }
.reveal.visible.from-left,
.reveal.visible.from-right { transform: none; }
.delay-1 { transition-delay: .1s; }
.delay-2 { transition-delay: .2s; }
.delay-3 { transition-delay: .3s; }
.delay-4 { transition-delay: .4s; }

/* ── NAVIGATION ──────────────────────────────────────────── */
#nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  transition: background .3s, box-shadow .3s;
}
#nav.scrolled {
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(12px);
  box-shadow: var(--sh1);
}
.nav-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 28px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* Logo */
.nav-logo {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-decoration: none;
  flex-shrink: 0;
}
.nav-logo-name {
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.01em;
  line-height: 1;
  transition: color .3s;
}
.nav-logo-tag {
  font-size: .55rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold);
  line-height: 1;
}
#nav.scrolled .nav-logo-name { color: var(--navy); }

/* Desktop links */
.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  justify-content: center;
}
.nav-links a,
.nav-dd-toggle {
  font-size: .84rem;
  font-weight: 500;
  color: rgba(255,255,255,.9);
  padding: 8px 11px;
  border-radius: var(--r8);
  background: none;
  border: none;
  cursor: pointer;
  transition: color .2s;
  white-space: nowrap;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 5px;
}
.nav-links a:hover,
.nav-dd-toggle:hover { color: var(--gold); }
#nav.scrolled .nav-links a,
#nav.scrolled .nav-dd-toggle { color: var(--navy); }
#nav.scrolled .nav-links a:hover,
#nav.scrolled .nav-dd-toggle:hover { color: var(--gold); }

/* Active page link */
.nav-links a.nav-active { color: var(--gold) !important; }

/* Dropdown */
.nav-dd { position: relative; }
.nav-dd-toggle::after {
  content: '';
  border: 4px solid transparent;
  border-top: 5px solid rgba(255,255,255,.7);
  border-bottom: 0;
  margin-top: 3px;
  transition: transform .2s;
  flex-shrink: 0;
}
#nav.scrolled .nav-dd-toggle::after { border-top-color: var(--navy); }
.nav-dd:hover .nav-dd-toggle::after { transform: rotate(180deg); }

.nav-dd-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  background: #fff;
  border: 1px solid var(--sm);
  border-radius: var(--r16);
  box-shadow: var(--sh3);
  padding: 8px;
  min-width: 260px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: all .2s;
  z-index: 300;
}
.nav-dd:hover .nav-dd-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.nav-dd-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--r8);
  font-size: .875rem;
  font-weight: 500;
  color: var(--navy);
  background: none;
  border: none;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s;
}
.nav-dd-item:hover { background: var(--sl); color: var(--gold); }
.nav-dd-ico {
  width: 28px; height: 28px;
  border-radius: var(--r4);
  background: var(--sl);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.nav-dd-ico svg { width: 15px; height: 15px; color: var(--navy); }

/* Nav CTAs */
.nav-ctas {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.nav-pill {
  background: rgba(255,255,255,.15);
  color: #fff;
  border: 1px solid rgba(255,255,255,.3);
  padding: 8px 14px;
  border-radius: var(--r8);
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
  white-space: nowrap;
}
.nav-pill:hover { background: rgba(255,255,255,.25); }
#nav.scrolled .nav-pill { background: var(--sl); color: var(--navy); border-color: var(--sm); }
#nav.scrolled .nav-pill:hover { background: var(--sm); }

.nav-cta-btn {
  background: var(--gold);
  color: #fff;
  padding: 9px 16px;
  border-radius: var(--r8);
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
  border: none;
  white-space: nowrap;
  text-decoration: none;
  display: inline-block;
  transition: background .2s;
}
.nav-cta-btn:hover { background: var(--gold-l); }

/* ── HAMBURGER ───────────────────────────────────────────── */
#ham-btn {
  display: none;       /* shown via media query only */
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px; height: 40px;
  background: none; border: none;
  padding: 6px;
  border-radius: var(--r8);
  flex-shrink: 0;
}
#ham-btn span {
  display: block;
  width: 22px; height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform .28s ease, opacity .28s ease;
}
#nav.scrolled #ham-btn span { background: var(--navy); }
#ham-btn.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#ham-btn.open span:nth-child(2) { opacity: 0; }
#ham-btn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── MOBILE DRAWER ───────────────────────────────────────── */
#drawer-overlay {
  position: fixed; inset: 0;
  background: rgba(11,31,58,.55);
  backdrop-filter: blur(3px);
  z-index: 390;
  opacity: 0; visibility: hidden;
  transition: opacity .3s, visibility .3s;
}
#drawer-overlay.open { opacity: 1; visibility: visible; }

#drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(300px, 88vw);
  background: #fff;
  z-index: 400;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .32s cubic-bezier(.22,1,.36,1);
  overflow-y: auto;
  overscroll-behavior: contain;
}
#drawer.open { transform: translateX(0); }

.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 16px 14px;
  border-bottom: 1px solid var(--sm);
  flex-shrink: 0;
}
.drawer-brand { font-size: .9rem; font-weight: 800; color: var(--navy); line-height: 1; }
.drawer-brand span {
  display: block;
  font-size: .55rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--gold); margin-top: 3px;
}
.drawer-close {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--sl); border: none;
  display: flex; align-items: center; justify-content: center;
  font-size: .95rem; color: var(--muted);
  flex-shrink: 0; transition: background .2s;
}
.drawer-close:hover { background: var(--sm); }

.drawer-body { flex: 1; padding: 8px 8px 12px; overflow-y: auto; }

.drawer-link {
  display: flex; align-items: center;
  width: 100%;
  padding: 11px 12px;
  border-radius: var(--r8);
  font-size: .9375rem; font-weight: 500;
  color: var(--navy);
  background: none; border: none;
  text-align: left;
  transition: background .15s;
  text-decoration: none;
  gap: 8px;
}
.drawer-link:hover   { background: var(--sl); color: var(--gold); }
.drawer-link.active  { color: var(--gold); background: var(--sl); }

.drawer-acc-btn {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  padding: 11px 12px;
  border-radius: var(--r8);
  font-size: .9375rem; font-weight: 500;
  color: var(--navy);
  background: none; border: none;
  transition: background .15s;
}
.drawer-acc-btn:hover { background: var(--sl); color: var(--gold); }
.drawer-acc-btn .acc-caret { transition: transform .25s; color: var(--muted); }
.drawer-acc-btn.open .acc-caret { transform: rotate(180deg); }
.drawer-acc-btn.open { color: var(--gold); background: var(--sl); }

.drawer-sub { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.drawer-sub.open { max-height: 320px; }

.drawer-sub-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 9px 12px 9px 28px;
  border-radius: var(--r8);
  font-size: .875rem; font-weight: 500;
  color: var(--muted);
  background: none; border: none;
  text-align: left;
  transition: background .15s;
  text-decoration: none;
}
.drawer-sub-item:hover { background: var(--sl); color: var(--gold); }
.drawer-sub-ico {
  width: 24px; height: 24px;
  border-radius: var(--r4);
  background: var(--sl);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.drawer-sub-ico svg { width: 13px; height: 13px; color: var(--navy); }

.drawer-div { height: 1px; background: var(--sm); margin: 6px 12px; }

.drawer-foot {
  padding: 12px 8px;
  border-top: 1px solid var(--sm);
  flex-shrink: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.drawer-foot .btn { justify-content: center; }

/* ── FOOTER ──────────────────────────────────────────────── */
footer { background: #07101f; padding: 60px 0 28px; }
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 44px;
  margin-bottom: 44px;
}
.footer-brand-name {
  font-size: .95rem; font-weight: 800; color: #fff; margin-bottom: 3px;
}
.footer-brand-tag {
  font-size: .58rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--gold);
}
.footer-brand-desc {
  font-size: .82rem; color: rgba(255,255,255,.38);
  margin-top: 12px; line-height: 1.65; max-width: 230px;
}
.footer-col-head {
  font-size: .68rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.3);
  margin-bottom: 14px;
}
.footer-links { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.footer-links li a {
  font-size: .84rem; color: rgba(255,255,255,.5);
  text-decoration: none; transition: color .2s;
}
.footer-links li a:hover { color: var(--gold); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.07);
  padding-top: 22px;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
}
.footer-bottom p, .footer-bottom span { font-size: .75rem; color: rgba(255,255,255,.28); }
.footer-legal { display: flex; align-items: center; gap: 0; }
.footer-legal a {
  font-size: .75rem; color: rgba(255,255,255,.28);
  text-decoration: none; transition: color .2s;
}
.footer-legal a:hover { color: var(--gold); }
.footer-legal .sep { margin: 0 8px; opacity: .4; }

/* ── COOKIE BAR ──────────────────────────────────────────── */
#cookie-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: #fff;
  border-top: 1px solid var(--sm);
  padding: 16px 24px;
  z-index: 300;
  box-shadow: 0 -4px 20px rgba(11,31,58,.09);
  transform: translateY(100%);
  transition: transform .4s cubic-bezier(.22,1,.36,1);
}
#cookie-bar.show { transform: translateY(0); }
.ck-inner {
  max-width: var(--max); margin: 0 auto;
  display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap;
}
.ck-text { flex: 1; min-width: 220px; }
.ck-text h4 { font-size: .9375rem; font-weight: 700; color: var(--navy); margin-bottom: 3px; }
.ck-text p  { font-size: .78rem; color: var(--muted); line-height: 1.5; margin: 0; }
.ck-btns { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex-shrink: 0; }
.ck-btn {
  padding: 8px 15px; border-radius: var(--r8);
  font-size: .78rem; font-weight: 600;
  font-family: 'Plus Jakarta Sans', sans-serif;
  cursor: pointer; border: none;
}
.ck-all  { background: var(--gold); color: #fff; }
.ck-all:hover { background: var(--gold-l); }
.ck-nec  { background: var(--sl); color: var(--navy); border: 1.5px solid var(--sm); }
.ck-nec:hover { background: var(--sm); }
.ck-pref { background: transparent; color: var(--navy); border: 1.5px solid var(--sm); }
.ck-pref:hover { border-color: var(--gold); color: var(--gold); }

.ck-panel { display: none; margin-top: 14px; background: var(--off); border-radius: var(--r12); padding: 14px; border: 1px solid var(--sm); }
.ck-panel.open { display: block; }
.ck-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--sm); gap: 12px; }
.ck-row:last-child { border-bottom: none; }
.ck-row-info h5 { font-size: .82rem; font-weight: 600; color: var(--navy); }
.ck-row-info p  { font-size: .72rem; color: var(--muted); margin: 2px 0 0; }
.ck-tog { position: relative; width: 40px; height: 22px; flex-shrink: 0; }
.ck-tog input { opacity: 0; width: 0; height: 0; position: absolute; }
.ck-tog-track {
  position: absolute; inset: 0;
  background: var(--sm); border-radius: 99px;
  cursor: pointer; transition: background .2s;
}
.ck-tog input:checked  + .ck-tog-track { background: var(--teal); }
.ck-tog input:disabled + .ck-tog-track { opacity: .55; cursor: not-allowed; }
.ck-tog-track::after {
  content: ''; position: absolute;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; top: 3px; left: 3px;
  transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.ck-tog input:checked + .ck-tog-track::after { transform: translateX(18px); }

/* ── MODAL (Playbook download) ───────────────────────────── */
#modal-overlay {
  position: fixed; inset: 0;
  background: rgba(11,31,58,.72);
  backdrop-filter: blur(6px);
  z-index: 500;
  display: none; align-items: center; justify-content: center;
  padding: 16px;
}
#modal-overlay.open { display: flex; }
.modal {
  background: #fff; border-radius: var(--r24);
  padding: 36px; max-width: 460px; width: 100%;
  position: relative; box-shadow: var(--sh3);
}
.modal-x {
  position: absolute; top: 12px; right: 12px;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--sl); border: none;
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem; color: var(--muted); cursor: pointer;
  transition: background .2s;
}
.modal-x:hover { background: var(--sm); }
.modal-badge {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--gold-pale); border: 1px solid var(--gold-border);
  border-radius: 99px; padding: 3px 11px;
  font-size: .68rem; font-weight: 700; color: var(--gold);
  letter-spacing: .08em; text-transform: uppercase;
  margin-bottom: 14px;
}
.modal h2  { font-size: 1.3rem; margin-bottom: 5px; }
.modal-sub { font-size: .84rem; color: var(--muted); margin-bottom: 20px; line-height: 1.55; }
.modal-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.modal-group { margin-bottom: 12px; }
.modal-group label {
  display: block; font-size: .72rem; font-weight: 700;
  color: var(--navy); margin-bottom: 4px;
}
.modal-group label .req { color: var(--gold); }
.modal-group input {
  width: 100%; padding: 9px 12px;
  border: 1.5px solid var(--sm); border-radius: var(--r8);
  font-family: inherit; font-size: .9rem; color: var(--body);
  outline: none; transition: border-color .2s;
}
.modal-group input:focus { border-color: var(--gold); }
.modal-submit {
  width: 100%; padding: 12px;
  background: var(--gold); color: #fff; border: none;
  border-radius: var(--r8);
  font-family: inherit; font-size: .9375rem; font-weight: 700;
  cursor: pointer; transition: background .2s;
}
.modal-submit:hover { background: var(--gold-l); }
.modal-note { font-size: .68rem; color: var(--muted); text-align: center; margin-top: 9px; line-height: 1.5; }

/* ── BREADCRUMB ──────────────────────────────────────────── */
.breadcrumb {
  display: flex; align-items: center; gap: 7px;
  font-size: .75rem; color: rgba(255,255,255,.4);
  margin-bottom: 20px;
}
.breadcrumb a { color: rgba(255,255,255,.4); text-decoration: none; transition: color .2s; }
.breadcrumb a:hover { color: var(--gold); }
.breadcrumb span { color: rgba(255,255,255,.2); }
.breadcrumb .bc-current { color: rgba(255,255,255,.72); }

/* ── PAGE HERO (inner pages) ─────────────────────────────── */
.page-hero {
  background: var(--navy);
  padding: 110px 28px 68px;
  position: relative;
  overflow: hidden;
}
.page-hero::after {
  content: '';
  position: absolute; top: 50%; right: -80px;
  transform: translateY(-50%);
  width: 340px; height: 340px;
  background: radial-gradient(circle, rgba(184,144,31,.12), transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.page-hero > * { position: relative; z-index: 1; }
.page-hero h1 { color: #fff; max-width: 720px; margin-bottom: 14px; }
.ph-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(184,144,31,.15); border: 1px solid rgba(184,144,31,.3);
  border-radius: 99px; padding: 4px 13px;
  font-size: .68rem; font-weight: 700; color: var(--gold-l);
  letter-spacing: .1em; text-transform: uppercase;
  margin-bottom: 16px;
}
.ph-sub {
  font-size: 1.05rem; color: rgba(255,255,255,.7);
  max-width: 620px; line-height: 1.65; margin-bottom: 0;
}
.ph-acts {
  display: flex; gap: 12px; flex-wrap: wrap;
  margin-top: 28px;
}

/* ── DEFINITION BOX ──────────────────────────────────────── */
.defbox {
  background: #EEF4FF;
  border-left: 4px solid var(--navy);
  border-radius: 0 var(--r8) var(--r8) 0;
  padding: 16px 22px;
  margin: 28px 0;
}
.defbox p { font-size: .9375rem; color: var(--body); line-height: 1.7; margin: 0; }
.defbox strong { color: var(--navy); }

/* ── LAYER CARDS ─────────────────────────────────────────── */
.layer-card {
  border: 1px solid var(--sm);
  border-radius: var(--r16);
  padding: 28px;
  margin-bottom: 16px;
  background: #fff;
  transition: all .25s;
}
.layer-card:hover { box-shadow: var(--sh2); border-color: var(--gold); }
.layer-num {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .68rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 12px;
}
.layer-num::before {
  content: ''; width: 18px; height: 2px;
  background: var(--gold); border-radius: 2px;
}
.layer-card h3 { font-size: 1rem; margin-bottom: 9px; }
.layer-card ul { padding-left: 18px; margin-top: 10px; }
.layer-card ul li { font-size: .875rem; color: var(--muted); margin-bottom: 6px; line-height: 1.6; }

/* ── COMPONENT CARDS ─────────────────────────────────────── */
.comp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.comp-card {
  background: #fff; border: 1px solid var(--sm);
  border-radius: var(--r16); padding: 26px;
  transition: all .25s;
}
.comp-card:hover { box-shadow: var(--sh2); border-color: transparent; transform: translateY(-2px); }
.comp-num {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--navy); color: #fff;
  font-weight: 800; font-size: .82rem;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.comp-card h3 { font-size: 1rem; margin-bottom: 8px; }
.comp-card p  { font-size: .875rem; line-height: 1.65; }

/* ── PLATFORM GRID ───────────────────────────────────────── */
.plat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.plat-card {
  background: var(--off); border-radius: var(--r12);
  padding: 20px 14px; text-align: center;
  border: 1px solid var(--sm); transition: all .25s;
}
.plat-card:hover { background: #fff; box-shadow: var(--sh2); border-color: transparent; transform: translateY(-2px); }
.plat-ico {
  width: 42px; height: 42px; border-radius: var(--r8);
  background: #fff; border: 1px solid var(--sm);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 10px;
}
.plat-ico svg { width: 18px; height: 18px; color: var(--navy); }
.plat-card h4 { font-size: .84rem; color: var(--navy); margin-bottom: 4px; }
.plat-card p  { font-size: .72rem; color: var(--muted); line-height: 1.5; }

/* ── TABLE WRAPPER ───────────────────────────────────────── */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.inc-table { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 380px; }
.inc-table thead th {
  padding: 12px 16px; font-size: .72rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  background: var(--navy); color: #fff; text-align: left;
}
.inc-table thead th:first-child { border-radius: var(--r8) 0 0 0; }
.inc-table thead th:last-child  { border-radius: 0 var(--r8) 0 0; text-align: center; }
.inc-table tbody td { padding: 12px 16px; font-size: .875rem; border-bottom: 1px solid var(--sm); }
.inc-table tbody td:first-child { color: var(--navy); font-weight: 500; }
.inc-table tbody td:not(:first-child) { text-align: center; }
.inc-table tbody tr:last-child td { border-bottom: none; }
.inc-table tbody tr:nth-child(even) td { background: var(--off); }
.td-yes  { color: var(--teal);  font-weight: 700; }
.td-no   { color: #bbb; }
.td-part { color: var(--gold);  font-weight: 600; }

/* ── FAQ ─────────────────────────────────────────────────── */
.faq-list { margin-top: 28px; }
.faq-item { border-bottom: 1px solid var(--sm); }
.faq-q {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 17px 0;
  background: none; border: none;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .9375rem; font-weight: 600;
  color: var(--navy); gap: 12px; text-align: left;
  cursor: pointer;
}
.faq-q svg { flex-shrink: 0; color: var(--gold); transition: transform .25s; }
.faq-item.open .faq-q svg { transform: rotate(180deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.faq-item.open .faq-a { max-height: 400px; }
.faq-a p { font-size: .9375rem; color: var(--muted); padding-bottom: 18px; line-height: 1.75; }

/* ── VALUE CARDS ─────────────────────────────────────────── */
.value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.value-card {
  background: #fff; border: 1px solid var(--sm);
  border-radius: var(--r16); padding: 28px; text-align: center;
  transition: all .25s;
}
.value-card:hover { box-shadow: var(--sh2); transform: translateY(-2px); }
.value-ico {
  width: 52px; height: 52px; border-radius: var(--r12);
  background: var(--sl);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
}
.value-ico svg { width: 22px; height: 22px; color: var(--gold); }
.value-card h3 { font-size: 1rem; margin-bottom: 8px; }
.value-card p  { font-size: .875rem; line-height: 1.65; }

/* ── CTA BAND ────────────────────────────────────────────── */
.cta-band {
  background: var(--gold-pale);
  border-radius: var(--r24);
  padding: 48px 40px;
  text-align: center;
  margin-top: 56px;
}
.cta-band h2 { font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: 12px; }
.cta-band p  { max-width: 480px; margin: 0 auto 28px; }
.cta-band-acts { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.cta-band-note { font-size: .8rem; color: var(--muted); margin-top: 14px; }

/* ── STAR RATING ─────────────────────────────────────────── */
.stars { display: flex; gap: 3px; margin-bottom: 14px; }
.stars svg { width: 13px; height: 13px; fill: var(--gold); }

/* ── POLICY PAGES ────────────────────────────────────────── */
.pol-body { max-width: 760px; margin: 0 auto; padding: 56px 28px; }
.pol-body h2 {
  font-size: 1.25rem; color: var(--navy);
  margin: 36px 0 10px; padding-top: 6px;
  border-top: 1px solid var(--sm);
}
.pol-body h2:first-child { border-top: none; margin-top: 0; }
.pol-body p  { font-size: .9375rem; color: #444; line-height: 1.8; margin-bottom: 13px; }
.pol-body ul { padding-left: 20px; margin-bottom: 13px; }
.pol-body ul li { font-size: .9375rem; color: #444; line-height: 1.8; margin-bottom: 7px; }

/* ── SHARED JAVASCRIPT (inline in each page) ─────────────── */
/* No JS here — each page embeds a small <script> for its own behaviour */

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1024px) {
  .nav-inner { padding: 0 20px; }
  .container  { padding: 0 20px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 768px) {
  /* Show hamburger, hide desktop nav */
  #ham-btn    { display: flex !important; }
  .nav-links  { display: none !important; }
  .nav-ctas   { display: none !important; }
  .nav-inner  { padding: 0 16px; height: 62px; }

  /* Typography scale */
  h1 { font-size: clamp(1.8rem, 6vw, 2.4rem) !important; }
  h2 { font-size: clamp(1.4rem, 5vw, 2rem) !important; }

  .container  { padding: 0 16px; }
  :root       { --sp: 64px 0; --sp-sm: 48px 0; }

  /* Grids → 1 column */
  .grid-2, .comp-grid, .value-grid { grid-template-columns: 1fr; gap: 24px; }
  .grid-3 { grid-template-columns: 1fr; }
  .grid-4, .plat-grid { grid-template-columns: 1fr 1fr; }

  /* Nav */
  .page-hero { padding: 96px 16px 52px; }
  .ph-acts   { flex-direction: column; align-items: stretch; }
  .ph-acts .btn { justify-content: center; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .footer-bottom { flex-direction: column; gap: 10px; text-align: center; }

  /* CTA band */
  .cta-band { padding: 36px 20px; }
  .cta-band-acts { flex-direction: column; align-items: stretch; }
  .cta-band-acts .btn { justify-content: center; }

  /* Cookie */
  .ck-inner  { flex-direction: column; gap: 12px; }
  .ck-btns   { width: 100%; }

  /* Modal */
  .modal     { padding: 28px 20px; }
  .modal-row { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .container   { padding: 0 14px; }
  :root        { --sp: 52px 0; }
  .grid-4, .plat-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .ck-btns     { flex-direction: column; }
  .ck-btn      { text-align: center; width: 100%; }
  .pol-body    { padding: 40px 14px; }
}