/* Shared by the plain pages: /privacy, /terms, /support, /join.
   Same faces, colours and card construction as the landing page and
   /verified, so every page on joinlnkd.com reads as one site. The fonts are
   self-hosted from assets/fonts, like the rest of the site. */

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(fonts/outfit-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(fonts/outfit-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(fonts/dm-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(fonts/dm-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --navy: #1B2A4A;
  --ink: #12181F;
  --cream: #F3F1EB;
  --line: #E3DED2;
  --slate: #5E6165;
  --surface: #FFFFFF;
  --coral: #E35D47;

  --r-card: 12px;
  --r-button: 10px;

  --s-2: 8px;
  --s-3: 16px;
  --s-4: 24px;
  --s-5: 32px;
  --s-6: 48px;
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  background: var(--cream);
  color: var(--ink);
  font-family: 'DM Sans', Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--navy); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; border-radius: 4px; }

/* ---------- Frame ---------- */

.site-header, .doc, .site-footer {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding-left: var(--s-3);
  padding-right: var(--s-3);
}

.site-header { padding-top: var(--s-4); padding-bottom: var(--s-4); }
.site-header img { width: 120px; display: block; }

.doc { padding-bottom: var(--s-6); }

@media (min-width: 640px) {
  .doc-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    padding: var(--s-6) var(--s-5);
  }
}

.site-footer {
  padding-top: var(--s-4);
  padding-bottom: var(--s-5);
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  justify-content: space-between;
  font-size: 13px;
  color: var(--slate);
}
.site-footer nav { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); }
.site-footer a { color: var(--slate); text-decoration: none; }
.site-footer a:hover { color: var(--navy); text-decoration: underline; }

/* ---------- Documents (privacy, terms, support) ---------- */

.legal-title, .doc h1 {
  font-family: 'Outfit', Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 32px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin: 0 0 var(--s-2);
  text-wrap: balance;
}

.legal-updated {
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--slate);
  margin-bottom: var(--s-5);
}

.doc h2 {
  font-family: 'Outfit', Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 19px;
  line-height: 1.3;
  color: var(--navy);
  margin: var(--s-5) 0 var(--s-2);
  text-wrap: balance;
}

.doc h3 {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  margin: var(--s-4) 0 var(--s-2);
}

.doc p, .doc li { color: #3A3E44; max-width: 65ch; }
.doc p { margin: 0 0 var(--s-3); }
.doc ul { margin: 0 0 var(--s-3); padding-left: 1.2em; }
.doc li + li { margin-top: 6px; }
.doc strong { color: var(--ink); font-weight: 500; }

.legal-contact {
  margin-top: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--cream);
  border-radius: var(--r-card);
}
.legal-contact p { margin: 0; }

/* ---------- Support ---------- */

.lede { font-size: 17px; color: var(--slate); margin-bottom: var(--s-4); }

.contact-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-4);
  background: var(--navy);
  color: var(--cream);
  border-radius: var(--r-card);
  margin-bottom: var(--s-5);
}
.contact-card p { color: #C9CCD3; margin: 0; }
.contact-card strong { color: var(--cream); display: block; font-size: 17px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  border-radius: var(--r-button);
  border: none;
  font-family: 'Outfit', Helvetica, Arial, sans-serif;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  cursor: pointer;
}
.btn-coral { background: var(--coral); color: #FFFFFF; }
.btn-cream { background: var(--cream); color: var(--navy); }
.btn[aria-disabled="true"] { background: var(--line); color: var(--slate); cursor: default; }

.faq h2 { font-size: 17px; }

/* ---------- Join ---------- */

.join { text-align: center; }
.join .mark { width: 72px; margin: 0 auto var(--s-4); display: block; }
.join h1 { margin-bottom: var(--s-3); }
.join .lede { max-width: 34ch; margin-left: auto; margin-right: auto; }

.code-plate {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--s-3);
  max-width: 100%;
  margin: var(--s-2) 0 var(--s-5);
  padding: var(--s-3) var(--s-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}
/* One line, always: a code broken after "LNKD-" reads as two things. */
.code-plate .code {
  font-family: 'Outfit', Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 26px;
  letter-spacing: 0.06em;
  white-space: nowrap;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.code-plate button {
  border: 1.5px solid var(--line);
  background: var(--surface);
  color: var(--navy);
  border-radius: var(--r-button);
  min-height: 40px;
  padding: 0 14px;
  font-family: 'Outfit', Helvetica, Arial, sans-serif;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}

.steps {
  list-style: none;
  counter-reset: step;
  text-align: left;
  max-width: 340px;
  margin: var(--s-5) auto 0;
  padding: 0;
}
.steps li {
  counter-increment: step;
  display: flex;
  gap: var(--s-3);
  align-items: baseline;
  color: #3A3E44;
}
.steps li + li { margin-top: var(--s-3); }
.steps li::before {
  content: counter(step);
  flex: none;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--cream);
  font-family: 'Outfit', Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center;
}

@media (prefers-reduced-motion: no-preference) {
  .btn { transition: transform 120ms cubic-bezier(.2,.8,.2,1); }
  .btn:active { transform: scale(0.98); }
}