/* Painted Bill: the dashboard's tokens and components, adapted for the public site.
   The sidebar, type, tiers and controls share lib/painted.css with the app. */
body {
  --site-space: clamp(20px, 3vw, 40px);
}
.side {
  background: var(--n-0);
  padding: 24px 16px 18px;
}
.side .brand {
  gap: 10px;
  padding: 0 8px 26px;
}
.side .brand img.brand-logo, [data-page="privacy"] .brand img.brand-logo {
  display:block; width:170px; max-width:100%; height:auto; flex:none;
}
.side .brand b {
  font-size: 25px;
  font-synthesis: none;
}
.side nav.menu {
  gap: 6px;
}
.menu a,
.menu a.nav-get,
.menu a[aria-current="page"],
.menu a.nav-get[aria-current="page"] {
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: var(--text);
  padding: 12px;
}
.menu a.nav-get {
  margin-bottom: 14px;
}
.menu a b {
  font-family: var(--f-kr);
  font-size: 16px;
  font-weight: 800;
}
.menu a small,
.menu a.nav-get small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.menu a:hover,
.menu a.nav-get:hover {
  background: var(--n-150);
}
.menu a[aria-current="page"] b {
  display: inline-block;
  margin: -2px -10px 2px;
  padding: 2px 10px 3px;
  background: var(--mustard);
  color: var(--paper-ink);
  clip-path: var(--brush-2);
}
.side-get,
.dl .dl-button {
  border: 1px solid var(--brick);
  border-radius: 2px;
  background: var(--brick);
  color: #fff4e3;
  box-shadow: none;
}
.side-get {
  padding: 12px 8px;
}
.side-lang select {
  min-height: 38px;
  border-color: var(--n-400);
  width: 100%;
}
.side-lang {
  display: grid;
  gap: 6px;
}
.side-lang .side-lang-title {
  display: block;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}
.page {
  padding-inline: var(--site-space);
}
main {
  padding-top: 36px;
  padding-bottom: 48px;
}
.page-heading {
  margin-bottom: 28px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}
.page-heading p {
  max-width: 68ch;
  margin-top: 10px;
  line-height: 1.7;
}
.card,
.op-box {
  padding: 24px;
}
.op-tier {
  font-synthesis: none;
}
.op-table td.num,
.op-table td.num * {
  font-synthesis: none;
}
.op-table th {
  color: var(--muted);
  font-weight: 600;
}
.op-table td {
  padding-block: 13px;
}
.sg-toc {
  background: var(--n-50);
  border-radius: 2px;
}
.sg-toc a.active,
.sg-toc a[aria-current] {
  color: var(--mustard);
}
.sg-sec {
  padding-block: 8px;
}
.sg-sec + .sg-sec {
  margin-top: 28px;
}
.dl {
  max-width: 1160px;
}
.dl-hero {
  gap: 32px;
  padding: clamp(24px, 3vw, 40px);
  border: 0;
  border-radius: 2px;
  background: var(--n-100);
  align-items: center;
}
.dl-kicker {
  display: inline-block;
  margin-bottom: 14px;
  padding: 4px 12px 5px;
  background: var(--mustard);
  color: var(--paper-ink);
  clip-path: var(--brush-2);
  font-weight: 800;
}
.dl-hero h1 {
  font-size: clamp(30px, 2.6vw, 42px);
  line-height: 1.3;
  margin: 0 0 18px;
  text-wrap: balance;
}
.dl-hero p {
  font-size: 15px;
  line-height: 1.8;
}
.dl-actions {
  margin-top: 28px;
  gap: 14px;
}
.dl .dl-button {
  padding: 13px 20px;
  min-height: 48px;
  font-size: 16px;
}
.dl-meta {
  font-size: 12px;
  line-height: 1.7;
}
.dl-hero .dl-req {
  margin-top: 14px;
  font-size: 12px;
}
.dl-shot {
  display: block;
  padding: 8px;
  background: var(--n-0);
  border: 1px solid var(--n-300);
}
.dl-shot img {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.dl-steps {
  gap: 1px;
  background: var(--n-300);
  margin-top: 20px;
}
.dl-steps div {
  border-radius: 0;
  padding: 22px 18px;
  background: var(--n-100);
  gap: 14px;
}
.dl-steps b {
  flex: 0 0 30px;
  height: 34px;
  line-height: 34px;
  font-family: var(--f-num);
  font-size: 20px;
  font-weight: 400;
  background: var(--mustard);
  color: var(--paper-ink);
  border-radius: 0;
  clip-path: var(--brush);
}
.dl-steps strong {
  margin-bottom: 6px;
}
.dl-h {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 23px;
  margin: 48px 0 20px;
}
.dl-h::before {
  content: "";
  flex: 0 0 22px;
  height: 7px;
  background: var(--mustard);
  clip-path: var(--stroke);
}
.dl-gallery {
  gap: 16px;
}
.dl-gallery figure {
  padding: 16px;
  border-radius: 2px;
}
.dl-gallery img {
  border-radius: 0;
}
.dl-gallery figcaption {
  margin-top: 16px;
  line-height: 1.7;
}
.dl-gallery figcaption b {
  font-family: var(--f-kr);
  font-size: 17px;
  margin-bottom: 6px;
}
.dl-more {
  border-radius: 2px;
  padding: 24px;
  margin-top: 20px;
}
.dl-more > b {
  font-family: var(--f-kr);
  font-size: 18px;
}
.dl-more ul {
  columns: 2;
  column-gap: 40px;
  line-height: 1.8;
  margin-top: 12px;
}
.dl-more li {
  break-inside: avoid;
  padding-bottom: 8px;
}
.dl-pages {
  gap: 12px;
}
.dl-pages a {
  border-radius: 2px;
  padding: 20px;
  border-color: transparent;
}
.dl-pages a:hover {
  border-color: var(--mustard);
  background: var(--n-150);
}
.dl-pages b {
  font-family: var(--f-kr);
  font-size: 17px;
  margin-bottom: 8px;
}
.dl-note {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  line-height: 1.8;
}
body:lang(zh-CN) .dl-hero h1 {
  word-break: normal;
}
.ad-house {
  border-radius: 2px;
  border-color: var(--n-400);
}
footer {
  padding: 24px 0 32px;
  font-size: 12px;
  gap: 12px 24px;
}
/* The privacy page is a document, with the same ink, type and flat surfaces. */
body[data-page="privacy"] {
  padding: 0;
}
[data-page="privacy"] .top,
[data-page="privacy"] main,
[data-page="privacy"] footer {
  max-width: 1000px;
  padding-inline: 24px;
}
[data-page="privacy"] .top {
  border-bottom: 1px solid var(--line);
  padding-block: 24px;
}
[data-page="privacy"] .brand {
  font-family: var(--f-num);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
[data-page="privacy"] main {
  padding-block: 40px 64px;
}
[data-page="privacy"] .doc h2 {
  color: var(--text);
  margin-top: 36px;
  margin-bottom: 12px;
}
[data-page="privacy"] .doc p,
[data-page="privacy"] .doc li {
  color: var(--n-800);
  line-height: 1.85;
}
@media (min-width: 1440px) {
  body:not([data-page="privacy"]) {
    padding-right: 332px;
  }
  .ad-side {
    position: fixed;
    top: 24px;
    right: 16px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    margin: 0;
    scrollbar-width: thin;
  }
}
@media (max-width: 1100px) {
  .dl-hero {
    grid-template-columns: 1fr;
  }
  .dl-shot {
    max-width: 760px;
  }
  .dl-more ul {
    columns: 1;
  }
}
@media (max-width: 900px) {
  .side {
    padding: 14px 16px 0;
    gap: 10px;
  }
  .side .brand {
    padding: 0;
    flex-basis: 40%;
  }
  .side .brand img.brand-logo, [data-page="privacy"] .brand img.brand-logo {
  display:block; width:170px; max-width:100%; height:auto; flex:none;
}
.side .brand b {
    font-size: 22px;
  }
  .side-foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
  }
  .side-get {
    min-height: 40px;
    padding: 10px;
    font-size: 12px;
  }
  .side-lang {
    width: 180px;
    padding: 0;
  }
  .side nav.menu {
    gap: 4px;
    padding-bottom: 10px;
  }
  .menu a,
  .menu a.nav-get {
    padding: 10px 12px;
    margin: 0;
  }
  .menu a b {
    font-size: 14px;
  }
  .menu a[aria-current="page"] b {
    margin-block: 0;
  }
  main {
    padding-top: 24px;
  }
  .page-heading {
    gap: 16px;
    flex-wrap: wrap;
  }
  .card,
  .op-box {
    padding: 18px;
  }
}
@media (max-width: 760px) {
  .dl-hero {
    padding: 24px 20px;
    gap: 24px;
  }
  .dl-steps {
    background: none;
    gap: 8px;
  }
  .dl-steps div {
    padding: 18px;
  }
  .dl-h {
    font-size: 21px;
    margin-top: 36px;
  }
  .dl-pages {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dl-pages a {
    padding: 16px;
  }
}
.doc-page { min-width:0; max-width:1080px; padding-bottom:48px; }
.doc-heading { display:block; height:auto; padding:0; border:0; margin:12px 0 32px; }
.doc-heading h1 { max-width:25ch; margin:10px 0 18px; font-size:clamp(25px,3vw,38px); line-height:1.35; text-wrap:balance; }
.doc-lead { max-width:74ch; font-size:16px; line-height:1.9; color:var(--n-900); }
.doc-breadcrumb { display:flex; flex-direction:row; flex-wrap:wrap; gap:8px; padding:0; border:0; font-size:13px; }
.doc-section { padding:24px 0; border-top:1px solid var(--n-300); }
.doc-section h2 { margin:0 0 16px; font-size:22px; line-height:1.45; text-wrap:balance; }
.doc-section p,.doc-section li { max-width:78ch; font-size:15px; line-height:1.9; color:var(--n-900); overflow-wrap:anywhere; }
.doc-section li+li { margin-top:14px; }
.doc-section ol { padding-left:24px; }
.doc-page figure { margin:28px 0; }
.doc-page figure img { max-width:100%; height:auto; }
.doc-page figcaption { margin-top:8px; color:var(--n-700); font-size:12px; }
.doc-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.doc-card { position:relative; display:block; padding:24px; border:1px solid var(--n-300); background:var(--n-100); color:var(--n-950); text-decoration:none; }
.doc-card:hover { border-color:var(--mustard); background:var(--n-150); }
.doc-card h2 { margin:0 0 12px; font-size:21px; line-height:1.5; text-wrap:balance; }
.doc-card p { font-size:14px; line-height:1.8; color:var(--n-800); }
.doc-card>span { display:block; color:var(--mustard); font-size:22px; }
.doc-related { display:grid; gap:14px; }
.doc-related a { min-height:44px; display:flex; align-items:center; }
.doc-table { max-width:100%; overflow-x:auto; margin:20px 0; }
.doc-table table { width:100%; border-collapse:collapse; }
.doc-table th,.doc-table td { padding:12px; text-align:left; border-bottom:1px solid var(--n-300); font-size:14px; white-space:nowrap; }
.doc-facts { display:flex; flex-wrap:wrap; gap:24px; padding:20px; background:var(--n-100); }
.doc-facts dt { color:var(--n-700); font-size:12px; }
.doc-facts dd { margin:6px 0 0; font:26px var(--f-num); color:var(--mustard); }
.hero-page .op-heroes { display:block; }
.hero-page .page-heading h1 { line-height:1.35; text-wrap:balance; }
.hero-scope { padding:16px 0; line-height:1.8; }
a[data-hero-link] { color:inherit; text-decoration:none; }
a[data-hero-link]:hover { text-decoration:underline; color:var(--mustard); }
.doc-page :is(a,button):focus-visible,a[data-hero-link]:focus-visible { outline:2px solid var(--mustard); outline-offset:4px; }
@media (max-width:760px) {
  .doc-grid { grid-template-columns:minmax(0,1fr); }
  .doc-card { padding:20px; }
  .doc-heading { margin-bottom:24px; }
}
.dl-questions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 32px;
}
.dl-questions article {
  min-width: 0;
  padding: 20px 0;
  border-top: 1px solid var(--n-300);
}
.dl-questions h3 {
  margin: 0 0 10px;
  color: var(--n-950);
  font-size: 16px;
  line-height: 1.5;
}
.dl-questions p {
  margin: 0;
  color: var(--n-800);
  font-size: 13px;
  line-height: 1.8;
  overflow-wrap: anywhere;
}
@media (max-width: 760px) {
  .dl-questions { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation: none !important;
    transition: none !important;
  }
}