@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@700;800;900&family=Inter:wght@400;500;600&family=Noto+Sans+Display:wdth,wght@87.5,500;87.5,600&family=Space+Mono:wght@400;700&display=swap");

:root{
  --ink:#0f1115;
  --paper:#ebecee;
  --red:#e5402a;
  --surface:rgba(14,16,25,.78);
  --surface-strong:rgba(19,21,34,.92);
  --line:rgba(235,236,238,.13);
  --line-strong:rgba(235,236,238,.23);
  --mute:rgba(235,236,238,.66);
  --faint:rgba(235,236,238,.39);
  --space:"Space Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --inter:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --archivo:"Archivo","Arial Black",sans-serif;
  --noto:"Noto Sans Display",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

*{box-sizing:border-box}
html{min-height:100%;scroll-behavior:smooth}
body{
  min-height:100%;
  margin:0;
  overflow-x:hidden;
  color:var(--paper);
  background:
    radial-gradient(circle at 72% 12%,rgba(91,76,132,.25),transparent 31%),
    radial-gradient(circle at 20% 68%,rgba(229,64,42,.07),transparent 34%),
    linear-gradient(137deg,#07080a 0%,#0d0f16 54%,#151426 100%);
  font-family:var(--inter);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body::before{
  content:"";
  position:fixed;
  z-index:-2;
  inset:0;
  pointer-events:none;
  opacity:.12;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.30'/%3E%3C/svg%3E");
  mix-blend-mode:soft-light;
}
body::after{
  content:"";
  position:fixed;
  z-index:-1;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,.015),transparent 14%,transparent 86%,rgba(255,255,255,.012));
}

a{color:inherit;text-decoration:none}
a:hover{color:var(--paper)}
button,a{-webkit-tap-highlight-color:transparent}
::selection{background:var(--red);color:var(--paper)}
:focus{outline:none}
:focus-visible{outline:2px solid var(--red);outline-offset:4px}

.track-lines{
  position:fixed;
  z-index:-1;
  inset:0;
  display:grid;
  grid-template-columns:repeat(7,1fr);
  pointer-events:none;
  opacity:.5;
}
.track-lines span{border-left:1px solid rgba(235,236,238,.035)}
.track-lines span:last-child{border-right:1px solid rgba(235,236,238,.035)}

.secondary-page{
  width:min(1180px,calc(100% - 64px));
  min-height:100svh;
  margin:0 auto;
  padding:26px 0 34px;
}

.page-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  min-height:54px;
}
.page-context{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--faint);
  font:700 8px/1 var(--space);
  letter-spacing:1.25px;
  text-transform:uppercase;
}
.page-context i,.brand i,.eyebrow i{display:block;flex:0 0 auto;background:var(--red)}
.page-context i{width:7px;height:7px}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--paper);
  font:900 clamp(18px,1.5vw,27px)/1 var(--archivo);
  letter-spacing:2.4px;
  text-transform:uppercase;
}
.brand i{width:9px;height:9px}

.page-hero{
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(270px,.58fr);
  gap:clamp(42px,7vw,110px);
  align-items:end;
  padding:clamp(82px,11vh,126px) 0 clamp(48px,7vh,78px);
  border-bottom:1px solid var(--line-strong);
}
.eyebrow{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--faint);
  font:700 8px/1 var(--space);
  letter-spacing:1.1px;
  text-transform:uppercase;
}
.eyebrow i{width:7px;height:7px}
.page-hero h1{
  max-width:900px;
  margin:20px 0 0;
  font:700 clamp(52px,7.25vw,116px)/.88 var(--space);
  letter-spacing:-.078em;
  text-transform:uppercase;
}
.page-hero h1 .accent{color:var(--red)}
.hero-side{
  padding:23px 0 2px;
  border-top:4px solid var(--red);
}
.hero-intro{
  margin:0;
  color:rgba(235,236,238,.78);
  font:500 clamp(15.5px,1.12vw,18px)/1.62 var(--noto);
  letter-spacing:-.006em;
}
.hero-meta{
  display:flex;
  align-items:center;
  gap:9px;
  margin-top:24px;
  color:var(--faint);
  font:700 8px/1.4 var(--space);
  letter-spacing:.95px;
  text-transform:uppercase;
}
.hero-meta::before{content:"";width:18px;height:1px;background:var(--red)}

.page-main{padding:clamp(42px,6vw,72px) 0 clamp(68px,8vw,104px)}
.document-card{
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:26px;
  background:linear-gradient(145deg,rgba(28,30,52,.78),rgba(8,10,17,.82));
  box-shadow:0 28px 80px rgba(0,0,0,.24);
  backdrop-filter:blur(18px);
}
.notice{
  margin:0;
  padding:22px 26px;
  border-bottom:1px solid var(--line);
  border-left:4px solid var(--red);
  background:rgba(229,64,42,.045);
  color:var(--mute);
  font-size:13px;
  line-height:1.65;
}

.legal-grid{
  display:grid;
  grid-template-columns:240px minmax(0,1fr);
  margin:0;
  counter-reset:legal-section;
}
.legal-grid dt,.legal-grid dd{border-bottom:1px solid var(--line)}
.legal-grid dt:last-of-type,.legal-grid dd:last-of-type{border-bottom:0}
.legal-grid dt{
  counter-increment:legal-section;
  padding:28px 24px 28px 28px;
  color:var(--paper);
  font:700 10px/1.5 var(--space);
  letter-spacing:.9px;
  text-transform:uppercase;
}
.legal-grid dt::before{
  content:counter(legal-section,decimal-leading-zero);
  display:block;
  margin-bottom:11px;
  color:var(--red);
  font-size:8px;
  letter-spacing:1px;
}
.legal-grid dd{
  margin:0;
  padding:27px 34px;
  border-left:1px solid var(--line);
  color:rgba(235,236,238,.72);
  font-size:14px;
  line-height:1.72;
}
.legal-grid p{margin:0 0 13px}
.legal-grid p:last-child{margin-bottom:0}
.legal-grid ul{margin:0;padding-left:18px}
.legal-grid li{margin:0 0 9px;padding-left:4px}
.legal-grid li:last-child{margin-bottom:0}
.legal-grid strong{color:var(--paper);font-weight:600}

.support-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.support-card{
  min-height:220px;
  padding:28px;
  border:1px solid var(--line);
  border-radius:25px;
  background:linear-gradient(145deg,rgba(28,30,52,.86),rgba(9,11,19,.84));
  box-shadow:0 25px 64px rgba(0,0,0,.22);
}
.support-card-index{
  color:var(--red);
  font:700 8px/1 var(--space);
  letter-spacing:1px;
  text-transform:uppercase;
}
.support-card h2{
  margin:18px 0 0;
  font:700 clamp(18px,1.5vw,23px)/1.18 var(--space);
  letter-spacing:-.04em;
  text-transform:uppercase;
}
.support-card p{
  margin:16px 0 0;
  color:var(--mute);
  font-size:14px;
  line-height:1.68;
}
.support-card strong{color:var(--paper);font-weight:600}
.support-notice{
  margin-top:14px;
  padding:22px 24px;
  border:1px solid rgba(229,64,42,.19);
  border-left:4px solid var(--red);
  border-radius:18px;
  background:rgba(229,64,42,.045);
  color:var(--mute);
  font-size:13px;
  line-height:1.62;
}

.page-footer{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:28px;
  align-items:center;
  padding-top:30px;
  border-top:1px solid var(--line-strong);
}
.footer-links{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  color:var(--faint);
  font:700 8px/1 var(--space);
  letter-spacing:.85px;
  text-transform:uppercase;
}
.footer-links a{transition:color .2s ease}
.footer-links a[aria-current="page"]{color:var(--paper)}
.footer-note{
  margin:0;
  color:var(--faint);
  font:700 7px/1.45 var(--space);
  letter-spacing:.55px;
  text-align:right;
  text-transform:uppercase;
}

@media (max-width:900px){
  .secondary-page{width:min(100% - 40px,1180px)}
  .page-hero{grid-template-columns:1fr;gap:40px;padding-top:78px}
  .hero-side{max-width:620px}
  .legal-grid{grid-template-columns:190px minmax(0,1fr)}
  .page-footer{grid-template-columns:1fr auto}
  .footer-links{grid-column:1/-1;grid-row:1;justify-content:flex-start}
  .page-footer .brand{grid-column:1;grid-row:2}
  .footer-note{grid-column:2;grid-row:2}
}

@media (max-width:700px){
  .secondary-page{width:min(100% - 28px,1180px);padding-top:18px}
  .page-nav{min-height:48px}
  .page-context{font-size:7px;letter-spacing:.95px}
  .brand{font-size:18px}
  .page-hero{padding:58px 0 38px;gap:32px}
  .page-hero h1{font-size:clamp(45px,15vw,64px);letter-spacing:-.072em}
  .hero-side{padding-top:18px}
  .hero-intro{font-size:15px}
  .page-main{padding:34px 0 64px}
  .document-card{border-radius:20px}
  .notice{padding:19px 20px;font-size:12.5px}
  .legal-grid{grid-template-columns:1fr}
  .legal-grid dt{
    padding:23px 20px 10px;
    border-bottom:0;
  }
  .legal-grid dt::before{display:inline-block;margin:0 10px 0 0}
  .legal-grid dd{
    padding:0 20px 23px;
    border-left:0;
    font-size:13.5px;
  }
  .legal-grid dt:last-of-type{border-bottom:0}
  .support-grid{grid-template-columns:1fr}
  .support-card{min-height:0;padding:24px;border-radius:20px}
  .page-footer{grid-template-columns:1fr;gap:22px;align-items:start}
  .footer-links{grid-column:1;grid-row:1;gap:18px;flex-wrap:wrap}
  .page-footer .brand{grid-column:1;grid-row:2}
  .footer-note{grid-column:1;grid-row:3;text-align:left}
}

@media (prefers-reduced-motion:no-preference){
  .page-nav,.page-hero,.page-main,.page-footer{animation:pageEnter .65s cubic-bezier(.16,.82,.22,1) both}
  .page-hero{animation-delay:.06s}
  .page-main{animation-delay:.12s}
  .page-footer{animation-delay:.18s}
}
@keyframes pageEnter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
