/* ROKLAB (by Rudi Rok): purchase terms and privacy. Long-form reading pages in the store's frame.
   Fonts, tokens, the ad line, the header and the bands come from base.css; the footer comes from ../hub.css.
   Separation by space and the tint colour only, no rules or borders. */

/* Header: the current page is underlined, not simply the last link (base.css underlines the last one). */
.header nav a:last-child{border-bottom-color:transparent}
.header nav a[aria-current="page"]{border-bottom-color:var(--ink)}

/* Title block: the hub's display face, smaller, one honest line under it. */
.legal-hero{padding-top:28px;padding-bottom:var(--s5)}
.legal-title{font-family:var(--display);font-weight:800;font-stretch:condensed;font-size:clamp(64px,10.5vw,160px);line-height:.84;letter-spacing:-.03em;text-transform:uppercase;margin-left:-.02em}
.legal-meta{font-size:var(--fs-lead);line-height:var(--lh-lead);color:var(--muted);margin-top:20px;max-width:64ch}

/* Text column, with a contents list beside it on wide screens. */
.legal-layout{display:grid;grid-template-columns:minmax(0,1fr);padding-bottom:var(--section)}
.legal-toc{display:none}
.legal-body{max-width:70ch;font-size:var(--fs-body);line-height:var(--lh-text)}
.legal-body h2{font-size:var(--fs-title);line-height:1.25;letter-spacing:-.02em;margin-top:var(--s6);scroll-margin-top:24px}
.legal-body h3{font-size:var(--fs-body);line-height:var(--lh-ui);letter-spacing:0;margin-top:var(--s3)}
.legal-body h2+p,.legal-body h2+ul,.legal-body h2+ol,.legal-body h3+p,.legal-body h3+ul{margin-top:12px}
.legal-body p,.legal-body ul,.legal-body ol,.legal-body dl{margin-top:1em}
.legal-body ul,.legal-body ol{padding-left:1.25em;margin-bottom:0}
.legal-body li+li{margin-top:.5em}
.legal-body li::marker{color:var(--muted)}
.legal-body a{font-weight:700}

/* The short version: a tint panel at the top of the text. */
.legal-summary{background:var(--tint);padding:28px 32px 30px}
.legal-body .legal-summary h2{margin-top:0}
.legal-summary ul{margin-top:14px}

/* A sentence quoted word for word (the checkout waiver). */
.legal-quote{background:var(--tint);padding:18px 22px;font-weight:700}

/* Operator and controller details. */
.legal-facts{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:10px 24px;margin:16px 0 0}
.legal-facts dt{color:var(--muted)}
.legal-facts dd{margin:0;min-width:0;overflow-wrap:anywhere}

/* Details still waiting for a decision. They read as placeholders on purpose. */
.ph{font-weight:700;background:#E3E5EE;padding:0 4px;white-space:nowrap;box-decoration-break:clone;-webkit-box-decoration-break:clone}

@media(min-width:1100px){
  .legal-layout{grid-template-columns:240px minmax(0,1fr);column-gap:72px}
  .legal-toc{display:block;position:sticky;top:24px;align-self:start;font-size:var(--fs-small);line-height:var(--lh-ui)}
  .legal-toc p{font-weight:700;color:var(--muted);margin-bottom:10px}
  .legal-toc ol{list-style:none;margin:0;padding:0}
  .legal-toc a{display:block;padding:6px 0;text-decoration:none;color:var(--muted)}
  .legal-toc a:hover{color:var(--ink);text-decoration:underline}
  .legal-body{font-size:17px;line-height:1.65}
}
@media(max-width:799px){
  .legal-hero{padding-top:20px;padding-bottom:var(--s4)}
  .legal-body h2{margin-top:var(--s5)}
}
@media(max-width:499px){
  .legal-hero{padding-top:14px}
  .legal-title{font-size:clamp(52px,16vw,72px)}
  .legal-meta{margin-top:16px}
  .legal-summary{padding:22px 20px 24px}
  .legal-facts{grid-template-columns:minmax(0,1fr);gap:0}
  .legal-facts dt{margin-top:12px}
  .legal-facts dt:first-child{margin-top:0}
}