@font-face { font-family: "Figtree"; src: url("./Figtree-Variable.woff2") format("woff2"); font-style: normal; font-weight: 300 900; font-display: swap; }
:root { --paper: #f0efe9; --ink: #171713; --muted: #77746d; --accent: #f0522d; --line: rgba(23,23,19,.16); --gutter: clamp(27px,7.25vw,116px); --sans: "Figtree","Hiragino Kaku Gothic ProN","Hiragino Sans","Microsoft YaHei",sans-serif; }
*,*::before,*::after { box-sizing: border-box; }
html { overflow-x: clip; background: var(--ink); scroll-behavior: smooth; scroll-padding-top: 110px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
::selection { background: var(--accent); color: #fff; }
.legal-hero { display: grid; min-height: 270px; grid-template-columns: minmax(0,1.15fr) minmax(280px,.85fr); align-items: end; gap: clamp(50px,9vw,150px); padding: clamp(78px,10vh,108px) var(--gutter) clamp(38px,5vh,52px); border-bottom: 1px solid var(--line); }
.legal-hero small,.legal-kicker { display: block; color: var(--accent); font-size: 12px; font-weight: 560; }
.legal-hero h1 { max-width: none; margin: 18px 0 0; font-size: clamp(58px,7vw,104px); font-weight: 560; letter-spacing: -.065em; line-height: .94; }
.legal-hero p { max-width: 48ch; margin: 0; color: var(--muted); font-size: clamp(13px,.95vw,15px); line-height: 1.72; }
.legal-index { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: clamp(20px,3vw,52px); padding: 28px var(--gutter) 30px; border-bottom: 1px solid var(--line); }
.legal-index a { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.legal-index span { flex: 0 0 auto; color: var(--muted); font-size: 11px; }
.legal-index strong { font-size: clamp(14px,1.35vw,18px); font-weight: 550; letter-spacing: -.02em; line-height: 1.35; }
.legal-index a:hover strong { color: var(--accent); }
.legal-doc { padding: clamp(56px,7vh,78px) var(--gutter) clamp(76px,10vh,108px); border-bottom: 1px solid var(--line); }
.legal-doc__inner { width: min(100%,980px); margin: 0 auto; }
.legal-doc__heading { margin: 0 0 clamp(34px,4.5vh,48px); }
.legal-doc h2 { max-width: none; margin: 14px 0 0; font-size: clamp(42px,5vw,70px); font-weight: 560; letter-spacing: -.055em; line-height: 1; }
.legal-doc__body { display: grid; gap: clamp(22px,3vh,32px); }
.legal-clause { display: block; }
.legal-clause h3 { display: flex; align-items: baseline; gap: 12px; margin: 0 0 14px; font-size: clamp(17px,1.5vw,21px); font-weight: 590; letter-spacing: -.015em; line-height: 1.45; }
.legal-clause__number { min-width: 1.5em; color: var(--accent); font-variant-numeric: tabular-nums; }
.legal-clause__copy { display: grid; gap: 4px; padding-left: calc(1.5em + 12px); }
.legal-clause p,.legal-clause li { margin: 0; color: color-mix(in srgb,var(--ink) 82%,transparent); font-size: clamp(15px,1.1vw,16px); line-height: 1.65; }
.legal-clause ol { display: grid; gap: 3px; margin: 0; padding: 0; list-style: none; counter-reset: legal-subclause; }
.legal-clause li { display: grid; grid-template-columns: 2.35em minmax(0,1fr); gap: 5px; counter-increment: legal-subclause; }
.legal-clause li::before { content: "(" counter(legal-subclause) ")"; color: var(--muted); font-variant-numeric: tabular-nums; }
.legal-status { display: inline-flex; width: fit-content; margin-top: 24px; padding: 9px 12px; background: color-mix(in srgb,var(--accent) 16%,var(--paper)); color: var(--ink); font-size: 11px; line-height: 1.55; }
@media (max-width:850px) { .legal-hero { grid-template-columns:1fr; gap:34px; } .legal-index { grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:18px; } }
@media (max-width:560px) { :root { --gutter:24px; } .legal-hero { min-height:0; padding-top:72px; padding-bottom:34px; } .legal-hero h1 { font-size:clamp(50px,15vw,70px); } .legal-index { grid-template-columns:1fr; gap:13px; padding-top:22px; padding-bottom:24px; } .legal-doc { padding-top:52px; padding-bottom:72px; } .legal-doc__heading { margin-bottom:34px; } .legal-doc h2 { font-size:clamp(38px,11vw,54px); } .legal-clause__copy { padding-left:0; } }