/* ==========================================================================
   LEGAL DOCUMENTS  -  v1.22.65
   --------------------------------------------------------------------------
   Serves /privacy/ and /terms/, the only two pages in this application written
   to be read start to finish by somebody who is not a customer yet.

   WHY ITS OWN STYLESHEET RATHER THAN app.css. That file styles the landing
   page's hero, capability grid and step ladder, none of which appear here, and
   loading it would mean fetching a marketing layout to render prose. This sheet
   holds only what a long document needs and nothing else.

   THE MEASURE IS THE WHOLE DESIGN. A legal document that runs the full width of
   a wide screen does not get read, and the reader who most needs to read it is
   an external reviewer deciding whether to trust the product. 72ch is the widest
   comfortable measure for continuous prose; the table is allowed past it because
   three columns of short phrases need room.

   EVERY VALUE IS A DESIGN-SYSTEM TOKEN, so these pages cannot drift away from
   the product they describe. No new colour, no new type scale.
   ========================================================================== */
.legal-page{margin:0;background:var(--ds-bg);color:var(--ds-text);font-family:var(--ds-font-sans,system-ui)}
/* v1.22.67. AMBIENT PAPER, NOT A BANNER. Two faint pine washes at the top corners give the page
   depth without touching the reading column; fixed attachment keeps them still while the document
   moves. The wash stops at 520px so long documents do not carry a gradient behind every clause. */
.legal-page::before{
  content:"";
  position:fixed;
  inset:0 0 auto;
  height:520px;
  pointer-events:none;
  background:
    radial-gradient(640px 300px at 8% -60px, rgb(14 86 49 / .07), transparent 70%),
    radial-gradient(720px 320px at 96% -80px, rgb(18 105 59 / .06), transparent 70%);
}
.legal-page>*{position:relative}

/* ------------------------------------------------------------------ HEADER
   Brand plus the two documents and a way home. No product navigation: this page
   is reachable without an account, so links into the application would be dead
   ends for the person most likely to be reading it. */
.legal-header{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:var(--ds-space-4,16px);
  width:100%;
  margin-inline:0;
  padding:var(--ds-space-4,16px) clamp(16px,4vw,64px);
  border-bottom:1px solid var(--ds-border);
}
/* v1.22.67. THE HEADER STAYS WITH THE READER. A legal document is long by definition, and the two
   things a reviewer or a customer's counsel reaches for mid-document are the OTHER document and a
   way home. A sticky bar keeps both one glance away without spending a pixel of the reading column.
   The blur and the single soft shadow are what separate a bar that floats from a bar that sits on
   top of the text scrolling beneath it. */
.legal-header-wrap{position:sticky;top:0;z-index:30;background:color-mix(in oklab,var(--ds-bg) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--ds-border),0 8px 24px -18px rgb(14 86 49 / .28)}
.legal-header-wrap .legal-header{border-bottom:0}
.legal-lockup{display:inline-flex;align-items:center;gap:var(--ds-space-3,12px)}
.legal-lockup__tag{
  padding:4px 10px;
  border:1px solid var(--ds-pine);
  border-radius:var(--ds-radius-pill,999px);
  color:var(--ds-pine-dark);
  background:var(--ds-pine-tint);
  font:700 var(--ds-font-size-xs,.75rem)/1 var(--ds-font-mono,ui-monospace,monospace);
  letter-spacing:.16em;
  text-transform:uppercase;
}
.legal-brand{display:inline-flex;align-items:center}
.legal-brand img{display:block;height:38px;width:auto}
.legal-header nav{display:flex;flex-wrap:wrap;gap:var(--ds-space-2,8px)}
.legal-header nav a{
  display:inline-flex;
  align-items:center;
  min-height:38px;
  padding:0 var(--ds-space-3,12px);
  border:1px solid transparent;
  border-radius:var(--ds-radius-pill,999px);
  color:var(--ds-text-muted);
  font:700 var(--ds-font-size-xs,.75rem)/1 var(--ds-font-sans,system-ui);
  text-decoration:none;
}
.legal-header nav a{transition:background .15s ease,color .15s ease,box-shadow .15s ease}
.legal-header nav a:hover{color:var(--ds-pine);background:var(--ds-pine-tint)}
.legal-header nav a:focus-visible{outline:2px solid var(--ds-pine);outline-offset:2px}
.legal-header nav a[aria-current]{border-color:var(--ds-pine);background:var(--ds-pine-tint);color:var(--ds-pine-dark);box-shadow:0 2px 8px -4px rgb(14 86 49 / .45)}

/* -------------------------------------------------------------- DOCUMENT */
/* v1.22.62. THE SHELL IS A PAGE, THE PROSE KEEPS THE MEASURE, and separating the two is what
   lets this document carry the same masthead as the rest of the platform.
   It was min(72ch) throughout, so a slab inside it would have been a 700px band under a
   full-width header and footer - three different widths on one page. The container now matches
   the header and the footer at 76rem, and the measure moves onto the prose elements themselves,
   which is where it always belonged: 72ch is a property of a line of text, not of a page.
   LEFT-ALIGNED, NOT CENTRED. A 72ch column centred under a full-width masthead floats free of it;
   sharing a left edge with the slab, the contents list and the footer is what makes the page read
   as one document rather than as three stacked components. */
.legal{
  width:100%;
  margin-inline:0;
  padding:var(--ds-space-8,32px) clamp(16px,4vw,64px) var(--ds-space-16,64px);
  font-size:var(--ds-font-size-md,.9375rem);
  line-height:var(--ds-leading-normal,1.55);
}
/* v1.82.221. FULL-WIDTH PAINT, INNER-WIDTH COMPOSITION. The legal surface owns the canvas, but the
   hero content must not stretch from the browser edge to the browser edge: the title and the effective
   date are two related facts, not decorations at opposite ends of an empty slab. The inner container
   gives them a shared left/right rhythm while the pine background still reaches the legal page gutters. */
.legal .pm-head{display:block;padding:clamp(32px,4vw,56px) clamp(20px,4vw,64px)}
.legal__hero-inner{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(17rem,20rem);
  gap:clamp(32px,5vw,72px);
  align-items:stretch;
  width:min(100%,1280px);
  margin-inline:auto;
}
.legal__hero-inner .pm-head__identity{min-width:0}
.legal__hero-inner .pm-head__identity .ds-page-lead{max-width:62ch}
.legal__hero-inner .pm-panel{min-width:0}
.legal__body{margin-top:clamp(32px,4vw,56px)}

@media (max-width:900px){
  .legal__hero-inner{grid-template-columns:minmax(0,1fr);gap:var(--ds-space-6,24px)}
  .legal__hero-inner .pm-panel{max-width:none}
}

/* ------------------------------------------------------------------ THE DOCUMENT BODY
   v1.22.63. PROSE AND A RAIL, one grid, and it is what makes the page read as one document.
   MEASURED, NOT PREFERRED: the masthead and the contents card were 1216px, the prose beneath them
   552px, and the rules between sections stopped where the prose stopped - so the page had three
   right edges and a 660px column of empty paper running its whole length. The measure stays (72ch
   is what makes a long clause readable); the space beside it now holds the navigation, which is the
   one piece of furniture a twelve-clause document needs and the one that has to stay in view.
   THE RAIL TRACK IS FIXED IN rem, NOT auto. `auto` sizes a track to its content, which is how the
   masthead panel ended up a small box floating in a corner in v1.22.62. A declared track means the
   prose column has the same measure on both documents whatever their contents lists say. */
.legal__body{
  display:grid;
  grid-template-columns:minmax(0,1fr) 17rem;
  gap:var(--ds-space-10,40px) var(--ds-space-12,48px);
  align-items:start;
  margin-top:clamp(32px,4vw,56px);
}
.legal__prose{min-width:0}
/* THE MEASURE, applied to the elements that hold a line of text. The table is deliberately absent
   from this list - three columns of short phrases need the room, which is the note the original
   sheet already recorded - and so is the masthead, which is a page-level band.
   v1.22.63. SCOPED TO .legal__prose, because the prose is now a column of a grid rather than a
   direct child of the page. The rule that used to bound the text is what makes the rail possible:
   the column IS the measure now, so the elements only have to agree with it. */
.legal__prose>p,
.legal__prose>ul,
.legal__prose>ol,
.legal__prose>.legal__h2,
.legal__prose>.legal__callout{max-width:72ch}

/* Section headings carry a rule above them rather than extra whitespace: in a
   document this long, a visible boundary is what makes it skimmable.
   v1.22.62. THE NUMBER SITS IN THE MARGIN, which is the whole reason the sections are numbered:
   a reader who has been told "section 5" scans the left edge for a figure, not the middle of a
   line for a word. Mono, because a column of numbers that do not align is not a column. */
.legal__h2{
  position:relative;
  margin:var(--ds-space-10,40px) 0 var(--ds-space-3,12px);
  padding-top:var(--ds-space-5,20px);
  border-top:1px solid transparent;
  border-image:linear-gradient(90deg,var(--ds-border),oklch(from var(--ds-border) l c h / 0)) 1;
  font:650 var(--ds-font-size-xl,1.25rem)/1.3 var(--ds-font-sans,system-ui);
  scroll-margin-top:var(--ds-space-6,24px);
}
.legal__n{
  display:block;
  margin-bottom:2px;
  color:var(--ds-pine);
  font:700 var(--ds-font-size-xs,.75rem)/1 var(--ds-font-mono,ui-monospace,monospace);
  letter-spacing:.14em;
}
/* THE NUMBER STAYS ABOVE THE TITLE, AND RENDERING IT IS WHY. The first draft moved it into the margin
   above 900px with padding-left:3.5rem on the heading - which indented every heading while its own
   paragraphs stayed at the container's left edge, so each section visibly broke the line the rest of
   the document shares. There is no margin to move into: the prose column is left-aligned at 72ch inside
   a 76rem shell, so "the margin" was really just an indent.
   Stacked above, it is an eyebrow - which is the pattern .ds-eyebrow already sets on twenty-nine other
   surfaces in this product, so it needed no new idea at all. */
.legal p{margin:0 0 var(--ds-space-4,16px)}
.legal ul{margin:0 0 var(--ds-space-4,16px);padding-left:var(--ds-space-5,20px)}
.legal li{margin-bottom:var(--ds-space-2,8px)}
.legal a{color:var(--ds-pine-dark);text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}
/* .legal__meta AND .legal__lead ARE GONE, with the markup that used them. The effective date moved
   into the masthead panel, where a reader checks it before deciding whether this version binds them,
   and the lead is now the .ds-page-lead inside the slab. A rule kept after its last consumer is the
   dead weight v1.22.50 spent a release removing. */

/* ------------------------------------------------------------------ THE RAIL
   v1.22.63. THE CONTENTS LIST MOVED INTO THE SECOND COLUMN AND BECAME STICKY. As a full-width card
   above the prose it was read once and then scrolled away from for four thousand pixels, which is
   the opposite of what a contents list is for; in the rail it is still there at clause nine, which
   is where somebody actually wants to jump to clause twelve.
   ONE COLUMN, NOT TWO. The two-column card existed to keep twelve entries above the fold on a
   laptop; a single narrow column in a rail has no fold to stay above. */
.legal__rail{position:sticky;top:var(--ds-space-5,20px)}
.legal__rail-card{
  position:relative;
  padding:var(--ds-space-5,20px);
  border:1px solid var(--ds-border);
  border-radius:var(--ds-radius-lg,14px);
  background:var(--ds-surface);
  box-shadow:0 1px 2px rgb(12 44 27 / .05),0 16px 40px -28px rgb(12 44 27 / .35);
}
/* v1.22.67. THE ACCENT EDGE MARKS THIS AS FURNITURE OF THE DOCUMENT, not an ad: the same pine the
   masthead slab wears, three pixels of it, so the rail reads as part of one designed page rather
   than a card dropped beside prose. */
.legal__rail-card::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:3px;
  border-radius:3px 0 0 3px;
  background:linear-gradient(var(--ds-pine),#12693b);
}
.legal__toc-head{
  margin:0 0 var(--ds-space-4,16px);
  color:var(--ds-pine);
  font:500 var(--ds-font-size-xs,.75rem)/1 var(--ds-font-mono,ui-monospace,monospace);
  letter-spacing:.18em;
  text-transform:uppercase;
}
.legal__toc-list{list-style:none;margin:0;padding:0}
.legal__toc-list li{margin:0}
/* THE NUMBER IS A COLUMN, NOT A MARKER. It was a ::marker carrying a CSS counter, which numbered the
   list correctly and numbered it INDEPENDENTLY of the headings - two sources for one figure. Both
   figures now come from $number() in the template. A real grid column also means a two-line entry
   hangs under its own text rather than under its number. */
.legal__toc-list a{
  display:grid;
  grid-template-columns:2rem minmax(0,1fr);
  gap:var(--ds-space-1,4px);
  padding:var(--ds-space-2,8px) var(--ds-space-2,8px);
  margin-inline:calc(-1*var(--ds-space-2,8px));
  border-radius:var(--ds-radius-sm,8px);
  line-height:1.4;
  text-decoration:none;
}
/* EVERY STATE IS DECLARED, and the reason is on the page this release repairs: one entry in the list
   rendered in a different colour from the other eleven, which reads as a fault rather than as a
   design. A link with an undeclared state takes the browser's, and the browser's :visited is purple. */
.legal__toc-list a,
.legal__toc-list a:visited{color:var(--ds-text-muted)}
.legal__toc-list a:hover,
.legal__toc-list a:focus-visible,
.legal__toc-list a:active{background:var(--ds-pine-tint);color:var(--ds-pine-dark)}
.legal__toc-list a:focus-visible{outline:2px solid var(--ds-pine);outline-offset:1px}
.legal__toc-n{
  color:var(--ds-pine);
  font:700 var(--ds-font-size-xs,.75rem)/1.7 var(--ds-font-mono,ui-monospace,monospace);
  font-variant-numeric:tabular-nums;
}
.legal__rail-meta{
  margin:var(--ds-space-4,16px) 0 0;
  padding-top:var(--ds-space-4,16px);
  border-top:1px solid var(--ds-border);
  color:var(--ds-text-muted);
  font-size:var(--ds-font-size-xs,.75rem);
}
/* v1.22.67. THE TRUST BLOCK ANSWERS THE REVIEWER'S REAL QUESTION: "why should I believe this text?"
   Three checkable facts, each a statement about the page itself - public, versioned, descriptive -
   set small so they reassure without competing with the clauses. The pine tick is drawn in CSS so
   there is no image to drift or to fail a CSP. */
.legal__rail-meta-line{margin:0 0 var(--ds-space-2,8px)}
.legal__rail-meta-line b{color:var(--ds-text)}
.legal-trust{list-style:none;margin:0;padding:0;display:grid;gap:var(--ds-space-1,4px)}
.legal-trust li{position:relative;padding-left:1.25rem;line-height:1.5}
.legal-trust li::before{
  content:"";
  position:absolute;
  left:2px;top:.42em;
  width:4px;height:8px;
  border-right:2px solid var(--ds-pine);
  border-bottom:2px solid var(--ds-pine);
  transform:rotate(45deg);
}

/* ------------------------------------------------------------------ ONE COLUMN
   The rail goes back on top, because a contents list printed underneath twelve sections is a
   contents list nobody reaches. It stops being sticky there: a card pinned to the top of a phone
   screen is a card covering the document. */
@media (max-width:900px){
  .legal__body{grid-template-columns:minmax(0,1fr);gap:var(--ds-space-6,24px)}
  .legal__rail{position:static;grid-row:1}
  .legal__prose{grid-row:2}
  .legal__prose>p,
  .legal__prose>ul,
  .legal__prose>ol,
  .legal__prose>.legal__h2,
  .legal__prose>.legal__callout{max-width:none}
}

/* The Limited Use paragraph, which is the one block a Google reviewer is looking
   for by name. Set apart so it cannot be missed in a wall of prose, and quoted
   almost verbatim from the policy it references. */
.legal__callout{
  padding:var(--ds-space-4,16px) var(--ds-space-5,20px);
  border:1px solid var(--ds-border);
  border-left:3px solid var(--ds-pine);
  border-radius:var(--ds-radius-md,10px);
  background:var(--ds-surface);
  box-shadow:0 10px 28px -22px rgb(12 44 27 / .4);
}

/* Wider than the prose measure, because three columns of short phrases need the
   room and a cramped table is read as decoration rather than as content. */
.legal__table{width:min(100%,none);margin:0 0 var(--ds-space-5,20px)}
.legal__table td{vertical-align:top}
/* v1.22.64. A COOKIE NAME IS A LITERAL, so it is set as one. The cookies table names three of them and
   a reader comparing this document against what their browser shows is comparing strings character by
   character: proportional type makes ampuh_session and ampuh_sessi0n look alike, and the underscore
   disappears into the baseline. .ds-code is the design system's own inline literal, so this only has to
   stop it wrapping mid-name inside a narrow table cell. */
.legal__table .ds-code{white-space:nowrap;font-size:var(--ds-font-size-xs,.75rem)}
/* ------------------------------------------------------------------ THE TABLE ON A PHONE
   v1.22.64. IT STACKS, AND FINDING OUT IT DID NOT WAS THE WHOLE POINT OF RENDERING IT AT 390px.
   Both tables here have carried data-label on every cell since v0.59.0 and NOTHING CONSUMED THEM: the
   attribute is the standard hook for turning a table into a list of labelled facts on a narrow screen,
   and this sheet never wrote the rule. The three-column table survived by squeezing to 358px, which is
   why it was never reported. The cookies table has four columns and one of them holds a literal that
   must not wrap mid-name, so it could not squeeze: measured at 390px it forced the document 673px wide
   and the whole page scrolled sideways.
   A ROW BECOMES A CARD, and each cell states which column it came from. That is what the labels were
   written for, and it is also the only form in which a four-column comparison is readable on a phone. */
@media (max-width:700px){
  .legal__table thead{
    position:absolute;
    width:1px;height:1px;
    margin:-1px;padding:0;border:0;
    overflow:hidden;
    clip-path:inset(50%);
  }
  .legal__table,
  .legal__table tbody,
  .legal__table tr,
  .legal__table td{display:block;width:auto}
  .legal__table tr{
    margin-bottom:var(--ds-space-4,16px);
    padding:var(--ds-space-4,16px);
    border:1px solid var(--ds-border);
    border-radius:var(--ds-radius-md,10px);
    background:var(--ds-surface);
  }
  .legal__table td{padding:0;border:0}
  .legal__table td + td{margin-top:var(--ds-space-3,12px)}
  /* THE LABEL IS THE COLUMN HEADING, so the fact keeps its meaning once the header row is gone. */
  .legal__table td::before{
    content:attr(data-label);
    display:block;
    margin-bottom:2px;
    color:var(--ds-text-muted);
    font:700 var(--ds-font-size-xs,.75rem)/1.5 var(--ds-font-mono,ui-monospace,monospace);
    letter-spacing:.1em;
    text-transform:uppercase;
  }
  /* A cookie name still may not break mid-name, so it is allowed to scroll inside its own cell rather
     than taking the document with it. */
  .legal__table td:has(> .ds-code){overflow-x:auto}
}
.legal__table caption{
  padding-bottom:var(--ds-space-2,8px);
  color:var(--ds-text-muted);
  font:500 var(--ds-font-size-xs,.75rem)/1.4 var(--ds-font-mono,ui-monospace,monospace);
  letter-spacing:.1em;
  text-transform:uppercase;
  text-align:left;
}
.legal__pair{margin-top:var(--ds-space-8,32px);color:var(--ds-text-muted)}

/* ------------------------------------------------------------------ FOOTER
   v1.82.222. THE FOOTER NOW CLOSES THE TRUST LOOP. The old two inline spans named the operator and
   copyright, but gave a first-time reader no next action and no visual endpoint. This is a full-bleed
   pine band with a measured inner container: identity and purpose on the left, the two documents and
   home on the right, then the legal colophon on a quiet seam below. It feels finished without turning
   a legal page into a marketing page. */
.legal-footer{
  width:100%;
  margin-inline:0;
  padding:0 clamp(16px,4vw,64px);
  border-top:0;
  background:var(--ds-pine-dark,#0e5631);
  color:oklch(92% .018 130);
  font-size:var(--ds-font-size-xs,.75rem);
}
.legal-footer__inner{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:var(--ds-space-7,28px) clamp(32px,7vw,96px);
  width:min(100%,1280px);
  margin-inline:auto;
  padding:clamp(28px,4vw,44px) 0 18px;
}
.legal-footer__identity{min-width:0;max-width:52ch}
.legal-footer__eyebrow{
  display:block;
  margin-bottom:var(--ds-space-2,8px);
  color:var(--ds-lime,oklch(83% .145 116));
  font:700 var(--ds-font-size-xs,.75rem)/1.3 var(--ds-font-mono,ui-monospace,monospace);
  letter-spacing:.14em;
  text-transform:uppercase;
}
.legal-footer__identity strong{display:block;font-size:1rem;font-weight:700;color:#fff}
.legal-footer__identity p{margin:var(--ds-space-2,8px) 0 0;max-width:48ch;color:oklch(78% .026 133);line-height:1.55}
.legal-footer__nav{display:flex;flex-wrap:wrap;align-content:start;justify-content:flex-end;gap:8px}
.legal-footer__nav a{
  display:inline-flex;
  align-items:center;
  min-height:36px;
  padding:0 12px;
  border:1px solid transparent;
  border-radius:var(--ds-radius-pill,999px);
  color:oklch(91% .02 130);
  font-weight:700;
  text-decoration:none;
  white-space:nowrap;
}
.legal-footer__nav a:hover{border-color:oklch(83% .145 116 / .55);color:var(--ds-lime,oklch(83% .145 116))}
.legal-footer__nav a:focus-visible{outline:2px solid var(--ds-lime,oklch(83% .145 116));outline-offset:2px}
.legal-footer__nav a[aria-current="page"]{border-color:oklch(83% .145 116 / .5);background:oklch(83% .145 116 / .12);color:var(--ds-lime,oklch(83% .145 116))}
.legal-footer__base{
  grid-column:1/-1;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:8px 24px;
  padding-top:16px;
  border-top:1px solid oklch(88% .02 130 / .16);
  color:oklch(72% .03 133);
  font-variant-numeric:tabular-nums;
}
.legal-footer__base span:last-child{color:oklch(84% .02 130)}

@media (max-width:560px){
  .legal h2{margin-top:var(--ds-space-8,32px)}
  .legal-header{padding-block:var(--ds-space-4,16px)}
  .legal .pm-head{padding:28px 20px}
  .legal__hero-inner{gap:20px}
  .legal-footer__inner{grid-template-columns:1fr;gap:24px;padding-block:28px 16px}
  .legal-footer__nav{justify-content:flex-start}
  .legal-footer__base{grid-column:auto;display:grid;gap:4px}
}

/* ------------------------------------------------------------------ PAPER
   v1.22.62. These two documents are the ones most likely to be printed or saved as PDF - by a
   reviewer, by a customer's legal team - and this sheet had nothing for paper. The navigation and
   the contents list are controls: neither works on paper, so neither is printed. The section
   numbers survive, because a printed copy is exactly where "section 5" gets cited from. */
@media print{
  .legal-header,.legal-header-wrap,.legal__rail{display:none}
  .legal-page::before{display:none}
  .legal{width:100%;padding:0}
  .legal__body{display:block}
  .legal__prose>p,.legal__prose>ul,.legal__prose>ol,.legal__prose>.legal__h2,.legal__prose>.legal__callout{max-width:none}
  .legal__h2{break-after:avoid}
  .legal__callout{border-color:#000;background:none}
  .legal a{color:#000}
  .legal-footer{border-top:1px solid #000;background:none;color:#000}
  .legal-footer__eyebrow,.legal-footer__identity strong,.legal-footer__identity p,
  .legal-footer__nav a,.legal-footer__base,.legal-footer__base span:last-child{color:#000}
  .legal-footer__nav{display:none}
  .legal-footer__base{border-color:#000}
}