/* ============================================================
   Legal pages (Privacy Policy, Terms of Use)
   Light, clean layout: warm page, white accordion rows, orange accents.
   Navy only in the hero.
   ============================================================ */
.lg-hero {
  position: relative;
  padding: clamp(112px, 11vw, 148px) 0 clamp(84px, 8vw, 112px);
  color: #FFFFFF;
  background: linear-gradient(135deg, #0F172A 0%, #1E3A8A 62%, #172554 100%);
  overflow: hidden;
}
.lg-hero::before {
  content: '';
  position: absolute;
  top: -120px; right: -80px;
  width: 460px; height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 122, 0, 0.28) 0%, rgba(255, 122, 0, 0) 68%);
  pointer-events: none;
}
.lg-hero .container { position: relative; }
.lg-badge {
  display: inline-block;
  padding: 6px 16px;
  margin-bottom: 18px;
  font-family: var(--font-display);
  font-size: 12.5px; font-weight: 800; letter-spacing: 0.05em;
  color: #FFC58A;
  background: rgba(255, 122, 0, 0.16);
  border: 1px solid rgba(255, 122, 0, 0.45);
  border-radius: 999px;
}
.lg-title {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: clamp(34px, 4.8vw, 58px);
  font-weight: 900; line-height: 1.1; letter-spacing: -0.02em;
  color: #FFFFFF;
}
.lg-sub { margin: 0; max-width: 620px; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.6; color: #CBD5E1; }

/* warm sand page: white cards clearly stand out from it */
.lg-body {
  padding: 0 0 clamp(56px, 7vw, 96px);
  background: #EFE9DD;
}
.lg-wrap {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1fr) 320px;
  gap: clamp(20px, 2.6vw, 34px);
  align-items: start;
  margin-top: -44px;
}

/* ---------- accordion ---------- */
.lg-doc { display: flex; flex-direction: column; gap: 12px; }
.lg-sec {
  position: relative;
  scroll-margin-top: 92px;
  color: #1E293B;
  background: #FFFFFF;
  border: 1px solid #DDD5C4;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(60, 45, 20, 0.1);
  overflow: hidden;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.lg-sec::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  background: #D9D1BF;
  transition: background 0.25s ease;
}
.lg-sec:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(60, 45, 20, 0.16); }
.lg-sec:hover::before { background: #FFB066; }
.lg-sec[open] { border-color: #F2B77A; box-shadow: 0 14px 32px rgba(60, 45, 20, 0.16); }
.lg-sec[open]::before { background: #FF7A00; }
.lg-sec__h {
  display: flex; align-items: center; gap: 16px;
  margin: 0;
  padding: 18px 22px 18px 26px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: clamp(18px, 1.7vw, 21px); font-weight: 800; line-height: 1.25;
  color: #0F172A;
  -webkit-tap-highlight-color: transparent;
}
.lg-sec__h::-webkit-details-marker { display: none; }
.lg-sec__h::marker { content: ''; }
.lg-sec__h:focus-visible { outline: 3px solid #FF9A3C; outline-offset: -3px; border-radius: 14px; }
.lg-num {
  flex: none; width: 36px; height: 36px; display: grid; place-items: center;
  border-radius: 50%; font-size: 15px; font-weight: 900;
  color: #1E3A8A; background: #EEF2FF; border: 1px solid #D5DEF7;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.lg-sec[open] .lg-num { background: #FF7A00; color: #FFFFFF; border-color: #FF7A00; }
.lg-sec__h > span:nth-child(2) { flex: 1; min-width: 0; }
.lg-chev {
  flex: none; width: 30px; height: 30px; margin-left: auto; border-radius: 50%;
  background: #F4EFE4; position: relative;
  transition: transform 0.3s ease, background 0.25s ease;
}
.lg-chev::before {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 8px; height: 8px; margin: -6px 0 0 -4px;
  border-right: 2.5px solid #0F172A; border-bottom: 2.5px solid #0F172A;
  transform: rotate(45deg);
}
.lg-sec[open] .lg-chev { transform: rotate(180deg); background: #FFE7CF; }

.lg-sec__b {
  padding: 0 26px 24px 78px;
  font-size: 16px; line-height: 1.75; color: #334155;
}
.lg-sec[open] .lg-sec__b { animation: lg-open 0.32s ease both; }
@keyframes lg-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.lg-sec__b p { margin: 0 0 12px; }
.lg-sec__b p:last-child, .lg-sec__b ul:last-child { margin-bottom: 0; }
.lg-sec__b ul { margin: 0 0 12px; padding-left: 22px; }
.lg-sec__b li { margin-bottom: 8px; }
.lg-sec__b li::marker { color: #FF7A00; }
.lg-sec__b strong { color: #0F172A; }
.lg-sec__b a { color: #C2410C; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.lg-sec__b a:hover { color: #1E3A8A; }

/* ---------- help card ---------- */
.lg-help {
  position: sticky; top: 96px;
  display: block;
  padding: 26px 24px 24px;
  color: #0F172A;
  background: #FFFFFF;
  border: 1px solid #DDD5C4;
  border-top: 5px solid #FF7A00;
  border-radius: 16px;
  box-shadow: 0 12px 28px rgba(60, 45, 20, 0.14);
}
.lg-help::before {
  content: '?'; display: grid; place-items: center;
  width: 44px; height: 44px; margin-bottom: 14px; border-radius: 50%;
  font-family: var(--font-display); font-size: 22px; font-weight: 900; color: #FFFFFF;
  background: linear-gradient(135deg, #FF7A00, #EA580C);
  box-shadow: 0 8px 18px rgba(255, 122, 0, 0.35);
}
.lg-help__h { margin: 0 0 8px; font-family: var(--font-display); font-size: clamp(20px, 1.8vw, 23px); font-weight: 900; line-height: 1.25; color: #0F172A; }
.lg-help__b { margin: 0 0 18px; color: #475569; line-height: 1.6; }
.lg-help .btn { width: 100%; justify-content: center; text-align: center; }

@media (max-width: 960px) {
  .lg-hero { padding-bottom: 76px; }
  .lg-wrap { grid-template-columns: minmax(0, 1fr); margin-top: -34px; }
  .lg-help { position: static; }
}
@media (max-width: 560px) {
  .lg-sec__h { padding: 15px 14px 15px 20px; gap: 12px; }
  .lg-num { width: 32px; height: 32px; font-size: 14px; }
  .lg-sec__b { padding: 0 18px 20px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .lg-sec, .lg-chev, .lg-num { transition: none; }
  .lg-sec:hover { transform: none; }
  .lg-sec[open] .lg-sec__b { animation: none; }
}
@media print {
  .lg-help, header, footer, .back-to-top, .lg-chev { display: none !important; }
  .lg-hero { color: #000; background: none; padding-top: 24px; }
  .lg-title, .lg-sub { color: #000; }
  .lg-wrap { display: block; margin-top: 0; }
  .lg-sec { border: 1px solid #999; box-shadow: none; margin-bottom: 12px; }
}