/* ============================================================
   AgentPro — Legal pages (私隱政策 / 服務條款)
   ============================================================ */
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--font);
  color:var(--ink);
  background:var(--bg);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
a{ color:var(--brand-600); text-decoration:none; }
a:hover{ text-decoration:underline; }

.legal-nav{
  position:sticky; top:0; z-index:20; height:72px;
  background:rgba(255,255,255,.86); backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid var(--line);
}
.legal-nav .wrap{ max-width:920px; margin-inline:auto; height:100%; padding-inline:24px; display:flex; align-items:center; gap:16px; }
.legal-nav img{ height:27px; }
.legal-nav .back{
  margin-left:auto; display:inline-flex; align-items:center; gap:7px;
  font-size:14.5px; font-weight:600; color:var(--navy);
  padding:9px 16px; border-radius:10px; border:1.5px solid var(--line); background:#fff;
  transition:.25s;
}
.legal-nav .back:hover{ text-decoration:none; border-color:var(--tint-3); transform:translateY(-2px); box-shadow:var(--sh-sm); }
.legal-nav .back svg{ width:16px; height:16px; }

.legal-hero{
  position:relative; overflow:hidden;
  background:linear-gradient(165deg,#0C2A47,#0E2F4F);
  color:#fff; padding:128px 24px 56px;
}
.legal-hero .deco{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.legal-hero .deco .dots{
  position:absolute; inset:0;
  background-image:radial-gradient(rgba(86,174,221,.22) 1px, transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 70% 80% at 85% 30%, #000 10%, transparent 70%);
  mask-image:radial-gradient(ellipse 70% 80% at 85% 30%, #000 10%, transparent 70%);
}
.legal-hero .deco .ic{ position:absolute; color:rgba(86,174,221,.16); }
.legal-hero .deco .ic svg{ width:100%; height:100%; }
.legal-hero .deco .ic.i1{ width:120px; height:120px; top:30px; right:8%; transform:rotate(8deg); }
.legal-hero .deco .ic.i2{ width:74px; height:74px; bottom:-10px; right:24%; color:rgba(86,174,221,.12); transform:rotate(-10deg); }
.legal-hero .deco .ic.i3{ width:88px; height:88px; top:54px; right:38%; color:rgba(255,255,255,.06); transform:rotate(6deg); }
.legal-hero .deco .glow{ position:absolute; width:420px; height:420px; border-radius:50%; top:-180px; right:-80px; background:radial-gradient(circle, rgba(21,135,195,.28), transparent 70%); filter:blur(20px); }
.legal-hero .wrap{ position:relative; z-index:1; max-width:920px; margin-inline:auto; }

/* Legal page: nav is white over the dark hero by default; reverts when scrolled (white bg) */
.legal-page .nav:not(.scrolled) .nav-link{ color:#fff; }
.legal-page .nav:not(.scrolled) .nav-link:hover{ color:#fff; }
.legal-page .nav:not(.scrolled) .nav-link::after{ background:#fff; }
.legal-page .nav:not(.scrolled) .nav-phone{ color:#fff; }
.legal-page .nav:not(.scrolled) .hamburger span,
.legal-page .nav:not(.scrolled) .hamburger span::before,
.legal-page .nav:not(.scrolled) .hamburger span::after{ background:#fff; }
.legal-page .nav:not(.scrolled) .nav-logo{ filter:brightness(0) invert(1); }
.legal-hero .eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:#56AEDD;
}
.legal-hero .eyebrow::before{ content:""; width:22px; height:2px; background:var(--brand); border-radius:2px; }
.legal-hero h1{ color:#fff; font-size:clamp(30px,5vw,44px); font-weight:800; letter-spacing:-.01em; margin:14px 0 10px; line-height:1.15; }
.legal-hero .upd{ font-size:14px; color:#aec3d5; }

.legal-body{ max-width:920px; margin:0 auto; padding:56px 24px 80px; }
.legal-body .intro{ font-size:17px; color:var(--muted); margin-bottom:36px; text-wrap:pretty; }

.toc{
  background:var(--tint); border:1px solid var(--tint-3); border-radius:16px;
  padding:22px 26px; margin-bottom:44px;
}
.toc h4{ font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--brand-700); margin-bottom:12px; }
.toc ol{ list-style:none; counter-reset:toc; display:grid; grid-template-columns:1fr 1fr; gap:7px 26px; }
.toc li{ counter-increment:toc; }
.toc a{ font-size:14.5px; color:var(--navy); display:flex; gap:9px; padding:3px 0; }
.toc a::before{ content:counter(toc,decimal-leading-zero); font-family:var(--font-num); font-weight:700; color:var(--brand); font-size:13px; flex-shrink:0; }
.toc a:hover{ text-decoration:none; color:var(--brand-600); }

.legal-body section{ margin-bottom:38px; scroll-margin-top:90px; }
.legal-body h2{
  font-size:21px; font-weight:800; color:var(--ink); letter-spacing:-.01em;
  margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid var(--line);
  display:flex; align-items:baseline; gap:12px;
}
.legal-body h2 .n{ font-family:var(--font-num); font-size:15px; font-weight:800; color:var(--brand); flex-shrink:0; }
.legal-body h3{ font-size:16px; font-weight:700; color:var(--navy); margin:22px 0 8px; }
.legal-body p{ font-size:15.5px; color:var(--muted); margin-bottom:13px; text-wrap:pretty; }
.legal-body p strong, .legal-body li strong{ color:var(--ink); font-weight:600; }
.legal-body ul{ list-style:none; margin:0 0 15px; padding:0; }
.legal-body ul li{
  font-size:15.5px; color:var(--muted); padding:5px 0 5px 26px; position:relative;
}
.legal-body ul li::before{
  content:""; position:absolute; left:4px; top:13px; width:7px; height:7px;
  border-radius:2px; background:var(--brand); transform:rotate(45deg);
}
.legal-callout{
  background:var(--tint-2); border:1px solid var(--tint-3); border-radius:14px;
  padding:18px 22px; margin:18px 0; font-size:14.5px; color:var(--navy);
}
.legal-callout strong{ color:var(--brand-700); }

.legal-foot{
  background:var(--navy-900); color:#9fb6c8; padding:40px 24px; text-align:center;
  font-size:13.5px;
}
.legal-foot .wrap{ max-width:920px; margin-inline:auto; display:flex; flex-direction:column; gap:14px; align-items:center; }
.legal-foot .links{ display:flex; gap:22px; flex-wrap:wrap; justify-content:center; }
.legal-foot a{ color:#9fb6c8; }
.legal-foot a:hover{ color:var(--brand); text-decoration:none; }
.legal-foot .cr{ color:#6a8499; }

@media(max-width:640px){
  .toc ol{ grid-template-columns:1fr; }
  .legal-hero{ padding:44px 20px 40px; }
  .legal-body{ padding:40px 20px 60px; }
  .legal-nav .wrap, .legal-hero .wrap, .legal-body, .legal-foot .wrap{ padding-inline:0; }
  .legal-nav{ padding-inline:20px; }
}