/* ============================================================
   CustodyCall — shared styles (public site + logged-in app)
   Blue/gold ITUL look. One source of truth for all pages.
============================================================ */
:root{
  --navy:#0e2c4e; --navy2:#15406e; --blue:#1f6fb2; --blue-dk:#185a92;
  --gold:#f0b429; --gold-dk:#d99c12; --ink:#22303f; --muted:#5f7186;
  --line:#dde4ec; --bg:#eef2f6; --white:#fff; --green:#3f9c4a; --red:#c0392b;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
     color:var(--ink);background:var(--bg);line-height:1.6;text-align:center}
a{text-decoration:none;color:inherit}
.wrap{max-width:1000px;margin:0 auto;padding:0 22px}
.btn{display:inline-block;background:var(--gold);color:#3a2c00;font-weight:800;
     padding:14px 30px;border-radius:8px;border:0;cursor:pointer;font-size:1rem;letter-spacing:.3px}
.btn:hover{background:var(--gold-dk)}
.btn.blue{background:var(--blue);color:#fff}.btn.blue:hover{background:var(--blue-dk)}
.btn.sm{padding:9px 18px;font-size:.85rem}

/* ---------- Public top bar + nav ---------- */
.topbar{background:#fff;border-bottom:3px solid var(--gold);padding:16px 0}
.topbar img{height:52px}
.menu{background:var(--navy);padding:12px 0;display:flex;gap:14px;justify-content:center;align-items:center}
details.dd{position:relative;display:inline-block;text-align:left}
details.dd>summary{list-style:none;cursor:pointer;background:#fff;color:var(--navy);
     font-weight:800;font-size:.9rem;padding:11px 22px;border-radius:8px;letter-spacing:.4px}
details.dd>summary::-webkit-details-marker{display:none}
details.dd>summary:after{content:" ▾";color:var(--blue)}
.ddmenu{position:absolute;top:46px;left:0;min-width:230px;background:#fff;border:1px solid var(--line);
     border-radius:10px;box-shadow:0 12px 30px rgba(0,0,0,.18);overflow:hidden;z-index:20}
.ddmenu a{display:block;padding:12px 18px;color:var(--navy);font-weight:600;font-size:.92rem;text-align:left}
.ddmenu a:hover{background:#eef4fa;color:var(--blue)}
.signin{background:var(--gold);color:#3a2c00;font-weight:800;font-size:.9rem;
     padding:11px 24px;border-radius:8px;letter-spacing:.4px}
.signin:hover{background:var(--gold-dk)}

/* ---------- Hero / sections ---------- */
.hero{background:linear-gradient(rgba(8,26,46,.80),rgba(8,26,46,.84)),
      linear-gradient(120deg,#1b4a7d,#0c2542);color:#fff;padding:34px 22px 84px}
.hero .eyebrow{color:var(--gold);font-weight:800;letter-spacing:3px;text-transform:uppercase;font-size:1rem}
.hero h1{font-size:3.2rem;line-height:1.06;margin:8px 0 20px;text-shadow:0 2px 10px rgba(0,0,0,.35)}
.hero p.lead{font-size:1.18rem;opacity:.93;max-width:560px;margin:0 auto 26px}
.hero .tagline{margin-top:22px;color:var(--gold);font-style:italic;font-weight:700;font-size:1.05rem;white-space:nowrap}
.callout{background:#fff;color:var(--ink);max-width:560px;margin:38px auto 0;border-radius:10px;
     padding:30px;box-shadow:0 16px 36px rgba(0,0,0,.28)}
.callout h3{color:var(--navy);font-size:1.4rem}
.callout .sub{color:var(--blue);font-weight:700;margin-bottom:16px}
.callout ul{list-style:none;margin-bottom:20px;display:inline-block;text-align:left}
.callout li{padding:7px 0 7px 28px;position:relative;font-size:.97rem}
.callout li:before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:900}
.trust{background:var(--blue);color:#fff;padding:15px;font-weight:600;font-size:1.02rem}
.trust span{color:var(--gold)}
.section{padding:66px 0}
.section h2{color:var(--navy);font-size:2rem;margin-bottom:8px}
.section .sub{color:var(--muted);margin-bottom:42px}
.illus{margin:0 auto 40px;display:block}
.feat{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;max-width:820px;margin:0 auto}
.fcard{background:#fff;border:1px solid var(--line);border-radius:10px;padding:26px 22px}
.fcard .ico{width:52px;height:52px;border-radius:50%;background:#e7f0f8;color:var(--blue);
     display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.4rem;margin:0 auto 14px}
.fcard h4{color:var(--navy);font-size:1.08rem;margin-bottom:6px}
.fcard p{color:var(--muted);font-size:.93rem}
.pkgs{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:38px;max-width:900px;margin-left:auto;margin-right:auto}
.pcard{border:1px solid var(--line);border-radius:12px;padding:30px 24px;text-align:center}
.pcard.featured{border:2px solid var(--gold);box-shadow:0 10px 26px rgba(240,180,41,.2);transform:translateY(-6px)}
.pcard h3{color:var(--navy);font-size:1.2rem}
.pcard .price{font-size:2.4rem;font-weight:800;color:var(--navy);margin:8px 0 2px}
.pcard .price small{font-size:.9rem;color:var(--muted);font-weight:600}
.pcard .tag{display:inline-block;background:var(--gold);color:#3a2c00;font-weight:800;font-size:.7rem;
     padding:4px 14px;border-radius:999px;margin-bottom:10px;letter-spacing:.5px}
.pcard ul{list-style:none;margin:16px auto;font-size:.92rem;color:var(--muted);display:inline-block;text-align:left}
.pcard li{padding:5px 0 5px 22px;position:relative}
.pcard li:before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:800}
.pcard .btn{display:block;width:fit-content;margin:8px auto 0}
.faq .qa{max-width:760px;margin:0 auto}
.qa .item{background:#fff;border:1px solid var(--line);border-radius:10px;padding:20px 24px;margin-bottom:14px;text-align:left}
.qa h4{color:var(--navy);margin-bottom:4px}
.qa p{color:var(--muted);font-size:.95rem}
.final{background:var(--navy);color:#fff;padding:70px 22px}
.final h2{font-size:2rem;margin-bottom:12px;color:#fff;line-height:1.2}
.final p{opacity:.9;margin-bottom:26px}
footer{background:#08182c;color:#92a6bc;padding:30px 22px;font-size:.88rem}
footer a{color:var(--gold)}
footer img{height:34px;background:#fff;padding:5px 8px;border-radius:6px;margin-bottom:8px}

/* ---------- Auth (sign up / login) ---------- */
.authwrap{padding:50px 22px;min-height:60vh}
.authcard{background:#fff;max-width:460px;margin:0 auto;border:1px solid var(--line);
     border-radius:12px;box-shadow:0 14px 34px rgba(0,0,0,.12);padding:34px;text-align:left}
.authcard h2{color:var(--navy);text-align:center;margin-bottom:4px}
.authcard .sub{color:var(--muted);text-align:center;margin-bottom:24px;font-size:.95rem}
.field{margin-bottom:14px}
.field label{display:block;font-weight:700;font-size:.85rem;color:var(--navy);margin-bottom:5px}
.field input,.field select,.field textarea{width:100%;padding:11px 13px;border:1px solid var(--line);
     border-radius:8px;font:inherit;background:#fbfdff}
.authcard .btn{width:100%;text-align:center;margin-top:8px}
.authcard .alt{text-align:center;margin-top:16px;font-size:.9rem;color:var(--muted)}
.authcard .alt a{color:var(--blue);font-weight:700}
.planrow{display:flex;gap:10px;margin-bottom:18px}
.planopt{flex:1;border:2px solid var(--line);border-radius:10px;padding:12px 8px;text-align:center;cursor:pointer;font-size:.85rem}
.planopt.sel{border-color:var(--gold);background:#fffaf0}
.planopt b{display:block;color:var(--navy);font-size:1.1rem}

/* ---------- Logged-in app shell ---------- */
.appbar{background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;
     justify-content:space-between;padding:12px 26px}
.appbar img{height:40px}
.appbar .user{font-size:.88rem;color:var(--muted)}
.appbar .user b{color:var(--navy)}
.appbar .user a{color:var(--blue);font-weight:700;margin-left:10px}
.tabs{background:var(--navy);display:flex;justify-content:center;gap:2px;flex-wrap:wrap}
.tabs a{color:#cdd9e6;font-weight:700;font-size:.82rem;letter-spacing:.5px;padding:14px 20px;text-transform:uppercase}
.tabs a:hover{background:var(--navy2);color:#fff}
.tabs a.active{background:var(--blue);color:#fff}
.app{max-width:1000px;margin:0 auto;padding:30px 22px;text-align:left}
.apphead{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:12px}
.apphead h1{color:var(--navy);font-size:1.7rem}
.iwant{position:relative}
.iwant>summary{list-style:none;cursor:pointer;background:var(--blue);color:#fff;font-weight:800;
     padding:11px 20px;border-radius:8px;font-size:.9rem}
.iwant>summary::-webkit-details-marker{display:none}
.iwant>summary:after{content:" ▾"}
.iwant .m{position:absolute;right:0;top:46px;background:#fff;border:1px solid var(--line);border-radius:10px;
     box-shadow:0 12px 30px rgba(0,0,0,.18);min-width:230px;overflow:hidden;z-index:20}
.iwant .m a{display:block;padding:12px 18px;color:var(--navy);font-weight:600;font-size:.9rem}
.iwant .m a:hover{background:#eef4fa;color:var(--blue)}
.panel{background:#fff;border:1px solid var(--line);border-radius:12px;padding:22px;margin-bottom:22px}
.panel h3{color:var(--navy);font-size:1.1rem;margin-bottom:14px}

/* tags */
.pill{display:inline-block;font-size:.68rem;font-weight:800;letter-spacing:.4px;padding:3px 10px;border-radius:999px;color:#fff;text-transform:uppercase}
.pill.log{background:var(--blue)} .pill.incident{background:var(--red)}
.pill.msg{background:var(--green)} .pill.cal{background:var(--gold);color:#3a2c00}
.pill.expense{background:#7b59c0}

/* activity feed */
.feed .day{color:var(--muted);font-size:.8rem;font-weight:700;text-transform:uppercase;margin:18px 0 8px;border-bottom:1px solid var(--line);padding-bottom:6px}
.feed .row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid #eef2f6}
.feed .row .txt{flex:1;font-size:.93rem}
.feed .row .time{color:var(--muted);font-size:.82rem;white-space:nowrap}

/* calendar grid */
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal .h{font-weight:800;color:var(--navy);font-size:.78rem;text-transform:uppercase;text-align:center;padding:6px 0}
.cal .d{min-height:78px;border:1px solid var(--line);border-radius:8px;padding:6px;font-size:.78rem;background:#fbfdff}
.cal .d .n{font-weight:700;color:var(--muted)}
.cal .d.today{border-color:var(--blue);background:#eef6fd}
.cal .ev{display:block;margin-top:4px;font-size:.68rem;padding:2px 5px;border-radius:4px;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ev.blue{background:var(--blue)} .ev.gold{background:var(--gold);color:#3a2c00} .ev.red{background:var(--red)}

/* logbook + messages */
.entry{border:1px solid var(--line);border-radius:10px;padding:16px 18px;margin-bottom:12px;background:#fff;text-align:left}
.entry .meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;flex-wrap:wrap;gap:8px}
.entry .meta .when{color:var(--muted);font-size:.82rem}
.entry h4{color:var(--navy);font-size:1rem;margin-bottom:4px}
.entry p{color:#3b4858;font-size:.93rem}
.entry .locked{color:var(--green);font-size:.75rem;font-weight:700}
.thread{display:grid;grid-template-columns:300px 1fr;gap:18px;text-align:left}
.thread .list .t{padding:12px 14px;border:1px solid var(--line);border-radius:9px;margin-bottom:8px;background:#fff;cursor:pointer}
.thread .list .t.sel{border-color:var(--blue);background:#eef6fd}
.thread .list .t b{color:var(--navy);font-size:.92rem}
.thread .list .t span{display:block;color:var(--muted);font-size:.8rem}

.formrow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:820px){
  .hero h1{font-size:2.3rem}.feat,.cards,.formrow{grid-template-columns:1fr}
  .pcard.featured{transform:none}.thread{grid-template-columns:1fr}
}