@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Lora:wght@600;700&display=swap');

/* =========================================================
   congchungvien.vn – STYLE V1.3
   Font: Inter + Lora (Google Fonts, hỗ trợ tiếng Việt)
   Mục tiêu: đọc tốt trên PC, trang trọng, gọn, không phô trương.
   ========================================================= */

:root{
  --bg:#f4f6f7;
  --card:#ffffff;
  --text:#1d2b38;
  --muted:#667784;
  --line:#dce3e8;
  --line-strong:#c9d3da;

  --navy:#12314f;
  --navy-2:#1b456a;
  --teal:#0b6f69;
  --teal-dark:#075a56;
  --teal-soft:#e9f4f2;
  --gold:#ad7a2a;
  --cream:#f7f4ec;

  --danger:#9d272a;
  --danger-soft:#fdecec;
  --ok:#17663d;
  --ok-soft:#e8f6ed;
  --warn:#805800;
  --warn-soft:#fff4d8;

  --shadow-sm:0 3px 14px rgba(18,49,79,.045);
  --shadow-md:0 14px 38px rgba(18,49,79,.09);

  --radius:14px;
  --radius-lg:20px;
  --content:1180px;
}

*{box-sizing:border-box}

html{
  font-size:17px;
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"Inter","Segoe UI",Arial,Tahoma,sans-serif;
  font-size:1rem;
  line-height:1.68;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

button,input,select,textarea{font:inherit}
a{color:var(--teal)}
img{max-width:100%;height:auto}

/* ---------- Typography ---------- */

h1,h2,h3,h4,h5,h6{
  color:var(--navy);
  line-height:1.22;
}

h1{
  font-family:"Lora",Georgia,"Times New Roman",serif;
  font-size:2.15rem;
  letter-spacing:-.025em;
  margin:0 0 1rem;
}

h2{
  font-family:"Lora",Georgia,"Times New Roman",serif;
  font-size:1.55rem;
  letter-spacing:-.015em;
  margin:0 0 .8rem;
}

h3{
  font-size:1.08rem;
  margin:0 0 .65rem;
}

p{margin:0 0 1rem}
.muted{color:var(--muted)}

.eyebrow{
  margin-bottom:.65rem;
  color:var(--teal);
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase;
}

/* ---------- Global layout ---------- */

.container{
  width:min(var(--content),92vw);
  margin:32px auto 64px;
}

.card{
  margin:0 0 18px;
  padding:24px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
}

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:14px;
}

/* ---------- Top navigation ---------- */

.topbar{
  position:sticky;
  top:0;
  z-index:20;
  min-height:74px;
  padding:0 max(4vw,24px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  background:rgba(255,255,255,.97);
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 0 rgba(18,49,79,.04);
  backdrop-filter:blur(10px);
}

.brand{
  display:flex;
  align-items:center;
  gap:11px;
  color:var(--navy);
  font-size:1rem;
  font-weight:800;
  line-height:1.1;
  text-decoration:none;
}

.brand-mark{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:var(--navy);
  color:#fff;
  font-family:"Lora",Georgia,serif;
  font-size:1.2rem;
}

.brand small{
  display:block;
  margin-top:4px;
  color:#788792;
  font-size:.68rem;
  font-weight:500;
  letter-spacing:.02em;
}

.topbar nav{
  display:flex;
  align-items:center;
  gap:19px;
  flex-wrap:wrap;
}

.topbar nav a{
  color:#405464;
  font-size:.9rem;
  font-weight:600;
  text-decoration:none;
}

.topbar nav a:hover{color:var(--teal)}

.topbar nav .nav-login{
  padding:8px 14px;
  border:1px solid #bfcbd3;
  border-radius:9px;
  color:var(--navy);
  background:#fff;
}

/* ---------- Forms / buttons ---------- */

label{
  display:block;
  margin:13px 0 6px;
  font-size:.91rem;
  font-weight:650;
}

input,select,textarea{
  width:100%;
  padding:11px 13px;
  border:1px solid #cbd5dc;
  border-radius:9px;
  background:#fff;
  color:var(--text);
}

input:focus,select:focus,textarea:focus{
  outline:3px solid rgba(11,111,105,.12);
  border-color:#7ba9a5;
}

textarea{min-height:120px}

.btn{
  display:inline-block;
  padding:10px 16px;
  border:0;
  border-radius:9px;
  background:var(--navy);
  color:#fff;
  cursor:pointer;
  font-weight:700;
  text-decoration:none;
  transition:.16s ease;
}

.btn:hover{
  transform:translateY(-1px);
  filter:brightness(.98);
}

.btn.secondary{
  background:#e9eef2;
  color:#263c50;
}

.btn.danger{background:var(--danger)}
.btn.ok{background:var(--ok)}
.btn.small{padding:6px 10px;font-size:.84rem}

.actions{
  display:flex;
  gap:9px;
  flex-wrap:wrap;
  margin-top:15px;
}

.inline{
  display:flex;
  gap:10px;
  align-items:end;
}
.inline>*{flex:1}

/* ---------- Feedback / badges ---------- */

.flash{
  margin-bottom:14px;
  padding:12px 15px;
  border-radius:10px;
  background:#e9eef5;
}

.flash.error{background:var(--danger-soft);color:#7f1b1e}
.flash.success{background:var(--ok-soft);color:#155b36}
.flash.warning{background:var(--warn-soft);color:#704c00}

.note{
  padding:9px 13px;
  border-left:4px solid #87a5bd;
  background:#f1f6fa;
}

.badge{
  display:inline-block;
  padding:3px 8px;
  border-radius:99px;
  background:#e9eef2;
  font-size:.76rem;
}

.badge.ok{background:#e5f5eb;color:#155b35}
.badge.warn{background:#fff2cf;color:#744d00}
.badge.bad{background:#fde7e7;color:#87181b}

/* ---------- Tables ---------- */

table{
  width:100%;
  border-collapse:collapse;
  background:#fff;
}

th,td{
  padding:11px 10px;
  border-bottom:1px solid var(--line);
  text-align:left;
  vertical-align:top;
}

th{
  background:#fafbfc;
  color:#536575;
  font-size:.84rem;
}

/* =========================================================
   PUBLIC HOME
   ========================================================= */

.home-hero{
  min-height:520px;
  padding:54px 0 42px;
  display:grid;
  grid-template-columns:1.08fr .92fr;
  align-items:center;
  gap:54px;
}

.home-hero h1{
  max-width:760px;
  margin:0 0 22px;
  color:var(--navy);
  font-size:clamp(2.35rem,4.2vw,3.55rem);
  line-height:1.09;
  letter-spacing:-.032em;
}

.home-hero h1 span{color:var(--teal)}

.home-lead{
  max-width:730px;
  margin:0;
  color:#556775;
  font-size:1.05rem;
  line-height:1.78;
}

.home-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin:28px 0 22px;
}

.btn.home-primary{
  padding:12px 20px;
  background:var(--teal);
  box-shadow:0 7px 18px rgba(11,111,105,.14);
}
.btn.home-primary:hover{background:var(--teal-dark)}

.btn.home-secondary{
  padding:12px 20px;
  background:#fff;
  color:var(--navy);
  border:1px solid #c9d4dc;
}

.home-trust-row{
  display:flex;
  flex-wrap:wrap;
  gap:17px;
  color:#627582;
  font-size:.79rem;
}

.home-trust-row span{
  position:relative;
  padding-left:15px;
}

.home-trust-row span:before{
  content:"";
  position:absolute;
  left:0;
  top:.55em;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--gold);
}

/* Home hero visual */

.home-hero-visual{
  position:relative;
  min-height:405px;
}

.home-hero-visual:before{
  content:"";
  position:absolute;
  inset:20px 12px 24px 28px;
  border-radius:44% 56% 52% 48%/46% 38% 62% 54%;
  background:linear-gradient(145deg,#e4f0ed,#eef0e7);
  transform:rotate(-3deg);
}

.legal-card{
  position:absolute;
  background:#fff;
  border:1px solid #dce4e8;
  box-shadow:0 22px 55px rgba(22,50,70,.12);
}

.legal-card-main{
  top:38px;
  right:28px;
  width:min(390px,82%);
  padding:26px;
  border-radius:18px;
  transform:rotate(1.5deg);
}

.legal-card-kicker{
  color:var(--teal);
  font-size:.64rem;
  font-weight:800;
  letter-spacing:.14em;
}

.legal-card-title{
  margin:9px 0 8px;
  color:var(--navy);
  font-family:"Lora",Georgia,serif;
  font-size:1.35rem;
  font-weight:700;
}

.legal-card-meta{
  display:flex;
  justify-content:space-between;
  margin-bottom:24px;
  color:#83909a;
  font-size:.7rem;
}

.legal-line{
  height:8px;
  margin:11px 0;
  border-radius:5px;
  background:#e9eef1;
}

.legal-line.short{width:62%}

.legal-options{
  display:grid;
  gap:9px;
  margin-top:20px;
}

.legal-options i{
  display:block;
  height:31px;
  border:1px solid #d8e0e5;
  border-radius:8px;
  background:linear-gradient(90deg,#f8fafb,#fff);
}

.legal-card-small{
  left:10px;
  bottom:50px;
  padding:16px 19px;
  display:flex;
  align-items:center;
  gap:13px;
  border-radius:14px;
  transform:rotate(-4deg);
}

.legal-card-small strong{
  width:39px;
  height:39px;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:var(--navy);
  color:#fff;
  font-family:"Lora",Georgia,serif;
  font-size:1.15rem;
}

.legal-card-small span{
  color:var(--navy);
  font-size:.83rem;
  font-weight:700;
  line-height:1.35;
}

.legal-score-ring{
  position:absolute;
  right:0;
  bottom:5px;
  width:118px;
  height:118px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border:8px solid #d9ece8;
  border-radius:50%;
  background:#fff;
  box-shadow:0 15px 32px rgba(22,50,70,.11);
}

.legal-score-ring b{color:var(--teal);font-size:1.45rem}
.legal-score-ring small{color:#778692;font-size:.61rem}

/* Public home cards */

.home-strip{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  margin:10px 0 62px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--line);
}

.home-strip>div{
  padding:24px 25px;
  background:#fff;
}

.home-strip strong{
  display:block;
  margin-bottom:7px;
  color:var(--navy);
  font-size:.92rem;
}

.home-strip span{
  display:block;
  color:#687986;
  font-size:.84rem;
  line-height:1.58;
}

.home-section{padding:42px 0}

.section-heading{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:40px;
  margin-bottom:28px;
}

.section-heading h2,
.home-feature h2,
.home-cta h2{
  margin:0;
  color:var(--navy);
  font-family:"Lora",Georgia,serif;
  font-size:clamp(1.75rem,2.7vw,2.35rem);
  line-height:1.2;
  letter-spacing:-.02em;
}

.section-heading>p{
  max-width:440px;
  margin:0;
  color:#647583;
  font-size:.94rem;
}

.section-heading.compact{max-width:780px}

.topic-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}

.topic-card{
  padding:23px;
  border:1px solid #dde4e8;
  border-radius:14px;
  background:#fff;
  transition:.18s ease;
}

.topic-card:hover{
  transform:translateY(-2px);
  border-color:#c5d6d3;
  box-shadow:0 12px 28px rgba(22,50,70,.065);
}

.topic-card>span{
  color:var(--gold);
  font-size:.69rem;
  font-weight:800;
  letter-spacing:.11em;
}

.topic-card h3{
  margin:11px 0 8px;
  color:var(--navy);
  font-size:1rem;
}

.topic-card p{
  margin:0;
  color:#637681;
  font-size:.86rem;
  line-height:1.62;
}

.process-section{padding-top:58px}

.process-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
}

.process-step{
  display:flex;
  gap:17px;
  padding:21px 23px;
  border:1px solid #d9e7e4;
  border-radius:14px;
  background:#edf4f2;
}

.process-step>b{
  flex:0 0 38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--teal);
  color:#fff;
}

.process-step h3{margin:0 0 5px}
.process-step p{margin:0;color:#647583;font-size:.87rem}

.home-feature{
  display:grid;
  grid-template-columns:1fr .9fr;
  align-items:center;
  gap:50px;
}

.feature-copy>p{
  color:#60717e;
  font-size:.96rem;
  line-height:1.73;
}

.feature-list{
  margin:23px 0 0;
  padding:0;
  list-style:none;
}

.feature-list li{
  position:relative;
  padding:10px 0 10px 27px;
  border-bottom:1px solid #e2e7ea;
  color:#405463;
  font-size:.91rem;
}

.feature-list li:before{
  content:"✓";
  position:absolute;
  left:0;
  color:var(--teal);
  font-weight:900;
}

.feature-panel{
  padding:28px;
  border-radius:18px;
  background:var(--navy);
  color:#fff;
  box-shadow:0 20px 52px rgba(16,42,67,.15);
}

.feature-panel-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-bottom:17px;
  border-bottom:1px solid rgba(255,255,255,.14);
}

.feature-panel-head span{
  color:#a9c3d5;
  font-size:.63rem;
  letter-spacing:.13em;
}

.feature-panel-head strong{
  font-family:"Lora",Georgia,serif;
  font-size:1.2rem;
}

.feature-bars{margin:22px 0}
.feature-bars>div{margin:16px 0}
.feature-bars span{color:#d5e1e8;font-size:.75rem}

.feature-bars i{
  position:relative;
  display:block;
  height:6px;
  margin-top:7px;
  overflow:hidden;
  border-radius:10px;
  background:rgba(255,255,255,.13);
}

.feature-bars i:after{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:var(--w);
  border-radius:inherit;
  background:#7fc2b9;
}

.feature-panel p{
  margin:17px 0 0;
  color:#a9bac7;
  font-size:.72rem;
  line-height:1.55;
}

.home-cta{
  margin:54px 0 30px;
  padding:31px 35px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:30px;
  border:1px solid #e7e1d4;
  border-radius:18px;
  background:var(--cream);
}

.home-cta h2{
  max-width:690px;
  font-size:1.75rem;
}

.home-footer{
  display:flex;
  justify-content:space-between;
  gap:40px;
  padding:26px 0 8px;
  border-top:1px solid var(--line);
  color:#71808b;
  font-size:.76rem;
}

.home-footer div{display:flex;flex-direction:column}
.home-footer strong{color:var(--navy);font-size:.9rem}
.home-footer p{max-width:620px;margin:0;text-align:right}

/* =========================================================
   AUTH / DASHBOARD
   ========================================================= */

.login-box{
  width:min(440px,92vw);
  margin:8vh auto;
}

.auth-layout{
  min-height:calc(100vh - 140px);
  padding:52px 0;
  display:grid;
  grid-template-columns:1fr 440px;
  align-items:center;
  gap:64px;
}

.auth-intro{padding-left:3vw}

.auth-intro h1{
  margin:0 0 20px;
  color:var(--navy);
  font-family:"Lora",Georgia,serif;
  font-size:2.75rem;
  line-height:1.12;
}

.auth-intro>p{
  max-width:590px;
  color:#627482;
  font-size:1rem;
}

.auth-points{
  margin-top:22px;
  display:flex;
  flex-direction:column;
  gap:8px;
  color:#536b78;
  font-size:.84rem;
}

.auth-card{
  margin:0;
  padding:30px;
}

.auth-card-mark{
  width:48px;
  height:48px;
  margin-bottom:20px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:var(--navy);
  color:#fff;
  font-family:"Lora",Georgia,serif;
  font-size:1.45rem;
}

.auth-card h2{
  margin:0 0 5px;
  color:var(--navy);
  font-family:"Lora",Georgia,serif;
  font-size:1.55rem;
}

.auth-actions{
  justify-content:space-between;
  align-items:center;
  margin-top:20px;
}

.text-link{
  color:var(--teal);
  font-size:.82rem;
  font-weight:700;
  text-decoration:none;
}

.text-link:hover{text-decoration:underline}

.dash-hero{
  margin:34px 0 24px;
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:24px;
}

.dash-hero h1{
  margin:0 0 7px;
  color:var(--navy);
  font-family:"Lora",Georgia,serif;
  font-size:2.05rem;
}

.dash-hero p{margin:0;color:#657784}

.metric-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}

.metric{
  padding:18px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
}

.metric strong{
  display:block;
  color:var(--navy);
  font-size:1.55rem;
}

.metric.modern{
  padding:20px;
  border-radius:13px;
  box-shadow:none;
}

.metric.modern span{
  color:#70808c;
  font-size:.73rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.metric.modern strong{
  margin-top:5px;
  font-family:"Lora",Georgia,serif;
  font-size:1.8rem;
}

.metric.modern small{
  display:block;
  margin-top:6px;
  color:#8a969f;
  font-size:.7rem;
}

.dashboard-grid{
  display:grid;
  grid-template-columns:1.4fr .8fr;
  gap:14px;
  margin-top:18px;
}

.dashboard-main-card,.dashboard-side-card{min-height:210px}
.dashboard-side-card{background:#eef5f3;border-color:#d8e5e2}

.card-title-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
}

.card-title-row h2{
  margin:0;
  color:var(--navy);
  font-family:"Lora",Georgia,serif;
  font-size:1.4rem;
}

.dashboard-icon{
  width:50px;
  height:50px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:var(--navy);
  color:#fff;
  font-family:"Lora",Georgia,serif;
  font-size:1.55rem;
}

.recent-card{margin-top:18px}
.recent-list{margin-top:18px}

.recent-row{
  padding:13px 0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  border-top:1px solid #e4e9ec;
}

.recent-row>div:first-child{display:flex;flex-direction:column}
.recent-row span{color:#7b8993;font-size:.75rem}

.recent-result{
  display:flex;
  align-items:center;
  gap:18px;
}

.recent-result b{color:var(--navy)}
.recent-result span{min-width:54px;text-align:right;color:var(--teal);font-weight:700}

.empty-state{
  padding:25px 0 10px;
  display:flex;
  flex-direction:column;
  color:#75848e;
}

.empty-state strong{margin-bottom:4px;color:var(--navy)}

/* =========================================================
   ASSESSMENT / RESULTS
   ========================================================= */

.question-shell{position:relative}

.question-text{
  color:#24384a;
  font-size:1.08rem;
  font-weight:650;
  line-height:1.72;
  white-space:pre-line;
}

.option{
  margin:10px 0;
  padding:13px 15px;
  display:flex;
  align-items:flex-start;
  gap:10px;
  border:1px solid var(--line);
  border-radius:11px;
  background:#fff;
}

.option:hover{
  border-color:#aec7c3;
  background:#fbfdfd;
}

.option input{
  width:auto;
  margin-top:5px;
}

.timer{
  position:sticky;
  top:84px;
  z-index:15;
  display:inline-block;
  padding:8px 12px;
  border:1px solid #efd4d4;
  border-radius:10px;
  background:#fff;
  color:var(--danger);
  font-size:1.08rem;
  font-weight:800;
}

.question-nav{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}

.question-nav a{
  width:35px;
  height:35px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
  color:#334155;
  font-size:.82rem;
  text-decoration:none;
}

.question-nav a.answered{
  background:#e6f2ea;
  border-color:#a9cdb7;
}

.question-nav a.current{
  outline:2px solid var(--navy);
  outline-offset:1px;
}

.result-correct{border-left:4px solid var(--ok)}
.result-wrong{border-left:4px solid var(--danger)}

.secure-content{
  -webkit-user-select:none;
  user-select:none;
}

.watermark{
  position:fixed;
  inset:0;
  z-index:999;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-auto-rows:120px;
  overflow:hidden;
  pointer-events:none;
  opacity:.05;
  transform:rotate(-18deg);
  font-size:12px;
  font-weight:700;
}

.watermark span{display:grid;place-items:center}

/* =========================================================
   ADMIN / ROLES
   ========================================================= */

.admin-menu{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:18px;
}

.role-box{
  margin:18px 0;
  padding:16px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fafbfc;
}

.role-box h3{margin-top:0}

.role-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:10px;
  margin:12px 0;
}

.role-choice{
  margin:0;
  padding:12px;
  display:flex;
  align-items:flex-start;
  gap:10px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  cursor:pointer;
  font-weight:400;
}

.role-choice:hover{
  border-color:#aab9c7;
  background:#f8fafc;
}

.role-choice input{
  flex:0 0 auto;
  width:auto;
  margin:4px 0 0;
}

.role-choice span{display:block}
.role-choice strong{display:block;color:#233d55}

.role-choice small{
  display:block;
  margin-top:3px;
  color:var(--muted);
  line-height:1.4;
}

.role-choice:has(input:checked){
  border-color:#6d8eac;
  background:#eef5fb;
}

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

@media(max-width:980px){
  html{font-size:16.5px}

  .home-hero{
    grid-template-columns:1fr;
    min-height:0;
    gap:24px;
  }

  .home-hero-visual{
    width:100%;
    max-width:560px;
    min-height:360px;
    margin:auto;
  }

  .topic-grid{grid-template-columns:repeat(2,1fr)}
  .home-feature{grid-template-columns:1fr}
  .auth-layout{grid-template-columns:1fr;gap:30px}
  .auth-intro{padding-left:0}
  .metric-grid{grid-template-columns:repeat(2,1fr)}
  .dashboard-grid{grid-template-columns:1fr}
}

@media(max-width:700px){
  html{font-size:16px}

  .topbar{
    min-height:68px;
    padding:13px 4vw;
    align-items:flex-start;
    flex-direction:column;
    gap:10px;
  }

  .brand small{display:none}
  .public-nav a:not(.nav-login){display:none}

  .container{
    width:94vw;
    margin-top:20px;
  }

  .card{padding:17px}
  .inline{display:block}
  .timer{top:118px}

  h1{font-size:1.8rem}
  h2{font-size:1.35rem}

  .home-hero{
    padding-top:32px;
    gap:18px;
  }

  .home-hero h1{
    font-size:2.25rem;
    line-height:1.12;
  }

  .home-lead{font-size:.98rem}

  .home-hero-visual{min-height:310px}
  .legal-card-main{right:4px;top:28px;width:87%;padding:21px}
  .legal-card-small{left:0;bottom:42px}
  .legal-score-ring{right:0;width:96px;height:96px}

  .home-strip{grid-template-columns:1fr}
  .section-heading{display:block}
  .section-heading>p{margin-top:13px}

  .topic-grid,.process-grid{grid-template-columns:1fr}
  .home-section{padding:32px 0}
  .home-feature{gap:24px}

  .home-cta{
    display:block;
    padding:25px;
  }

  .home-cta .btn{margin-top:18px}

  .home-footer{display:block}
  .home-footer p{text-align:left;margin-top:12px}

  .auth-layout{padding:24px 0}
  .auth-intro h1{font-size:2.15rem}

  .metric-grid{grid-template-columns:1fr 1fr}

  .dash-hero{
    align-items:flex-start;
    flex-direction:column;
  }

  .dash-hero h1{font-size:1.8rem}

  .recent-row{align-items:flex-start}
  .recent-result{display:block;text-align:right}
  .recent-result span{display:block}

  .question-text{font-size:1rem}
}

@media(max-width:440px){
  .metric-grid{grid-template-columns:1fr}
  .home-actions .btn{width:100%;text-align:center}
  .home-hero h1{font-size:2rem}
}