/* ================================================================
   WAPISO wapiv3: Terms of Service, document reader
   Page: views/wapiv3/pages/terms-of-service.php (v2.2 and later).

   This page no longer loads legal.css. The Privacy Policy, the DPA and
   the /terms-of-service/2.1 archive keep legal.css.

   Layout: contents grouped by Part and the agreement as one sheet.
   - Wide screens: the contents are a sticky column next to the sheet.
   - Narrow screens: the contents are a closed <details> above the sheet.

   No JavaScript. Optional extras, each ignored where unsupported:
   - ::details-content keeps the contents open on wide screens.
   - scroll-target-group with :target-current marks the section being read.
   - animation-timeline: scroll() drives the reading-progress rule.

   Colours come from tokens.css. The page tokens below only derive
   tints and deeper shades of the success and danger hues with
   color-mix. Hues are unchanged, so the brand palette stays intact.
   ================================================================ */

.tos {
  --tos-sticky: 102px;          /* .site-header when scrolled: utility strip + 68px bar */
  --tos-nav-w: 248px;
  --tos-gap: 48px;
  --tos-sheet-max: 880px;
  --tos-sheet-pad: 56px;
  --tos-num-w: 60px;            /* hanging section numbers */

  --tos-text: var(--ink-1);
  --tos-muted: var(--ink-2);
  --tos-rule: var(--hairline);
  --tos-quiet: var(--surface-base);
  --tos-success-ink: color-mix(in srgb, var(--success) 62%, black);   /* same hue, 7:1 on white */
  --tos-success-tint: color-mix(in srgb, var(--success) 10%, white);
  --tos-danger-tint: color-mix(in srgb, var(--danger) 9%, white);     /* --danger-deep on it: 5.2:1 */
  --tos-danger-rule: color-mix(in srgb, var(--danger) 32%, white);
  --tos-radius-s: var(--r-input);   /* 10px */
  --tos-radius-l: var(--r-card);    /* 14px */

  padding: 20px 0 96px;
  background: var(--surface-base);
  color: var(--tos-text);
  font-family: var(--font-body);
}

html:has(.tos) { scroll-behavior: smooth; }

/* FontAwesome is not loaded in v3; the <i> tags in the markup stay empty. */
.tos i[class*="fa-"] { display: none; }

.tos-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.tos a:focus-visible,
.tos summary:focus-visible,
.tos-lang-note a:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* ============ TR / DE language note ============ */
.tos-lang-note {
  padding: 12px 0;
  background: var(--brand-tint);
  border-bottom: 1px solid var(--tos-rule, var(--hairline));
}
.tos-lang-note-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.tos-lang-note-icon {
  flex: none;
  margin-top: 2px;
  color: var(--brand-deep);
}
.tos-lang-note-text {
  margin: 0;
  max-width: 75ch;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-1);
}
.tos-lang-note-text a {
  color: var(--brand-deep);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ============ Breadcrumb ============ */
.tos-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 14px;
  color: var(--tos-muted);
}
.tos-crumbs a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--tos-muted);
  text-decoration: none;
}
.tos-crumbs a:hover {
  color: var(--brand-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.tos-crumbs [aria-current="page"] { color: var(--tos-text); font-weight: 500; }

/* ============ Layout ============ */
.tos-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

/* Breadcrumb and layout share one centred column so their edges line up. */
.tos-crumbs,
.tos-layout {
  max-width: var(--tos-sheet-max);
  margin-inline: auto;
}

@media (min-width: 1100px) {
  .tos-crumbs,
  .tos-layout { max-width: calc(var(--tos-nav-w) + var(--tos-gap) + var(--tos-sheet-max)); }
  .tos-layout {
    grid-template-columns: var(--tos-nav-w) minmax(0, var(--tos-sheet-max));
    align-items: start;
    gap: var(--tos-gap);
  }
  .tos-nav {
    position: sticky;
    top: calc(var(--tos-sticky) + 20px);
    max-height: calc(100vh - var(--tos-sticky) - 40px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    padding: 4px 8px 16px 0;
  }
}

/* ============ Contents ============ */
.tos-toc {
  background: var(--surface-raised);
  border: 1px solid var(--tos-rule);
  border-radius: var(--tos-radius-s);
}
.tos-toc-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 0 16px;
  cursor: pointer;
  list-style: none;
  font-size: 16px;
  font-weight: 600;
  color: var(--tos-text);
}
.tos-toc-summary::-webkit-details-marker { display: none; }
.tos-toc-summary::after {
  content: "";
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-right: 2px solid var(--tos-muted);
  border-bottom: 2px solid var(--tos-muted);
  transform: rotate(45deg);
  transition: transform var(--dur-button) var(--ease-ui);
}
.tos-toc[open] > .tos-toc-summary::after { margin-top: 4px; transform: rotate(-135deg); }

.tos-toc-nav {
  padding: 4px 8px 12px;
  scroll-target-group: auto;
}
.tos-toc-parts,
.tos-toc-sections {
  list-style: none;
  margin: 0;
  padding: 0;
}
.tos-toc-parts > li + li { margin-top: 6px; }

.tos-toc-part {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 8px;
  border-radius: var(--tos-radius-s);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--tos-text);
  text-decoration: none;
}
.tos-toc-roman {
  flex: none;
  min-width: 2.4em;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--tos-muted);
}
.tos-toc-sections {
  margin: 0 0 4px calc(8px + 2.4em);
  border-left: 1px solid var(--tos-rule);
}
.tos-toc-sections a {
  display: flex;
  gap: 6px;
  padding: 5px 8px 5px 12px;
  margin-left: -1px;
  border-left: 2px solid transparent;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--tos-muted);
  text-decoration: none;
}
.tos-toc-n {
  flex: none;
  min-width: 2.2em;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
}
.tos-toc-part:hover { background: var(--tos-quiet); }
.tos-toc-sections a:hover {
  color: var(--tos-text);
  border-left-color: var(--tos-muted);
}

/* The section being read, where the browser supports scroll markers.
   Kept as separate rules: an unknown pseudo-class drops the whole rule. */
.tos-toc-sections a:target-current {
  color: var(--brand-deep);
  border-left-color: var(--brand);
  font-weight: 600;
}
.tos-toc-part:target-current { color: var(--brand-deep); }

/* Reading progress: a thin rule above the contents, wide screens only. */
.tos-progress { display: none; }
@keyframes tos-read { to { transform: scaleX(1); } }

@media (min-width: 1100px) {
  .tos-toc {
    background: transparent;
    border: 0;
    border-radius: 0;
  }
  .tos-toc-summary {
    min-height: 0;
    padding: 0 8px 10px;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tos-muted);
  }
  .tos-toc-nav { padding: 0; }

  /* The contents follow the reader: every Part stays listed, and only the
     Part being read shows its sections, so the column fits one screen.
     Keyboard users get the full list while focus is inside it. Browsers
     without :target-current drop this rule and show every section. */
  .tos-toc-parts > li:not(:has(a:target-current)) > .tos-toc-sections { display: none; }
  .tos-toc-nav:focus-within .tos-toc-parts > li > .tos-toc-sections { display: block; }

  @supports selector(::details-content) {
    .tos-toc::details-content { content-visibility: visible; }
    .tos-toc-summary { cursor: default; }
    .tos-toc-summary::after { display: none; }
  }

  @supports (animation-timeline: scroll()) {
    .tos-progress {
      display: block;
      position: relative;
      height: 2px;
      margin: 0 8px 16px;
      overflow: hidden;
      background: var(--tos-rule);
    }
    .tos-progress::before {
      content: "";
      position: absolute;
      inset: 0;
      background: var(--tos-muted);
      transform: scaleX(0);
      transform-origin: 0 50%;
      animation: tos-read linear both;
      animation-timeline: scroll(root block);
    }
  }
}

/* ============ Sheet ============ */
.tos-sheet {
  min-width: 0;
  padding: 48px var(--tos-sheet-pad) 56px;
  background: var(--surface-raised);
  border: 1px solid var(--tos-rule);
  border-radius: var(--tos-radius-l);
  box-shadow: var(--shadow-soft);
}

/* Document header */
.tos-head {
  padding-bottom: 28px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--tos-rule);
}
.tos-kicker {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tos-muted);
}
.tos-title {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 44px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--tos-text);
  text-wrap: balance;
}
.tos-lede {
  max-width: 64ch;
  margin: 0 0 24px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--tos-muted);
  text-wrap: pretty;
}
.tos-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 40px;
  margin: 0;
}
.tos-meta-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tos-meta dt {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tos-muted);
}
.tos-meta dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--tos-text);
}

/* Version notice (component from legal-version.css, fitted to the sheet) */
.tos-sheet .legal-version-notice {
  margin: 0 0 20px;
  padding: 14px 18px;
  background: var(--tos-quiet);
  border: 1px solid var(--tos-rule);
  border-left: 3px solid var(--brand);
  border-radius: var(--tos-radius-s);
}
.tos-sheet .legal-version-notice p {
  max-width: none;
  font-size: 16px;
}

/* Scope note */
.tos .legal-framework {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px 20px;
  margin: 0;
}
.tos .framework-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tos .framework-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border: 1px solid var(--tos-rule);
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--tos-text);
}
.tos .legal-framework p {
  flex: 1 1 320px;
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--tos-muted);
}

/* ============ Parts (chapter openers) ============ */
.tos .part-header {
  margin: 48px 0 0;
  padding-top: 20px;
  border-top: 2px solid var(--tos-text);
  scroll-margin-top: calc(var(--tos-sticky) + 20px);
}
.tos .legal-content > .part-header:first-child { margin-top: 36px; }
.tos .part-header h2 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 26px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--tos-text);
  text-wrap: balance;
}
.tos .part-no {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tos-muted);
}
.tos .part-sep { display: none; }

/* ============ Sections ============ */
.tos .content-section {
  display: grid;
  grid-template-columns: var(--tos-num-w) minmax(0, 1fr);
  padding: 24px 0 4px;
  border-top: 1px solid var(--tos-rule);
  scroll-margin-top: calc(var(--tos-sticky) + 20px);
}
.tos .part-header + .content-section {
  padding-top: 18px;
  border-top: 0;
}
.tos .section-header { display: contents; }
.tos .section-number {
  grid-column: 1;
  align-self: start;
  justify-self: start;
  margin: 2px 0 0 -8px;
  padding: 1px 8px;
  border-radius: var(--tos-radius-s);
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
  color: var(--tos-muted);
  text-decoration: none;
}
.tos .section-number:hover {
  color: var(--brand-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.tos .content-section:target .section-number {
  color: var(--brand-deep);
  background: var(--brand-tint);
}
.tos .content-section h2 {
  grid-column: 2;
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--tos-text);
  text-wrap: balance;
}
.tos .section-content {
  grid-column: 2;
  min-width: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--tos-text);
}
.tos .section-content p {
  margin: 0;
  text-wrap: pretty;
}
.tos .section-content p + p,
.tos .section-content p + ul,
.tos .section-content ul + p { margin-top: 10px; }
.tos .section-intro { color: var(--tos-muted); }
.tos .section-intro + * { margin-top: 12px; }

.tos .section-content h4,
.tos .section-content h5 {
  margin: 0 0 4px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0;
  color: var(--tos-text);
}
.tos .section-content strong { font-weight: 600; }

.tos .section-content a {
  color: var(--brand-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--brand) 45%, transparent);
}
.tos .section-content a:hover { text-decoration-color: currentColor; }

.tos .section-content ul {
  display: grid;
  gap: 6px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}
.tos .section-content ul > li {
  position: relative;
  padding-left: 18px;
}
.tos .section-content ul > li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.68em;
  width: 5px;
  height: 5px;
  border-radius: var(--r-pill);
  background: var(--tos-muted);
}

/* Clauses: a heading line and its text. The lead clause reads the same. */
.tos .terms-list {
  display: grid;
  gap: 12px;
}
.tos .info-card,
.tos .info-card + .terms-list,
.tos .terms-list + .terms-list,
.tos .warning-box + .terms-list { margin-top: 12px; }
.tos .section-content > :first-child { margin-top: 0; }
.tos .info-card .card-icon { display: none; }

/* Callouts */
.tos .info-box,
.tos .warning-box,
.tos .critical-notice,
.tos .disclaimer-box,
.tos .warranty-box {
  margin-top: 16px;
  padding: 16px 20px;
  border-radius: var(--tos-radius-s);
}
.tos .info-box,
.tos .warranty-box {
  background: var(--tos-quiet);
  border: 1px solid var(--tos-rule);
}
.tos .warning-box {
  background: var(--tos-quiet);
  border: 1px solid var(--tos-rule);
  border-left: 3px solid var(--tos-text);
}
.tos .critical-notice {
  background: var(--tos-danger-tint);
  border: 1px solid var(--tos-danger-rule);
}
.tos .critical-notice .notice-icon { display: none; }
.tos .critical-notice h4 { color: var(--danger-deep); }
.tos .disclaimer-box {
  background: var(--surface-raised);
  border: 1px solid var(--tos-text);
}
.tos .highlight-text,
.tos .disclaimer-box .highlight {
  margin-top: 12px;
  font-weight: 600;
}

/* Definitions: two columns of terms */
.tos .definitions-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 32px;
}
.tos .definition-item {
  padding: 12px 0;
  border-top: 1px solid var(--tos-rule);
}
.tos .definition-item:nth-child(-n + 2) {
  padding-top: 0;
  border-top: 0;
}

/* Status cells: refunds, IP transfer, licences, products, payment methods */
.tos .refund-grid,
.tos .ip-box,
.tos .license-grid,
.tos .product-rules,
.tos .payment-grid,
.tos .consequence-list {
  display: grid;
  gap: 12px;
  margin-top: 4px;
}
.tos .refund-grid,
.tos .product-rules { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tos .ip-box,
.tos .license-grid,
.tos .consequence-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tos .payment-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.tos .refund-grid + *,
.tos .ip-box + *,
.tos .product-rules + *,
.tos .payment-grid + *,
.tos .license-grid + * { margin-top: 16px; }

.tos .refund-item,
.tos .ip-item,
.tos .license-card,
.tos .rule-item,
.tos .payment-item,
.tos .consequence-item {
  padding: 14px 16px;
  background: var(--surface-raised);
  border: 1px solid var(--tos-rule);
  border-radius: var(--tos-radius-s);
  text-align: left;
}
.tos .refund-item.success,
.tos .ip-item.complete,
.tos .rule-item.success { box-shadow: inset 0 3px 0 var(--success); }
.tos .refund-item.danger,
.tos .rule-item.danger { box-shadow: inset 0 3px 0 var(--danger); }
.tos .refund-item.warning,
.tos .ip-item.pending,
.tos .rule-item.warning { box-shadow: inset 0 3px 0 var(--tos-muted); }
.tos .refund-icon,
.tos .ip-icon,
.tos .license-icon,
.tos .rule-icon,
.tos .payment-icon,
.tos .consequence-icon,
.tos .service-icon,
.tos .contact-icon { display: none; }
.tos .payment-item p,
.tos .license-card p { color: var(--tos-muted); }

/* Automation services: a compact three-column list */
.tos .services-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 24px;
}
.tos .service-item {
  padding: 10px 0;
  border-top: 1px solid var(--tos-rule);
}
.tos .service-item p { color: var(--tos-muted); }

/* Licence restrictions */
.tos .prohibited-list { display: grid; }
.tos .prohibited-item {
  padding: 10px 0;
  border-top: 1px solid var(--tos-rule);
}
.tos .prohibited-item:first-child { border-top: 0; padding-top: 0; }

/* Prohibited activities: six short lists */
.tos .prohibited-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 20px 28px;
}
.tos .prohibited-category ul { margin-top: 6px; gap: 4px; }
.tos .prohibited-category li { font-size: 16px; line-height: 1.5; }

/* Domain expiration timeline */
.tos .timeline-box { margin-top: 18px; }
.tos .timeline-box > h4 { margin-bottom: 12px; }
.tos .timeline { display: grid; }
.tos .timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  column-gap: 14px;
  padding-bottom: 14px;
}
.tos .timeline-item:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 22px;
  bottom: 2px;
  width: 2px;
  background: var(--tos-rule);
}
.tos .timeline-marker {
  width: 14px;
  height: 14px;
  margin-top: 5px;
  border: 2px solid var(--tos-muted);
  border-radius: var(--r-pill);
  background: var(--surface-raised);
}
.tos .timeline-marker.danger { border-color: var(--danger); }
.tos .timeline-marker.expired,
.tos .timeline-marker.terminated {
  border-color: var(--danger);
  background: var(--danger);
}
.tos .timeline-content p { color: var(--tos-muted); }

/* Refund summary table */
.tos .refund-table {
  margin-bottom: 16px;
  overflow-x: auto;
  border: 1px solid var(--tos-rule);
  border-radius: var(--tos-radius-s);
}
.tos .refund-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
  line-height: 1.5;
}
.tos .refund-table th {
  padding: 10px 14px;
  background: var(--tos-quiet);
  border-bottom: 1px solid var(--tos-rule);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-align: left;
  text-transform: uppercase;
  color: var(--tos-muted);
}
.tos .refund-table td {
  padding: 12px 14px;
  vertical-align: top;
  border-top: 1px solid var(--tos-rule);
}
.tos .refund-table tbody tr:first-child td { border-top: 0; }
.tos .refund-table td:first-child { width: 34%; font-weight: 600; }
.tos .refund-table td:nth-child(2) { width: 1%; white-space: nowrap; }
.tos .refund-table td:last-child { color: var(--tos-muted); }

.tos .badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
}
.tos .badge.success {
  color: var(--tos-success-ink);
  background: var(--tos-success-tint);
}
.tos .badge.danger {
  color: var(--danger-deep);
  background: var(--tos-danger-tint);
}

/* Contact */
.tos .contact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 32px;
}
.tos .contact-card {
  padding: 12px 0;
  border-top: 1px solid var(--tos-rule);
}
.tos .contact-card:nth-child(-n + 2) {
  padding-top: 0;
  border-top: 0;
}
.tos .contact-card h4 {
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tos-muted);
}

/* ============ Medium screens ============ */
@media (max-width: 1099px) {
  .tos-toc-nav { padding: 0 16px 16px; }
  .tos-toc-parts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 8px 24px;
  }
  .tos-toc-parts > li + li { margin-top: 0; }
}

/* ============ Narrow screens ============ */
@media (max-width: 719px) {
  .tos {
    --tos-sticky: 69px;     /* the utility strip is hidden on phones */
    padding: 8px 0 64px;
  }
  .tos-sheet {
    margin: 0 calc(var(--gutter) * -1);
    padding: 28px var(--gutter) 40px;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .tos-lede { font-size: 16px; }
  .tos-meta { gap: 12px 28px; }

  .tos .content-section {
    display: block;
    padding-top: 22px;
  }
  .tos .section-header {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 8px;
  }
  .tos .section-number {
    flex: none;
    margin: 0 0 0 -8px;
  }
  .tos .content-section h2 {
    margin: 0;
    font-size: 19px;
  }

  .tos .definitions-grid,
  .tos .contact-grid,
  .tos .refund-grid,
  .tos .product-rules,
  .tos .ip-box,
  .tos .license-grid,
  .tos .consequence-list,
  .tos .services-grid { grid-template-columns: minmax(0, 1fr); }
  .tos .definition-item:nth-child(2),
  .tos .contact-card:nth-child(2) {
    padding-top: 12px;
    border-top: 1px solid var(--tos-rule);
  }
  .tos .service-item:first-child { border-top: 0; }

  /* The refund table becomes a list: service and status, then details. */
  .tos .refund-table {
    overflow: visible;
    border: 0;
    border-radius: 0;
  }
  .tos .refund-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .tos .refund-table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 12px;
    padding: 12px 0;
    border-top: 1px solid var(--tos-rule);
  }
  .tos .refund-table tbody tr:first-child { border-top: 0; padding-top: 0; }
  .tos .refund-table td {
    display: block;
    width: auto;
    padding: 0;
    border: 0;
  }
  .tos .refund-table td:first-child { width: auto; }
  .tos .refund-table td:last-child { grid-column: 1 / -1; }

  .tos-toc-parts { grid-template-columns: minmax(0, 1fr); }
}

/* Coarse pointers: every contents link at least 44px tall. */
@media (pointer: coarse) {
  .tos-toc-part,
  .tos-toc-sections a {
    min-height: 44px;
    align-items: center;
  }
}

/* ============ Motion ============ */
@media (prefers-reduced-motion: reduce) {
  html:has(.tos) { scroll-behavior: auto; }
  .tos-toc-summary::after { transition: none; }
  .tos-progress { display: none; }
}

/* ============ Print: the agreement only ============ */
@media print {
  @page { margin: 16mm 14mm; }

  .util-strip,
  .site-header,
  .site-footer,
  .wapi-boot-loader,
  .tos-lang-note,
  .tos-crumbs,
  .tos-nav,
  iframe { display: none !important; }

  body,
  .tos { background: white; }
  .tos { padding: 0; }
  .tos-layout { display: block; }
  .tos-sheet {
    max-width: none;
    padding: 0;
    border: 0;
    box-shadow: none;
  }
  .tos .section-content,
  .tos-lede { font-size: 11pt; }
  .tos .content-section h2,
  .tos .part-header,
  .tos .section-content h4 { break-after: avoid; }
  .tos .info-box,
  .tos .warning-box,
  .tos .critical-notice,
  .tos .disclaimer-box,
  .tos .term-item,
  .tos .timeline-item,
  .tos .refund-table tr { break-inside: avoid; }
  .tos .section-content a { color: inherit; text-decoration: none; }
  .tos .section-number { color: var(--tos-text); }
}