/* Kendis legal document template.
   First instance: the Data Processing Addendum at /dpa/.

   This is a TEMPLATE, not a one-off page. Every future legal instrument
   (Hosting & Subprocessor Schedule, trial terms, subscription terms, privacy
   policy) reuses these components: .dpa-doc-head, .dpa-toc, .dpa-sec, .dpa-clause, .dpa-def,
   .dpa-doc-table, .dpa-vh and .dpa-doc-foot. A new document should be content plus
   metadata, never new layout.

   Differences from the design prototype, all deliberate:
   - The prototype shipped its own sticky .nav and .pagefoot. This page sits
     inside the Kendis marketing site, so it uses the global site header and
     footer instead and those components are omitted.
   - Palette matches the approved design: Kendis blue for headings, accents,
     badges and rules, over the prototype's GREEN surface tints. The greens are
     intentional, not a leftover from the alternate green theme.
   - Body font is Poppins, not Source Serif 4. The prototype allows this swap
     explicitly. Base size drops 18px -> 17px because Poppins has a much larger
     x-height than a serif at the same nominal size.

   When this moves to trust.kendis.io: this file and the page markup are
   self-contained apart from the site header/footer. Re-add the prototype's
   .nav and .pagefoot there and nothing else needs to change. */

.dpa-page{
  /* Brand blue. #2547D0 is 7.16:1 on white, so unlike the prototype's green it
     is safe for body-size text as well as rules and badges. */
  --brand:#2547D0;
  --brand-600:#1e3aab;      /* button hover */
  --brand-700:#1b349c;      /* text on tinted surfaces, links */
  --accent:#2547D0;
  --accent-700:#1b349c;

  /* Surface tints stay GREEN, exactly as the prototype ships them, while
     headings and accents are Kendis blue. That green/blue pairing is the
     design as approved - the greens are not a leftover from the alternate
     theme, they are the intended surface ramp. */
  --tint:#f4faf6;           /* scope callout, doc header gradient, zebra rows */
  --tint-2:#e9f4ed;         /* table header fill */
  --tint-3:#dcefe3;         /* placeholder highlight, ::selection */
  --tint-ink:#0f5c2c;       /* text on the green tints (prototype's green-700) */
  --num:#177a41;            /* TOC section numbers - green, per the design */

  --ink:#15192b;            /* strongest text: bold terms, meta values */
  --text:#2c3242;           /* body copy */
  --muted:#646c80;          /* labels, captions, subtitles */
  --border:#e3e7ef;
  --border-2:#d3dae8;
  --white:#ffffff;

  --maxw:1180px;
  --shadow-sm:0 1px 2px rgba(20,30,60,.04),0 1px 3px rgba(20,30,60,.05);

  /* The Kendis site header is position:fixed at ~60px. .site-content already
     pads 60px to clear it; these two offsets keep the sticky TOC and anchor
     jumps clear of it as well. Tune here only. */
  --site-nav:60px;
  --toc-top:calc(var(--site-nav) + 24px);
  --anchor-offset:calc(var(--site-nav) + 22px);

  background:var(--white);
  color:var(--text);
  font-family:"Poppins",system-ui,sans-serif;
  font-size:17px;
  line-height:1.72;
  text-wrap:pretty;
  -webkit-font-smoothing:antialiased;
}
.dpa-page *{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Neutralise the WordPress theme. The theme owns .site-main and styles bare
   <article> inside it, so without these resets the document body is given a
   50% width, a grey card background and a border, the page centres its text,
   and <main> becomes a flex row. Every rule below undoes a specific theme
   rule - none of it is decorative. */
/* padding:0 is what closes the white gap between the site header and the
   document header - the theme's .site-content padding-top is additive on top
   of the offset that already clears the fixed header. european-cloud does the
   same. The document header supplies its own top spacing. */
#content.site-content.dpa-content{max-width:100%;width:100%;margin:0;padding:0;overflow:visible}
.dpa-page{display:block;width:100%;text-align:left}
.dpa-page article,.dpa-page .dpa-doc-body{width:auto;border:0;background:none;border-radius:0;overflow:visible;padding-bottom:0;margin:0}
/* Legal prose is left-aligned. The theme centres text in the content area,
   and inheritance alone does not beat it, so the text blocks say so directly. */
.dpa-page .dpa-doc-head-inner,.dpa-page .dpa-sec,.dpa-page .dpa-sec-content,.dpa-page .dpa-para,
.dpa-page .dpa-def,.dpa-page .dpa-cl-body,.dpa-page .dpa-vh,.dpa-page .dpa-doc-foot,
.dpa-page .dpa-toc,.dpa-page .dpa-lead{text-align:left}

.dpa-page h1,.dpa-page h2,.dpa-page h3{margin:0;font-weight:600;letter-spacing:-.01em;text-wrap:balance}
.dpa-page p{margin:0}
.dpa-page a{color:var(--brand-700);text-decoration:none}
.dpa-page a:hover{color:var(--brand)}
.dpa-page strong{font-weight:600;color:var(--ink)}
.dpa-page ::selection{background:var(--tint-3)}
.dpa-page :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
.dpa-wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}

/* buttons */
.dpa-page .dpa-btn{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;line-height:1;padding:11px 18px;border-radius:8px;border:1.5px solid transparent;cursor:pointer;transition:background .15s,color .15s,border-color .15s;text-decoration:none;font-family:inherit}
.dpa-page .dpa-btn svg{width:15px;height:15px;flex:none}
.dpa-page .dpa-btn-primary{background:var(--brand);color:#fff}
.dpa-page .dpa-btn-primary:hover{background:var(--brand-600);color:#fff}

.dpa-page .dpa-kicker{display:block;font-size:12px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--accent-700)}

/* document header block - identical across every future legal document */
.dpa-doc-head{border-bottom:1px solid var(--border);background:linear-gradient(180deg,var(--tint),#fff)}
/* Top padding clears the fixed site header and then adds breathing room. It
   lives on the inner block, not the wrapper, so the green background still
   starts flush against the site header with no white gap above it. */
.dpa-doc-head-inner{padding:calc(var(--site-nav) + 44px) 0 44px;max-width:820px}
/* .dpa-page prefix is load-bearing: it outranks the .dpa-page h1 base rule,
   which would otherwise win on specificity and render the title near-black. */
.dpa-page .dpa-doc-title{font-size:clamp(30px,4vw,42px);line-height:1.14;margin:16px 0 0;color:var(--brand)}
.dpa-doc-sub{font-size:17px;font-weight:500;color:var(--muted);margin:12px 0 0}
.dpa-doc-meta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 34px;margin:30px 0 0;padding-top:26px;border-top:2px solid var(--accent)}
.dpa-meta-item{display:flex;flex-direction:column;gap:3px}
.dpa-meta-k{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.dpa-meta-v{font-size:16px;font-weight:600;color:var(--ink)}
.dpa-doc-meta .dpa-btn{margin-left:auto}

/* Contract placeholders. These must stay visible and findable: they are filled
   in per contract, so they are highlighted rather than hidden. */
.dpa-ph{background:var(--tint-3);color:var(--tint-ink);padding:1px 7px;border-radius:4px;font-style:normal;white-space:nowrap;font-size:.92em;font-weight:600}

/* layout: TOC + document body */
.doc-layout{display:grid;grid-template-columns:262px 1fr;gap:56px;padding:52px 28px 40px;max-width:var(--maxw);margin:0 auto;align-items:start}
.dpa-toc{position:sticky;top:var(--toc-top)}
.dpa-toc-details{border:none}
.dpa-toc-details>summary{display:none}
@media (min-width:861px){.dpa-toc-details>.dpa-toc-cap{display:block!important}.dpa-toc-details>.dpa-toc-nav{display:flex!important}}
.dpa-toc-cap{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:0 0 14px;margin:0 0 8px;border-bottom:1px solid var(--border)}
.dpa-toc-nav{display:flex;flex-direction:column}
/* All three rules carry the .dpa-page prefix deliberately: without it the
   generic `.dpa-page a` link colour outranks them and every TOC entry renders
   blue, losing the distinction between the active section and the rest. */
.dpa-page .dpa-toc-link{display:flex;gap:12px;align-items:baseline;font-size:13.5px;font-weight:500;color:var(--text);padding:7px 10px 7px 12px;border-left:2px solid transparent;line-height:1.35;transition:color .12s,border-color .12s}
.dpa-page .dpa-toc-link:hover{color:var(--brand)}
/* Active section: heading turns blue and a blue rule appears to the left of
   the number. The number itself stays green. */
.dpa-page .dpa-toc-link.dpa-active{color:var(--brand);border-left-color:var(--accent);font-weight:600}
.dpa-page .dpa-toc-no{flex:none;width:20px;color:var(--num);font-weight:600;font-variant-numeric:tabular-nums;font-size:12.5px}
.dpa-toc-link.annex .dpa-toc-no{width:auto;font-size:10.5px;letter-spacing:.04em;text-transform:uppercase}
.dpa-toc-sep{height:1px;background:var(--border);margin:10px 0 10px 12px}

/* The prototype capped this at 768px against Source Serif 4. We render in
   Poppins, whose narrower glyphs made the same cap read short, so the body
   now takes the full grid column (~806px inside the 1180px container). */
.dpa-doc-body{min-width:0;max-width:none}

/* section blocks */
/* scroll-margin-top MUST live here, not on .dpa-sec-head: the anchor id is on
   the <section>, and scroll-margin only affects the element actually scrolled
   to. With it on the head, TOC jumps landed the heading under the fixed site
   header and you saw the body text with no title above it. */
.dpa-sec{padding:40px 0;border-top:1px solid var(--border);scroll-margin-top:var(--anchor-offset)}
.dpa-sec:first-child{border-top:none;padding-top:8px}
.dpa-sec-head{display:flex;align-items:baseline;gap:16px;margin:0 0 20px;scroll-margin-top:var(--anchor-offset)}
.dpa-sec-no{font-size:15px;font-weight:700;color:#fff;background:var(--accent);min-width:34px;height:34px;padding:0 8px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;flex:none}
/* Annex / history labels. The filled blue badge read as a button, so these are
   flattened to a tinted label: green surface, no radius to speak of, no
   shadow, and text rather than a solid block. Numbered sections keep the solid
   blue badge - a number in a filled square reads as a marker, a word in one
   reads as something you press. */
.dpa-sec-no.annex{background:var(--tint-2);color:var(--tint-ink);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:0 10px;height:26px;min-width:0;border-radius:3px;align-self:center}
.dpa-page .dpa-sec-title{font-size:24px;line-height:1.2;color:var(--brand)}
/* Reading measure. Deliberately NOT in ch units: ch is font-relative, so the
   prototype's 72ch shrank when the body font changed from Source Serif 4 to
   Poppins. A px value keeps the measure stable if the font is swapped again. */
.dpa-sec-content{max-width:820px}
.dpa-para{margin-top:16px}
.dpa-para:first-child{margin-top:0}
.dpa-lead{margin:0 0 4px}

/* Scope callout, Section 1 only. Signed agreements and self-hosted deployments
   are governed by their own terms, so this is the one thing a visitor must not
   miss. Treatment only - the words are unchanged. */
/* Section 1 as a flat document preamble, per the revised design. No tinted
   card and no left-accent border: it earns its prominence from a 2px accent
   rule under the heading (echoing the doc-meta divider) and from clause (a)
   set as a larger standfirst. */
.dpa-sec.dpa-scope{background:none;border:0;border-radius:0;box-shadow:none;padding:8px 0 40px;margin-top:0}
.dpa-sec.dpa-scope .dpa-sec-head{margin-bottom:0;padding-bottom:18px;border-bottom:2px solid var(--accent)}
.dpa-sec.dpa-scope .dpa-sec-content{padding-top:24px}
.dpa-sec.dpa-scope .dpa-clause:first-child .dpa-cl-body{font-size:1.07em;color:var(--ink)}

/* lettered clauses - the hanging-indent spine.
   tabular-nums keeps (a) (b) (c) in a fixed 30px column so the markers line up
   into a scannable left edge instead of drifting with the text. */
.dpa-clause{display:flex;gap:14px;margin-top:16px}
.dpa-clause:first-child{margin-top:0}
.dpa-cl-mark{flex:none;width:30px;color:var(--brand);font-weight:600;font-size:15px;font-variant-numeric:tabular-nums;line-height:1.72}
.dpa-cl-body{flex:1;min-width:0}

/* definitions - hanging indent gives the glossary rhythm */
.dpa-def{margin-top:15px;padding-left:1.4em;text-indent:-1.4em}
.dpa-def:first-of-type{margin-top:6px}

/* Table component. The DPA has no tables; the Hosting & Subprocessor Schedule
   is mostly tables, so the style exists in the system ready for it. */
.dpa-doc-table{width:100%;border-collapse:collapse;margin:22px 0;font-size:14.5px}
.dpa-doc-table caption{caption-side:top;text-align:left;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding-bottom:10px}
.dpa-doc-table th{background:var(--tint-2);color:var(--tint-ink);text-align:left;font-weight:600;font-size:12px;letter-spacing:.05em;text-transform:uppercase;padding:12px 16px;border-bottom:2px solid var(--accent)}
.dpa-doc-table td{padding:13px 16px;border-bottom:1px solid var(--border);vertical-align:top;color:var(--text)}
.dpa-doc-table tr:last-child td{border-bottom:none}
.dpa-doc-table tbody tr:nth-child(even){background:var(--tint)}

/* version history + contact footer */
.dpa-vh{margin-top:16px;font-size:15px}
.dpa-vh-row{display:flex;gap:14px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--border)}
.dpa-vh-row:last-child{border-bottom:none}
.dpa-vh-ver{flex:none;font-weight:600;color:var(--brand-700);font-variant-numeric:tabular-nums}
.dpa-vh-date{flex:none;color:var(--muted);width:120px}
.dpa-vh-note{color:var(--text)}
.dpa-doc-foot{border-top:2px solid var(--accent);margin-top:26px;padding-top:24px}
.dpa-doc-foot p{color:var(--muted);font-size:16px;line-height:1.65}


@media (max-width:860px){
  .doc-layout{grid-template-columns:1fr;gap:0;padding-top:24px}
  .dpa-toc{position:static;margin:0 0 12px}
  .dpa-toc-details{border:1px solid var(--border);border-radius:12px;background:var(--tint);overflow:hidden}
  .dpa-toc-details>summary{display:flex;align-items:center;justify-content:space-between;list-style:none;cursor:pointer;font-size:14px;font-weight:600;color:var(--ink);padding:15px 18px}
  .dpa-toc-details>summary::-webkit-details-marker{display:none}
  .dpa-toc-details>summary::after{content:"";width:9px;height:9px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .18s}
  .dpa-toc-details[open]>summary::after{transform:rotate(-135deg)}
  .dpa-toc-cap{display:none}
  .dpa-toc-nav{padding:6px 12px 14px}
  .dpa-doc-body{max-width:none}
  .dpa-sec.dpa-scope{padding:26px 22px}
}
@media (max-width:520px){
  .dpa-page{font-size:16px}
  .dpa-doc-meta .dpa-btn{margin-left:0}
}

/* Print. Customers file this PDF in vendor security reviews, so it has to come
   out clean and complete. Site chrome is hidden here as well as the page's own
   navigation aids. */
@page{margin:18mm 16mm}
@media print{
  .site-header,#masthead,.site-footer,#colophon,.post-footinaa,#toTop,.print-hide{display:none!important}
  .dpa-toc,.dpa-doc-meta .dpa-btn{display:none!important}
  .site-content{padding-top:0!important}
  .dpa-page{font-size:10.5pt;line-height:1.5;color:#000}
  .dpa-doc-head{background:none;border-bottom:1.5pt solid var(--accent)}
  .dpa-doc-head-inner{padding:0 0 18pt;max-width:none}
  .doc-layout{display:block;padding:14pt 0 0;max-width:none}
  .dpa-doc-body,.dpa-sec-content{max-width:none}
  .dpa-sec{padding:14pt 0;border-top:.75pt solid #cfd6d0}
  .dpa-sec.dpa-scope{background:none;border:0;box-shadow:none;border-radius:0;padding:0 0 14pt}
  .dpa-sec.dpa-scope .dpa-sec-head{border-bottom:1.5pt solid var(--accent);padding-bottom:8pt}
  .dpa-sec-head{break-after:avoid}
  .dpa-clause,.dpa-def,.dpa-vh-row,.dpa-doc-table tr{break-inside:avoid}
  .dpa-sec-no{background:none!important;color:var(--accent)!important;padding:0;min-width:auto;height:auto;font-size:12pt}
  .dpa-sec-no.annex{color:var(--tint-ink)!important}
  .dpa-wrap{padding:0}
  .dpa-page a{color:#000}
}