/* ============================================================
   URLHOST — Legal pages (Terms, Privacy)
   ============================================================ */

/* reading progress */
.lg-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1100; pointer-events: none; }
.lg-progress span { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #2fbf71, #6fe0ac); transform: scaleX(0); transform-origin: left; }

/* hero */
.lg-hero {
  position: relative; overflow: hidden; padding: 3rem 0 5.5rem; color: #cfe3d9;
  background: radial-gradient(120% 90% at 100% 0%, #13573a 0%, var(--dark-bg) 55%, #081a11 100%);
}
.lg-hero__grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 70% 80% at 80% 20%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 80% 20%, #000 20%, transparent 75%);
}
.lg-hero__icon {
  position: absolute; right: 6%; top: 50%; transform: translateY(-50%); font-size: 13rem; line-height: 1;
  color: rgba(111,224,172,.07); pointer-events: none;
}
.lg-hero .container { position: relative; }
.lg-hero .sh-crumb { margin-bottom: 2rem; }
.lg-hero h1 { color: #fff; font-size: clamp(2.2rem, 4.6vw, 3.4rem); font-weight: 700; letter-spacing: -.02em; margin-bottom: .8rem; }
.lg-hero h1 span { background: linear-gradient(90deg, #6fe0ac, #2fbf71); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lg-hero__lead { max-width: 38rem; font-size: 1.08rem; line-height: 1.65; color: #b8d6c8; margin-bottom: 1.6rem; }
.lg-meta { display: flex; flex-wrap: wrap; gap: .6rem; }
.lg-meta span {
  display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; font-weight: 600; color: #dcebe3;
  padding: .45rem .85rem; border-radius: 99px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
}
.lg-meta i { color: #6fe0ac; }
.lg-switch { display: inline-flex; gap: .3rem; padding: .3rem; margin-top: 1.6rem; border-radius: 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); }
.lg-switch a { font-size: .86rem; font-weight: 600; color: #b8d6c8; padding: .5rem 1rem; border-radius: 10px; display: inline-flex; align-items: center; gap: .4rem; }
.lg-switch a:hover { color: #fff; background: rgba(255,255,255,.06); }
.lg-switch a.is-active { background: #fff; color: var(--brand-dark); }

/* at a glance */
.lg-glance { margin-top: -3rem; position: relative; z-index: 2; }
.lg-glance__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.gl-card { padding: 1.3rem; border-radius: 18px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-md); }
.gl-card__ico { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: var(--brand-soft); color: var(--brand); font-size: 1.1rem; margin-bottom: .8rem; }
.gl-card b { display: block; font-family: var(--font-display); font-size: 1rem; color: var(--ink); margin-bottom: .2rem; }
.gl-card p { font-size: .86rem; color: var(--muted); margin: 0; line-height: 1.5; }
.lg-glance__note { text-align: center; font-size: .82rem; color: var(--muted); margin: 1rem 0 0; }

/* layout */
.lg-body { padding: 3.5rem 0 5rem; }
.lg-layout { display: grid; grid-template-columns: 270px 1fr; gap: 3rem; align-items: start; }

/* toc */
.lg-toc { position: sticky; top: 100px; }
.lg-toc__card { padding: 1.2rem; border-radius: 18px; background: var(--brand-tint); border: 1px solid var(--brand-border); }
.lg-toc__ttl { font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: .7rem; display: flex; justify-content: space-between; }
.lg-toc ol { list-style: none; counter-reset: toc; padding: 0; margin: 0; display: grid; gap: .1rem; max-height: calc(100vh - 260px); overflow-y: auto; }
.lg-toc li { counter-increment: toc; }
.lg-toc ol a {
  display: flex; gap: .6rem; align-items: baseline; font-size: .87rem; color: var(--body); padding: .4rem .6rem; border-radius: 9px;
  border-left: 2px solid transparent; transition: .15s ease;
}
.lg-toc ol a::before { content: counter(toc, decimal-leading-zero); font-family: var(--font-mono); font-size: .72rem; color: #a3afa9; }
.lg-toc ol a:hover { background: #fff; color: var(--brand-dark); }
.lg-toc ol a.is-active { background: #fff; color: var(--brand-dark); font-weight: 700; border-left-color: var(--brand); box-shadow: var(--shadow-sm); }
.lg-toc ol a.is-active::before { color: var(--brand); }
.lg-toc__actions { display: grid; gap: .5rem; margin-top: .9rem; }
.lg-toc__actions a, .lg-toc__actions button {
  display: flex; align-items: center; justify-content: center; gap: .4rem; font-size: .84rem; font-weight: 600;
  padding: .6rem; border-radius: 11px; border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; transition: .2s;
}
.lg-toc__actions a:hover, .lg-toc__actions button:hover { border-color: var(--brand); color: var(--brand); }

/* mobile toc */
.lg-mtoc { display: none; }

/* content */
.lg-content { counter-reset: sec; min-width: 0; }
.lg-sec {
  counter-increment: sec; scroll-margin-top: 110px; position: relative;
  padding: 1.8rem 2rem; border-radius: 20px; background: #fff; border: 1px solid var(--line); margin-bottom: 1rem;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.lg-sec:target, .lg-sec.is-current { border-color: var(--brand-border); box-shadow: var(--shadow-sm); }
.lg-sec h2 { display: flex; align-items: center; gap: .8rem; font-size: 1.35rem; font-weight: 700; margin-bottom: 1rem; }
.lg-sec h2::before {
  content: counter(sec, decimal-leading-zero); flex: 0 0 auto; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px;
  font-family: var(--font-mono); font-size: .85rem; color: #fff; background: var(--brand);
}
.lg-sec h3 { font-size: 1.02rem; font-weight: 700; margin: 1.2rem 0 .5rem; }
.lg-sec p, .lg-sec li { color: var(--body); font-size: .97rem; line-height: 1.75; }
.lg-sec p { margin-bottom: .8rem; }
.lg-sec p:last-child { margin-bottom: 0; }
.lg-sec ul { padding-left: 0; list-style: none; margin: .4rem 0 .9rem; display: grid; gap: .35rem; }
.lg-sec ul li { position: relative; padding-left: 1.6rem; }
.lg-sec ul li::before { content: ""; position: absolute; left: .3rem; top: .7rem; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.lg-sec ul.lg-x li::before { background: #d9534f; box-shadow: 0 0 0 3px #fbe6e5; }
.lg-sec a { color: var(--brand); font-weight: 600; }
.lg-sec a:hover { text-decoration: underline; }
.lg-sec strong { color: var(--ink); }

/* callouts */
.lg-note { display: flex; gap: .8rem; padding: 1rem 1.1rem; border-radius: 14px; margin: 1rem 0; font-size: .92rem; line-height: 1.6; }
.lg-note i { flex: 0 0 auto; font-size: 1.15rem; margin-top: .1rem; }
.lg-note--info { background: var(--brand-tint); border: 1px solid var(--brand-border); color: var(--brand-dark); }
.lg-note--info i { color: var(--brand); }
.lg-note--warn { background: #fff8ec; border: 1px solid #f6ddb0; color: #7a4a06; }
.lg-note--warn i { color: #e0951f; }

.lg-pills { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .6rem; margin: .8rem 0 1rem; }
.lg-pill { padding: .9rem 1rem; border-radius: 14px; border: 1px solid var(--line); background: #fcfdfc; }
.lg-pill b { display: block; font-family: var(--font-display); font-size: 1.4rem; color: var(--brand); line-height: 1.1; }
.lg-pill span { display: block; font-size: .82rem; line-height: 1.4; color: var(--muted); margin-top: .2rem; }

.ph { background: #fff3c4; color: #7a5a00; padding: .05rem .35rem; border-radius: 5px; font-weight: 600; border: 1px dashed #e8c75a; }

/* contact card */
.lg-contact {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1.5rem; margin-top: 1.5rem;
  padding: 1.8rem 2rem; border-radius: 22px; color: #cfe3d9;
  background: radial-gradient(120% 140% at 100% 0%, #1f8a57 0%, var(--brand) 35%, var(--brand-dark) 100%);
}
.lg-contact h3 { color: #fff; font-size: 1.35rem; margin-bottom: .3rem; }
.lg-contact p { margin: 0; color: #d5ece1; }
.lg-contact__btns { display: flex; gap: .6rem; flex-wrap: wrap; }
.lg-contact .btn-light { color: var(--brand-dark); font-weight: 700; }

/* print */
@media print {
  .topbar, .site-nav, .lg-progress, .lg-toc, .lg-mtoc, .footer, .to-top, .lg-switch, .lg-contact__btns, .lg-glance { display: none !important; }
  .lg-hero { background: none; color: #000; padding: 0 0 1rem; }
  .lg-hero h1, .lg-hero h1 span { color: #000; -webkit-text-fill-color: #000; }
  .lg-hero__lead, .lg-meta span { color: #333; border: 0; background: none; }
  .lg-hero__icon, .lg-hero__grid, .sh-crumb { display: none; }
  .lg-layout { grid-template-columns: 1fr; }
  .lg-sec { border: 0; padding: .5rem 0; break-inside: avoid; }
  .lg-contact { background: none; color: #000; padding: 0; }
  .lg-contact h3, .lg-contact p { color: #000; }
}

/* responsive */
@media (max-width: 1199.98px) { .lg-glance__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 991.98px) {
  .lg-layout { grid-template-columns: 1fr; gap: 1.2rem; }
  .lg-toc { display: none; }
  .lg-mtoc { display: block; position: sticky; top: 76px; z-index: 5; }
  .lg-mtoc details { background: #fff; border: 1px solid var(--brand-border); border-radius: 14px; box-shadow: var(--shadow-sm); }
  .lg-mtoc summary { list-style: none; cursor: pointer; padding: .8rem 1rem; font-weight: 700; font-size: .9rem; color: var(--ink); display: flex; justify-content: space-between; align-items: center; gap: .6rem; }
  .lg-mtoc summary::-webkit-details-marker { display: none; }
  .lg-mtoc summary span { font-weight: 500; color: var(--brand); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .lg-mtoc summary i { transition: transform .2s; }
  .lg-mtoc details[open] summary i { transform: rotate(180deg); }
  .lg-mtoc ol { list-style: none; margin: 0; padding: 0 .6rem .7rem; max-height: 55vh; overflow-y: auto; }
  .lg-mtoc a { display: block; padding: .5rem .6rem; border-radius: 8px; font-size: .88rem; color: var(--body); }
  .lg-mtoc a.is-active { background: var(--brand-tint); color: var(--brand-dark); font-weight: 700; }
}
@media (max-width: 575.98px) {
  .lg-hero { padding-bottom: 4.5rem; }
  .lg-hero__icon { display: none; }
  .lg-glance__grid { grid-template-columns: 1fr; }
  .lg-sec { padding: 1.3rem 1.1rem; border-radius: 16px; }
  .lg-sec h2 { font-size: 1.15rem; }
  .lg-sec h2::before { width: 34px; height: 34px; font-size: .78rem; }
  .lg-contact { grid-template-columns: 1fr; padding: 1.5rem; }
  .lg-switch { display: flex; }
  .lg-switch a { flex: 1; justify-content: center; }
}