/* Helix365 register-interest site. Colours, type, radii and shadows come from helix-tokens.css
   (copied from the Helix365 app, resources/brand). No inline style, no external resource. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/InterVariable.woff2") format("woff2");
}

*, ::before, ::after { box-sizing: border-box; }
html {
  font-family: var(--font-sans);
  color: var(--color-fg);
  background: var(--color-surface);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--text-base--line-height);
  overflow-wrap: break-word;
}
body > main { flex: 1 0 auto; }
img { max-width: 100%; height: auto; }
h1, h2, h3 { margin: 0 0 12px; font-weight: 700; letter-spacing: var(--tracking-tight); }
h1 { font-size: var(--text-4xl); line-height: var(--text-4xl--line-height); }
h2 { font-size: var(--text-3xl); line-height: var(--text-3xl--line-height); }
h3 { font-size: var(--text-lg); line-height: var(--text-lg--line-height); font-weight: 600; }
p { margin: 0 0 12px; }
a { color: var(--color-link); text-decoration: underline; text-underline-offset: 0.15em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 2px; }

.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 760px; }

.skip-link { position: absolute; left: 8px; top: -48px; padding: 8px 12px; background: var(--color-surface); border-radius: var(--radius-md); z-index: 10; }
.skip-link:focus { top: 8px; }

.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px;
  border: 1px solid transparent; border-radius: var(--radius-md);
  font: inherit; font-size: var(--text-sm); font-weight: 600; text-decoration: none; cursor: pointer;
}
.button-large { min-height: 48px; padding: 0 22px; font-size: var(--text-base); }
.button-primary { background: var(--color-primary-600); color: var(--color-neutral-0); }
.button-primary:hover { background: var(--color-primary-700); }
.button-secondary { background: var(--color-surface); color: var(--color-primary-700); border-color: var(--color-primary-300); }
.button-secondary:hover { background: var(--color-primary-50); }

.site-header { border-bottom: 1px solid var(--color-border); background: var(--color-surface); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; }
.brand { display: inline-flex; align-items: center; min-height: 44px; }
.brand img { display: block; }
.badge {
  display: inline-block; padding: 4px 12px; border-radius: 999px;
  background: var(--color-primary-50); color: var(--color-primary-700);
  font-size: var(--text-sm); font-weight: 600; white-space: nowrap;
}

.hero { background: var(--color-primary-50); padding: 64px 0; }
.hero-inner { display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: center; }
.hero h1 {
  font-size: var(--text-5xl); line-height: var(--text-5xl--line-height);
  letter-spacing: var(--tracking-tighter); color: var(--color-primary-950); margin-bottom: 16px;
}
.eyebrow { color: var(--color-primary-700); font-weight: 600; font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.04em; }
.lead { font-size: var(--text-lg); line-height: var(--text-lg--line-height); color: var(--color-fg-muted); }
.who { font-weight: 600; }
.actions { margin-top: 24px; }

.dates {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-md); padding: 28px;
}
.dates h2 { font-size: var(--text-lg); line-height: var(--text-lg--line-height); }
.dates dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0 0 16px; }
.dates dt { font-weight: 700; color: var(--color-primary-700); }
.dates dd { margin: 0; }
.dates p { color: var(--color-fg-muted); font-size: var(--text-sm); line-height: var(--text-sm--line-height); margin: 0; }

.accreditations { padding: 32px 0 36px; background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.accreditations h2 {
  font-size: var(--text-sm); line-height: var(--text-sm--line-height); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-fg-muted); text-align: center; margin-bottom: 20px;
}
.badge-row { display: flex; flex-wrap: wrap; align-items: flex-start; margin: 0; padding: 0; list-style: none; }
.badge-row-band { justify-content: center; gap: 20px 24px; }
.badge-row-band .badge-item { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 104px; text-align: center; white-space: nowrap; }
.badge-row-band img { display: block; height: 64px; width: auto; }
.badge-label { color: var(--color-fg-muted); font-size: var(--text-xs); line-height: var(--text-xs--line-height); font-weight: 600; }

.outcomes { padding: 56px 0; border-bottom: 1px solid var(--color-border); }
.outcome-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 24px 0 0; padding: 0; list-style: none; }
.outcome-list li { border-top: 3px solid var(--color-accent-500); padding-top: 16px; }
.outcome-list p { color: var(--color-fg-muted); }

.register { padding: 64px 0; background: var(--color-neutral-50); }
.register-inner { display: grid; grid-template-columns: 1fr 1.3fr; gap: 48px; align-items: start; }
.form {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); padding: 28px;
}
.field { margin-bottom: 20px; }
.field label { display: block; font-weight: 600; margin-bottom: 4px; }
.field .hint { color: var(--color-fg-muted); font-size: var(--text-sm); line-height: var(--text-sm--line-height); margin: 0 0 6px; }
.field input[type="text"], .field input[type="email"], .field select {
  display: block; width: 100%; min-height: 44px; padding: 8px 12px;
  border: 1px solid var(--color-border-control); border-radius: var(--radius-md);
  font: inherit; color: var(--color-fg); background: var(--color-surface);
}
.has-error input[type="text"], .has-error input[type="email"], .has-error select { border: 2px solid var(--color-danger); }
.error { color: var(--color-danger); font-weight: 600; font-size: var(--text-sm); line-height: var(--text-sm--line-height); margin: 0 0 6px; }
.error-summary { border: 2px solid var(--color-danger); border-radius: var(--radius-md); padding: 16px; margin-bottom: 20px; }
.error-summary h3 { color: var(--color-danger); }
.error-summary ul { margin: 0; padding-left: 20px; }
.error-summary a { color: var(--color-danger); }
.privacy-summary { background: var(--color-primary-50); border-radius: var(--radius-md); padding: 16px; margin-bottom: 12px; font-size: var(--text-sm); line-height: var(--text-sm--line-height); }
.privacy-summary h3 { font-size: var(--text-base); line-height: var(--text-base--line-height); }
.check { display: flex; gap: 12px; align-items: flex-start; }
.check input { width: 22px; height: 22px; margin: 2px 0 0; flex: none; accent-color: var(--color-primary-600); }
.check label { font-weight: 400; margin: 0; }
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.page { padding: 64px 0; }
.prose h2 { font-size: var(--text-lg); line-height: var(--text-lg--line-height); margin-top: 28px; }
.meta { color: var(--color-fg-muted); font-size: var(--text-sm); }

.site-footer { padding: 32px 0; border-top: 1px solid var(--color-border); background: var(--color-neutral-50); font-size: var(--text-sm); }
.footer-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 24px; align-items: center; }
.footer-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.powered-by { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin: 0; color: var(--color-fg-muted); font-weight: 600; }
.company-logo { display: block; }
.footer-legal { margin-top: 24px; display: flex; flex-direction: column; gap: 16px; }
.badge-row-footer { gap: 12px 16px; padding-top: 24px; border-top: 1px solid var(--color-border); }
.badge-row-footer img { display: block; }
.legal-line { color: var(--color-fg-muted); font-size: var(--text-xs); line-height: var(--text-xs--line-height); margin: 0; }
.footer-links { display: flex; flex-wrap: wrap; gap: 0 20px; margin: 0; padding: 0; list-style: none; }
.footer-links li { white-space: nowrap; }
.footer-links a { display: inline-flex; align-items: center; min-height: 44px; }
.footer-note { color: var(--color-fg-muted); margin: 0; }

@media (max-width: 860px) {
  .hero { padding: 40px 0; }
  .hero-inner, .register-inner, .outcome-list, .footer-inner { grid-template-columns: 1fr; gap: 24px; }
  .hero h1 { font-size: var(--text-4xl); line-height: var(--text-4xl--line-height); }
  h1 { font-size: var(--text-3xl); line-height: var(--text-3xl--line-height); }
  .wrap { padding: 0 16px; }
  .form, .dates { padding: 20px; }
  .powered-by { justify-content: flex-start; }
  .accreditations { padding: 28px 0; }
  .badge-row-band { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 12px; }
  .badge-row-band .badge-item { min-width: 0; white-space: normal; }
  .badge-row-band .badge-item.is-wide { grid-column: span 2; }
  .badge-row-band img { height: 56px; }
  .dates dl { grid-template-columns: 1fr; gap: 0; }
  .dates dd { margin-bottom: 12px; }
}