/* Skate Anywhere pages (the product page and its privacy policy), on top of ../css/style.css. */
[hidden] { display: none !important; }

:root {
  --sa-orange: #ff5a1f;
  --sa-orange-dark: #c23c0a;
  --sa-night: #12141c;
  --sa-night-2: #1c1f2b;
}

/* The privacy policy and other plain documents */
.doc { max-width: 760px; margin: 0 auto; padding: clamp(36px, 6vw, 72px) var(--gutter) 70px; }
.doc h1 { font-size: clamp(38px, 5vw, 56px); }
.doc h2 { font-size: clamp(22px, 2.4vw, 28px); margin-top: 1.7em; }
.doc-date { font-size: 15px; color: var(--ink-3); margin-top: -6px; }
.doc-lead { font-size: 19px; padding: 18px 22px; border-left: 4px solid var(--sa-orange); background: #fff; border-radius: 0 12px 12px 0; color: var(--ink); }
.doc ul { padding-left: 1.2em; margin: 0 0 1em; color: var(--ink-2); }
.doc li { margin-bottom: 8px; }
.doc a { color: var(--navy-2); }

/* The product page */
.sa-hero { background: var(--sa-night); color: #fff; }
.sa-hero-inner { max-width: var(--max); margin: 0 auto; padding: clamp(36px, 6vw, 80px) var(--gutter) clamp(40px, 6vw, 80px); display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.sa-logo { width: min(100%, 440px); height: auto; display: block; margin-bottom: 18px; }
.sa-hero p { color: #c9cddb; font-size: clamp(18px, 1.6vw, 21px); }
.sa-hero .sa-tag { color: #fff; font-weight: 600; font-size: clamp(20px, 2vw, 26px); margin-bottom: 10px; }
.sa-hero .platforms { color: #8d93a6; }
.sa-hero-art { width: 100%; height: auto; border-radius: 16px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.7); display: block; }
.btn-sa { background: var(--sa-orange); border-color: var(--sa-orange); color: #fff; box-shadow: 0 4px 0 var(--sa-orange-dark); }
.btn-sa:hover { box-shadow: 0 6px 0 var(--sa-orange-dark); }
.btn-ghost { border-color: rgba(255, 255, 255, 0.55); color: #fff; }

.sa-section { max-width: var(--max); margin: 0 auto; padding: clamp(40px, 6vw, 80px) var(--gutter); }
.sa-features { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(20px, 3vw, 36px); }
.sa-feature { background: #fff; border-radius: 18px; padding: 22px 24px 8px; border: 1px solid var(--line); }
.sa-feature img { width: 100%; height: auto; border-radius: 10px; display: block; margin-bottom: 14px; }
.sa-feature h3 { font-size: 24px; }
.sa-strip { background: var(--sa-night-2); color: #fff; }
.sa-strip .sa-section { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.sa-strip h3 { color: #fff; font-size: 20px; }
.sa-strip p { color: #b9bfcf; font-size: 16px; }
.sa-strip div { border-top: 3px solid var(--sa-orange); padding-top: 12px; }
.sa-beta { text-align: center; }
.sa-beta p { max-width: 620px; margin-left: auto; margin-right: auto; }

@media (max-width: 860px) {
  .sa-hero-inner, .sa-features, .sa-strip .sa-section { grid-template-columns: 1fr; }
}