/* ===========================================================================
   Legal documents: privacy, terms, cookies, complaints.

   A long document has different needs from a landing page. Measure is tighter
   so a paragraph is readable, headings are numbered so a clause can be cited
   over the phone, and the contents rail is sticky on a wide screen and a
   collapsed details element on a phone.

   Tokens only. Nothing here invents a colour.
   =========================================================================== */

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

.legal__hero{position:relative;overflow:hidden;padding-block:3rem 2.5rem}
@media(min-width:768px){.legal__hero{padding-block:4.5rem 3rem}}

.legal__hero-bg{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(38rem 20rem at 15% -10%,var(--accent-glow),transparent 60%),
    radial-gradient(26rem 16rem at 85% 0%,var(--mesh-cool),transparent 62%);
  mask-image:linear-gradient(180deg,#000 0%,transparent 95%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 95%);
}
.legal__hero-inner{position:relative;z-index:1}

.legal__title{
  font-size:clamp(2rem,4.6vw,3.25rem);
  letter-spacing:-.035em;line-height:1.02;
  text-wrap:balance;margin-top:.75rem;
}
.legal__standfirst{max-width:44ch;margin-top:1rem;text-wrap:pretty}
.legal__updated{display:inline-flex;align-items:center;gap:.4rem;margin-top:1.25rem}

/* --- layout ---------------------------------------------------------------- */

.legal__body{
  display:grid;
  grid-template-columns:1fr;
  gap:2rem;
  padding-bottom:4rem;
}

/* The rail only earns its space once there is room for it beside the text. */
@media(min-width:1000px){
  .legal__body{
    grid-template-columns:16rem minmax(0,1fr);
    gap:3.5rem;
    align-items:start;
  }
}

/* --- contents rail --------------------------------------------------------- */

.legal__toc{position:relative}

@media(min-width:1000px){
  .legal__toc{
    position:sticky;
    /* Clears the sticky nav, which is 56px plus its offset. */
    top:6rem;
    max-height:calc(100vh - 8rem);
    overflow-y:auto;
  }
}

.legal__toc-details{
  border:1px solid var(--border);
  border-radius:var(--r-card);
  background:var(--card);
  box-shadow:var(--shadow-sm);
  padding:.875rem 1rem;
}
.legal__toc-summary{
  cursor:pointer;list-style:none;
  font-family:var(--font-mono);font-size:.6875rem;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted-foreground);
  display:flex;align-items:center;justify-content:space-between;
  min-height:24px;
}
.legal__toc-summary::-webkit-details-marker{display:none}
.legal__toc-summary::after{
  content:"";width:.5rem;height:.5rem;flex:none;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);transition:transform var(--dur) var(--ease-out);
}
.legal__toc-details[open] .legal__toc-summary::after{transform:rotate(-135deg)}

@media(min-width:1000px){
  /* Always open on a wide screen: the disclosure is a phone affordance. */
  .legal__toc-details{border:0;box-shadow:none;background:none;padding:0}
  .legal__toc-summary{pointer-events:none;margin-bottom:.75rem}
  .legal__toc-summary::after{display:none}
}

.legal__toc-list{
  list-style:none;padding:0;margin:.75rem 0 0;
  display:grid;gap:.125rem;
  counter-reset:none;
}
.legal__toc-list a{
  display:flex;gap:.625rem;align-items:baseline;
  padding:.5rem .5rem;margin-inline:-.5rem;
  border-radius:var(--r-base);
  font-size:.875rem;line-height:1.35;color:var(--muted-foreground);
  transition:background var(--dur-fast) ease,color var(--dur-fast) ease;
  min-height:44px;                       /* tap target floor */
  align-items:center;
}
.legal__toc-list a:hover{background:var(--secondary);color:var(--foreground)}
.legal__toc-n{
  font-family:var(--font-mono);font-size:.6875rem;
  color:var(--accent-ink);flex:none;min-width:1.25rem;
}

.legal__toc-also{margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid var(--border)}
.legal__toc-also ul{list-style:none;padding:0;margin-top:.5rem;display:grid;gap:.125rem}
.legal__toc-also a{
  display:flex;align-items:center;min-height:44px;
  font-size:.875rem;color:var(--muted-foreground);
}
.legal__toc-also a:hover{color:var(--accent-ink)}

/* --- the document ---------------------------------------------------------- */

.legal__content{min-width:0}          /* lets a wide table scroll rather than push the grid */

.legal__section{
  padding-block:2rem;
  border-top:1px solid var(--border);
  scroll-margin-top:6rem;             /* so an anchor does not land under the nav */
}
.legal__section:first-child{border-top:0;padding-top:.5rem}

.legal__h2{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.375rem,2.4vw,1.75rem);
  letter-spacing:-.025em;line-height:1.15;
  display:flex;gap:.75rem;align-items:baseline;
  text-wrap:balance;
}
.legal__h2-n{
  font-family:var(--font-mono);font-size:.8125rem;font-weight:500;
  color:var(--accent-deep);flex:none;
}

.legal__h3{
  font-family:var(--font-display);font-weight:600;font-size:1.0625rem;
  letter-spacing:-.015em;margin-top:1.75rem;
}

/* 66 characters is the readable measure, and a legal document is the last
   place to be clever about it. */
.legal__p{
  margin-top:1rem;
  max-width:66ch;
  color:var(--body-on-white);
  line-height:1.65;
  text-wrap:pretty;
}
.legal__p a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:2px}
.legal__p a:hover{color:var(--accent-deep)}

.legal__list{
  margin-top:1rem;max-width:66ch;
  display:grid;gap:.625rem;
  padding-left:1.25rem;
  color:var(--body-on-white);line-height:1.6;
}
.legal__list li{padding-left:.25rem}
ul.legal__list{list-style:disc}
ol.legal__list{list-style:decimal}
.legal__list li::marker{color:var(--accent-line)}
ol.legal__list li::marker{color:var(--muted-foreground);font-family:var(--font-mono);font-size:.8125rem}
.legal__list a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:2px}

/* --- callout --------------------------------------------------------------- */

.legal__callout{
  display:flex;gap:.875rem;align-items:flex-start;
  margin-top:1.5rem;padding:1.125rem 1.25rem;
  border-radius:var(--r-card);
  background:var(--accent-soft);
  border:1px solid var(--accent-line);
  color:var(--accent-ink);
  max-width:66ch;
}
.legal__callout .ico{flex:none;margin-top:.125rem;color:var(--accent-deep)}
.legal__callout p{margin:0;line-height:1.55;font-size:.9375rem}

/* --- tables ---------------------------------------------------------------- */

.legal__tablewrap{
  margin-top:1.5rem;
  overflow-x:auto;                    /* the page body never scrolls sideways */
  border:1px solid var(--border);
  border-radius:var(--r-card);
  background:var(--card);
  box-shadow:var(--shadow-sm);
}
.legal__table{
  width:100%;border-collapse:collapse;
  font-size:.875rem;line-height:1.5;
  min-width:34rem;
}
.legal__table th,
.legal__table td{
  padding:.875rem 1rem;
  text-align:left;
  vertical-align:top;
  border-bottom:1px solid var(--border);
}
.legal__table thead th{
  font-family:var(--font-mono);font-size:.6875rem;font-weight:500;
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted-foreground);
  background:var(--secondary);
  border-bottom:1px solid var(--border-strong);
  white-space:nowrap;
}
.legal__table tbody th{font-weight:600;color:var(--foreground);max-width:18rem}
.legal__table td{color:var(--body-on-white)}
.legal__table tbody tr:last-child th,
.legal__table tbody tr:last-child td{border-bottom:0}

/* On a phone a four column table is unreadable at any font size, so each row
   becomes a card and every cell carries its own column label. */
@media(max-width:640px){
  .legal__tablewrap{overflow-x:visible;border:0;background:none;box-shadow:none}
  .legal__table{min-width:0;font-size:.9375rem}
  .legal__table thead{
    position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;
  }
  .legal__table tbody tr{
    display:block;
    border:1px solid var(--border);
    border-radius:var(--r-card);
    background:var(--card);
    box-shadow:var(--shadow-sm);
    padding:.25rem .25rem .5rem;
    margin-bottom:.75rem;
  }
  .legal__table tbody th,
  .legal__table tbody td{
    display:block;border-bottom:0;
    padding:.5rem .875rem;max-width:none;
  }
  .legal__table tbody th{
    font-size:1rem;
    padding-top:.875rem;
    border-bottom:1px solid var(--border);
    margin-bottom:.25rem;
  }
  .legal__table tbody td::before{
    content:attr(data-label);
    display:block;
    font-family:var(--font-mono);font-size:.625rem;font-weight:500;
    letter-spacing:.06em;text-transform:uppercase;
    color:var(--muted-foreground);
    margin-bottom:.1875rem;
  }
}

/* --- footnote -------------------------------------------------------------- */

.legal__footnote{
  margin-top:2.5rem;padding:1.75rem;
  border-radius:var(--r-card);
  background:var(--secondary);
  border:1px solid var(--border);
  max-width:66ch;
}
.legal__footnote .lead{margin-top:.75rem}
.legal__footnote .small{margin-top:1rem}
.legal__footnote a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:2px}

/* ===========================================================================
   Hub pages: zones and service groups.
   =========================================================================== */

/* A full bleed photo above the fold, cropped rather than letterboxed, with a
   fade into the page so the heading does not sit on a hard edge. */
.hub__media{
  position:relative;
  height:clamp(11rem,26vw,20rem);
  overflow:hidden;
  background:var(--secondary);
}
.hub__media--short{height:clamp(9rem,20vw,15rem)}
.hub__media img{width:100%;height:100%;object-fit:cover;display:block}
.hub__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,10,10,.18) 0%,transparent 35%,var(--background) 100%);
}

/* Three plain facts under the intro. Not cards: a card grid here competes with
   the service lists below it, which are the thing the page exists to link to. */
.hub__facts{
  list-style:none;padding:0;
  margin:1.75rem 0 0;
  display:grid;gap:1rem;
}
@media(min-width:768px){
  .hub__facts{grid-template-columns:repeat(3,1fr);gap:1.25rem}
}
.hub__facts li{
  display:flex;gap:.75rem;align-items:flex-start;
  padding-top:1rem;
  border-top:1px solid var(--border);
}
.hub__facts .ico{flex:none;margin-top:.125rem;color:var(--accent-deep)}
.hub__facts span{font-size:.875rem;line-height:1.5;color:var(--muted-foreground)}
.hub__facts strong{
  display:block;color:var(--foreground);font-weight:600;
  font-size:.9375rem;margin-bottom:.1875rem;
}