/* ===== OnePlan legal pages — qash-style layout on OnePlan/Apple tokens ===== */
:root{
  --f-display:"SF Pro Display", system-ui, -apple-system, "Inter", sans-serif;
  --f-text:"SF Pro Text", system-ui, -apple-system, "Inter", sans-serif;
  --primary:#0066cc; --ink:#1d1d1f; --ink-80:#333; --ink-48:#6e6e73;
  --canvas:#fff; --parchment:#f5f5f7; --hairline:#d2d2d7; --divider:#e8e8ed;
  --maxw:1080px;
}
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto } }
body{ margin:0; background:var(--canvas); color:var(--ink); font-family:var(--f-text); font-size:17px; line-height:1.62; letter-spacing:-.01em; -webkit-font-smoothing:antialiased }
img{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
:focus-visible{ outline:2px solid var(--primary); outline-offset:3px; border-radius:6px }

/* ---- top bar ---- */
.lbar{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.8); backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px); border-bottom:1px solid rgba(0,0,0,.08) }
.lbar-in{ max-width:var(--maxw); margin:0 auto; height:52px; padding:0 22px; display:flex; align-items:center; justify-content:space-between; gap:16px }
.lback{ display:inline-flex; align-items:center; gap:7px; font-family:var(--f-display); font-weight:600; font-size:16px; color:var(--ink) }
.lback img{ height:22px; width:auto; display:block }
.lback .chev{ font-size:19px; line-height:0; color:var(--ink-48); transition:transform .15s } .lback:hover .chev{ transform:translateX(-2px) }
.langtog{ display:inline-flex; align-items:center; background:var(--parchment); border:1px solid var(--hairline); border-radius:9999px; padding:3px; gap:2px }
.langtog button, .langtog a{ font-family:var(--f-text); font-size:13px; font-weight:500; color:var(--ink-48); background:transparent; border:0; border-radius:9999px; padding:5px 14px; cursor:pointer; text-decoration:none; transition:color .2s, background .2s, box-shadow .2s }
.langtog button.on, .langtog a.on{ background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.10) }

/* ---- reading progress ---- */
.lprog{ position:fixed; top:52px; left:0; height:2px; width:0; background:var(--primary); z-index:49; transition:width .08s linear }

/* ---- layout ---- */
.lwrap{ max-width:var(--maxw); margin:0 auto; padding:clamp(34px,6vw,60px) 22px 64px; display:grid; grid-template-columns:236px 1fr; gap:clamp(28px,5vw,64px); align-items:start }
.ltoc{ position:sticky; top:92px; font-size:13px; line-height:1.5; max-height:calc(100vh - 124px); overflow-y:auto; padding-right:6px }
.ltoc h4{ font-family:var(--f-display); font-size:12px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-48); margin:0 0 12px }
.ltoc a{ display:block; color:var(--ink-48); padding:6px 0 6px 13px; border-left:2px solid transparent; transition:color .15s, border-color .15s }
.ltoc a:hover{ color:var(--ink) }
.ltoc a.active{ color:var(--ink); border-left-color:var(--primary); font-weight:500 }
.ltoc::-webkit-scrollbar{ width:0 }

.lmain{ min-width:0; max-width:720px }
.leff{ font-size:12.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-48); margin:0 0 12px }
.ltitle{ font-family:var(--f-display); font-size:clamp(34px,5vw,46px); font-weight:600; line-height:1.05; letter-spacing:-.02em; margin:0 0 16px }
.llead{ font-size:19px; line-height:1.5; color:var(--ink-80); margin:0 0 4px }

.leg-sec{ padding-top:42px; scroll-margin-top:84px }
.leg-sec h2{ font-family:var(--f-display); font-size:clamp(22px,2.6vw,27px); font-weight:600; line-height:1.2; letter-spacing:-.01em; margin:0 0 14px; display:flex; gap:10px }
.leg-sec h2 .num{ color:var(--primary); flex:none }
.leg-sec h3{ font-family:var(--f-display); font-size:18px; font-weight:600; margin:24px 0 8px; letter-spacing:-.01em }
.leg-sec p{ color:var(--ink-80); margin:0 0 14px }
.leg-sec ul{ margin:0 0 14px; padding:0; list-style:none }
.leg-sec li{ position:relative; color:var(--ink-80); padding-left:20px; margin-bottom:9px }
.leg-sec li::before{ content:""; position:absolute; left:3px; top:10px; width:5px; height:5px; border-radius:50%; background:var(--primary) }
.leg-sec strong{ color:var(--ink); font-weight:600 }
.leg-sec a.inl{ color:var(--primary) } .leg-sec a.inl:hover{ text-decoration:underline }

/* ---- footer ---- */
.lfoot{ border-top:1px solid var(--hairline); max-width:var(--maxw); margin:0 auto; padding:28px 22px 56px; display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:13px; color:var(--ink-48) }
.lfoot a:hover{ color:var(--primary) }

@media (max-width:900px){
  .lwrap{ grid-template-columns:1fr }
  .ltoc{ display:none }
}