/* ClickLinker — shared styles for every page: tokens, base, header, buttons, footer.
   Page-specific sections live in each page's own <style>. */
:root{
  --ink:#0a1720;
  --slate:#222c38;
  --white:#f4f8fb;
  --teal:#5fe6d2;
  --teal-2:#78d5c3;
  --label:#5a7a7e; /* small secondary labels, e.g. step numbers */
  --muted:#a3afbb;
  --red:#c8456a;
  --edge:#3f8a82; /* border of teal cards and forms */
  --r:11px; /* corner radius of every rounded box; pills and circles stay fully round */
}
/* Arial tuned to Urbanist's metrics, so text doesn't move when the web font arrives */
@font-face{font-family:'Urbanist Fallback';font-weight:100 500;src:local('Arial'),local('ArialMT');size-adjust:100%;ascent-override:95%;descent-override:25%;line-gap-override:0%}
@font-face{font-family:'Urbanist Fallback';font-weight:600;src:local('Arial Bold'),local('Arial-BoldMT');size-adjust:92.6%;ascent-override:101.3%;descent-override:26.7%;line-gap-override:0%}
@font-face{font-family:'Urbanist Fallback';font-weight:700 900;src:local('Arial Bold'),local('Arial-BoldMT');size-adjust:95.5%;ascent-override:99.5%;descent-override:26.2%;line-gap-override:0%}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--slate)}
body{
  font-family:'Urbanist','Urbanist Fallback',system-ui,sans-serif;
  color:var(--white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
/* in-page links (menu, buttons, table of contents) glide to their section; a small gap keeps it off the window edge */
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}
section[id]{scroll-margin-top:24px}
main{overflow-x:clip}
/* 1222px design column, centered on wider screens (30px left / 18px right gutters);
   below 1222px the gutters stay and the column narrows */
.wrap{width:min(1174px,100% - 48px);margin-left:max(30px,calc(50% - 581px));position:relative}

/* ---------- header ---------- */
.site-header{height:72px;position:relative;z-index:3}
.site-header .wrap{display:flex;align-items:center;height:72px;padding-top:1px}
/* full logo (mark + wordmark), img/logo.svg */
.logo{display:flex;align-items:center}
.logo-img{display:block;width:auto;height:32px;flex:none}
.nav{margin-left:auto;display:flex;align-items:center}
.nav a{font-size:15px;font-weight:500;color:#cbd7dd;line-height:20px}
.nav .n1{margin-right:30px}
.nav .n2{margin-right:31px}
.nav .n3{margin-right:28px}
.nav .btn-nav{position:relative;left:2px;display:inline-flex;align-items:center;justify-content:center;min-width:144px;height:46px;padding:0 22px;margin-top:2px;border-radius:30px;font-size:16px;font-weight:600;color:#eaf6f4;
  border:2px solid #45c9b3;background:radial-gradient(ellipse 60% 70% at 50% 50%,#164b48 0%,#18564f 60%,#1d6a63 100%);
  box-shadow:0 0 10px 2px rgba(50,200,180,.5),0 0 26px 8px rgba(35,160,145,.3),inset 0 0 12px 2px rgba(70,210,190,.32)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;height:56px;min-width:165px;padding:0 28px;border-radius:24px;font-size:20px;font-weight:600}
.btn-primary{min-width:168px;color:var(--ink);background:#45c9b3;box-shadow:0 0 26px 5px rgba(70,220,205,.42),0 0 8px rgba(90,235,215,.4)}
.btn-ghost{color:#eaf3f8;border:2px solid #3a7476;background:rgba(18,36,44,.85);box-shadow:0 0 18px 4px rgba(60,170,160,.3),inset 0 0 14px 3px rgba(60,170,160,.22)}

/* ---------- reveal on scroll ----------
   A .reveal block below the first screen rises 28px and fades in the first time it is scrolled into view,
   then stays. site.js arms only blocks that start below the fold (.is-armed hides them) and adds .is-in
   once; --reveal-step (0, 1, 2…) delays an item to stagger a row. Nothing is hidden before the script
   runs, without JavaScript, or when the visitor asks for less motion */
.reveal.is-armed:not(.is-in){opacity:0;translate:0 28px}
/* the transition sits on the shown state only, so arming hides a block at once and only showing animates */
.reveal.is-armed.is-in{transition:opacity .7s cubic-bezier(.2,.7,.2,1),translate .7s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--reveal-step,0) * 120ms)}

/* ---------- footer ---------- */
/* every footer text keeps at least 6:1 contrast on the slate background */
.site-footer{padding-top:111px;height:312px;position:relative}
.foot{display:grid;grid-template-columns:34.75% 34.4% 1fr}
.foot .logo{margin-top:2px}
.foot .logo-img{height:28px}
.tagline{margin-top:18px;font-size:14px;line-height:18px;font-weight:500;color:#a3adb8}
.foot h2{position:relative;left:1px;font-size:14px;line-height:18px;font-weight:700;color:#c6cdd5;margin-top:3px}
.foot ul{list-style:none;margin-top:8px}
.foot li a{padding:4px 0}
.foot li{font-size:14px;line-height:28px;font-weight:500;color:#b2bcc6}
.foot a:hover{color:#e6edf2}
.ico-link{display:inline-flex;align-items:center;gap:9px}
.ico-link svg{width:16px;height:16px;flex:none}
.address{margin-top:14px;font-style:normal;font-size:14px;line-height:20px;font-weight:500;color:#a3adb8}
/* ---------- mobile menu (burger + full-screen panel); hidden on wider screens ---------- */
.burger,.nav-extra{display:none}
@property --scan{syntax:'<angle>';inherits:false;initial-value:0deg}

.copyright{position:absolute;left:max(30px,calc(50% - 581px));right:max(13px,calc(50% - 598px));bottom:14px;display:flex;justify-content:flex-end;font-size:14px;line-height:18px;font-weight:500;color:#a3adb8}

/* breakpoints, everywhere on the site: ≥1280 full layout · 1024–1279 the column narrows ·
   768–1023 tablet (burger menu, stacked sections) · <768 phone */
@media (max-width:1023px){
  .wrap{width:auto;margin:0 32px}
  /* the header stays on screen so the menu is always one tap away */
  .site-header{position:sticky;top:0;z-index:40;height:60px}
  .site-header::before{content:"";position:absolute;inset:0;background:rgba(10,23,32,.78);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid rgba(95,230,210,.08)}
  /* faint cyan shade under the header, only once the page is scrolled away from the top */
  .site-header::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:0 6px 18px -6px rgba(69,201,179,.26);opacity:0;transition:opacity .3s}
  .is-scrolled .site-header::after{opacity:1}
  .site-header .wrap{height:60px;padding-top:0}
  .site-header .logo-img{height:26px}
  .logo{position:relative;z-index:2}
  section[id]{scroll-margin-top:76px}

  .burger{position:relative;z-index:2;display:grid;place-items:center;width:44px;height:44px;margin-left:auto;padding:0;border-radius:var(--r);cursor:pointer;
    border:1.5px solid var(--edge);background:rgba(18,36,44,.85);
    box-shadow:0 0 14px rgba(50,200,180,.25),inset 0 0 10px rgba(70,220,205,.12);transition:border-color .3s,box-shadow .3s}
  .burger[aria-expanded="true"]{border-color:#45c9b3;box-shadow:0 0 18px rgba(69,201,179,.45),inset 0 0 12px rgba(70,220,205,.2)}
  /* a light runs once round the frame when the menu opens */
  .burger::before{content:"";position:absolute;inset:-1.5px;padding:1.5px;border-radius:inherit;pointer-events:none;opacity:0;
    background:conic-gradient(from var(--scan),transparent 0 62%,#b8fff1 82%,transparent 100%);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
  .burger[aria-expanded="true"]::before{animation:burger-scan .7s cubic-bezier(.6,0,.3,1)}
  @keyframes burger-scan{0%{--scan:0deg;opacity:1}85%{opacity:1}100%{--scan:360deg;opacity:0}}
  .burger-lines{position:relative;width:20px;height:14px}
  .burger-lines i{position:absolute;right:0;height:2px;border-radius:2px;background:#7ff0dc;box-shadow:0 0 6px rgba(95,230,210,.7);
    transition:top .45s cubic-bezier(.7,0,.2,1),width .4s cubic-bezier(.7,0,.2,1),transform .45s cubic-bezier(.7,0,.2,1),opacity .25s}
  .burger-lines i:nth-child(1){top:0;width:20px}
  .burger-lines i:nth-child(2){top:6px;width:12px}
  .burger-lines i:nth-child(3){top:12px;width:16px}
  .burger:hover .burger-lines i{width:20px}
  .burger[aria-expanded="true"] .burger-lines i:nth-child(1){top:6px;width:20px;transform:rotate(45deg)}
  .burger[aria-expanded="true"] .burger-lines i:nth-child(2){width:0;opacity:0}
  .burger[aria-expanded="true"] .burger-lines i:nth-child(3){top:6px;width:20px;transform:rotate(-45deg)}

  /* the nav becomes a full-screen panel that opens as a circle from the burger */
  .nav{position:fixed;inset:0;z-index:1;margin:0;display:flex;flex-direction:column;align-items:stretch;padding:88px 24px 32px;overflow-y:auto;
    background:
     radial-gradient(ellipse 120% 55% at 100% 0%,rgba(31,110,100,.5),rgba(10,23,32,0) 62%),
     linear-gradient(rgba(95,230,210,.045) 1px,transparent 1px) 0 0/32px 32px,
     linear-gradient(90deg,rgba(95,230,210,.045) 1px,transparent 1px) 0 0/32px 32px,
     #0a1720;
    clip-path:circle(0 at calc(100% - 38px) 30px);visibility:hidden;
    transition:clip-path .45s cubic-bezier(.7,0,.2,1),visibility 0s linear .45s}
  .menu-open .nav{clip-path:circle(150vmax at calc(100% - 38px) 30px);visibility:visible;transition:clip-path .45s cubic-bezier(.7,0,.2,1),visibility 0s}
  .nav .n1,.nav .n2,.nav .n3{display:flex;align-items:center;justify-content:space-between;margin:0;padding:18px 2px;border-bottom:1px solid rgba(95,230,210,.14);
    font-size:28px;line-height:34px;font-weight:600;color:#eef4f8}
  .nav .n1::after,.nav .n2::after,.nav .n3::after{content:"";width:22px;height:22px;flex:none;opacity:.75;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6' fill='none' stroke='%237ff0dc' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain}
  .nav .btn-nav{left:0;width:100%;height:56px;margin-top:32px;font-size:17px}
  .nav-extra{display:flex;flex-direction:column;gap:10px;margin-top:auto;padding-top:32px;font-size:15px;line-height:20px;color:#8b97a2}
  .nav-extra a{color:#8b97a2;font-size:15px;padding:4px 0}
  /* items arrive one after another once the circle has opened */
  /* items keep their size: on a short screen (a phone turned sideways) the panel scrolls instead of squashing them */
  .nav > *{flex-shrink:0;opacity:0;transform:translateY(16px);transition:opacity .25s,transform .25s}
  .menu-open .nav > *{opacity:1;transform:none;transition:opacity .4s ease .14s,transform .5s cubic-bezier(.2,.8,.2,1) .14s}
  .menu-open .nav > :nth-child(2){transition-delay:.19s}
  .menu-open .nav > :nth-child(3){transition-delay:.24s}
  .menu-open .nav > :nth-child(4){transition-delay:.29s}
  .menu-open .nav > :nth-child(5){transition-delay:.34s}
  /* lock the page on body: locking html would make body its own scroller and unstick the header */
  .menu-open body{overflow:hidden}
  /* with the menu open the header strip shows the panel's own background above the panel, so items scrolled
     up slide under it (fading out) instead of across the logo; same layers, sized to the screen like the panel */
  .menu-open .site-header::before{z-index:2;bottom:-16px;border-bottom-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;
    background:
     radial-gradient(ellipse 120% 55% at 100% 0%,rgba(31,110,100,.5),rgba(10,23,32,0) 62%) 0 0/100% 100vh no-repeat,
     linear-gradient(rgba(95,230,210,.045) 1px,transparent 1px) 0 0/32px 32px,
     linear-gradient(90deg,rgba(95,230,210,.045) 1px,transparent 1px) 0 0/32px 32px,
     #0a1720;
    -webkit-mask-image:linear-gradient(#000 calc(100% - 16px),transparent);mask-image:linear-gradient(#000 calc(100% - 16px),transparent)}
  .menu-open .logo,.menu-open .burger{z-index:3}
  /* footer: the brand on its own row, the two link columns side by side under it */
  .foot{grid-template-columns:1fr 1fr;row-gap:36px;column-gap:32px}
  .foot > :first-child{grid-column:1/-1}
  .site-footer{height:auto;padding-top:80px;padding-bottom:64px}
  .copyright{left:32px;right:32px}
}

@media (max-width:767px){
  .wrap{width:auto;margin:0 16px}
  p br{display:none}
  .foot{grid-template-columns:1fr;row-gap:24px}
  .foot > :first-child{grid-column:auto}
  .copyright{position:static;flex-direction:column;gap:6px;margin:32px 16px 0}
  .site-footer{height:auto;padding-top:60px;padding-bottom:32px}
}

@media (max-width:1023px) and (prefers-reduced-motion:reduce){
  .nav,.nav > *,.burger-lines i{transition:none!important}
  .burger::before{animation:none!important}
}

/* ---------- legal documents ----------
   Privacy notice, cookie notice, ...: title band, then the document with a sticky table of contents on wide screens */
body{background:var(--ink)}
.doc-band,.site-footer{background:var(--slate)}

/* ---------- title band ---------- */
.doc-hero{position:relative;overflow:hidden;padding:64px 0 56px}
.doc-hero::before{content:"";position:absolute;right:-160px;top:-260px;width:760px;height:620px;pointer-events:none;
  background:radial-gradient(ellipse 50% 50% at center,rgba(31,110,100,.38) 0%,rgba(24,78,75,.2) 45%,rgba(10,23,32,0) 100%)}
.back{display:inline-flex;align-items:center;gap:10px;padding:4px 0;font-size:15px;font-weight:500;color:#6bb6af}
.back:hover{color:#9fe3d6}
.back svg{width:14px;height:10px}
.doc-hero h1{margin-top:22px;font-weight:600;font-size:56px;line-height:62px;color:#fff;-webkit-text-stroke:.3px #eef2f5}
.doc-updated{margin-top:12px;font-size:16px;line-height:22px;color:#8b97a2}
.doc-tabs{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.doc-tabs a{display:inline-flex;align-items:center;height:38px;padding:0 16px;border-radius:999px;font-size:15px;font-weight:500;color:#b9c6cd;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px #2c3742}
.doc-tabs a:hover{color:#e6edf2;box-shadow:inset 0 0 0 1px var(--edge)}
.doc-tabs a[aria-current="page"]{color:#c4f4ec;background:rgba(70,220,205,.13);box-shadow:inset 0 0 0 1px rgba(95,230,210,.3)}

/* ---------- document ---------- */
.doc{display:grid;grid-template-columns:250px minmax(0,760px);column-gap:72px;align-items:start;padding:64px 0 24px}
.doc--single{grid-template-columns:minmax(0,760px)}
.toc{position:sticky;top:24px;max-height:calc(100vh - 48px);overflow:auto}
.toc-title{font-size:13px;line-height:16px;font-weight:600;text-transform:uppercase;color:#a3adb8}
.toc ol{list-style:none;margin-top:12px;border-left:1px solid #2f3a46}
.toc a{display:block;margin-left:-1px;padding:6px 0 6px 14px;border-left:1px solid transparent;font-size:14px;line-height:19px;color:#a3adb8}
.toc a:hover{color:#e6edf2;border-left-color:var(--edge)}
/* the section being read: main.js marks its link while the page scrolls, and at once on a click */
.toc a[aria-current="location"]{margin-left:-2px;border-left:3px solid var(--teal);padding-left:13px;font-weight:600;color:#eef4f8;
  background:linear-gradient(90deg,rgba(95,230,210,.12),rgba(95,230,210,0) 80%)}

.doc-body{font-size:16px;line-height:27px;color:#a3afbb}
.doc-body > :first-child{margin-top:0}
.doc-body h2{margin-top:52px;font-weight:600;font-size:28px;line-height:34px;color:#eef4f8;scroll-margin-top:24px}
.doc-body h3,.doc-body h2.doc-sub{margin-top:30px;font-weight:600;font-size:19px;line-height:26px;color:#d6dde6}
.doc-body p{margin-top:14px}
.doc-body h2 + p,.doc-body h3 + p{margin-top:10px}
.doc-body ul,.doc-body ol{margin-top:12px;padding-left:22px}
.doc-body li{margin-top:8px;padding-left:4px}
.doc-body li::marker{color:var(--teal-2)}
.doc-body b,.doc-body strong{font-weight:600;color:#d6dde6}
.doc-body a{padding:4px 0;color:#78d5c3;text-decoration:underline;text-decoration-color:rgba(120,213,195,.4);text-underline-offset:3px;overflow-wrap:anywhere}
.doc-body a:hover{text-decoration-color:currentColor}
/* a button inside a document (e.g. "Email a privacy request") keeps the button look, not the link one */
.doc-body a.doc-cta{margin-top:6px;padding:0 28px;color:var(--ink);text-decoration:none}
.doc-body code{padding:1px 6px;border-radius:6px;background:rgba(255,255,255,.07);font-family:inherit;font-weight:600;color:#d6dde6}
/* the documents' own link index: shown where the sidebar table of contents is hidden */
.doc-body .doc-index{list-style:none;padding-left:0}
.doc-body .doc-index li{margin-top:6px;padding-left:0}
.table-scroll{margin-top:18px;overflow-x:auto;border:1px solid #2f3a46;border-radius:var(--r)}
.doc-body table{width:100%;min-width:560px;border-collapse:collapse;font-size:15px;line-height:21px}
.doc-body th{padding:12px 16px;text-align:left;font-weight:600;color:#d6dde6;background:#18202b}
.doc-body td{padding:12px 16px;vertical-align:top;border-top:1px solid #2a3440}

/* the table of contents is the page's index at every width, so a document's own link list would repeat it */
.doc:not(.doc--single) .doc-index{display:none}

@media (max-width:1023px){
  .doc{grid-template-columns:minmax(0,1fr)}
  /* contents move above the document instead of disappearing with the sidebar */
  .toc{position:static;max-height:none;overflow:visible;margin-bottom:36px;padding:18px 20px 12px;border:1px solid #2f3a46;border-radius:var(--r);background:rgba(255,255,255,.02)}
  /* jumps land below the sticky header */
  .doc-body h2{scroll-margin-top:76px}
  .doc{padding-bottom:0}
}

@media (max-width:767px){
  .doc-hero{padding:40px 0 36px}
  .doc-hero h1{font-size:36px;line-height:42px}
  .doc-tabs a{height:34px;padding:0 13px;font-size:14px}
  .doc{padding:40px 0 0}
  .doc-body h2{margin-top:40px;font-size:24px;line-height:30px}
}