/*
 * /privacy-notice.html — "Privacy Policy", Figma "Website" file, nodes
 * 4484:6644 (desktop 1440) and 4500:7279 (mobile 393).
 *
 * Three pieces, top to bottom:
 *
 *   .privacy-hero      a full-bleed dark band (#222 + the paper texture on
 *                      multiply) holding the title and the "last updated" line
 *   .privacy-toc       a 296 sticky table of contents, left column
 *   .privacy-body      a 732 reading column, right column
 *
 * The two columns are a flex row inside .container above 992 and a plain
 * stack below it, which is what the 393 frame draws.
 *
 * Units: rem, 1rem == 1px at each design width (the rem ladder is in the
 * <style> block of privacy-notice.html), so Figma's pixel numbers go in
 * verbatim and scale at every viewport.
 *
 * Top padding clears the fixed .site-header — 84rem at ≥992, 76rem below —
 * and the hero starts immediately under it, exactly as the frame draws it at
 * y=84 (y=76 on mobile).
 *
 * Breakpoints 768 / 992 / 1440 match the rest of the site. Figma only draws
 * 1440 and 393; 768–1439 is an interpolation — the type steps down on the
 * same ladder validation.css uses, and the columns keep their widths until
 * they stack at 992.
 *
 * Deviations from the 1440 frame, all deliberate:
 *   - The table of contents lists all nine sections. Figma draws eight and
 *     omits "How we use personal information"; a contents list that skips a
 *     section is a navigation bug, not a design decision.
 *   - The two intro paragraphs that open the notice today ("This Privacy
 *     Notice applies to…") are kept, as .privacy-intro above section 1. The
 *     Figma body column starts at "Updates to this privacy notice" and does
 *     not draw them, but they are substantive legal copy.
 *   - Figma flattens each section into one text block, so it has no value
 *     for the gap between two paragraphs or between a paragraph and a list.
 *     That gap is 16rem here — the same step the subsections use, one below
 *     the 24rem structural gap.
 *   - Body copy is #666 (the design system's text/subtle token), which is
 *     what both frames use.
 *
 * Shared with the homepage, not duplicated here: the paper texture behind the
 * hero (/images/expert-texture-*.webp) is the same asset the "expert" section
 * uses — Figma draws the same image in both places, here multiplied over #222
 * rather than laid over white.
 *
 * Loaded after site-footer.css. Everything is scoped to .privacy-* class
 * names, so nothing here reaches the other three pages that share
 * pointer-by-shakuro.css's .terms / .rich-text-content rules.
 *
 * The sticky column's active state is driven by js/privacy-toc.js, which sets
 * aria-current="true" on the link for the section in view.
 */

.privacy {
  --p-ink: #000;
  --p-subtle: #666;
  --p-dot: #d9d9d9;
  --p-dot-current: #ff5900;
  --p-hero-bg: #222;
  --p-hero-meta: #ccc;

  /* The fixed header's height; the hero butts straight up against it. */
  padding-top: 84rem;
  background-color: #fff;
  color: var(--p-subtle);
  /* Inter (Figma Typography/font/Primary). The token override, not just
     font-family, is what redirects the Webflow `a` / `h1` element rules in
     pointer-by-shakuro.css — an element selector beats inheritance. */
  --_colors---family-paragraph: var(--font-ui);
  font-family: var(--font-ui);
}

/* Hero — Figma 4508:8074 (1440x320) / 4512:193 (393x178) --------------- */

.privacy-hero {
  position: relative;
  /* 116 above the title block, 80 below it; the block itself is 124 tall. */
  padding: 116rem 24rem 80rem;
  background-color: var(--p-hero-bg);
  /* Keeps the texture's multiply from reaching the white page behind it. */
  isolation: isolate;
  overflow: hidden;
}

.privacy-hero-texture,
.privacy-hero-texture img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* Figma applies the raw paper JPEG over the #222 fill on multiply, at full
   opacity — the flecks read as lighter grain on the dark band. */
.privacy-hero-texture img {
  object-fit: cover;
  object-position: center;
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* Figma "Title-block" 4500:7890 — 623 wide, centred in the 1440 frame. */
.privacy-hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24rem;
  width: 623rem;
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
}

/* Figma "Heading/Regular/XXL": Aeonik Medium 64/76, -1.6px, on white. The
   global h1 carries -2.76px, tuned for the 80rem homepage hero. */
.privacy-hero-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 64rem;
  line-height: 76rem;
  font-weight: 500;
  letter-spacing: -1.6rem;
  color: #fff;
}

/* Figma "Body/M": Inter 16/24, -0.32px, mono/400 */
.privacy-hero-meta {
  margin: 0;
  font-size: 16rem;
  line-height: 24rem;
  font-weight: 400;
  letter-spacing: -0.32rem;
  color: var(--p-hero-meta);
}

/* The two columns ------------------------------------------------------ */

.privacy-layout {
  display: flex;
  align-items: flex-start;
  /* Figma: contents at x80 (296 wide), body column at x409. */
  gap: 33rem;
  /* Body column top y456, hero bottom y404. */
  padding-top: 52rem;
  /* Body column bottom y8854, footer top y8934. */
  padding-bottom: 80rem;
}

/* Contents — Figma 4503:7950 ------------------------------------------- */

.privacy-toc {
  position: sticky;
  /* The fixed header, plus a gap of its own. */
  top: 124rem;
  flex: 0 0 296rem;
  /* Figma's 32 right padding inside the 296 box: the 264 of usable width is
     what the two-line items wrap against. */
  padding-right: 32rem;
  /* Figma puts the first item at y474 against the body column's y456. */
  padding-top: 18rem;
}

.privacy-toc-list {
  display: flex;
  flex-direction: column;
  gap: 16rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Figma "Label/M": Inter Medium 14/18, -0.14px. Default text/subtle, black
   on hover, black with the brand dot for the section in view — the three
   states in "Table of Contents Interactive States" 4512:71. */
.privacy-toc-link {
  display: flex;
  align-items: flex-start;
  /* The bare `a` in pointer-by-shakuro.css is a centred flex box with 8rem of
     vertical padding: the padding turns Figma's 18 row into 34 and doubles the
     16 gap, and the centring pulls every row off the column's left edge. */
  justify-content: flex-start;
  gap: 12rem;
  padding: 0;
  font-size: 14rem;
  line-height: 18rem;
  font-weight: 500;
  letter-spacing: -0.14rem;
  color: var(--p-subtle);
  text-decoration: none;
  transition: color 0.15s ease;
}

/* The 6rem dot Figma exports as an SVG circle — a plain circle, so it is
   drawn here rather than committed as an asset. It sits on the first line's
   centre, 6 down in the 18 line box. */
.privacy-toc-link::before {
  content: "";
  flex-shrink: 0;
  width: 6rem;
  height: 6rem;
  margin-top: 6rem;
  border-radius: 50%;
  background-color: var(--p-dot);
  transition: background-color 0.15s ease;
}

.privacy-toc-link:hover,
.privacy-toc-link:focus-visible {
  color: var(--p-ink);
}

.privacy-toc-link[aria-current="true"] {
  color: var(--p-ink);
}

.privacy-toc-link[aria-current="true"]::before {
  background-color: var(--p-dot-current);
}

/* Body column — Figma 4512:72 ------------------------------------------ */

.privacy-body {
  flex: 1 1 auto;
  /* Above 1440 the column would otherwise take the container's full
     remainder; below it, it shrinks with the container. */
  max-width: 732rem;
  min-width: 0;
}

/* Figma: 48 between the nine top-level groups. */
.privacy-intro,
.privacy-section {
  display: flex;
  flex-direction: column;
  /* Figma: 24 between a heading and its copy, and between subsections. */
  gap: 24rem;
}

.privacy-intro + .privacy-section,
.privacy-section + .privacy-section {
  margin-top: 48rem;
}

/* The fixed header, plus a gap, so an anchored section lands clear of it. */
.privacy-section {
  scroll-margin-top: 108rem;
}

/* Figma "Heading/Regular/L": Aeonik Medium 32/38, no tracking */
.privacy-section > h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 32rem;
  line-height: 38rem;
  font-weight: 500;
  letter-spacing: normal;
  color: var(--p-ink);
}

/* Figma "Frame 1321323422" and friends: 16 between a subheading and its
   copy, against the 24 that separates one subsection from the next. */
.privacy-subsection {
  display: flex;
  flex-direction: column;
  gap: 16rem;
}

/* Figma "Heading/Regular/S": Aeonik Medium 18/24, no tracking */
.privacy-subsection > h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 18rem;
  line-height: 24rem;
  font-weight: 500;
  letter-spacing: normal;
  color: var(--p-ink);
}

.privacy-prose {
  display: flex;
  flex-direction: column;
  gap: 16rem;
}

/* Figma "Body/M": Inter 16/24, -0.32px, text/subtle */
.privacy-prose p,
.privacy-prose li {
  margin: 0;
  font-size: 16rem;
  line-height: 24rem;
  font-weight: 400;
  letter-spacing: -0.32rem;
  color: var(--p-subtle);
}

.privacy-prose ul {
  display: flex;
  flex-direction: column;
  gap: 8rem;
  margin: 0;
  padding-left: 22rem;
  list-style: disc;
}

/* A nested list is one step in and one step tighter, like the lists in the
   validation article. */
.privacy-prose li > ul {
  margin-top: 8rem;
  list-style: circle;
}

.privacy-prose li::marker {
  color: var(--p-dot);
}

/* The lead-ins ("Account Information.", "Service Providers.") are the one
   piece of emphasis in the copy; they sit at body colour's full strength. */
.privacy-prose strong {
  font-weight: 500;
  color: var(--p-ink);
}

/* The bare `a` rule makes every link a flex box, which pushes an inline link
   onto a line of its own, centred. These have to flow with the sentence. */
.privacy-prose a {
  display: inline;
  padding: 0;
  color: var(--p-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: color 0.15s ease;
}

.privacy-prose a:hover,
.privacy-prose a:focus-visible {
  color: var(--p-dot-current);
}

/* ------------------------------------------------------------------ */
/* 992–1439 — the 912 column. No Figma frame; the type steps down the   */
/* same ladder validation.css uses and the columns keep their widths.   */
/* ------------------------------------------------------------------ */

@media screen and (max-width: 1439px) {
  .privacy-hero-title {
    font-size: 48rem;
    line-height: 56rem;
    letter-spacing: -1.2rem;
  }

  .privacy-layout {
    gap: 32rem;
  }
}

/* ------------------------------------------------------------------ */
/* < 992 — the header collapses to its drawer and the columns stack,    */
/* which is the arrangement the 393 frame draws.                        */
/* ------------------------------------------------------------------ */

@media screen and (max-width: 991px) {
  .privacy {
    padding-top: 76rem;
  }

  .privacy-hero-title {
    font-size: 40rem;
    line-height: 48rem;
    letter-spacing: -0.8rem;
  }

  .privacy-layout {
    flex-direction: column;
    /* Figma mobile: 32 between the contents list and the body column. */
    gap: 32rem;
    /* Figma mobile: 40 below the hero. */
    padding-top: 40rem;
    padding-bottom: 64rem;
  }

  /* The 32rem right padding stays: Figma's mobile items are 313 wide inside
     the 345 column, and that is what wraps the two long entries where the
     frame wraps them. */
  .privacy-toc {
    position: static;
    flex: none;
    width: 100%;
    padding-top: 0;
  }

  .privacy-body {
    max-width: none;
  }

  /* Figma "Heading/Regular/M": Aeonik Medium 24/28 */
  .privacy-section > h2 {
    font-size: 24rem;
    line-height: 28rem;
  }

  .privacy-section {
    scroll-margin-top: 100rem;
  }
}

/* ------------------------------------------------------------------ */
/* < 768 — the Figma mobile frame (393). Its own 24 gutter, because     */
/* --container-max is `none` here and .container goes full bleed.       */
/* ------------------------------------------------------------------ */

@media screen and (max-width: 767px) {
  .privacy-hero {
    padding: 64rem 24rem 48rem;
  }

  .privacy-hero-inner {
    /* Figma 4512:194: 8 between the title and the date on mobile. */
    gap: 8rem;
    width: 100%;
  }

  /* Figma "Heading/Regular/L": Aeonik Medium 32/38 */
  .privacy-hero-title {
    font-size: 32rem;
    line-height: 38rem;
    letter-spacing: normal;
  }

  /* Figma "Body/S": Inter 14/20, -0.28px */
  .privacy-hero-meta {
    font-size: 14rem;
    line-height: 20rem;
    letter-spacing: -0.28rem;
  }

  .privacy-layout {
    padding-left: 24rem;
    padding-right: 24rem;
  }
}