/* Video Speeder, product page and legal pages.
   Standalone static pages, served without the React bundle so the Canva
   review and anyone with JS disabled get the full text. Like the KelimeYAP
   pages, this uses the app's own look rather than the ObliqueX palette: a
   light ground with Canva purple, because the app lives inside Canva and the
   page should feel like the same place. The purple is ours to use as a color;
   the Canva logos themselves are the official, unmodified files in img/.
   Fonts are the site's self-hosted latin subsets (English only), no CDN. */

/* ---- fonts ---- */

@font-face {
  font-family: "Open Runde";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/open-runde-600-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/geist-latin-wght.woff2") format("woff2");
}
/* Accented letters for the translated pages (de, fr, it, nl, no, da, is,
   fi, et). With unicode-range a browser fetches these files only when the
   text uses one of these characters (on the English page that is just the
   footer's middle dot). Declared after the base faces, so they are checked
   first for this range. */
@font-face {
  font-family: "Open Runde";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/open-runde-600-latin1.woff2") format("woff2");
  unicode-range: U+00A0-00FF, U+0152-0153, U+20AC;
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/geist-latin1-wght.woff2") format("woff2");
  unicode-range: U+00A0-00FF, U+0152-0153, U+20AC;
}

/* ---- tokens ---- */

:root {
  --ground: #faf9fe;
  --card: #ffffff;
  --ink: #0e1318;
  --ink-soft: #4d5563;
  --ink-faint: #858b98;
  --line: rgba(14, 19, 24, 0.1);
  --line-soft: rgba(14, 19, 24, 0.06);
  --brand: #7d2ae8;
  --brand-deep: #6620c9;
  --brand-soft: #f3edfe;
  --brand-tint: #e7dbfc;
  --canvas: #eef0f4;
  --radius: 16px;
  --display: "Open Runde", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, sans-serif;
  --sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 450;
  line-height: 1.65;
  letter-spacing: -0.011em;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--brand);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.wrap {
  max-width: 66rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

section {
  padding: 5rem 0;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.12;
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

.eyebrow {
  display: block;
  font-size: 0.75rem;
  font-weight: 550;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand);
}

/* ---- buttons ---- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  height: 3rem;
  padding: 0 1.4rem;
  border-radius: 10px;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 550;
  letter-spacing: -0.01em;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.btn:hover {
  text-decoration: none;
}

.btn-primary {
  background: var(--brand);
  color: #fff;
}

.btn-primary:hover {
  background: var(--brand-deep);
}

.btn-ghost {
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line);
}

.btn-ghost:hover {
  border-color: rgba(14, 19, 24, 0.25);
}

/* Canva icon logo inside a button: under 50px, so the icon version is the
   right one (Canva brand guidelines). The white ring gives it the required
   clear space against the purple. */
.btn .canva-mark {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #fff;
}

/* ---- topbar ---- */

/* 64px tall with the ObliqueX wordmark on the left, the same as the main
   site's navigation (src/components/Navigation.tsx) and the KelimeYAP page,
   so moving between them does not feel like leaving the site. /logo.png is
   used instead of /oxi.png because oxi.png is drawn white for a dark ground. */

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(250, 249, 254, 0.9);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line-soft);
}

.topbar-inner {
  max-width: 66rem;
  margin: 0 auto;
  padding: 1rem 1.5rem;
  display: flex;
  gap: 0.75rem 1.25rem;
  align-items: center;
  justify-content: space-between;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
}

.oxbrand {
  display: inline-flex;
  align-items: center;
  flex: none;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 2rem;
  letter-spacing: -0.03em;
  color: var(--ink);
  transition: opacity 0.15s ease;
}

.oxbrand:hover {
  opacity: 0.7;
  text-decoration: none;
}

.oxbrand img {
  width: 28px;
  height: 28px;
  margin-right: 1px;
}

.topbar-sep {
  width: 1px;
  height: 1.25rem;
  background: var(--line);
  flex: none;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ink);
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.brand:hover {
  text-decoration: none;
}

.brand img {
  width: 26px;
  height: 26px;
}

.topnav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  font-size: 0.9rem;
}

.topnav a {
  color: var(--ink-soft);
}

.topnav a:hover {
  color: var(--ink);
  text-decoration: none;
}

.topnav .btn {
  height: 2.25rem;
  padding: 0 0.9rem;
  font-size: 0.875rem;
  color: #fff;
  white-space: nowrap;
}

.topnav .btn:hover {
  color: #fff;
}

/* language menu: a plain <details>, no JS. Stays visible on narrow
   screens, where the section links are hidden. */
.langs {
  position: relative;
}

.langs summary {
  list-style: none;
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
  user-select: none;
}

.langs summary::-webkit-details-marker {
  display: none;
}

.langs summary:hover,
.langs[open] summary {
  color: var(--ink);
  border-color: var(--brand-tint);
}

.langs ul {
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  z-index: 20;
  min-width: 10rem;
  margin: 0;
  padding: 0.4rem;
  list-style: none;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.topnav .langs a {
  display: block;
  padding: 0.4rem 0.6rem;
  border-radius: 8px;
  color: var(--ink-soft);
}

.topnav .langs a:hover {
  background: var(--brand-soft);
  color: var(--ink);
}

.topnav .langs a[aria-current="page"] {
  color: var(--brand-deep);
}

@media (max-width: 760px) {
  .topnav a:not(.btn) {
    display: none;
  }

  .topnav .langs a {
    display: block;
  }
}

@media (max-width: 440px) {
  .topbar-inner {
    padding: 1rem 1.25rem;
    gap: 0.75rem;
  }

  .topbar-sep,
  .brand span {
    display: none;
  }

  /* keep the app icon from being squeezed out by the button */
  .brand img {
    flex: none;
  }
}

@media (max-width: 360px) {
  .oxbrand {
    font-size: 1.35rem;
  }
}

/* ---- hero ---- */

.hero {
  padding: 4.5rem 0 4rem;
  background: var(--brand-soft);
  border-bottom: 1px solid var(--brand-tint);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 3.5rem;
  align-items: center;
}

@media (max-width: 900px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 3rem;
  }
}

.works-with {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.35rem 0.9rem 0.35rem 0.4rem;
  background: var(--card);
  border: 1px solid var(--brand-tint);
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 550;
  color: var(--ink-soft);
}

.works-with img {
  width: 1.5rem;
  height: 1.5rem;
}

.hero h1 {
  margin-top: 1.5rem;
  font-size: clamp(2.4rem, 5.2vw, 3.6rem);
}

.hero h1 em {
  font-style: normal;
  color: var(--brand);
}

.hero-lede {
  margin-top: 1.25rem;
  max-width: 32rem;
  font-size: 1.125rem;
  color: var(--ink-soft);
}

.hero-actions {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.hero-facts {
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.hero-facts li {
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--brand-tint);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.6);
  font-size: 0.85rem;
  color: var(--ink-soft);
}

/* ---- demo: the panel next to a canvas ---- */

/* A drawing of the app's own panel, not a screenshot of Canva. The slider is
   a real input: moving it updates the numbers and the output bar, so the page
   shows what the speed does to a clip without any video footage. */

.stage {
  display: grid;
  grid-template-columns: 15.5rem minmax(0, 1fr);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 48px -28px rgba(14, 19, 24, 0.25);
}

@media (max-width: 560px) {
  .stage {
    grid-template-columns: minmax(0, 1fr);
  }
}

.panel {
  padding: 1.25rem;
  border-right: 1px solid var(--line-soft);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (max-width: 560px) {
  .panel {
    border-right: 0;
    border-bottom: 1px solid var(--line-soft);
  }
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  font-size: 0.95rem;
}

.panel-head span {
  color: var(--ink-faint);
  letter-spacing: 0.1em;
}

.thumb {
  width: 5.5rem;
  aspect-ratio: 1;
  border-radius: 10px;
  border: 2px solid var(--brand);
  padding: 3px;
}

.thumb div {
  width: 100%;
  height: 100%;
  border-radius: 6px;
  background: var(--brand-soft);
  display: grid;
  place-items: center;
}

.thumb img {
  width: 70%;
  height: auto;
}

.speed-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.875rem;
}

.speed-row output {
  min-width: 2.75rem;
  padding: 0.1rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.panel input[type="range"] {
  width: 100%;
  margin: 0;
  accent-color: var(--brand);
  cursor: pointer;
}

.panel-btn {
  display: block;
  padding: 0.7rem 0.5rem;
  border-radius: 10px;
  background: var(--brand);
  color: #fff;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 550;
}

.panel-status {
  font-size: 0.82rem;
  color: var(--ink-soft);
}

.canvas {
  background: var(--canvas);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.25rem;
}

.track-label {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin-bottom: 0.4rem;
}

.track-label b {
  color: var(--ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.track {
  height: 2.5rem;
  border-radius: 8px;
  background: var(--card);
  border: 1px solid var(--line-soft);
  overflow: hidden;
}

.track span {
  display: block;
  height: 100%;
  /* frame ticks, so the bar reads as film rather than a progress bar */
  background: repeating-linear-gradient(
      90deg,
      transparent 0 22px,
      rgba(255, 255, 255, 0.35) 22px 24px
    ),
    var(--ink-faint);
}

.track.is-out span {
  background: repeating-linear-gradient(
      90deg,
      transparent 0 22px,
      rgba(255, 255, 255, 0.35) 22px 24px
    ),
    var(--brand);
  min-width: 6px;
  transition: width 0.35s ease;
}

.canvas-note {
  font-size: 0.8rem;
  color: var(--ink-faint);
}

.proof {
  margin-top: 2.5rem;
  font-size: 0.875rem;
  color: var(--ink-faint);
}

/* ---- section heads ---- */

.section-head {
  max-width: 40rem;
  margin-bottom: 2.75rem;
}

.section-head h2 {
  margin-top: 0.75rem;
  font-size: clamp(1.9rem, 3.6vw, 2.5rem);
}

.section-head p {
  margin-top: 1rem;
  color: var(--ink-soft);
  font-size: 1.05rem;
}

/* ---- steps ---- */

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  counter-reset: step;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 820px) {
  .steps {
    grid-template-columns: minmax(0, 1fr);
  }
}

.steps li {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.75rem;
}

.steps li::before {
  counter-increment: step;
  content: counter(step);
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand);
  font-family: var(--display);
  font-weight: 600;
  margin-bottom: 1.25rem;
}

.steps h3 {
  font-size: 1.2rem;
}

.steps p {
  margin-top: 0.6rem;
  color: var(--ink-soft);
}

/* ---- specs ---- */

.specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  border-top: 1px solid var(--line);
}

@media (max-width: 720px) {
  .specs {
    grid-template-columns: minmax(0, 1fr);
  }
}

.spec {
  padding: 1.5rem 1.5rem 1.5rem 0;
  border-bottom: 1px solid var(--line);
}

.spec dt {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
}

.spec dd {
  margin: 0.4rem 0 0;
  color: var(--ink-soft);
}

/* ---- band ---- */

.band {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: clamp(2rem, 5vw, 3.25rem);
}

.band h2 {
  margin-top: 0.75rem;
  font-size: clamp(1.7rem, 3.2vw, 2.2rem);
  max-width: 36rem;
}

.band > p {
  margin-top: 1rem;
  color: var(--ink-soft);
  max-width: 44rem;
}

.band-cols {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem 2rem;
}

@media (max-width: 820px) {
  .band-cols {
    grid-template-columns: minmax(0, 1fr);
  }
}

.band-cols h3 {
  font-size: 1.05rem;
}

.band-cols p {
  margin-top: 0.4rem;
  font-size: 0.95rem;
  color: var(--ink-soft);
}

.nolist {
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.nolist li {
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand-deep);
  font-size: 0.875rem;
  font-weight: 550;
}

.band-note {
  margin-top: 1.75rem;
  color: var(--ink-soft);
}

/* ---- find it in Canva ---- */

.find {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 2rem;
}

/* Script logo: above 50px, so the wordmark is the right version. The box
   keeps well over 8px of clear space around it. */
.find-logo {
  display: inline-flex;
  padding: 1rem 1.25rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.find-logo img {
  height: 2.5rem;
  width: auto;
}

.find-copy {
  flex: 1 1 20rem;
}

.find-copy h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
}

.find-copy p {
  margin-top: 0.6rem;
  color: var(--ink-soft);
}

/* ---- docs ---- */

.docs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

@media (max-width: 720px) {
  .docs {
    grid-template-columns: minmax(0, 1fr);
  }
}

.doc {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 1.25rem 1.4rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--ink);
  transition: border-color 0.15s ease;
}

.doc:hover {
  border-color: var(--brand);
  text-decoration: none;
}

.doc b {
  font-weight: 600;
}

.doc span {
  font-size: 0.875rem;
  color: var(--ink-faint);
}

.contact {
  margin-top: 1.75rem;
  color: var(--ink-soft);
}

/* ---- footer ---- */

.pagefoot {
  border-top: 1px solid var(--line);
  padding: 2rem 0 2.5rem;
  font-size: 0.85rem;
  color: var(--ink-faint);
}

.pagefoot .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 2rem;
}

.pagefoot a {
  color: var(--ink-soft);
}

.pagefoot .disclaimer,
.pagefoot .langs-foot {
  flex-basis: 100%;
}

.pagefoot .langs-foot a[aria-current="page"] {
  color: var(--ink);
}

/* ---- legal and support pages ---- */

.doc-page {
  max-width: 46rem;
  margin: 0 auto;
  padding: 3.5rem 1.5rem 5rem;
}

.doc-page h1 {
  font-size: clamp(2rem, 4.5vw, 2.6rem);
}

.doc-page .updated {
  margin-top: 0.5rem;
  color: var(--ink-faint);
  font-size: 0.9rem;
}

.doc-page .summary {
  margin-top: 2rem;
  padding: 1.25rem 1.4rem;
  background: var(--brand-soft);
  border: 1px solid var(--brand-tint);
  border-radius: 14px;
}

.doc-page h2 {
  margin-top: 2.5rem;
  font-size: 1.3rem;
  letter-spacing: -0.02em;
}

.doc-page p,
.doc-page ul {
  margin-top: 0.85rem;
  color: var(--ink-soft);
}

.doc-page ul {
  padding-left: 1.25rem;
}

.doc-page li + li {
  margin-top: 0.4rem;
}

.doc-page ol {
  margin-top: 0.85rem;
  padding-left: 1.4rem;
  color: var(--ink-soft);
}

.doc-page .guide-cta {
  margin-top: 1.5rem;
}

.doc-page strong {
  color: var(--ink);
  font-weight: 600;
}

.doc-links {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  font-size: 0.9rem;
}

/* ---- return pages after Stripe Checkout (success, canceled) ---- */

.return-page {
  max-width: 34rem;
  min-height: calc(100vh - 12rem);
  margin: 0 auto;
  padding: 5rem 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* A plain ring; on the success page it carries a check drawn with borders. */
.return-mark {
  position: relative;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: var(--card);
}

.return-mark.is-done {
  border-color: var(--brand-tint);
  background: var(--brand-soft);
}

.return-mark.is-done::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 45%;
  width: 0.55rem;
  height: 1rem;
  border: solid var(--brand);
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -50%) rotate(45deg);
}

.return-page h1 {
  margin-top: 1.5rem;
  font-size: clamp(1.9rem, 4.5vw, 2.4rem);
}

.return-page p {
  margin-top: 0.75rem;
  font-size: 1.1rem;
  color: var(--ink-soft);
}

.return-page .return-note {
  margin-top: 2rem;
  font-size: 0.9rem;
  color: var(--ink-faint);
}

/* ---- plans (product page) ---- */

.plans {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}

@media (max-width: 960px) {
  .plans {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .plans {
    grid-template-columns: minmax(0, 1fr);
  }
}

.plans-soon {
  display: inline-block;
  margin-bottom: 1rem;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand-deep);
  font-size: 0.875rem;
  font-weight: 550;
}

.plan {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
}

.plan h3 {
  font-size: 1.15rem;
}

.plan .price {
  margin-top: 0.75rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.9rem;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.plan .price small {
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 450;
  letter-spacing: -0.011em;
  color: var(--ink-faint);
}

.plan ul {
  margin: 1.25rem 0 0;
  padding: 1.25rem 0 0;
  border-top: 1px solid var(--line-soft);
  list-style: none;
  font-size: 0.925rem;
  color: var(--ink-soft);
}

.plan li + li {
  margin-top: 0.45rem;
}

.specs-after {
  margin-top: 2.5rem;
}

.plans-note {
  margin-top: 1.25rem;
  font-size: 0.9rem;
  color: var(--ink-faint);
}

/* ---- FAQ (product page) ---- */

.faq {
  margin: 0;
  border-top: 1px solid var(--line);
}

.faq > div {
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--line);
}

.faq dt {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: -0.02em;
}

.faq dd {
  margin: 0.45rem 0 0;
  max-width: 46rem;
  color: var(--ink-soft);
}

/* ---- tables in legal pages ---- */

.doc-page .table-wrap {
  margin-top: 1rem;
  overflow-x: auto;
}

.doc-page table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.doc-page th,
.doc-page td {
  padding: 0.6rem 0.75rem 0.6rem 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.doc-page th {
  color: var(--ink);
  font-weight: 600;
}

/* On a phone a four column table is too narrow to read, so each row of a
   .stack table becomes a block, with the column name taken from data-label. */
@media (max-width: 560px) {
  .doc-page table.stack,
  .doc-page table.stack tbody,
  .doc-page table.stack tr,
  .doc-page table.stack td {
    display: block;
    width: 100%;
  }

  .doc-page table.stack thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .doc-page table.stack tr {
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--line);
  }

  .doc-page table.stack td {
    padding: 0;
    border-bottom: 0;
  }

  .doc-page table.stack td + td {
    margin-top: 0.5rem;
  }

  .doc-page table.stack td:first-child {
    color: var(--ink);
    font-weight: 600;
  }

  .doc-page table.stack td + td::before {
    content: attr(data-label);
    display: block;
    color: var(--ink);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
  }
}

.doc-page h3 {
  margin-top: 1.75rem;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
}

/* ---- reveal ---- */

/* Only active when the inline script has added html.js, so without JS
   every section stays visible. */
.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.js .reveal.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .track.is-out span {
    transition: none;
  }
}