/* ════════════════════════════════════════════════════════════════
   Copied verbatim from 7Nodes_Frontend/src/styles/landing.css (hl-*),
   _legal.css (legal-footer) and _newsletter.css (input/button).
   New careers-only rules are prefixed cr- and use the same values.
   ════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; scrollbar-gutter: stable; }
body {
  font-family: 'Roboto', sans-serif; background: #000; color: #fff;
  -webkit-font-smoothing: antialiased; line-height: 1.5;
}
a { text-decoration: none; color: inherit; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, select, textarea { font-family: inherit; }
img { display: block; }

.hl-page { background: #000; color: #fff; min-height: 100vh; display: flex; flex-direction: column; }

/* nav */
.hl-nav { position: sticky; top: 0; z-index: 100; height: 72px; background: #000;
  border-bottom: 1px solid rgba(255,255,255,0.07); display: flex; align-items: center; padding: 0 70px; }
.hl-nav__logo { display: flex; align-items: center; flex-shrink: 0; padding: 12px 0; }
.hl-nav__logo img { height: 46px; width: auto; object-fit: contain; }
.hl-nav__links { display: flex; gap: 32px; margin-left: 40px; }
.hl-nav__link { white-space: nowrap; font-size: 14px; font-weight: 300; color: rgba(255,255,255,0.85); letter-spacing: 0.01em; transition: color 0.15s; }
.hl-nav__link:hover { color: #fff; }
.hl-nav__link--active { color: #fff !important; font-weight: 700; }
.hl-nav__actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; margin-left: auto; }
.hl-nav__btn { padding: 5px 20px; border: 2px solid rgba(255,255,255,0.75); border-radius: 6px; font-size: 13px; color: #fff;
  letter-spacing: 0.01em; transition: background 0.15s, border-color 0.15s; }
.hl-nav__btn:hover { background: rgba(255,255,255,0.09); border-color: #fff; }
.hl-nav__theme-toggle { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 6px;
  border: 2px solid rgba(255,255,255,0.75); color: rgba(255,255,255,0.75); transition: border-color .15s, color .15s, background .15s; }
.hl-nav__theme-toggle:hover { border-color: rgba(255,255,255,0.6); color: #fff; background: rgba(255,255,255,0.07); }

.hl-separator { height: 1px; background: rgba(255,255,255,0.18); margin: 0 40px; }

/* value props */
.hl-valueprops { background: #000; padding: 80px 70px; }
.hl-valueprops__headline { font-size: 48px; font-weight: 300; line-height: 1.2; color: #fff; margin-bottom: 72px; letter-spacing: -0.01em; }
.hl-valueprops__cards { display: grid; grid-template-columns: repeat(3, 1fr); }
.hl-valueprops__card { padding: 40px 36px 48px; display: flex; flex-direction: column; gap: 24px; }
.hl-valueprops__img-row { display: flex; align-items: center; gap: 16px; }
.hl-valueprops__img { width: 112px; height: 112px; object-fit: contain; flex-shrink: 0; }
.hl-valueprops__label { font-size: 22px; font-weight: 300; letter-spacing: -0.01em; color: rgba(255,255,255,0.9); line-height: 1.3; white-space: pre-line; }
.hl-valueprops__body { font-size: 14px; font-weight: 300; line-height: 1.7; color: rgba(255,255,255,0.7); }

/* list rows (pre-solved questions pattern) */
.hl-presolved { background: #000; padding: 0 70px 48px; }
.hl-presolved__rule { height: 1px; background: rgba(255,255,255,0.16); }
.hl-presolved__title { font-size: 20px; font-weight: 300; letter-spacing: 0.06em; color: #fff; padding: 32px 0; }
.hl-presolved__item { width: 100%; color: #fff; display: flex; align-items: flex-start; gap: 28px; padding: 22px 0; text-align: left; transition: opacity .15s; }
.hl-presolved__item:hover { opacity: 0.8; }
.hl-presolved__qnum { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: rgba(255,255,255,0.32); flex-shrink: 0; padding-top: 3px; min-width: 28px; }
.hl-presolved__qtext { font-size: 15px; font-weight: 300; line-height: 1.55; color: rgba(255,255,255,0.88); flex: 1; }
.hl-presolved__desc { font-size: 13px; color: rgba(255,255,255,0.55); line-height: 1.7; font-weight: 300; }

/* sub-page header (common questions pattern) */
.hl-cq-page { background: #000; padding: 64px 70px 80px; }
.hl-cq-title { font-size: 42px; font-weight: 300; color: #fff; line-height: 1.2; margin-bottom: 16px; letter-spacing: -0.01em; }
.hl-cq-header { margin-bottom: 48px; }
.hl-cq-sub { font-size: 15px; font-weight: 300; color: rgba(255,255,255,0.45); line-height: 1.6; max-width: 600px; }
.cr-intro { max-width: 760px; }

.hl-btn-signup { align-self: flex-start; display: inline-block; padding: 12px 32px; background: #000; border: 2px solid rgba(255,255,255,0.8);
  border-radius: 8px; color: #fff; font-size: 14px; font-weight: 500; white-space: nowrap; transition: background .15s, border-color .15s, transform .15s; }
.hl-btn-signup:hover { background: rgba(255,255,255,0.08); border-color: #fff; transform: translateY(-1px); }

.hl-early-access { background: #000; }
.hl-early-access__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; padding: 40px 70px; }
.hl-early-access__text { font-size: 48px; font-weight: 300; line-height: 1.15; color: #fff; letter-spacing: -0.01em; }

.hl-footer { background: #000; padding: 0 70px 28px; margin-top: auto; }
.hl-footer__rule { height: 1px; background: rgba(255,255,255,0.12); margin-bottom: 20px; }
.hl-footer__text { font-size: 13px; color: rgba(255,255,255,0.38); }
.legal-footer__links { display: flex; gap: 20px; margin-bottom: 12px; }
.legal-footer__links a { font-size: 13px; color: rgba(255,255,255,0.6); }
.legal-footer__links a:hover { color: #fff; }

/* inputs: newsletter field */
.nl-signup__input { width: 100%; padding: 12px 16px; background: #000; border: 1px solid rgba(255,255,255,0.18); border-radius: 8px;
  color: #fff; font-size: 14px; outline: none; transition: border-color .15s; }
.nl-signup__input::placeholder { color: rgba(255,255,255,0.3); }
.nl-signup__input:focus { border-color: rgba(255,255,255,0.6); }
.nl-signup__input[aria-invalid="true"] { border-color: #e05c5c; }
.nl-signup__error { font-size: 13px; color: #e05c5c; }

/* ── careers-only (cr-) ───────────────────────────────── */
.cr-back { display: inline-block; font-size: 13px; font-weight: 300; color: rgba(255,255,255,0.55); margin-bottom: 32px; }
.cr-back:hover { color: #fff; }
.cr-role { align-items: center; }
.cr-role__meta { font-size: 13px; font-weight: 300; color: rgba(255,255,255,0.55); margin-top: 4px; }
.cr-role__go { font-size: 20px; color: rgba(255,255,255,0.5); }
.cr-empty { padding: 22px 0; }

.cr-facts { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 24px; margin: 40px 0; padding: 24px 0;
  border-top: 1px solid rgba(255,255,255,0.16); border-bottom: 1px solid rgba(255,255,255,0.16); }
.cr-facts dt { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.32); margin-bottom: 6px; }
.cr-facts dd { font-size: 14px; font-weight: 300; line-height: 1.55; color: rgba(255,255,255,0.88); }

.cr-doc { max-width: 760px; }
.cr-doc section { padding: 8px 0 24px; }
.cr-doc h2 { font-size: 20px; font-weight: 300; letter-spacing: 0.06em; color: #fff; padding: 24px 0 16px; }
.cr-doc h3 { font-size: 15px; font-weight: 500; color: #fff; margin: 16px 0 8px; }
.cr-doc p, .cr-doc li { font-size: 15px; font-weight: 300; line-height: 1.7; color: rgba(255,255,255,0.7); }
.cr-doc p + p { margin-top: 12px; }
.cr-doc a { text-decoration: underline; text-underline-offset: 3px; }
.cr-doc ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.cr-doc li { padding-left: 18px; position: relative; }
.cr-doc li::before { content: ''; position: absolute; left: 0; top: 10px; width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.7); }
.cr-doc li strong { font-weight: 500; color: rgba(255,255,255,0.9); }
.cr-phases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

.cr-form { max-width: 760px; display: flex; flex-direction: column; }
.cr-form fieldset { border: none; padding: 8px 0 32px; display: flex; flex-direction: column; gap: 22px; }
.cr-form legend { font-size: 20px; font-weight: 300; letter-spacing: 0.06em; color: #fff; padding: 24px 0 16px; }
.cr-field { display: flex; flex-direction: column; gap: 8px; }
.cr-field__label { font-size: 14px; font-weight: 400; color: rgba(255,255,255,0.88); line-height: 1.5; }
.cr-field__label em { font-style: normal; color: rgba(255,255,255,0.38); font-weight: 300; }
.cr-field__help { font-size: 13px; font-weight: 300; color: rgba(255,255,255,0.45); line-height: 1.6; }
.cr-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.cr-phone { display: grid; grid-template-columns: minmax(0, 150px) 1fr; gap: 8px; }
.cr-phone select { text-overflow: ellipsis; padding-right: 32px; }
textarea.nl-signup__input { min-height: 150px; resize: vertical; line-height: 1.6; }
select.nl-signup__input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.cr-count { font-size: 12px; font-weight: 300; color: rgba(255,255,255,0.38); align-self: flex-end; }
.cr-choices { display: flex; gap: 10px; flex-wrap: wrap; }
.cr-choice { position: relative; }
.cr-choice input { position: absolute; opacity: 0; }
.cr-choice span { display: inline-block; padding: 9px 20px; border: 1px solid rgba(255,255,255,0.18); border-radius: 8px; font-size: 14px; font-weight: 300; color: rgba(255,255,255,0.85); cursor: pointer; transition: border-color .15s, background .15s; }
.cr-choice input:checked + span { border-color: #fff; background: rgba(255,255,255,0.09); color: #fff; }
.cr-choice input:focus-visible + span { outline: 2px solid rgba(255,255,255,0.6); outline-offset: 2px; }
.cr-drop { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 28px; border: 1px dashed rgba(255,255,255,0.3); border-radius: 8px; cursor: pointer; transition: border-color .15s, background .15s; }
.cr-drop:hover, .cr-drop.is-over { border-color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.04); }
.cr-drop__main { font-size: 15px; font-weight: 300; color: rgba(255,255,255,0.88); }
.cr-drop__file { font-size: 14px; color: #fff; font-weight: 400; }
.cr-consent { display: flex; gap: 12px; align-items: flex-start; font-size: 13px; font-weight: 300; color: rgba(255,255,255,0.6); line-height: 1.6; }
.cr-consent input { margin-top: 4px; accent-color: #fff; }
.cr-consent a { text-decoration: underline; }
.cr-submit { display: flex; align-items: center; gap: 20px; padding-top: 16px; flex-wrap: wrap; }
.cr-ref { font-family: ui-monospace, Menlo, monospace; font-size: 13px; color: rgba(255,255,255,0.55); }
.cr-next { margin-top: 40px; max-width: 760px; }

/* ── LIGHT MODE (copied overrides + cr- equivalents) ── */
[data-theme="light"] body,
[data-theme="light"] .hl-page,
[data-theme="light"] .hl-nav,
[data-theme="light"] .hl-valueprops,
[data-theme="light"] .hl-presolved,
[data-theme="light"] .hl-cq-page,
[data-theme="light"] .hl-early-access,
[data-theme="light"] .hl-footer { background: #F3F3F5; color: #1d1d1f; }
[data-theme="light"] .hl-nav { border-bottom-color: rgba(0,0,0,0.09); }
[data-theme="light"] .hl-nav__link { color: rgba(0,0,0,0.65); }
[data-theme="light"] .hl-nav__link:hover, [data-theme="light"] .hl-nav__link--active { color: #1d1d1f !important; }
[data-theme="light"] .hl-nav__btn { border-color: rgba(0,0,0,0.6); color: #1d1d1f; }
[data-theme="light"] .hl-nav__btn:hover { background: rgba(0,0,0,0.05); border-color: #000; }
[data-theme="light"] .hl-nav__theme-toggle { border-color: rgba(0,0,0,0.6); color: rgba(0,0,0,0.6); }

[data-theme="light"] .hl-valueprops__headline,
[data-theme="light"] .hl-valueprops__label,
[data-theme="light"] .hl-presolved__title,
[data-theme="light"] .hl-presolved__item,
[data-theme="light"] .hl-cq-title,
[data-theme="light"] .hl-early-access__text,
[data-theme="light"] .cr-doc h2, [data-theme="light"] .cr-doc h3,
[data-theme="light"] .cr-form legend { color: #1d1d1f; }
[data-theme="light"] .hl-separator, [data-theme="light"] .hl-presolved__rule, [data-theme="light"] .hl-footer__rule { background: rgba(0,0,0,0.1); }
[data-theme="light"] .hl-valueprops__body { color: rgba(0,0,0,0.55); }
[data-theme="light"] .hl-presolved__qnum { color: rgba(0,0,0,0.3); }
[data-theme="light"] .hl-presolved__qtext { color: rgba(0,0,0,0.8); }
[data-theme="light"] .hl-presolved__desc, [data-theme="light"] .hl-cq-sub { color: rgba(0,0,0,0.5); }
[data-theme="light"] .hl-footer__text { color: rgba(0,0,0,0.38); }
[data-theme="light"] .legal-footer__links a { color: rgba(0,0,0,0.6); }
[data-theme="light"] .hl-btn-signup { background: transparent; border-color: #1d1d1f; color: #1d1d1f; }
[data-theme="light"] .hl-btn-signup:hover { background: rgba(0,0,0,0.06); border-color: #000; color: #000; }
[data-theme="light"] .nl-signup__input { background: #fff; border-color: rgba(0,0,0,0.15); color: #111; }
[data-theme="light"] .nl-signup__input::placeholder { color: rgba(0,0,0,0.35); }
[data-theme="light"] .nl-signup__input:focus { border-color: rgba(0,0,0,0.6); }
[data-theme="light"] .cr-back, [data-theme="light"] .cr-role__meta, [data-theme="light"] .cr-field__help, [data-theme="light"] .cr-consent, [data-theme="light"] .cr-ref { color: rgba(0,0,0,0.5); }
[data-theme="light"] .cr-role__go, [data-theme="light"] .cr-count, [data-theme="light"] .cr-field__label em { color: rgba(0,0,0,0.38); }
[data-theme="light"] .cr-facts { border-color: rgba(0,0,0,0.1); }
[data-theme="light"] .cr-facts dt { color: rgba(0,0,0,0.3); }
[data-theme="light"] .cr-facts dd, [data-theme="light"] .cr-field__label, [data-theme="light"] .cr-drop__main { color: rgba(0,0,0,0.8); }
[data-theme="light"] .cr-doc p, [data-theme="light"] .cr-doc li { color: rgba(0,0,0,0.6); }
[data-theme="light"] .cr-doc li::before { background: #1d1d1f; }
[data-theme="light"] .cr-doc li strong, [data-theme="light"] .cr-drop__file { color: #1d1d1f; }
[data-theme="light"] .cr-choice span { border-color: rgba(0,0,0,0.15); color: rgba(0,0,0,0.75); background: #fff; }
[data-theme="light"] .cr-choice input:checked + span { border-color: #1d1d1f; background: rgba(0,0,0,0.06); color: #1d1d1f; }
[data-theme="light"] .cr-drop { border-color: rgba(0,0,0,0.25); }
[data-theme="light"] .cr-drop:hover, [data-theme="light"] .cr-drop.is-over { border-color: rgba(0,0,0,0.6); background: rgba(0,0,0,0.03); }

/* responsive — same breakpoints/paddings as landing.css */
@media (max-width: 1024px) {
  .cr-facts { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .hl-valueprops__cards, .cr-phases { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .hl-nav, .hl-valueprops, .hl-presolved, .hl-cq-page, .hl-early-access__inner, .hl-footer { padding-left: 20px; padding-right: 20px; }
  .hl-nav__links { display: none; }
  .hl-separator { margin: 0 20px; }
  .hl-valueprops__headline, .hl-early-access__text { font-size: 32px; }
  .hl-cq-title { font-size: 32px; }
  .hl-valueprops__card { padding: 24px 0; }
  .cr-facts, .cr-row { grid-template-columns: 1fr 1fr; }
  .cr-row { grid-template-columns: 1fr; }
  .hl-presolved__item { gap: 16px; }
}

/* ── Static-site additions ── */
/* Both logos are in the page; the theme decides which shows, so no JS swap and no flash. */
.logo-light { display: none !important; }
[data-theme="light"] .logo-dark { display: none !important; }
[data-theme="light"] .logo-light { display: block !important; }
.hl-btn-signup:disabled { opacity: 0.5; cursor: default; transform: none; }
.cr-status { font-size: 13px; font-weight: 300; color: rgba(255,255,255,0.6); }
[data-theme="light"] .cr-status { color: rgba(0,0,0,0.55); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Missing answers: the same red as .nl-signup__input[aria-invalid] on the groups that
   are not a single text box. */
.cr-drop[aria-invalid="true"],
[data-theme="light"] .cr-drop[aria-invalid="true"] { border-color: #e05c5c; border-style: solid; }
[role="radiogroup"][aria-invalid="true"] .cr-choice span,
[data-theme="light"] [role="radiogroup"][aria-invalid="true"] .cr-choice span { border-color: #e05c5c; }
.cr-consent[aria-invalid="true"] span,
[data-theme="light"] .cr-consent[aria-invalid="true"] span { color: #e05c5c; }
.cr-consent[aria-invalid="true"] input { outline: 2px solid #e05c5c; outline-offset: 2px; }