/* DoorWorth landlord guides — the index.html look (cobalt + gold, same tokens), tuned for long reading.
   Shared by every page under /guides/. Mobile-first; tables scroll inside their own box. */
:root{
  --ink:#0A1A3B; --cobalt:#0C2C72; --cobalt-2:#103a8f; --surface:#17398A;
  --gold:#E6B24A; --azure:#2F80FF; --emerald:#34D399; --coral:#F2906B;
  --text:#EAF1FF; --muted:#9FB6E8; --hair:rgba(255,255,255,.12);
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--text); -webkit-font-smoothing:antialiased; line-height:1.6;
  background:
    radial-gradient(1100px 600px at 78% -8%, rgba(47,128,255,.28), transparent 60%),
    radial-gradient(900px 520px at 10% 8%, rgba(230,178,74,.12), transparent 55%),
    linear-gradient(165deg, #0a2360 0%, var(--cobalt) 42%, var(--ink) 100%);
  background-color:var(--ink); background-attachment:fixed; min-height:100vh;
}
.wrap{max-width:1080px; margin:0 auto; padding:0 18px;}
.mono{font-variant-numeric:tabular-nums; font-feature-settings:"tnum";}
a{color:var(--gold);}
a:hover{color:#f3c86e;}

/* nav — same parts as index.html */
.navbar{position:sticky; top:0; z-index:50; backdrop-filter:saturate(140%) blur(12px);
  background:rgba(10,26,59,.72); border-bottom:1px solid var(--hair);}
nav{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; flex-wrap:wrap;}
.brand{display:flex; align-items:center; gap:11px; font-weight:800; font-size:19px; letter-spacing:-.02em; text-decoration:none; color:var(--text);}
.logo{width:34px; height:34px; border-radius:8px; display:grid; place-items:center;
  background:linear-gradient(150deg,var(--gold),#d39a2e); box-shadow:0 6px 18px rgba(230,178,74,.4); font-weight:900; color:#2a1c00;}
.brand b{color:var(--gold);}
.navlinks{display:flex; align-items:center; flex-wrap:wrap; gap:4px 18px;}
.navlink{color:var(--muted); text-decoration:none; font-size:14.5px; font-weight:600; min-height:44px; display:inline-flex; align-items:center;}
.navlink:hover{color:var(--text);}
.navcta{background:linear-gradient(150deg,var(--gold),#d39a2e); color:#2a1c00; font-weight:800;
  font-size:14px; padding:9px 14px; border-radius:9px; text-decoration:none; min-height:44px; display:inline-flex; align-items:center;}
.navcta:hover{color:#2a1c00;}
@media (max-width:560px){ .navlinks .navlink.navopt{display:none;} .navbar{position:static;} }

/* article */
.article{max-width:780px; margin:0 auto; padding:34px 0 10px;}
.article.wide{max-width:1040px;}
.article.wide > p, .article.wide > ul, .article.wide > .callout, .article.wide > h2{max-width:780px;}
.crumbs{font-size:13px; color:var(--muted); margin-bottom:14px;}
.crumbs a{color:var(--muted);}
.eyebrow{display:inline-block; font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold); background:rgba(230,178,74,.10); border:1px solid rgba(230,178,74,.32);
  padding:6px 12px; border-radius:100px; margin-bottom:16px;}
h1{font-size:clamp(28px,6vw,42px); line-height:1.1; letter-spacing:-.025em; font-weight:850; margin-bottom:14px;}
.sub{font-size:clamp(16px,2.4vw,18px); color:var(--muted); margin-bottom:16px;}
.reviewed{font-size:13.5px; color:var(--muted); margin-bottom:22px;}
.reviewed b{color:var(--text); font-weight:700;}
h2{font-size:clamp(21px,3.6vw,26px); letter-spacing:-.015em; font-weight:800; margin:34px 0 10px;}
h3{font-size:17px; font-weight:750; margin:22px 0 8px;}
.article p, .article li{font-size:16px; color:#d7e3fb; margin-bottom:12px;}
.article ul, .article ol{padding-left:22px; margin-bottom:12px;}
.article b, .article strong{color:var(--text);}
.cite{font-size:13px; color:var(--muted);}
.cite a{color:var(--muted); text-decoration:underline;}
.callout{background:rgba(255,255,255,.05); border:1px solid var(--hair); border-left:4px solid var(--gold);
  border-radius:12px; padding:16px 18px; margin:18px 0;}
.callout p:last-child{margin-bottom:0;}
.callout.note{border-left-color:var(--azure);}
.facts{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; margin:16px 0 8px;}
.fact{background:linear-gradient(180deg,rgba(23,57,138,.72),rgba(16,40,100,.55)); border:1px solid var(--hair); border-radius:14px; padding:16px;}
.fact .k{font-size:12.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; font-weight:700;}
.fact .v{font-size:26px; font-weight:850; letter-spacing:-.02em; margin-top:4px;}
.fact .d{font-size:13.5px; color:var(--muted); margin-top:4px;}

/* tables — the table scrolls inside its own box, never the page */
.tablebox{overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--hair); border-radius:12px; margin:14px 0 18px; background:rgba(10,26,59,.45);}
table{border-collapse:collapse; width:100%; min-width:560px; font-size:14.5px;}
th, td{text-align:left; vertical-align:top; padding:10px 12px; border-bottom:1px solid var(--hair);}
thead th{position:sticky; top:0; background:#0f2b6e; color:var(--text); font-size:12.5px; text-transform:uppercase; letter-spacing:.05em;}
tbody tr:last-child td{border-bottom:none;}
td.num{font-variant-numeric:tabular-nums; font-weight:800; white-space:nowrap;}
td .flag{display:inline-block; font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:#2a1c00; background:var(--gold); border-radius:5px; padding:1px 6px; margin-left:4px;}
td.small, td .small{font-size:13px; color:var(--muted);}
@media (min-width:641px){
  #deposit-table{min-width:900px;}
  #deposit-table td:nth-child(1){white-space:nowrap;}
  #deposit-table td:nth-child(5){min-width:240px;}
}
/* phones: a .stack table turns each row into a card (labels from data-label), so nothing hides off to the side */
@media (max-width:640px){
  table.stack{min-width:0;}
  table.stack thead{display:none;}
  table.stack, table.stack tbody, table.stack tr, table.stack td{display:block; width:100%;}
  table.stack tr{padding:12px 14px; border-bottom:1px solid var(--hair);}
  table.stack tbody tr:last-child{border-bottom:none;}
  table.stack td{border:none; padding:3px 0; white-space:normal; min-width:0;}
  table.stack td::before{content:attr(data-label) ": "; color:var(--muted); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;}
  table.stack td:first-child{font-size:16.5px; padding-bottom:4px;}
  table.stack td:first-child::before{content:none;}
  table.stack td.num:first-child::before{content:"Line "; text-transform:none; font-size:16.5px; font-weight:850; color:var(--text); letter-spacing:0;}
}


/* CTA */
.final{text-align:center; background:linear-gradient(150deg,rgba(230,178,74,.14),rgba(47,128,255,.10));
  border:1px solid var(--hair); border-radius:18px; padding:30px 20px; margin:36px 0 10px;}
.final h2{margin:0 0 10px;}
.final p{color:var(--muted); max-width:560px; margin:0 auto 18px;}
.cta{display:inline-flex; align-items:center; gap:9px; background:linear-gradient(150deg,var(--gold),#d39a2e); color:#2a1c00;
  font-weight:800; font-size:15.5px; padding:14px 22px; border-radius:10px; text-decoration:none; min-height:44px;
  box-shadow:0 12px 30px rgba(230,178,74,.32);}
.cta:hover{color:#2a1c00;}

/* guides list */
.glist{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; margin:18px 0;}
.gcard{display:block; text-decoration:none; color:var(--text); background:linear-gradient(180deg,rgba(23,57,138,.72),rgba(16,40,100,.55));
  border:1px solid var(--hair); border-radius:14px; padding:20px;}
.gcard:hover{border-color:rgba(230,178,74,.55); color:var(--text);}
.gcard h2{font-size:18px; margin:0 0 8px;}
.gcard p{font-size:14.5px; color:var(--muted); margin:0;}

/* calculator */
.calc{background:linear-gradient(180deg,rgba(23,57,138,.72),rgba(16,40,100,.55)); border:1px solid var(--hair); border-radius:16px; padding:20px; margin:18px 0;}
.fields{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px;}
.field label{display:block; font-size:13px; font-weight:700; color:var(--muted); margin-bottom:5px;}
.field input{width:100%; font:inherit; font-size:16px; color:var(--text); background:rgba(10,26,59,.65);
  border:1px solid rgba(255,255,255,.22); border-radius:9px; padding:10px 11px; min-height:44px;}
.field input:focus{outline:2px solid var(--gold); outline-offset:1px;}
.field .hint{font-size:12px; color:var(--muted); margin-top:4px;}
.result{margin-top:18px; padding:16px; border-radius:12px; background:rgba(10,26,59,.55); border:1px solid rgba(230,178,74,.4);}
.result .big{font-size:clamp(24px,6vw,34px); font-weight:850; letter-spacing:-.02em;}
.result .pos{color:var(--emerald);}
.result p{font-size:15px; margin:6px 0 0; color:#d7e3fb;}
.result ul{margin:8px 0 0 20px;}
.result li{font-size:14px; color:var(--muted); margin-bottom:4px;}

/* footer — same columns as index.html */
footer{border-top:1px solid var(--hair); margin-top:40px; padding:34px 0 46px;}
.fcols{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:24px; margin-bottom:26px;}
.fcols .co{color:var(--text); font-weight:800; font-size:16px; margin-bottom:6px; display:flex; align-items:center; gap:9px;}
.fcols p, .fcols a{color:var(--muted); font-size:13.5px; text-decoration:none; display:block; margin-bottom:8px;}
.fcols a:hover{color:var(--text);}
.fcols .fh{font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin:0 0 12px; font-weight:700;}
.fbottom{border-top:1px solid var(--hair); padding-top:18px; text-align:center; color:var(--muted); font-size:12.5px;}
@media (max-width:820px){ .fcols{grid-template-columns:1fr;} }