/* CONTRUCTION AND INVESTMENT JSC — store-wide Terms of Use */

:root{
  color-scheme:light;
  --accent:#4338ca; --accent-deep:#3730a3; --accent-soft:#eef0fd;
  --ink:#16181d;
  --bg:#ffffff; --surface:#ffffff; --tint:#f6f7f9; --line:#e5e7ec;
  --text:#16181d; --muted:#5a6070;
  --radius:20px; --radius-sm:12px;
  --maxw:1120px;
  --font:"Figtree",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:17px/1.65 var(--font); overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent); text-underline-offset:3px}
a:hover{text-decoration:none}
.shell{max-width:var(--maxw); margin:0 auto; padding:0 16px}
@media (min-width:640px){ .shell{padding:0 28px} }

h1,h2,h3{font-weight:800; letter-spacing:-.02em; line-height:1.15; margin:0}

/* ---------- top bar ---------- */
.topbar{position:sticky; top:0; z-index:10; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  background:color-mix(in srgb, var(--bg) 85%, transparent); border-bottom:1px solid var(--line)}
.topbar .shell{display:flex; align-items:center; justify-content:space-between; height:64px; gap:12px}
.brand{display:flex; align-items:center; gap:10px; min-width:0; color:var(--text); text-decoration:none;
  font-weight:800; font-size:15px; letter-spacing:.02em}
.brand .name{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mark{flex:none; display:grid; place-items:center; width:34px; height:34px; border-radius:9px;
  background:var(--ink); color:#fff; font-size:13px; letter-spacing:.04em}
.nav{display:flex; align-items:center; gap:4px; flex:none}
.nav a{color:var(--muted); text-decoration:none; font-weight:600; font-size:15px; padding:8px 12px; border-radius:999px}
.nav a:hover,.nav a[aria-current="page"]{color:var(--text); background:var(--tint)}
.nav .cta{background:var(--ink); color:#fff}
.nav .cta:hover{background:var(--accent); color:#fff}
@media (max-width:560px){ .nav .hide-sm{display:none} .brand .name{display:none} }

/* ---------- document ---------- */
.doc-head{padding:56px 0 36px; border-bottom:1px solid var(--line)}
.kicker{font-weight:700; color:var(--accent); font-size:15px; margin-bottom:12px}
.doc-head h1{font-size:clamp(38px, 6vw, 60px)}
.doc-lead{color:var(--muted); font-size:19px; max-width:640px; margin:16px 0 0}
.doc-head .meta{display:flex; flex-wrap:wrap; gap:8px; margin-top:20px}
.doc-head .meta span{font-size:14px; font-weight:600; padding:6px 12px; border-radius:999px;
  background:var(--tint); border:1px solid var(--line); color:var(--muted)}

.doc{display:grid; gap:40px; padding:40px 0 0}
@media (min-width:960px){ .doc{grid-template-columns:240px minmax(0,1fr); gap:64px} }
.toc{font-size:14.5px}
@media (min-width:960px){ .toc{position:sticky; top:88px; align-self:start; max-height:calc(100vh - 110px); overflow:auto} }
.toc p{font-weight:700; margin:0 0 10px}
.toc ol{list-style:none; margin:0; padding:0; display:grid; gap:2px; border-left:2px solid var(--line)}
.toc a{display:block; padding:5px 0 5px 14px; margin-left:-2px; border-left:2px solid transparent;
  color:var(--muted); text-decoration:none}
.toc a:hover{color:var(--accent); border-left-color:var(--accent)}
@media (max-width:959px){
  .toc{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px}
  .toc ol{border-left:none; columns:2 200px}
  .toc a{padding:4px 0; border:none; margin:0}
}

.prose{max-width:720px; min-width:0}
.prose p{margin:0 0 14px}

.summary{background:var(--accent-soft); border-radius:var(--radius); padding:24px 26px; margin-bottom:40px}
.summary h2{font-size:22px; margin:0 0 12px}
.summary ul{margin:0 0 12px; padding-left:20px}
.summary li{margin-bottom:6px}
.summary p{margin:0; font-size:14.5px; color:var(--accent-deep)}

.clause{padding:0 0 32px; margin-bottom:32px; border-bottom:1px solid var(--line); scroll-margin-top:88px}
.clause:last-child{border-bottom:none}
.clause header{display:flex; align-items:center; gap:14px; margin-bottom:14px}
.clause header h2{margin:0; font-size:26px}
.num{flex:none; display:grid; place-items:center; width:42px; height:42px; border-radius:12px;
  background:var(--accent-soft); color:var(--accent); font-weight:800; font-size:16px; line-height:1}
.prose ol.alpha{list-style:lower-alpha; padding-left:26px; margin:0 0 14px}
.prose ol.alpha li{margin-bottom:9px}
.prose ol.alpha li::marker{color:var(--accent); font-weight:700}
.shout{border-left:4px solid var(--accent); padding:4px 0 4px 16px; font-weight:600}

/* ---------- footer ---------- */
.footer{margin-top:96px; background:var(--tint); border-top:1px solid var(--line); color:var(--muted); padding:48px 0 40px}
.footer-grid{display:grid; gap:32px}
@media (min-width:760px){ .footer-grid{grid-template-columns:1.6fr 1fr} }
.footer h4{color:var(--text); font-size:15px; margin:0 0 12px}
.footer ul{list-style:none; padding:0; margin:0; display:grid; gap:8px}
.footer a{color:var(--text); text-decoration:none; font-weight:600}
.footer a:hover{color:var(--accent)}
.footer .blurb{margin:14px 0 0; font-size:15px; max-width:420px}
.footer .brand .name{display:inline}
.footer .legal{border-top:1px solid var(--line); margin-top:40px; padding-top:22px; font-size:14px}
.mail{word-break:break-all}