/* legal.css - shared styles for the Voco legal pages (privacy, terms, health data).
   Same hand as index.html: near-black, hairlines, Outfit, generous negative space.
   Volt is rationed to exactly two places: the callout rule, and a link underline
   on hover. Nothing moves, nothing loads, no JavaScript.

   Structure: one 44rem frame shared by header, document and footer, with a 3.5rem
   gutter inside it. The wordmark, the section numbers and the hairline rules all
   sit on the same left axis; prose indents past the gutter to a ~68 character
   measure. Below 48rem the gutter collapses and the number stacks over the heading.

   These pages are served as HTML fragments, so they parse in quirks mode. Every
   value here behaves identically in either mode. */

:root {
  --bg: #0A0A0A;
  --bg-deep: #070709;

  --t1: #F4F4F1;
  --t2: #ADADB3;
  --t3: #7E7E86;
  --t4: #6A6A72;

  --volt: #C9F24E;
  --ink-on-volt: #0B0B0C;

  --hairline: rgba(255, 255, 255, 0.07);
  --hairline-soft: rgba(255, 255, 255, 0.05);

  --frame: 44rem;
  --gutter: 3.5rem;
  --pad-x: clamp(1.25rem, 4vw, 1.75rem);
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--t2);
  font-family: "Outfit", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--volt);
  color: var(--ink-on-volt);
}

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

/* ---- The frame ----
   Header, document and footer share one measure and one left axis. */

.site-header,
.page,
.site-footer {
  max-width: var(--frame);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}

/* ---- Header ---- */

.site-header {
  padding-top: 2rem;
}

/* the real wordmark, sized to match index.html exactly */
.wordmark {
  display: inline-block;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.wordmark-mark {
  height: clamp(0.8125rem, 1.2vw, 0.9375rem);
  width: auto;
}

.wordmark:hover {
  opacity: 0.7;
}

/* ---- Document ---- */

.page {
  counter-reset: sec;
  padding-top: clamp(3.5rem, 9vh, 6rem);
  font-size: clamp(1rem, 0.965rem + 0.16vw, 1.0625rem);
}

/* ---- Masthead ---- */

.doc-head {
  margin-bottom: clamp(2.75rem, 7vh, 4.25rem);
}

h1 {
  font-weight: 500;
  font-size: clamp(2.125rem, 6vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--t1);
  margin: 0 0 1.4rem;
  text-wrap: balance;
}

/* the effective date doubles as the anchor for a rule that runs to the frame edge */
.effective {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  font-size: 0.6875rem;
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--t4);
  margin: 0 0 2.25rem;
}

.effective::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--hairline);
}

.lead {
  font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
  line-height: 1.65;
  color: var(--t2);
  max-width: 32em;
  margin: 0;
  text-wrap: pretty;
}

/* ---- Sections ----
   The rule spans the whole frame; the number hangs in the gutter beside the
   heading. Numerals only, and unselectable so a copied policy stays clean. */

.sec {
  display: grid;
  grid-template-columns: var(--gutter) minmax(0, 1fr);
  counter-increment: sec;
  border-top: 1px solid var(--hairline);
  padding-top: 2.6rem;
  margin-top: 3.25rem;
}

.doc-head + .sec {
  margin-top: 0;
}

.sec > * {
  grid-column: 2;
}

.sec > :last-child {
  margin-bottom: 0;
}

.sec::before {
  content: counter(sec, decimal-leading-zero);
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  padding-top: 0.5em;
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.14em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  color: var(--t4);
  -webkit-user-select: none;
  user-select: none;
}

h2 {
  font-weight: 500;
  font-size: clamp(1.3125rem, 2.2vw, 1.5rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--t1);
  margin: 0 0 1.15rem;
  text-wrap: balance;
  /* deep-linked headings (#voice, #analytics, #contact) land below their rule */
  scroll-margin-top: 5rem;
}

h3 {
  font-weight: 500;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  color: var(--t1);
  margin: 1.85rem 0 0.6rem;
}

/* ---- Prose ---- */

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

ul {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
}

/* a hairline dash where a disc used to be */
li {
  position: relative;
  padding-left: 1.4rem;
  margin: 0 0 0.85rem;
}

li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.83em;
  width: 0.5rem;
  height: 1px;
  background: rgba(255, 255, 255, 0.3);
}

li:last-child {
  margin-bottom: 0;
}

strong {
  color: var(--t1);
  font-weight: 600;
  letter-spacing: -0.005em;
}

/* the lead-in term of a definition row */
li > strong:first-child {
  color: var(--t1);
}

/* quiet enough to sit inside a sentence without stopping it */
code {
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  font-size: 0.86em;
  letter-spacing: -0.01em;
  color: var(--t1);
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
  padding: 0.06em 0.28em;
  overflow-wrap: break-word;
}

/* ---- Body links ----
   Grey at rest, volt on hover. The second and last volt on the page. */

.page a {
  color: var(--t1);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(244, 244, 241, 0.32);
  text-underline-offset: 0.2em;
  -webkit-tap-highlight-color: rgba(201, 242, 78, 0.18);
  transition: text-decoration-color 0.18s ease;
}

.page a:hover {
  text-decoration-color: var(--volt);
}

a:focus-visible,
.wordmark:focus-visible {
  outline: 1px solid var(--t2);
  outline-offset: 4px;
  border-radius: 2px;
}

/* ---- Callout (the disclaimer that has to land) ----
   The one element allowed out of the indent: it starts on the same axis as the
   section numbers, so it reads as an interruption. Square on the volt side, so
   the rule reads as one clean vertical stroke. */

.callout {
  grid-column: 1 / -1;
  border: 1px solid var(--hairline);
  border-left: 2px solid rgba(201, 242, 78, 0.8);
  border-radius: 0 0.5rem 0.5rem 0;
  background:
    linear-gradient(90deg, rgba(201, 242, 78, 0.045) 0%, rgba(201, 242, 78, 0) 44%),
    var(--bg-deep);
  padding: 1.2rem 1.4rem;
  margin: 1.6rem 0;
}

.callout p:last-child {
  margin-bottom: 0;
}

/* ---- Footer ---- */

.site-footer {
  position: relative;
  margin-top: clamp(4rem, 9vh, 6rem);
  padding-top: 2rem;
  padding-bottom: max(3.5rem, calc(env(safe-area-inset-bottom) + 2.75rem));
  color: var(--t4);
  font-size: 0.8125rem;
  line-height: 1.6;
}

/* the rule is drawn inside the padding so it lands on the same axis as the
   section rules, which a border-top on the element itself would overshoot */
.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--pad-x);
  right: var(--pad-x);
  height: 1px;
  background: var(--hairline);
}

.foot-v {
  height: 16px;
  width: auto;
  opacity: 0.8;
  margin-bottom: 1.15rem;
}

.site-footer a {
  color: var(--t3);
  text-decoration: none;
  transition: color 0.2s ease;
}

.site-footer a:hover {
  color: var(--t1);
}

/* ---- Phone ----
   The gutter collapses and the number stacks over the heading, so the measure
   stays wide at 390px. */

@media (max-width: 48rem) {
  .sec {
    grid-template-columns: minmax(0, 1fr);
    padding-top: 2.25rem;
    margin-top: 2.75rem;
  }

  .sec > * {
    grid-column: 1;
  }

  .sec::before {
    grid-column: 1;
    padding-top: 0;
    margin-bottom: 0.9rem;
  }

  .site-header {
    padding-top: 1.5rem;
  }
}

/* ---- Print ---- */

@media print {
  body {
    background: #fff;
    color: #24242a;
  }

  h1,
  h2,
  h3,
  strong,
  .page a {
    color: #000;
  }

  .lead {
    color: #3a3a42;
  }

  /* both marks are near-white artwork, invisible on paper without this */
  .wordmark-mark,
  .foot-v {
    filter: invert(1);
  }

  .sec {
    border-color: #ddd;
  }

  .effective::after,
  .site-footer::before {
    background: #ddd;
  }

  h2,
  h3 {
    break-after: avoid;
  }

  .callout {
    break-inside: avoid;
    background: #f7f7f5;
    border-color: #ddd;
    border-left-color: #93b23c;
  }

  .sec::before,
  .effective,
  .site-footer {
    color: #8a8a90;
  }

  li::before {
    background: #9a9aa0;
  }

  code {
    background: #f1f1ef;
    border-color: #ddd;
    color: #000;
  }

  .page a {
    text-decoration-color: #aaa;
  }
}

/* ---- Reduced motion ---- */

@media (prefers-reduced-motion: reduce) {
  .page a,
  .site-footer a,
  .wordmark {
    transition: none;
  }
}