@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/bricolage-grotesque-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/bricolage-grotesque-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/bricolage-grotesque-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url(/fonts/manrope-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url(/fonts/manrope-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url(/fonts/manrope-greek.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url(/fonts/manrope-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url(/fonts/manrope-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url(/fonts/manrope-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


:root{
  --bg:#f5f7fb;
  --surface:#ffffff;
  --ink:#101722;
  --muted:#5f6a77;
  --line:rgba(16,23,34,.13);
  --orange:#d83c00;
  --blue:#0d73bd;
  --shadow:0 18px 50px rgba(16,23,34,.10);
  --radius:18px;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth;scroll-padding-top:24px}

body{
  margin:0;
  font-family:Manrope, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    linear-gradient(115deg, rgba(20,127,209,.10), transparent 34%),
    linear-gradient(245deg, rgba(255,90,22,.07), transparent 30%),
    var(--bg);
  color:var(--ink);
  line-height:1.65;
}

a{color:inherit}

a:focus-visible{
  outline:3px solid var(--blue);
  outline-offset:3px;
}

.legal-shell{
  width:min(920px, calc(100% - 32px));
  margin:0 auto;
  padding:28px 0 64px;
}

.legal-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px 0 28px;
}

.brand{
  display:flex;
  align-items:center;
  gap:11px;
  color:inherit;
  font-size:20px;
  font-weight:950;
  font-family:"Bricolage Grotesque",Manrope,sans-serif;
  text-decoration:none;
}

.brand-mark{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border-radius:13px;
  color:#fff;
  background:var(--orange);
  box-shadow:0 12px 26px rgba(216,60,0,.24);
}

.back-link{
  display:inline-flex;
  min-height:40px;
  align-items:center;
  justify-content:center;
  padding:9px 14px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
  color:var(--muted);
  font-weight:850;
  text-decoration:none;
}

.legal-card{
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:28px;
  background:rgba(255,255,255,.92);
  box-shadow:var(--shadow);
}

.legal-hero{
  padding:clamp(28px, 6vw, 54px);
  border-bottom:1px solid var(--line);
  background:linear-gradient(135deg, rgba(20,127,209,.10), rgba(255,90,22,.10));
}

.eyebrow{
  display:inline-flex;
  padding:7px 11px;
  border-radius:999px;
  background:#fff;
  color:var(--orange);
  font-size:13px;
  font-weight:950;
}

h1{
  margin:16px 0 0;
  font-size:clamp(2rem, 7vw, 3.4rem);
  line-height:1;
  letter-spacing:-.04em;
  font-family:"Bricolage Grotesque",Manrope,sans-serif;
}

.legal-date{
  margin:14px 0 0;
  color:var(--muted);
}

.legal-content{
  padding:clamp(24px, 5vw, 46px);
}

.legal-index{
  display:grid;
  gap:8px;
  margin:0 0 32px;
  padding:18px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
}

.legal-index strong{font-size:.95rem}

.legal-index a{
  color:var(--blue);
  font-weight:800;
  text-decoration:none;
}

section + section{margin-top:28px}

h2{
  margin:0 0 10px;
  font-size:1.25rem;
  line-height:1.25;
  font-family:"Bricolage Grotesque",Manrope,sans-serif;
}

p{margin:0 0 12px}

ul{margin:0 0 12px; padding-left:1.25rem}

li + li{margin-top:6px}

strong{font-weight:900}

.legal-note{
  margin-top:28px;
  padding:16px 18px;
  border-radius:18px;
  background:#fff7ed;
  color:#7c2d12;
  font-weight:750;
}

.legal-footer{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
  margin-top:22px;
  color:var(--muted);
  font-size:.9rem;
}

.legal-footer a{text-decoration:none}
.legal-footer a:hover{text-decoration:underline}

@media (max-width:640px){
  .legal-top{align-items:flex-start;flex-direction:column}
  .back-link{width:100%}
}