/* Legal pages (privacy, terms, data deletion): the Fjord Light site, set for reading. tokens.css and landing.css supply the
   palette, the header, the footer and the buttons; this file only adds the reading layout. Light only, no motion. */
.legal-page { --legal-measure: 70ch; }
.legal-page .site-nav a[aria-current="page"] { background: #fff; }
.legal-main { padding-top: 76px; }

/* Title block */
.legal-hero { padding: clamp(40px, 7vw, 76px) 0 clamp(24px, 4vw, 40px); background: radial-gradient(60% 90% at 88% 0%, rgb(190 222 210 / 55%), transparent 70%), radial-gradient(40% 70% at 4% 0%, rgb(244 238 234 / 85%), transparent 70%), linear-gradient(180deg, #f6f9f8, var(--fjord-mist)); }
.legal-hero .eyebrow { display: inline-flex; padding: 7px 14px; border: 1px solid var(--hairline); border-radius: 999px; background: rgb(255 255 255 / 70%); }
.services-page .legal-hero h1 { max-width: 20ch; margin: 22px 0 0; font-size: clamp(2.25rem, 4.6vw, 3.5rem); font-weight: 600; letter-spacing: -.038em; line-height: 1.04; }
.legal-lead { max-width: 60ch; margin-top: 22px; color: var(--ink-soft); font-size: 1.1875rem; line-height: 1.65; }
.legal-meta { margin-top: 18px; color: var(--ink-mute); font-size: .875rem; }

/* Contents and article */
.legal-layout { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: start; padding-block: 36px var(--section-y); }
.legal-toc { position: sticky; top: 92px; }
.legal-toc__title { margin-bottom: 10px; color: var(--fjord-spruce); font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.legal-toc ol { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.legal-toc a { display: block; padding: 8px 12px; border-radius: 12px; color: var(--ink-soft); font-size: .9375rem; line-height: 1.35; text-decoration: none; }
.legal-toc a:hover { background: #fff; color: var(--ink); }

.legal-article { min-width: 0; max-width: var(--legal-measure); color: var(--ink-soft); font-size: 1.0625rem; line-height: 1.75; }
.legal-article section { scroll-margin-top: 96px; }
.services-page .legal-article h2 { margin: 56px 0 14px; color: var(--ink); font-size: clamp(1.5rem, 2.4vw, 1.875rem); font-weight: 600; letter-spacing: -.026em; line-height: 1.2; scroll-margin-top: 96px; }
.services-page .legal-article h3 { margin: 28px 0 6px; color: var(--ink); font-size: 1.1875rem; font-weight: 600; letter-spacing: -.012em; line-height: 1.3; }
.legal-article > section:first-child > h2:first-child { margin-top: 0; }
.legal-article p { margin-top: 14px; }
.legal-article strong { color: var(--ink); font-weight: 650; }
.legal-article ul, .legal-article ol { margin: 14px 0 0; padding-left: 1.3rem; }
.legal-article li { padding-left: 4px; }
.legal-article li + li { margin-top: 8px; }
.legal-article li::marker { color: var(--fjord-spruce); }
.legal-article a { color: var(--fjord-primary); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.legal-article a:hover { color: var(--fjord-deep); text-decoration-thickness: 2px; }
.legal-article a.button { text-decoration: none; }
.legal-article a.button--secondary { color: var(--fjord-primary); }
.legal-article a.button--secondary:hover { color: var(--fjord-deep); }
.legal-article a.button--primary, .legal-article a.button--primary:hover { color: #fff; }
.legal-article code { padding: 2px 7px; border-radius: 8px; background: #e7efec; color: var(--ink); font-family: var(--font-mono); font-size: .875em; overflow-wrap: anywhere; }
.legal-article time { white-space: nowrap; }

/* A short list of what matters most, before the details */
.legal-summary { margin-top: 0; padding: 24px 28px 26px; border: 1px solid var(--hairline); border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--shadow-rest); }
.legal-summary h2 { margin: 0 0 4px; font-size: 1.25rem; }
.services-page .legal-article .legal-summary h2 { margin: 0 0 4px; font-size: 1.25rem; }

/* The wording a provider asks for, set apart */
.legal-callout { margin: 24px 0 0; padding: 20px 24px; border-left: 4px solid var(--fjord-spruce); border-radius: 0 var(--radius-sm, 12px) var(--radius-sm, 12px) 0; background: var(--surface); box-shadow: var(--shadow-rest); color: var(--ink); font-size: 1.0625rem; line-height: 1.65; }
.legal-callout p { margin: 0; }

/* Facts in rows: a label and what it means, which stack on a phone */
.legal-rows { margin: 18px 0 0; border: 1px solid var(--hairline); border-radius: 18px; background: var(--surface); overflow: hidden; }
.legal-row { display: grid; grid-template-columns: minmax(0, 13.5rem) minmax(0, 1fr); gap: 4px 28px; padding: 16px 22px; }
.legal-row + .legal-row { border-top: 1px solid var(--hairline); }
.legal-row dt { color: var(--ink); font-weight: 650; line-height: 1.45; overflow-wrap: anywhere; }
.legal-row dd { margin: 0; font-size: 1rem; line-height: 1.65; }
.legal-row dd p { margin-top: 8px; }
.legal-row dd p:first-child { margin-top: 0; }
/* Permission names are long and cannot be broken nicely, so each row puts them above what they allow */
.legal-rows--scopes .legal-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
.legal-rows--scopes dt { display: flex; flex-wrap: wrap; gap: 6px 8px; }
.legal-rows--scopes dt code { max-width: 100%; }

/* Data deletion: the ways to ask, as cards */
.legal-article .legal-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin: 22px 0 0; padding: 0; list-style: none; }
.legal-article .legal-cards li { margin: 0; padding: 0; }
.legal-card { display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 24px; border: 1px solid var(--hairline); border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--shadow-rest); }
.services-page .legal-article .legal-card h3 { margin: 0; font-size: 1.1875rem; }
.legal-card p { margin: 0; font-size: 1rem; line-height: 1.65; }
.legal-card__number { color: var(--fjord-spruce); font-size: .8125rem; font-weight: 700; letter-spacing: .1em; }
.legal-card .button { margin-top: auto; align-self: flex-start; }
.legal-steps { margin-top: 14px; }

/* Data deletion: look a request up by its confirmation code */
.legal-form { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.legal-form label { flex: 1 0 100%; color: var(--ink); font-size: .9375rem; font-weight: 650; }
.legal-form input { flex: 1 1 16rem; min-width: 0; min-height: 50px; padding: 0 20px; border: 1px solid rgb(8 39 51 / 28%); border-radius: 999px; background: #fff; color: var(--ink); font-family: var(--font-mono); font-size: 1rem; text-transform: uppercase; }
.legal-form input::placeholder { color: var(--ink-mute); text-transform: none; }
.legal-form .button { flex: 0 0 auto; }
.legal-note { margin-top: 12px; color: var(--ink-mute); font-size: .9375rem; }

@media (max-width: 959px) {
  .legal-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-top: 28px; }
  .legal-toc { position: static; min-width: 0; }
  /* One scrolling row of chips instead of a tall list, so the text starts on the first screen */
  .legal-toc ol { display: flex; flex-wrap: nowrap; gap: 8px; padding-bottom: 6px; overflow-x: auto; scrollbar-width: thin; }
  .legal-toc li { flex: 0 0 auto; }
  .legal-toc a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--hairline); border-radius: 999px; background: #fff; white-space: nowrap; }
}
@media (max-width: 700px) {
  .legal-main { padding-top: 64px; }
  .legal-summary { padding: 20px; }
  .legal-row { grid-template-columns: minmax(0, 1fr); padding: 14px 18px; }
  .legal-callout { padding: 18px 20px; }
  .legal-form .button { flex: 1 1 100%; }
}
@media (max-width: 480px) {
  /* The longest permission name has 34 characters: set smaller, it stays on one line from 360 px wide instead of breaking mid-word */
  .legal-rows--scopes dt code { font-size: .75em; }
}
@media (forced-colors: active) {
  .legal-callout, .legal-summary, .legal-rows, .legal-card, .legal-toc a { border: 1px solid CanvasText; }
}
@media print {
  .site-header, .legal-toc, .site-footer, .skip-link { display: none; }
  .legal-main { padding-top: 0; }
  .legal-hero { background: none; }
  .legal-article { max-width: none; font-size: 11pt; }
}