/* FitPilot — shared styles for long-form legal pages (/privacy, /terms) */

:root{
  --bg:#0A0B10;
  --bg-top:#12141F;
  --card:#15171F;
  --card-line: rgba(255,255,255,0.08);
  --ink:#F6F5F2;
  --muted:#8C8F97;
  --muted-dim:#5F6167;
  --accent:#BD5B44;
  --accent-soft: rgba(189,91,68,0.14);
  --cta:#3B241F;
  --cta-line: rgba(255,255,255,0.06);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background: radial-gradient(120% 60% at 50% 0%, var(--bg-top) 0%, var(--bg) 55%);
  background-color:var(--bg);
  color:var(--ink);
  font-family:'Inter', sans-serif;
  -webkit-font-smoothing:antialiased;
}

.wrap{max-width:720px; margin:0 auto; padding:0 26px 60px;}
@media (min-width:900px){
  .wrap{max-width:1080px; padding:0 40px 80px;}
}

/* ===== header ===== */
header.top{
  padding:34px 0 0;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.brand{
  font-family:'Sora', sans-serif;
  font-weight:800;
  letter-spacing:-0.01em;
  font-size:19px;
  color:var(--ink);
  text-decoration:none;
}
.brand span{color:var(--accent);}
.top nav{display:flex; gap:20px; align-items:center;}
.top nav a{
  font-size:13px;
  font-weight:500;
  color:var(--muted);
  text-decoration:none;
  white-space:nowrap;
}
.top nav a:hover{color:var(--ink);}
.top nav a[aria-current="page"]{color:var(--accent);}

/* ===== hero ===== */
.eyebrow{
  font-size:12.5px;
  font-weight:600;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--accent);
  margin:72px 0 16px;
}
h1{
  font-family:'Sora', sans-serif;
  font-weight:800;
  font-size:clamp(36px, 8vw, 50px);
  line-height:1.06;
  letter-spacing:-0.02em;
  margin:0 0 20px;
}
h1 .line2{color:var(--accent); display:block;}

p.lede{
  font-size:16.5px;
  line-height:1.65;
  color:var(--muted);
  max-width:52ch;
  margin:0 0 32px;
}

.meta{
  display:flex; flex-wrap:wrap; gap:10px;
  margin:0 0 22px;
}
.meta .stat{
  background:var(--card);
  border:1px solid var(--card-line);
  border-radius:100px;
  padding:9px 16px;
  font-size:12.5px;
  color:var(--muted);
  line-height:1.4;
}
.meta .stat b{
  font-family:'Sora', sans-serif;
  font-weight:700;
  font-size:10.5px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--muted-dim);
  margin-right:8px;
}

/* ===== layout: sticky contents + document ===== */
.layout{margin-top:44px;}
@media (min-width:1000px){
  .layout{
    display:grid;
    grid-template-columns:230px minmax(0,1fr);
    gap:60px;
    align-items:start;
  }
}

.toc{
  background:var(--card);
  border:1px solid var(--card-line);
  border-radius:20px;
  padding:20px 22px;
  margin-bottom:44px;
}
@media (min-width:1000px){
  .toc{
    position:sticky;
    top:28px;
    margin-bottom:0;
    max-height:calc(100vh - 56px);
    overflow-y:auto;
  }
}
.toc summary{
  font-family:'Sora', sans-serif;
  font-size:11px;
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--muted-dim);
  list-style:none;
  cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.toc summary::-webkit-details-marker{display:none;}
.toc summary::after{
  content:'';
  flex:0 0 auto;
  width:7px; height:7px;
  border-right:1.5px solid var(--muted-dim);
  border-bottom:1.5px solid var(--muted-dim);
  transform:translateY(-2px) rotate(45deg);
  transition:transform 0.15s ease;
}
.toc[open] summary{margin-bottom:14px;}
.toc[open] summary::after{transform:translateY(1px) rotate(-135deg);}
.toc summary:hover{color:var(--ink);}
@media (min-width:1000px){
  .toc summary{cursor:default; pointer-events:none;}
  .toc summary::after{display:none;}
}
.toc ol{list-style:none; margin:0; padding:0; counter-reset:toc;}
.toc li{counter-increment:toc; margin-bottom:2px;}
.toc a{
  display:flex; gap:10px;
  font-size:13.5px;
  line-height:1.45;
  color:var(--muted);
  text-decoration:none;
  padding:6px 0;
}
.toc a::before{
  content:counter(toc, decimal-leading-zero);
  flex:0 0 auto;
  font-family:'Sora', sans-serif;
  font-size:11px;
  font-weight:700;
  color:var(--muted-dim);
  padding-top:2px;
}
.toc a:hover{color:var(--ink);}
.toc a:hover::before{color:var(--accent);}

/* ===== document ===== */
.doc{min-width:0;}
.doc section{
  scroll-margin-top:24px;
  padding-top:44px;
  margin-top:44px;
  border-top:1px solid var(--card-line);
}
.doc section:first-child{padding-top:0; margin-top:0; border-top:none;}

.section-head{margin-bottom:20px;}
.section-head .num{
  font-size:12px;
  font-weight:600;
  color:var(--muted-dim);
  letter-spacing:0.08em;
  text-transform:uppercase;
  display:block;
  margin-bottom:8px;
}
.doc h2{
  font-family:'Sora', sans-serif;
  font-size:clamp(21px, 3.4vw, 25px);
  font-weight:700;
  letter-spacing:-0.015em;
  line-height:1.2;
  margin:0;
}
.doc h3{
  font-family:'Sora', sans-serif;
  font-size:15.5px;
  font-weight:700;
  letter-spacing:-0.005em;
  color:var(--ink);
  margin:34px 0 12px;
  scroll-margin-top:24px;
}

.doc p{
  font-size:15.5px;
  line-height:1.72;
  color:var(--muted);
  margin:0 0 16px;
  max-width:70ch;
}
.doc p:last-child{margin-bottom:0;}
.doc strong{color:var(--ink); font-weight:600;}
.doc a{color:var(--accent); text-decoration:none; border-bottom:1px solid rgba(189,91,68,0.35);}
.doc a:hover{color:var(--ink); border-bottom-color:var(--card-line);}

.doc ul, .doc ol{
  margin:0 0 18px;
  padding-left:20px;
  color:var(--muted);
  max-width:68ch;
}
.doc li{
  font-size:15.5px;
  line-height:1.68;
  margin-bottom:9px;
}
.doc li:last-child{margin-bottom:0;}
.doc li::marker{color:var(--accent);}

/* ===== callouts ===== */
.callout{
  background:var(--card);
  border:1px solid var(--card-line);
  border-radius:20px;
  padding:22px 24px;
  margin:0 0 20px;
}
.callout.critical{
  background:var(--accent-soft);
  border-color:rgba(189,91,68,0.3);
}
.callout .tag{
  display:inline-block;
  font-family:'Sora', sans-serif;
  font-size:10.5px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--accent);
  margin-bottom:12px;
}
.callout p{color:var(--muted);}
.callout.critical p{color:#E9DDD8;}
.callout.critical strong{color:#FFF;}
.callout.critical li::marker{color:var(--accent);}
.callout > :last-child{margin-bottom:0;}

/* ===== key/value manifest rows ===== */
.manifest{
  background:var(--card);
  border:1px solid var(--card-line);
  border-radius:20px;
  padding:6px 22px;
  margin-bottom:20px;
}
.manifest .row{
  display:flex; gap:14px; align-items:baseline;
  padding:16px 0;
  border-top:1px solid var(--card-line);
  font-size:14.5px;
  line-height:1.55;
  color:var(--muted);
}
.manifest .row:first-child{border-top:none;}
.manifest .row b{color:var(--ink); font-weight:600;}
.pill{
  flex:0 0 auto;
  font-family:'Sora', sans-serif;
  font-size:10.5px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.03em;
  padding:5px 11px;
  border-radius:100px;
  white-space:nowrap;
}
.pill.gone{background:var(--accent-soft); color:var(--accent);}
.pill.stays{background:rgba(255,255,255,0.07); color:var(--muted);}

/* ===== tables ===== */
.table-wrap{
  background:var(--card);
  border:1px solid var(--card-line);
  border-radius:20px;
  overflow-x:auto;
  margin:0 0 20px;
  -webkit-overflow-scrolling:touch;
}
table{
  border-collapse:collapse;
  width:100%;
  min-width:520px;
  font-size:14px;
}
thead th{
  font-family:'Sora', sans-serif;
  font-size:10.5px;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--muted-dim);
  text-align:left;
  padding:18px 22px 12px;
  white-space:nowrap;
}
tbody td{
  padding:14px 22px;
  border-top:1px solid var(--card-line);
  color:var(--muted);
  line-height:1.55;
  vertical-align:top;
}
tbody td:first-child{color:var(--ink); font-weight:500;}
tbody tr:last-child td{padding-bottom:18px;}
table code{
  font-family:'Sora', sans-serif;
  font-size:12.5px;
  font-weight:600;
  color:var(--ink);
  white-space:nowrap;
}

/* ===== quoted authority block ===== */
blockquote{
  margin:0 0 20px;
  padding:20px 24px;
  background:var(--card);
  border:1px solid var(--card-line);
  border-left:2px solid var(--accent);
  border-radius:0 20px 20px 0;
  font-size:14.5px;
  line-height:1.75;
  color:var(--muted);
}
blockquote b{
  display:block;
  font-family:'Sora', sans-serif;
  font-weight:700;
  color:var(--ink);
  margin-bottom:6px;
}
blockquote a{color:var(--accent); text-decoration:none;}

.fine{
  font-size:13px;
  color:var(--muted-dim);
  line-height:1.7;
  max-width:60ch;
}
.fine a{color:var(--accent); text-decoration:none;}
.fine a:hover{color:var(--ink);}

/* ===== unfilled legal placeholder ===== */
.todo{
  color:var(--accent);
  background:var(--accent-soft);
  border-bottom:1px dashed rgba(189,91,68,0.5);
  padding:1px 5px;
  border-radius:4px;
  font-weight:500;
  white-space:nowrap;
}

/* ===== signature block ===== */
.signature{
  margin-top:44px;
  padding-top:32px;
  border-top:1px solid var(--card-line);
  font-size:14.5px;
  line-height:1.7;
  color:var(--muted);
}
.signature .name{
  font-family:'Sora', sans-serif;
  font-weight:700;
  color:var(--ink);
  display:block;
  margin-bottom:4px;
}

/* ===== footer ===== */
footer{
  margin:76px 0 20px;
  padding-top:26px;
  border-top:1px solid var(--card-line);
  display:flex; justify-content:space-between; align-items:flex-end; gap:20px;
  flex-wrap:wrap;
}
footer .contact{font-size:13.5px; line-height:1.6; color:var(--muted);}
footer .contact a{color:var(--ink); text-decoration:none;}
footer .contact a:hover{color:var(--accent);}
footer .stamp{
  font-family:'Sora', sans-serif;
  font-size:11px;
  font-weight:600;
  color:var(--muted-dim);
  text-transform:uppercase;
  letter-spacing:0.04em;
  text-align:right;
}

/* ===== key/value manifest with full-length labels ===== */
.manifest.kv .row{flex-wrap:wrap;}
.manifest.kv .row b{
  flex:0 0 auto;
  min-width:210px;
  color:var(--ink);
  font-weight:600;
}
@media (max-width:560px){
  .manifest.kv .row{flex-direction:column; gap:4px;}
  .manifest.kv .row b{min-width:0;}
}

/* ===== narrow phones: let the header nav wrap ===== */
@media (max-width:420px){
  header.top{flex-wrap:wrap; gap:12px;}
  .top nav{gap:16px;}
}

/* ===== tables stack into labelled rows on small screens ===== */
@media (max-width:620px){
  .table-wrap{overflow-x:visible; padding:6px 20px;}
  table{min-width:0;}
  table thead{
    position:absolute;
    width:1px; height:1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    white-space:nowrap;
  }
  table, table tbody, table tr, table td{display:block; width:auto;}
  table tr{
    padding:18px 0;
    border-top:1px solid var(--card-line);
  }
  table tr:first-child{border-top:none;}
  tbody td{
    padding:0;
    border-top:none;
    margin-bottom:10px;
  }
  tbody td:last-child{margin-bottom:0;}
  tbody tr:last-child td{padding-bottom:0;}
  tbody td::before{
    content:attr(data-label);
    display:block;
    font-family:'Sora', sans-serif;
    font-size:10px;
    font-weight:700;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--muted-dim);
    margin-bottom:4px;
  }
  table code{white-space:normal;}
}