/* ===========================================================
   ILR Compass — shared stylesheet
   =========================================================== */

:root{
  --navy: #10263f;
  --navy-dark: #0a1a2e;
  --navy-light: #1a3a5c;
  --teal: #147d7d;
  --teal-light: #e6f3f3;
  --gold: #c9932f;
  --gold-light: #fbf1de;
  --bg: #f6f7f9;
  --card: #ffffff;
  --text: #1f2937;
  --muted: #647085;
  --border: #e3e7ee;
  --success: #1c8c5c;
  --success-bg: #e9f7f0;
  --danger: #c0392b;
  --danger-bg: #fdecea;
  --radius: 10px;
  --shadow: 0 2px 10px rgba(16,38,63,0.06);
  --shadow-lg: 0 12px 32px rgba(16,38,63,0.12);
  --maxw: 1140px;
  font-size: 16px;
}

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: var(--teal); text-decoration:none; }
a:hover{ text-decoration:underline; }
h1,h2,h3,h4{ color: var(--navy); line-height:1.25; margin:0 0 .5em; }
p{ margin:0 0 1em; }
ul{ margin:0 0 1em; padding-left: 1.25em; }
.container{ max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.section{ padding: 64px 0; }
.section-tight{ padding: 40px 0; }
.text-center{ text-align:center; }
.muted{ color: var(--muted); }
.small{ font-size:.875rem; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 12px 22px; border-radius: 8px; font-weight:600; font-size:.95rem;
  border: 1px solid transparent; cursor:pointer; transition: all .15s ease; text-decoration:none;
  line-height:1.2;
}
.btn:hover{ text-decoration:none; transform: translateY(-1px); }
.btn-primary{ background: var(--teal); color:#fff; }
.btn-primary:hover{ background:#106868; }
.btn-gold{ background: var(--gold); color:#fff; }
.btn-gold:hover{ background:#b17f22; }
.btn-outline{ background:transparent; border-color: rgba(255,255,255,.5); color:#fff; }
.btn-outline:hover{ background: rgba(255,255,255,.12); }
.btn-navy-outline{ background:transparent; border-color: var(--navy); color: var(--navy); }
.btn-navy-outline:hover{ background: var(--navy); color:#fff; }
.btn-block{ width:100%; }
.btn-sm{ padding: 8px 14px; font-size: .85rem; }
.btn:disabled{ opacity:.5; cursor:not-allowed; transform:none; }

/* ---------- top disclaimer strip ---------- */
.disclaimer-strip{
  background: var(--navy-dark); color:#cfe0ea; font-size:.8rem; text-align:center;
  padding: 8px 16px;
}
.disclaimer-strip a{ color:#fff; text-decoration: underline; }

/* ---------- nav ---------- */
header.site-header{ background: var(--navy); position: sticky; top:0; z-index: 50; box-shadow: var(--shadow); }
.nav{
  display:flex; align-items:center; justify-content:space-between; padding: 14px 20px;
  max-width: var(--maxw); margin:0 auto;
}
.brand{ display:flex; align-items:center; gap:10px; color:#fff; font-weight:800; font-size:1.15rem; letter-spacing:.2px; }
.brand .mark{
  width:34px; height:34px; border-radius:8px; background: linear-gradient(135deg, var(--gold), #e0b862);
  display:flex; align-items:center; justify-content:center; color: var(--navy-dark); font-weight:900; font-size:1rem;
}
.brand span.tag{ display:block; font-weight:400; font-size:.68rem; color:#a9bdd0; letter-spacing:.4px; }
nav.links{ display:flex; align-items:center; gap:22px; }
nav.links a{ color:#dfe8f0; font-weight:600; font-size:.92rem; }
nav.links a.active, nav.links a:hover{ color:#fff; }
.nav-cta{ display:flex; align-items:center; gap:10px; }
.nav-toggle{ display:none; background:none; border:none; color:#fff; font-size:1.5rem; cursor:pointer; }

@media (max-width: 880px){
  nav.links{ position:absolute; top:100%; left:0; right:0; background: var(--navy); flex-direction:column; align-items:flex-start; padding: 10px 20px 20px; gap:14px; display:none; }
  nav.links.open{ display:flex; }
  .nav-cta{ position:absolute; top:100%; left:0; right:0; background:var(--navy); flex-direction:column; padding: 0 20px 20px; display:none; }
  .nav-cta.open{ display:flex; }
  .nav-toggle{ display:block; }
  header.site-header{ position: sticky; }
}

/* ---------- hero ---------- */
.hero{
  background: radial-gradient(1200px 500px at 80% -10%, rgba(201,147,47,.18), transparent),
              linear-gradient(180deg, var(--navy-dark), var(--navy));
  color:#fff; padding: 72px 0 84px;
}
.hero .container{ display:grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items:center; }
@media (max-width: 880px){ .hero .container{ grid-template-columns: 1fr; } }
.hero h1{ color:#fff; font-size: 2.5rem; margin-bottom:.4em; }
.hero p.lead{ color:#c8d6e3; font-size:1.1rem; max-width: 540px; }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-top: 24px; }
.badge-row{ display:flex; gap:18px; margin-top:32px; flex-wrap:wrap; }
.badge-row .badge{ display:flex; align-items:center; gap:8px; color:#cfe0ea; font-size:.85rem; }
.badge-row .badge .dot{ width:8px; height:8px; border-radius:50%; background: var(--gold); }

.hero-card{
  background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius: 16px;
  padding: 22px; backdrop-filter: blur(6px);
}
.hero-card h4{ color:#fff; margin-bottom: 12px; }
.hero-card .progress-row{ display:flex; justify-content:space-between; font-size:.85rem; color:#cfe0ea; margin-bottom:6px; }
.progress-bar{ height:8px; background: rgba(255,255,255,.15); border-radius:6px; overflow:hidden; margin-bottom:16px; }
.progress-bar > span{ display:block; height:100%; background: linear-gradient(90deg, var(--gold), #e8c473); border-radius:6px; }

/* ---------- cards / feature grid ---------- */
.grid{ display:grid; gap: 22px; }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px){ .grid-3, .grid-4{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 620px){ .grid-3, .grid-4, .grid-2{ grid-template-columns: 1fr; } }

.card{
  background: var(--card); border:1px solid var(--border); border-radius: var(--radius);
  padding: 26px; box-shadow: var(--shadow);
}
.feature-card .icon{
  width:46px; height:46px; border-radius:10px; background: var(--teal-light); color: var(--teal);
  display:flex; align-items:center; justify-content:center; font-size:1.3rem; margin-bottom:14px;
}
.feature-card h3{ font-size:1.05rem; margin-bottom:.4em; }
.feature-card p{ color: var(--muted); font-size:.92rem; margin-bottom: .6em; }
.feature-card a.link{ font-weight:600; font-size:.88rem; }

.section-head{ max-width: 640px; margin: 0 auto 40px; text-align:center; }
.eyebrow{
  display:inline-block; text-transform:uppercase; letter-spacing:.6px; font-size:.72rem; font-weight:700;
  color: var(--teal); background: var(--teal-light); padding: 5px 12px; border-radius: 20px; margin-bottom: 14px;
}

/* ---------- how it works ---------- */
.steps{ display:grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
@media (max-width: 900px){ .steps{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .steps{ grid-template-columns: 1fr; } }
.step{ text-align:center; }
.step .num{
  width:38px; height:38px; border-radius:50%; background: var(--navy); color:#fff; font-weight:700;
  display:flex; align-items:center; justify-content:center; margin: 0 auto 12px;
}
.step h4{ font-size: 1rem; }
.step p{ color: var(--muted); font-size:.88rem; }

/* ---------- footer ---------- */
footer.site-footer{ background: var(--navy-dark); color:#b9c8d6; padding: 48px 0 24px; margin-top: 60px; }
footer.site-footer h4{ color:#fff; font-size:.95rem; margin-bottom: 12px; }
footer.site-footer a{ color:#b9c8d6; }
footer.site-footer a:hover{ color:#fff; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 30px; }
@media (max-width: 760px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
.footer-legal{
  border-top: 1px solid rgba(255,255,255,.1); margin-top: 34px; padding-top: 22px; font-size:.78rem; color:#8ea3b8;
}
.footer-legal p{ margin-bottom: .6em; }
.footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-top: 18px; font-size:.75rem; color:#7690a8; }

/* ---------- generic page header (inner pages) ---------- */
.page-header{ background: linear-gradient(180deg, var(--navy-dark), var(--navy)); color:#fff; padding: 46px 0; }
.page-header h1{ color:#fff; margin-bottom:.25em; }
.page-header p{ color:#c8d6e3; max-width: 640px; }
.breadcrumb{ font-size:.8rem; color:#9db4c6; margin-bottom:10px; }
.breadcrumb a{ color:#c8d6e3; }

/* ---------- inline notice / alert boxes ---------- */
.notice{ border-radius: 8px; padding: 14px 16px; font-size:.88rem; margin-bottom: 20px; border:1px solid; }
.notice-info{ background: var(--teal-light); border-color: #bfe0e0; color:#0b5555; }
.notice-warn{ background: var(--gold-light); border-color: #eed7ab; color:#7a5b17; }
.notice-danger{ background: var(--danger-bg); border-color: #f3c6c0; color: var(--danger); }
.notice strong{ display:block; margin-bottom: 4px; }

/* ---------- tags/pills ---------- */
.pill{ display:inline-block; padding:3px 10px; border-radius: 20px; font-size:.72rem; font-weight:700; }
.pill-free{ background:#eef2f6; color:#48566a; }
.pill-premium{ background: var(--gold-light); color:#8a6413; }

/* ===========================================================
   AI Advisor chat
   =========================================================== */
.chat-shell{ display:grid; grid-template-columns: 260px 1fr; gap: 22px; }
@media (max-width: 860px){ .chat-shell{ grid-template-columns: 1fr; } }
.chat-suggestions{ background: var(--card); border:1px solid var(--border); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); align-self:start; }
.chat-suggestions h4{ font-size:.85rem; text-transform:uppercase; letter-spacing:.4px; color: var(--muted); margin-bottom: 12px; }
.chat-suggestions button{
  display:block; width:100%; text-align:left; background: var(--bg); border:1px solid var(--border);
  border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; font-size:.85rem; cursor:pointer; color: var(--text);
}
.chat-suggestions button:hover{ border-color: var(--teal); color: var(--teal); }

.chat-window{ background: var(--card); border:1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); display:flex; flex-direction:column; height: 620px; overflow:hidden; }
.chat-header{ padding: 14px 18px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:10px; }
.chat-header .avatar{ width:34px; height:34px; border-radius:50%; background: var(--teal); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; }
.chat-header .who b{ display:block; font-size:.92rem; }
.chat-header .who span{ font-size:.75rem; color: var(--success); }
.chat-messages{ flex:1; overflow-y:auto; padding: 20px; display:flex; flex-direction:column; gap: 14px; }
.msg{ max-width: 78%; padding: 10px 14px; border-radius: 12px; font-size:.9rem; line-height:1.5; }
.msg.bot{ background: var(--teal-light); color:#0e4a4a; align-self:flex-start; border-bottom-left-radius: 3px; }
.msg.user{ background: var(--navy); color:#fff; align-self:flex-end; border-bottom-right-radius: 3px; }
.msg.system{ align-self:center; background: var(--gold-light); color:#7a5b17; font-size:.78rem; border-radius: 20px; padding: 6px 14px; }
.chat-input{ border-top:1px solid var(--border); padding: 14px 18px; display:flex; gap:10px; }
.chat-input input{ flex:1; border:1px solid var(--border); border-radius:8px; padding:10px 12px; font-size:.9rem; }
.chat-input input:focus{ outline:2px solid var(--teal); outline-offset: 1px; }
.typing{ align-self:flex-start; color: var(--muted); font-size:.8rem; font-style:italic; }

/* ===========================================================
   Life in the UK Test
   =========================================================== */
.mode-toggle{ display:flex; gap:12px; margin-bottom: 26px; flex-wrap:wrap; }
.mode-toggle button{ flex:1; min-width:200px; }
.category-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:16px; margin-bottom: 30px; }
@media (max-width:760px){ .category-grid{ grid-template-columns: repeat(2,1fr);} }
@media (max-width:520px){ .category-grid{ grid-template-columns: 1fr;} }
.cat-card{ background:var(--card); border:1px solid var(--border); border-radius: var(--radius); padding:18px; cursor:pointer; transition: all .15s; }
.cat-card:hover{ border-color: var(--teal); box-shadow: var(--shadow); }
.cat-card h4{ font-size:.95rem; margin-bottom:4px; }
.cat-card span{ font-size:.78rem; color:var(--muted); }

.quiz-box{ background:var(--card); border:1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 30px; }
.quiz-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom: 18px; flex-wrap:wrap; gap:10px; }
.quiz-timer{ font-weight:700; color: var(--navy); background: var(--bg); border:1px solid var(--border); padding:6px 14px; border-radius: 20px; font-size:.9rem; }
.quiz-timer.low{ color: var(--danger); border-color:#f3c6c0; background: var(--danger-bg); }
.quiz-progress{ font-size:.85rem; color: var(--muted); }
.q-text{ font-size:1.1rem; font-weight:600; margin-bottom: 18px; }
.q-options{ display:flex; flex-direction:column; gap:10px; margin-bottom: 24px; }
.q-option{ border:1px solid var(--border); border-radius:8px; padding: 12px 14px; cursor:pointer; font-size:.92rem; display:flex; gap:10px; align-items:flex-start; }
.q-option:hover{ border-color: var(--teal); }
.q-option.selected{ border-color: var(--teal); background: var(--teal-light); }
.q-option.correct{ border-color: var(--success); background: var(--success-bg); }
.q-option.incorrect{ border-color: var(--danger); background: var(--danger-bg); }
.q-option input{ margin-top:3px; }
.quiz-actions{ display:flex; justify-content:space-between; gap:12px; }
.q-explain{ margin-top: 14px; padding: 12px 14px; border-radius:8px; background: var(--bg); font-size:.85rem; color: var(--muted); display:none; }
.q-explain.show{ display:block; }

.results-box{ text-align:center; }
.score-ring{ width:140px; height:140px; border-radius:50%; margin: 0 auto 20px; display:flex; align-items:center; justify-content:center; flex-direction:column; border: 10px solid var(--border); }
.score-ring.pass{ border-color: var(--success); }
.score-ring.fail{ border-color: var(--danger); }
.score-ring b{ font-size:1.8rem; color: var(--navy); }
.score-ring span{ font-size:.75rem; color: var(--muted); }

/* ===========================================================
   Document Checklist
   =========================================================== */
.route-tabs{ display:flex; gap:10px; margin-bottom: 26px; flex-wrap:wrap; }
.route-tabs button{ padding:9px 16px; border-radius: 20px; border:1px solid var(--border); background:#fff; font-size:.85rem; font-weight:600; cursor:pointer; }
.route-tabs button.active{ background: var(--navy); color:#fff; border-color: var(--navy); }
.checklist-progress{ display:flex; align-items:center; gap:14px; margin-bottom: 24px; }
.checklist-progress .progress-bar{ flex:1; background: var(--border); }
.checklist-progress .progress-bar > span{ background: linear-gradient(90deg, var(--teal), #1fa6a6); }
.checklist-group{ margin-bottom: 26px; }
.checklist-group h4{ font-size:.95rem; border-bottom:1px solid var(--border); padding-bottom:8px; margin-bottom: 12px; }
.check-item{ display:flex; align-items:flex-start; gap:12px; padding: 10px 4px; border-bottom: 1px dashed var(--border); }
.check-item:last-child{ border-bottom:none; }
.check-item input[type=checkbox]{ margin-top: 4px; width:17px; height:17px; accent-color: var(--teal); }
.check-item label{ font-size:.92rem; cursor:pointer; }
.check-item .item-note{ font-size:.8rem; color: var(--muted); margin-top:2px; }
.check-item.premium .item-note{ filter: blur(3px); user-select:none; }
.check-item.premium label{ display:flex; align-items:center; gap:6px; }
.checklist-toolbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom: 20px; flex-wrap:wrap; gap:12px; }

@media print{
  header.site-header, footer.site-footer, .disclaimer-strip, .checklist-toolbar, .route-tabs, .no-print{ display:none !important; }
  body{ background:#fff; }
  .card{ box-shadow:none; border:none; }
}

/* ===========================================================
   Pricing
   =========================================================== */
.price-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 22px; align-items:stretch; }
@media (max-width: 900px){ .price-grid{ grid-template-columns: 1fr; } }
.price-card{ background:var(--card); border:1px solid var(--border); border-radius: var(--radius); padding: 30px; display:flex; flex-direction:column; box-shadow: var(--shadow); }
.price-card.featured{ border: 2px solid var(--gold); box-shadow: var(--shadow-lg); position:relative; }
.price-card.featured::before{
  content:"Most popular"; position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  background: var(--gold); color:#fff; font-size:.7rem; font-weight:700; padding:4px 14px; border-radius: 20px;
}
.price-card h3{ font-size:1.1rem; }
.price-amount{ font-size:2.1rem; font-weight:800; color: var(--navy); margin: 10px 0 2px; }
.price-amount span{ font-size:.95rem; color: var(--muted); font-weight:500; }
.price-card ul{ list-style:none; padding:0; margin: 18px 0 24px; flex:1; }
.price-card ul li{ padding: 7px 0; font-size:.88rem; display:flex; gap:8px; align-items:flex-start; border-bottom: 1px dashed var(--border); }
.price-card ul li:last-child{ border-bottom:none; }

.addon-row{ display:grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 20px; }
@media (max-width: 900px){ .addon-row{ grid-template-columns: 1fr; } }
.addon-card{ background: var(--card); border:1px solid var(--border); border-radius: var(--radius); padding: 22px; }
.addon-card .price{ font-weight:800; color: var(--navy); font-size:1.3rem; margin: 6px 0; }

/* ---------- forms ---------- */
.form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width:640px){ .form-grid{ grid-template-columns: 1fr; } }
.field{ display:flex; flex-direction:column; gap:6px; margin-bottom: 16px; }
.field label{ font-size:.85rem; font-weight:600; color: var(--navy); }
.field input, .field select, .field textarea{
  border:1px solid var(--border); border-radius:8px; padding: 10px 12px; font-size:.92rem; font-family:inherit;
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:2px solid var(--teal); outline-offset:1px; }

.two-col{ display:grid; grid-template-columns: 1.2fr .8fr; gap: 36px; }
@media (max-width: 900px){ .two-col{ grid-template-columns: 1fr; } }

.slot-list{ display:flex; flex-direction:column; gap:10px; }
.slot{ border:1px solid var(--border); border-radius:8px; padding: 12px 14px; display:flex; justify-content:space-between; align-items:center; font-size:.88rem; }
.slot button{ font-size:.78rem; }

.faq-item{ border-bottom:1px solid var(--border); padding: 14px 0; }
.faq-item summary{ cursor:pointer; font-weight:600; font-size:.95rem; }
.faq-item p{ margin-top:8px; color: var(--muted); font-size:.9rem; }