/* =====================================================
   TOKENS
   ===================================================== */
:root,[data-theme="light"]{
  --bg:#f3f6fb;--bg2:#ffffff;--bg3:#eef2f8;
  --border:#dbe3ef;--border2:#c9d4e5;
  --text:#182133;--text2:#5b6f8a;--text3:#91a4bd;
  --blue:#2f80ed;--blue-dim:rgba(47,128,237,.10);
  --green:#1fa463;--green-dim:rgba(31,164,99,.10);
  --orange:#e9782f;--orange-dim:rgba(233,120,47,.10);
  --amber:#2f80ed;--amber2:#1c6fe8;--amber-dim:rgba(47,128,237,.12);
  --red:#e14b5a;--red-dim:rgba(225,75,90,.10);
  --shadow:0 4px 14px rgba(0,0,0,.08);
  --shadow2:0 20px 50px rgba(0,0,0,.12);
}
[data-theme="dark"]{
  --bg:#0b0f14;--bg2:#11161d;--bg3:#171d26;
  --border:#222a36;--border2:#2b3545;
  --text:#e6edf7;--text2:#8ea2bd;--text3:#5f738f;
  --blue:#2f80ed;--blue-dim:rgba(47,128,237,.14);
  --green:#27c27a;--green-dim:rgba(39,194,122,.14);
  --orange:#ff8a3d;--orange-dim:rgba(255,138,61,.14);
  --amber:#2f80ed;--amber2:#4dabff;--amber-dim:rgba(47,128,237,.18);
  --red:#ff5d6e;--red-dim:rgba(255,93,110,.14);
  --shadow:0 4px 16px rgba(0,0,0,.45);
  --shadow2:0 24px 70px rgba(0,0,0,.75);
}
:root{
  --radius:6px;--radius2:10px;
  --transition:0.18s ease;
  --mono:'DM Mono',monospace;
  --sans:'Sora',sans-serif;
  --sidebar-w:260px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:15px;scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--bg);color:var(--text);line-height:1.7;transition:background .25s,color .25s}
a{color:var(--amber);text-decoration:none}
a:hover{color:var(--amber2)}
img{max-width:100%}

/* =====================================================
   TOP NAV
   ===================================================== */
.topnav{
  position:sticky;top:0;z-index:200;height:56px;
  background:var(--bg2);border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 1.5rem;gap:1rem;
}
.topnav-logo{display:flex;align-items:center;gap:.6rem;font-size:1.05rem;font-weight:800;color:var(--text);text-decoration:none;letter-spacing:-.02em}
.topnav-logo img{width:28px;height:28px;border-radius:7px}
.topnav-center{font-size:.82rem;color:var(--text3);font-family:var(--mono)}
.topnav-right{display:flex;align-items:center;gap:.75rem}
.theme-btn{background:var(--bg3);border:1px solid var(--border);color:var(--text2);border-radius:var(--radius);padding:.28rem .55rem;font-size:.88rem;cursor:pointer;transition:all var(--transition)}
.theme-btn:hover{border-color:var(--border2);color:var(--text)}
.back-link{font-size:.82rem;color:var(--text2);display:flex;align-items:center;gap:.35rem;transition:color var(--transition)}
.back-link:hover{color:var(--amber)}

/* =====================================================
   DEV BANNER — remove the #dev-banner element to hide
   ===================================================== */
.dev-banner{
  background:rgba(233,120,47,.12);border-bottom:1px solid rgba(233,120,47,.35);
  padding:.55rem 1.5rem;display:flex;align-items:center;justify-content:center;gap:.6rem;
  font-size:.82rem;color:var(--orange);font-weight:600;text-align:center;
}
.dev-banner-icon{font-size:.95rem;flex-shrink:0}

/* =====================================================
   LAYOUT
   ===================================================== */
.layout{display:grid;grid-template-columns:var(--sidebar-w) 1fr;min-height:calc(100vh - 56px);align-items:start}

/* =====================================================
   SIDEBAR
   ===================================================== */
.sidebar{
  position:sticky;top:56px;height:calc(100vh - 56px);overflow-y:auto;
  background:var(--bg2);border-right:1px solid var(--border);
  padding:1.25rem 0;
}
.sidebar::-webkit-scrollbar{width:4px}
.sidebar::-webkit-scrollbar-thumb{background:var(--border2);border-radius:4px}
.sidebar-section{margin-bottom:.25rem}
.sidebar-group{
  font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  color:var(--text3);padding:.75rem 1.25rem .3rem;font-family:var(--mono);
}
.sidebar-link{
  display:flex;align-items:center;gap:.6rem;
  padding:.45rem 1.25rem;font-size:.84rem;font-weight:600;color:var(--text2);
  transition:all var(--transition);border-left:2px solid transparent;cursor:pointer;
}
.sidebar-link:hover{color:var(--text);background:var(--bg3);border-left-color:var(--border2)}
.sidebar-link.active{color:var(--amber);background:var(--amber-dim);border-left-color:var(--amber)}
.sidebar-link .icon{font-size:.9rem;width:18px;text-align:center;flex-shrink:0}

/* =====================================================
   CONTENT
   ===================================================== */
.content{padding:2.5rem 3rem 5rem;max-width:820px}
.content-section{display:none}
.content-section.active{display:block;animation:fadeIn .18s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* section header */
.section-eyebrow{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--amber);font-family:var(--mono);margin-bottom:.5rem}
h1.page-title{font-size:2rem;font-weight:800;letter-spacing:-.03em;margin-bottom:.65rem;line-height:1.2}
.page-intro{font-size:.95rem;color:var(--text2);line-height:1.75;margin-bottom:2rem;max-width:640px}
h2.guide-h2{font-size:1.2rem;font-weight:700;margin:2.25rem 0 .75rem;padding-bottom:.5rem;border-bottom:1px solid var(--border);letter-spacing:-.015em}
h3.guide-h3{font-size:1rem;font-weight:700;margin:1.5rem 0 .5rem;color:var(--text)}
p{font-size:.9rem;color:var(--text2);line-height:1.8;margin-bottom:.85rem}
p:last-child{margin-bottom:0}

/* callouts */
.callout{
  border-radius:var(--radius2);padding:1rem 1.25rem;margin:1.25rem 0;
  font-size:.875rem;line-height:1.7;display:flex;gap:.75rem;align-items:flex-start;
}
.callout-icon{font-size:1.1rem;flex-shrink:0;margin-top:.05rem}
.callout-body{flex:1}
.callout-body strong{display:block;font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-bottom:.2rem}
.callout.info{background:var(--blue-dim);border:1px solid rgba(47,128,237,.25)}
.callout.info .callout-body strong{color:var(--blue)}
.callout.tip{background:var(--green-dim);border:1px solid rgba(31,164,99,.25)}
.callout.tip .callout-body strong{color:var(--green)}
.callout.warning{background:var(--orange-dim);border:1px solid rgba(233,120,47,.25)}
.callout.warning .callout-body strong{color:var(--orange)}

/* steps */
.steps{display:flex;flex-direction:column;gap:.65rem;margin:1rem 0 1.5rem}
.step{display:flex;gap:1rem;align-items:flex-start}
.step-num{
  width:28px;height:28px;border-radius:50%;flex-shrink:0;
  background:var(--amber-dim);color:var(--amber);
  font-family:var(--mono);font-size:.8rem;font-weight:500;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(47,128,237,.3);margin-top:.1rem;
}
.step-body{flex:1}
.step-title{font-size:.9rem;font-weight:700;margin-bottom:.2rem}
.step-desc{font-size:.86rem;color:var(--text2);line-height:1.7}

/* badges inline */
.badge{display:inline-flex;align-items:center;gap:.25rem;padding:.1rem .45rem;border-radius:20px;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}
.badge-blue{background:var(--blue-dim);color:var(--blue)}
.badge-green{background:var(--green-dim);color:var(--green)}
.badge-orange{background:var(--orange-dim);color:var(--orange)}
.badge-red{background:var(--red-dim);color:var(--red)}
.badge-grey{background:rgba(128,128,128,.1);color:var(--text2)}
.badge-amber{background:var(--amber-dim);color:var(--amber)}

/* role pills */
.role-landlord{background:var(--amber-dim);color:var(--amber);padding:.15rem .5rem;border-radius:20px;font-size:.75rem;font-weight:700}
.role-agent{background:var(--green-dim);color:var(--green);padding:.15rem .5rem;border-radius:20px;font-size:.75rem;font-weight:700}
.role-tenant{background:var(--blue-dim);color:var(--blue);padding:.15rem .5rem;border-radius:20px;font-size:.75rem;font-weight:700}

/* feature table */
.feat-table{width:100%;border-collapse:collapse;margin:1rem 0 1.5rem;font-size:.86rem}
.feat-table th{background:var(--bg3);color:var(--text3);font-size:.7rem;text-transform:uppercase;letter-spacing:.07em;font-weight:700;padding:.6rem .9rem;text-align:left;border-bottom:1px solid var(--border)}
.feat-table td{padding:.6rem .9rem;border-bottom:1px solid var(--border);vertical-align:middle}
.feat-table tr:last-child td{border-bottom:none}
.feat-table tr:hover td{background:var(--bg3)}
.check{color:var(--green);font-weight:700}
.cross{color:var(--text3)}

/* tab list */
.tab-list{display:flex;flex-direction:column;gap:.5rem;margin:1rem 0 1.5rem}
.tab-item{background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius2);padding:.9rem 1.1rem;display:flex;gap:.85rem;align-items:flex-start}
.tab-item-icon{font-size:1.1rem;flex-shrink:0}
.tab-item-title{font-size:.9rem;font-weight:700;margin-bottom:.2rem}
.tab-item-desc{font-size:.84rem;color:var(--text2);line-height:1.65}

/* code / mono bits */
code{font-family:var(--mono);font-size:.82rem;background:var(--bg3);border:1px solid var(--border);border-radius:4px;padding:.1rem .35rem;color:var(--amber)}

/* divider */
.divider{border:none;border-top:1px solid var(--border);margin:2rem 0}

/* responsive */
@media(max-width:820px){
  .layout{grid-template-columns:1fr}
  .sidebar{display:none}
  .content{padding:1.5rem 1.25rem 4rem}
  h1.page-title{font-size:1.6rem}
}