/* PROF legal pages (Privacy Policy, Terms of Use).
   All rules scoped under .prof-legal-page so nothing leaks to other pages —
   same discipline as prof-login.css. Consumes --prof-primary / --prof-primary-hover
   from prof-theme.css.

   ---------------------------------------------------------------------------
   Sizing: every measure below is written max(<the value it has always been>,
   <that value as a share of the 1728px design canvas>).

   These pages are reached from the landing page footer, and that page scales
   its whole composition with the viewport. Written in fixed px and rem, the
   card froze at 760px with 16px copy while the page it was linked from kept
   growing, so on a large monitor the terms read as a small slip of paper in
   the middle of the screen.

   max() rather than clamp() is what makes this safe to apply to BOTH
   deployments: below 1728px the first branch always wins, so the public pages
   and the in-app pages render exactly as they did, down to the pixel, and the
   parity work documented further down is untouched. Only past the design width
   does the vw branch take over and let the page grow with the screen, which is
   the same rule the landing page follows. */

/* Design tokens lifted from the Sani-Marc legal document (Privacy Policy,
   Sept 2026). Deliberately NOT the PROF brand blue: the document uses a darker
   corporate navy. Scoped to .prof-legal-page so it cannot reach the rest of the
   app, which keeps --prof-primary (#003DA5, PANTONE 2945C).

   The document is set in Avenir Next LT Pro, a licensed Linotype face that is
   not bundled here, so this is a fallback stack: it resolves to real Avenir on
   macOS/iOS and degrades to the nearest humanist sans elsewhere. Swap in a
   self-hosted @font-face if the web licence is ever obtained. */
.prof-legal-page {
  --legal-navy: #002f56;        /* data + third-party table headers  rgb(0,47,86)  */
  --legal-heading: #003057;     /* headings, rights table header     rgb(0,48,87)  */
  --legal-cell: #f1f1f1;        /* body cells, cookie panel          rgb(241,241,241) */
  --legal-cell-alt: #f2f2f2;    /* rights table body cells           rgb(242,242,242) */
  --legal-muted: #6c6d70;       /* secondary text                    rgb(108,109,112) */
  --legal-orange: #ff6c0c;      /* icon artwork + its ring           rgb(255,108,12) */
  --legal-font: "Avenir Next LT Pro", Avenir, "Avenir Next", "Nunito Sans", "Segoe UI", Roboto, sans-serif;
  min-height: 100vh;
  background-color: #f5f6f8;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2.5rem 1rem 3rem 1rem;
  box-sizing: border-box;
}

.prof-legal-page__logo {
  display: block;
  width: max(180px, 10.4167vw);
  height: auto;
  margin: 0 auto 1.75rem auto;
}

.prof-legal-page__card {
  background-color: #ffffff;
  width: 100%;
  max-width: max(760px, 43.9815vw);
  padding: max(2.5rem, 2.3148vw) max(3rem, 2.7778vw);
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  box-sizing: border-box;
  color: #212529;
  line-height: 1.6;
  font-family: var(--legal-font);
}

/* The trademark mark, as {% brand "prof" %} renders it.

   That tag emits <span class="prof-landing__mark">, and the class is named for
   the landing page because that is where it was first needed -- but the styling
   lives in prof-landing.css, which these pages do not load. Unstyled, the span
   is ordinary inline text: in French the mark is the LETTERS "MD", so it came
   out full size and sitting on the baseline, reading as "PROFMD" rather than as
   PROF with a superscript. English hid the bug, because a font draws the ®
   glyph small and raised on its own.

   Same three values prof-landing.css uses, so the mark is identical on the
   marketing pages and here. line-height: 0 is load-bearing rather than
   cosmetic: a smaller inline box sharing the line's leading is given positive
   half-leading, which grows the line box and opens a gap in the paragraph
   around it. Zeroing it lets the main run set the line on its own. */
.prof-legal-page .prof-landing__mark {
  font-size: 0.6em;
  vertical-align: 0.5em;
  line-height: 0;
}

/* The document sets the title at the SAME 12pt as its section headings, in all
   caps and centred; only the caps and the centring separate it from an h2. Kept
   that way rather than scaled up, so the page matches the source. */
.prof-legal-page__card h1 {
  color: var(--legal-heading);
  font-weight: 700;
  font-size: max(1.125rem, 1.0417vw);
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 0.25rem 0;
}

/* The 12 section headings are an automatic decimal list in the document
   (numId 9, ilvl 0, numFmt "decimal", lvlText "%1."), so they read 1. to 12.
   Done with a CSS counter rather than literal text so the numbers cannot drift
   out of sync with the headings and never enter the translation strings. The
   hanging indent mirrors the document's ind left=696 hanging=360 twips. */
.prof-legal-page__card {
  counter-reset: legal-section;
}

.prof-legal-page__card h2 {
  color: var(--legal-heading);
  font-weight: 700;
  font-size: max(1.125rem, 1.0417vw);
  margin: 1.75rem 0 0.5rem 0;
  counter-increment: legal-section;
  padding-left: max(1.5rem, 1.3889vw);
  text-indent: calc(max(1.5rem, 1.3889vw) * -1);
}

.prof-legal-page__card h2::before {
  content: counter(legal-section) ". ";
}

/* Terms of Use has no such numbered list. Its headings are plain bold navy text
   with no numPr at all, and the only numbers in that document are literal text
   on the Virtual Companion sub-headings (1. to 8., which are h3 and never
   counted). Without this opt-out the counter above stacks a second, invented
   number onto every title there. The indent is reset too: it exists only to
   hang the number that is no longer printed. */
.prof-legal-page__card--unnumbered h2 {
  counter-increment: none;
  padding-left: 0;
  text-indent: 0;
}

.prof-legal-page__card--unnumbered h2::before {
  content: none;
}

.prof-legal-page__updated {
  color: #212529;
  font-size: max(0.875rem, 0.8102vw);
  text-align: center;
  margin: 0 0 1.5rem 0;
}

.prof-legal-page__card h3 {
  color: var(--legal-heading);
  font-weight: 700;
  font-size: max(1rem, 0.9259vw);
  margin: 0 0 0.5rem 0;
}

.prof-legal-page__card p {
  font-size: max(1rem, 0.9259vw);
  margin: 0 0 1rem 0;
}

/* Running body copy is justified in the document (w:jc="both"). Table cells are
   not, so this is scoped to the main flow, the icon gutters and the cookie
   panel rather than applied to every paragraph. The date line is excluded: it
   is centred, and this selector would otherwise outrank its own rule. */
.prof-legal-page__card > p:not(.prof-legal-page__updated),
.prof-legal-page__aside-body > p,
.prof-legal-page__panel > p {
  text-align: justify;
}

.prof-legal-page__card ul {
  margin: 0 0 1rem 0;
  padding-left: max(1.25rem, 1.1574vw);
}

.prof-legal-page__card li {
  margin: 0 0 0.375rem 0;
}

/* Body-flow list items track the paragraph size. Without this they stay at the
   16px default past the design width while the copy beside them grows, which
   only became visible once these pages carried real bullet lists. Lists inside
   tables are excluded so they keep inheriting the table's own size. */
.prof-legal-page__card > ul li,
.prof-legal-page__aside-body > ul li {
  font-size: max(1rem, 0.9259vw);
}

/* Underlined like the document's hyperlinks. The colour stays PROF blue rather
   than the document's #0000FF, which is just Word's default link colour. */
.prof-legal-page__card a {
  color: var(--prof-primary);
  text-decoration: underline;
  word-break: break-word;
}

.prof-legal-page__card a:hover {
  color: var(--prof-primary-hover);
  text-decoration: underline;
}

/* Wrapper for the policy tables (data collected, cookie types, third parties,
   rights). The scroll lives on the wrapper, not the card, so a wide table
   scrolls inside itself instead of forcing the whole page sideways on mobile. */
.prof-legal-page__table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 1.5rem 0;
}

.prof-legal-page__card table {
  border-collapse: collapse;
  width: 100%;
  min-width: 520px;
  font-size: max(0.9375rem, 0.8681vw);
}

/* Document styling: navy header row with white bold text, every body cell on
   light grey. The source document sets NO cell borders and relies on the grey
   fill alone; on screen that merges adjacent cells, so 2px white gridlines
   stand in as the separator instead of a drawn border. */
.prof-legal-page__card th,
.prof-legal-page__card td {
  border: 2px solid #ffffff;
  padding: max(0.75rem, 0.6944vw) max(0.875rem, 0.8102vw);
  text-align: left;
  vertical-align: top;
}

.prof-legal-page__card th {
  background-color: var(--legal-navy);
  color: #ffffff;
  font-weight: 700;
}

.prof-legal-page__card td {
  background-color: var(--legal-cell);
}

/* Cells stack several paragraphs/lists; drop the trailing gap on the last one
   so row heights stay tight. */
.prof-legal-page__card td > :last-child {
  margin-bottom: 0;
}

/* Full-width navy band announcing each data category. In the source document
   these are their own single-cell rows spanning both columns, not bold text
   inside the left column. */
.prof-legal-page__band td {
  background-color: var(--legal-navy);
  color: #ffffff;
  font-weight: 700;
  text-align: center;
}

/* The document centres only some header cells: "Which ones?", "Why?" and
   "What they do for us". Its other header cells are left aligned, including
   "Category of third parties" in the SAME row as "What they do for us". That
   asymmetry is reproduced here rather than silently normalised. */
.prof-legal-page__th--center {
  text-align: center !important;
}

/* Bold first cell of a row (cookie type, third-party category). Bold on the
   same grey as the rest of the row, exactly as the document has it. */
.prof-legal-page__rowhead {
  font-weight: 700;
}

/* The rights table uses the slightly different navy and grey of the document's
   last table, and carries an icon inside each header cell. */
.prof-legal-page__grid--rights th {
  background-color: var(--legal-heading);
  /* Roomier than the other header cells: these carry a 44px circle, and the
     document gives them noticeably more air than a text-only header. */
  padding: max(1.125rem, 1.0417vw) max(1rem, 0.9259vw);
  /* middle, against the top every other cell on the page uses.

     The two header cells are always the same height, but their CONTENT is not:
     one label wraps to two lines and the other does not, so each flex row is a
     different height, and align-items: center then centres each icon inside a
     different box. Top-aligned cells put those two boxes at the same y, which
     lands the circles at different heights -- 2px apart in English, and wider
     the moment a translation adds a line to one column and not the other.

     Centring the cell content centres both rows about the SAME axis, so the
     circles line up whatever the labels do. */
  vertical-align: middle;
}

.prof-legal-page__grid--rights td {
  background-color: var(--legal-cell-alt);
}

/* The cookie table's column header is bold text on the panel grey, NOT a navy
   header row: in the document it lives inside the same grey table as the data
   above it. */
.prof-legal-page__cookies th {
  background-color: var(--legal-cell);
  color: #212529;
  font-weight: 700;
}

/* One grey panel wrapping the whole cookie section (intro copy, table, closing
   note), mirroring the document where all of it sits in one shaded table. */
.prof-legal-page__panel {
  background-color: var(--legal-cell);
  padding: max(1.25rem, 1.1574vw) max(1.25rem, 1.1574vw) max(0.75rem, 0.6944vw) max(1.25rem, 1.1574vw);
  margin: 0 0 1.5rem 0;
}

.prof-legal-page__panel > .prof-legal-page__table {
  margin-bottom: max(1rem, 0.9259vw);
}

/* Icon gutter. The document puts an orange icon in a narrow left column beside
   these sections; here that is a flex row so the copy reflows on narrow
   screens instead of being pinned to a fixed column. */
.prof-legal-page__aside {
  display: flex;
  align-items: flex-start;
  gap: max(1rem, 0.9259vw);
  margin: 0 0 1rem 0;
}

.prof-legal-page__aside-body {
  flex: 1 1 auto;
  min-width: 0;
}

.prof-legal-page__aside-body > :last-child {
  margin-bottom: 0;
}

/* The document draws each gutter icon inside a thin orange circle. The SVGs
   are the bare Office glyphs -- the ring is a separate shape in the source
   document, not part of the artwork -- so it is drawn here instead of being
   baked into nine assets.

   border-box is what keeps this a pure addition: the ring and its padding are
   taken out of the sizes below rather than added to them, so the icon column
   is exactly as wide as it was and no copy reflows. The padding is what sizes
   the glyph inside the circle; it is stated per size rather than as a
   percentage because percentage padding resolves against the CONTAINING
   BLOCK's width, which here is the whole text column.

   The glyph fills 80% of the diameter and the ring is a 1px hairline, which is
   the document's own proportion: the ring there is ~2% of the circle and the
   artwork is the point. Two earlier passes were too timid -- half the diameter
   behind a 2px ring, then 68% behind 1.5px -- and both read as a thick badge
   with a small picture in it. Note the SVGs carry their own inset (the
   envelope spans 79% of its viewBox), so the visible ink is ~63% of the
   circle even at 80%.

   1px rather than 1.5: a sub-pixel border is rounded to whole device pixels,
   so 1.5 drew 1px on a standard display and 1.5 on a retina one. Whole
   numbers render the same everywhere.

   Border width is fixed, as border widths are everywhere in this file; the
   padding follows the icon's own vw scale so the proportion holds above
   1728px. */
.prof-legal-page__icon {
  flex: 0 0 auto;
  width: max(40px, 2.3148vw);
  height: max(40px, 2.3148vw);
  display: block;
  box-sizing: border-box;
  padding: max(3px, 0.1736vw);
  border: 1px solid var(--legal-orange);
  border-radius: 50%;
}

.prof-legal-page__aside--tight .prof-legal-page__icon {
  width: max(28px, 1.6204vw);
  height: max(28px, 1.6204vw);
  padding: max(2px, 0.1157vw);
}

/* One of the nine icons draws its own circle. icon-info.svg's outer path is an
   annulus -- the ring IS the artwork, not a container for it -- so the rule
   above put a second circle around the first. Everything else about the gutter
   icon still applies; only the ring and the padding that shrank the glyph
   inside it come off, which also lets the artwork fill the full 40px box the
   other icons' circles occupy.

   Checked against all nine: the rest carry no <circle> and no ring path, so
   this is the only exception. If an icon is ever swapped for one that draws its
   own, it needs this class too. */
/* The doubled class is deliberate: the --tight variant selects with two
   classes, so a single-class rule here loses to it on specificity and the
   artwork keeps 2px of padding it should not have. */
.prof-legal-page__icon.prof-legal-page__icon--no-ring {
  padding: 0;
  border: 0;
  border-radius: 0;
}

/* The rights table's header cells: a large ringed icon with the label beside
   it, as the document draws them. The ring is white here rather than orange --
   these sit on the navy header -- and 2px rather than the gutter's 1px, because
   a light hairline on a dark ground reads thinner than the same line on white.

   The row is a flex container inside the th, never the th itself: display:flex
   on a table cell drops it out of the table's formatting context and the
   colgroup's 44/56 split stops applying. align-items centres the label against
   the circle, which is what stops a two-line label sitting low, and the icon
   cannot shrink, so a long translation wraps the TEXT rather than squashing
   the circle into an ellipse. */
.prof-legal-page__th-icon {
  display: flex;
  align-items: center;
  gap: max(0.75rem, 0.9259vw);
}

.prof-legal-page__icon--header {
  flex: 0 0 auto;
  width: max(44px, 2.5463vw);
  height: max(44px, 2.5463vw);
  display: block;
  padding: max(9px, 0.5208vw);
  border: 2px solid #ffffff;
  border-radius: 50%;
}

.prof-legal-page__note {
  color: var(--legal-muted);
  font-size: max(0.875rem, 0.8102vw);
}

.prof-legal-page__contact {
  font-style: normal;
  line-height: 1.8;
}

.prof-legal-page__back {
  display: inline-block;
  margin-top: 1.5rem;
  color: var(--prof-primary);
  font-weight: 500;
  font-size: max(0.9375rem, 0.8681vw);
  text-decoration: none;
}

.prof-legal-page__back:hover {
  color: var(--prof-primary-hover);
  text-decoration: underline;
}

/* Hide the legacy store-base.html dashboard chrome on these public pages. */
body.store:has(.prof-legal-page) .main-panel > .navbar,
body.store:has(.prof-legal-page) .navbar.navbar-default {
  display: none !important;
}

/* --- public-base.html: parity with how these pages look inside the app -------
   Under store-base.html the legal pages inherit two things from the dashboard
   chrome that public-base.html has no equivalent of, so the same markup used to
   render differently on the two deployments. Reproduced here rather than in
   public-base.html so the landing / request-demo pages sharing that shell stay
   untouched, and scoped to body.prof-public so the app side keeps getting the
   real thing:

   1. paper-dashboard's floated `.main-panel { width: calc(100% - 260px) }`
      leaves a 260px gutter where the sidebar would be, filled by
      stores.css `body .wrapper { background: var(--prof-primary) }`.
   2. Bootstrap reboot's `h1-h6 { line-height: 1.2 }`, paper-dashboard's
      `p { line-height: 1.4em }` and its heading/paragraph font smoothing.
      Without them the card renders 54px taller for the same copy. */

body.prof-public .prof-legal-page {
  margin-left: 260px;
  width: calc(100% - 260px);
}

/* Fixed, not in flow: the app-side gutter is viewport-height (stores.css sets
   `body { overflow-y: hidden }` and .main-panel scrolls internally), so the
   strip must not scroll away with the document here either. */
body.prof-public .prof-legal-page::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 260px;
  background-color: var(--prof-primary);
}

/* Unitless so the 0.875rem "Last updated" line lands on 19.6px and the 1rem
   body copy on 22.4px, exactly as `1.4em` resolves against each on the app. */
body.prof-public .prof-legal-page__card p {
  line-height: 1.4;
}

body.prof-public .prof-legal-page__card h1,
body.prof-public .prof-legal-page__card h2 {
  line-height: 1.2;
}

body.prof-public .prof-legal-page h1,
body.prof-public .prof-legal-page h2,
body.prof-public .prof-legal-page p,
body.prof-public .prof-legal-page a {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

/* Mirrors paper-dashboard's own collapse point, where `.sidebar` is hidden and
   `.main-panel` goes full width — below it the app shell shows no gutter. */
@media (max-width: 991px) {
  body.prof-public .prof-legal-page {
    margin-left: 0;
    width: 100%;
  }

  body.prof-public .prof-legal-page::before {
    content: none;
  }
}

@media (max-width: 480px) {
  .prof-legal-page__card {
    padding: 1.5rem 1.25rem;
  }

  .prof-legal-page__panel {
    padding: 1rem 1rem 0.5rem 1rem;
  }

  .prof-legal-page__aside {
    gap: 0.75rem;
  }

  .prof-legal-page__icon {
    width: 32px;
    height: 32px;
    padding: 2px;
  }

  /* The header icons keep their own size and ring padding here. Restated inside
     the query because the gutter rule above is later in the file than the
     --header block and would otherwise win on order alone, collapsing these to
     32px with 2px of padding. */
  .prof-legal-page__icon--header {
    width: 38px;
    height: 38px;
    padding: 8px;
  }

  /* Same reason as --header: the gutter rule above is later in the file and
     would otherwise hand this icon back the padding it must not have. */
  .prof-legal-page__icon.prof-legal-page__icon--no-ring {
    padding: 0;
  }
}