/* Signify Innovation Day 2026 — landing / registration / thank-you
 *
 * Values come from the approved Penpot boards. Where the design was internally
 * inconsistent (see "Normalisations" in web/README.md) the value here is the
 * normalised one and the original is noted in a comment.
 *
 * Layout model: bands run full-bleed, content sits in a centred container.
 * That is exactly how the 1920 comps are built, so it scales honestly.
 */

/* ---------------------------------------------------------------- fonts */
@font-face {
  font-family: 'SignifyRelative';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/SignifyRelative-Book.woff2') format('woff2');
}
@font-face {
  font-family: 'SignifyRelative';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/SignifyRelative-Bold.woff2') format('woff2');
}

/* ---------------------------------------------------------------- tokens */
:root {
  --sig-green:      #00E487;
  --event-green:    #38E177;
  --cta-blue:       #2E3BDF;
  --ink:            #0A0A0A;
  --black:          #000000;
  --panel-dark:     #3C3C41;
  --surface-light:  #F5F5F5;
  --card:           #F8F8F8;
  --text:           #262626;
  --text-muted:     #4A4A4A;
  --text-dim:       #9A9A9A;
  --label-ink:      #1A1A1A;
  --footer-bg:      #1A1A1A;
  --input-border:   #C8C8C8;
  --required:       #E02020;
  --white:          #FFFFFF;

  --font: 'SignifyRelative', Arial, Helvetica, sans-serif;
  --lh: 1.2;

  /* One container for every band. The comps use 307/340/366/381 depending on
     the section; 1306 (the segment grid) is the most structured of them and
     everything else is aligned to it. See README "Normalisations". */
  --container: 1306px;
  --measure-intro: 1016px;   /* intro paragraph keeps its own tighter measure */
  --measure-agenda: 1242px;
  --gutter: 24px;
}

/* ---------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  line-height: var(--lh);
  color: var(--text);
  background: var(--white);
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, figure { margin: 0; }
button { font: inherit; }

/* Skip link — the design has no focus states at all, so these are additions.
   Documented in README under "Accessibility". */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--sig-green); color: var(--ink);
  padding: 12px 20px; font-weight: 700; text-decoration: none;
}
.skip-link:focus { left: 0; }

:where(a, button, input, select, [tabindex]):focus-visible {
  outline: 3px solid var(--sig-green);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------- layout */
/* --container is the CONTENT width (1306, matching the segment grid). The gutter
   is added on top so the content measures 1306 at wide viewports and still has
   breathing room on small ones. */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.band { width: 100%; }

/* ---------------------------------------------------------------- header */
.site-header {
  background: var(--black);
  min-height: 96px;
  display: flex;
  align-items: center;
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.site-logo img { width: 127px; height: auto; }
.site-nav {
  display: flex;
  gap: 48px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav a {
  color: var(--white);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
}
.site-nav a:hover { color: var(--sig-green); }

/* ---------------------------------------------------------------- hero */
.hero {
  background: var(--black);
  padding-block: 0;
}
.hero .container { padding-inline: var(--gutter); }
.hero img {
  width: 100%;
  max-width: 1308px;
  margin-inline: auto;
}

/* ---------------------------------------------------------------- intro */
.intro {
  background: var(--white);
  padding-block: 65px 57px;
}
.intro-body {
  max-width: var(--measure-intro);
  margin-inline: auto;
  font-size: 22px;
  color: var(--text);
  text-align: center;
}
.intro-body p { margin-block: 0 1.2em; }
.intro-body p:last-child { margin-bottom: 0; }
.intro-body strong { font-weight: 700; display: block; }

/* ---------------------------------------------------------------- headings */
.section-title {
  font-size: 36px;
  font-weight: 700;
  color: var(--sig-green);
  text-align: center;
}
.section-title--ink { color: var(--text); }

/* ---------------------------------------------------------------- highlights */
.highlights {
  background-image: url('/images/gradient-band.png');
  background-size: cover;
  background-position: center;
  background-color: var(--event-green); /* fallback while the image loads */
  padding-block: 43px 70px;
}
.highlights .section-title { margin-bottom: 36px; }
.card-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 36px;
}
.card {
  background: var(--card);
  border-radius: 15px;
  padding: 28px;
  flex: 0 1 350px;
  min-height: 228px;
}
.card--wide { flex-basis: 366px; }
.card--row2 { flex-basis: 350px; min-height: 169px; }
.card-eyebrow {
  font-size: 18px;
  font-weight: 700;
  color: #3D3D3D;
  margin-bottom: 15px;
}
.card-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 14px;
}
.card-desc {
  font-size: 15px;
  color: var(--text-muted);
}

/* ---------------------------------------------------------------- segments */
.segments {
  background: var(--panel-dark);
  padding-block: 81px 83px;
}
.segments .section-title { margin-bottom: 43px; }
.segment-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 44px 24px;
}
.segment-figure {
  position: relative;
  margin: 0 0 14px 0;
}
.segment-figure img {
  width: 100%;
  aspect-ratio: 309 / 180;
  object-fit: cover;
}
/* The label bar overlays the bottom edge of the photo. This is the landing
   treatment; the EDM sits its bar underneath the image instead. */
.segment-label {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  background: var(--sig-green);
  color: var(--label-ink);
  font-size: 16px;
  font-weight: 700;
  padding: 4px 11px;
  min-height: 28px;
}
.segment-desc {
  font-size: 14px;
  color: var(--white);
}

/* ---------------------------------------------------------------- agenda */
.agenda {
  background: var(--surface-light);
  padding-block: 75px 82px;
}
.agenda .section-title { margin-bottom: 36px; }
.agenda-grid {
  max-width: var(--measure-agenda);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 552fr 220fr 437fr;
  gap: 16px;
  align-items: stretch;
}
.agenda-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.agenda-head {
  color: var(--white);
  font-size: 22px;
  font-weight: 700;
  padding: 23px 22px;
  min-height: 96px;
}
.agenda-head--main { background: var(--sig-green); }
.agenda-head--dive { background: var(--cta-blue); min-height: 99px; padding-inline: 30px; }
.agenda-row {
  background: var(--white);
  padding: 18px 20px;
  min-height: 90px;
}
.agenda-row--dive { padding: 30px 28px; min-height: 83px; }
.agenda-row--short { min-height: 58px; }
.agenda-name {
  font-size: 19px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 11px;
}
.agenda-name:last-child { margin-bottom: 0; }
.agenda-sub {
  font-size: 16px;
  color: var(--text-muted);
}
.agenda-dive-item {
  font-size: 18px;
  font-weight: 400;
  color: var(--text);
}
.agenda-lunch {
  background: var(--white);
  display: flex;
  align-items: center;
  padding: 20px;
  flex: 1;
}
.agenda-lunch-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}

/* ---------------------------------------------------------------- details */
.details {
  background: var(--panel-dark);
  padding-block: 70px 68px;
  color: var(--white);
}
.details .section-title {
  font-size: 32px;
  margin-bottom: 41px;
}
.details-grid {
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-content: center;
  gap: 28px 60px;
}
.detail {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.detail img { width: 50px; height: 50px; flex: none; }
.detail-label {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 4px;
}
.detail-value {
  font-size: 17px;
  line-height: 1.3;
}
.detail--venue { grid-column: 1 / -1; }

/* ---------------------------------------------------------------- footer */
.site-footer {
  background: var(--footer-bg);
  min-height: 140px;
  display: flex;
  align-items: center;
  color: var(--white);
}
.site-footer .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.footer-copy { font-size: 14px; }
.footer-privacy { font-size: 14px; color: var(--text-dim); margin-top: 9px; }
.footer-privacy a { color: var(--text-dim); }
.footer-social { text-align: right; }
.footer-social-label { font-size: 15px; font-weight: 700; margin-bottom: 8px; }
.social-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 9px;
  align-items: center;
  justify-content: flex-end;
}
.social-list a { display: block; }
.social-list img { width: 17px; height: 17px; }
.social-list li:last-child img { width: 15px; height: 15px; }

/* ---------------------------------------------------------------- register */
.register {
  background: var(--white);
  padding-block: 86px 71px;
}
.register-card {
  background: var(--surface-light);
  max-width: 1309px;
  margin-inline: auto;
  padding: 44px 77px 64px;
  border-radius: 0;
}
.register-title {
  font-size: 26px;
  font-weight: 700;
  color: var(--event-green);
  text-align: center;
  margin-bottom: 39px;
}
.field-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 25px 116px;
}
.field label {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 7px;
}
.field .req { color: var(--required); }
.field input,
.field select {
  width: 100%;
  height: 49px;
  padding: 0 15px;
  font-family: var(--font);
  font-size: 14px;
  color: var(--text);
  background: var(--white);
  border: 1px solid var(--input-border);
  border-radius: 4px;
}
.field select:invalid { color: var(--text-dim); }
.field input::placeholder { color: var(--text-dim); }

.optional-block {
  background: var(--panel-dark);
  border-radius: 10px;
  color: var(--white);
  padding: 24px 31px;
  margin-top: 36px;
  border: 0;
  min-inline-size: 0; /* fieldset defaults to min-content width; this lets it fill */
}
/* A <legend> is positioned on the fieldset's border box by default, which floats
   it out of the padded area. Floating it makes it flow as a normal block while
   keeping the fieldset/legend semantics the radio group needs. */
.optional-title {
  float: left;
  width: 100%;
  padding: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--sig-green);
  margin-bottom: 13px;
}
.optional-block::after { content: ''; display: table; clear: both; }
.optional-desc { font-size: 14px; line-height: 1.5; }
.optional-desc ul { margin: 0; padding-left: 18px; }
.optional-question {
  font-size: 14px;
  font-weight: 700;
  margin: 20px 0 10px;
}
.radio-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  margin-bottom: 8px;
}
.radio-row:last-child { margin-bottom: 0; }
.radio-row input { accent-color: var(--sig-green); width: 16px; height: 16px; margin: 0; }

.consent { margin-top: 30px; font-size: 14px; color: var(--text); }
.consent p { margin-bottom: 12px; }
.consent-radios { display: flex; gap: 40px; margin-bottom: 22px; }
.consent-radios .radio-row { margin-bottom: 0; }

.btn-submit {
  margin-top: 25px;
  min-width: 173px;
  height: 53px;
  padding: 0 24px;
  background: var(--sig-green);
  color: var(--white);
  font-size: 16px;
  font-weight: 700;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}
.btn-submit:hover { filter: brightness(0.94); }

/* ---------------------------------------------------------------- popup */
.popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 50;
}
.popup-card {
  background: rgba(247, 247, 247, 0.97);
  border-radius: 15px;
  width: 100%;
  max-width: 880px;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 40px;
}
.popup-title {
  font-size: 36px;
  font-weight: 700;
  color: var(--sig-green);
  margin-bottom: 26px;
}
.popup-line { font-size: 20px; color: var(--text); }
.popup-line--em { font-size: 20px; font-weight: 700; color: var(--sig-green); margin-top: 6px; }
.popup-back {
  margin-top: 76px;
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
}
.popup-back:hover { text-decoration: underline; }

/* ================================================================ RESPONSIVE
 * None of this was designed — the comps exist only at 1920. Every breakpoint
 * below is an invented decision. They are listed in web/README.md under
 * "Invented decisions" for client sign-off.
 * ============================================================== */

/* Tablet: segments and cards drop to 2-up */
@media (max-width: 1100px) {
  .segment-grid { grid-template-columns: repeat(2, 1fr); }
  .agenda-grid {
    grid-template-columns: 1fr;
    max-width: 700px;
  }
  /* Agenda stacks main -> lunch -> optional, preserving reading order */
  .agenda-lunch { min-height: 90px; justify-content: center; text-align: center; }
  .field-grid { gap: 25px 40px; }
  .register-card { padding-inline: 40px; }
}

@media (max-width: 900px) {
  .intro-body { font-size: 19px; }
  .section-title { font-size: 30px; }
  .details .section-title { font-size: 28px; }
  .card-grid { gap: 24px; }
  .card, .card--wide, .card--row2 { flex-basis: 320px; min-height: 0; }
}

/* Cards go to a real 2-column grid rather than flex-wrap, so the five cards
   land 2 / 2 / 1 instead of leaving an orphan mid-set. flex-basis is ignored
   on grid items, so the desktop bases above do not need unsetting. */
@media (max-width: 768px) {
  .card-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .card, .card--wide, .card--row2 { min-height: 0; padding: 18px; }
  .card-eyebrow { font-size: 13px; margin-bottom: 10px; }
  .card-title { font-size: 17px; margin-bottom: 10px; }
  .card-desc { font-size: 13px; }
}

@media (max-width: 768px) {
  :root { --gutter: 20px; }
  .site-header .container { flex-direction: column; gap: 14px; }
  .site-header { padding-block: 16px; }
  .site-nav { gap: 24px; }
  .intro { padding-block: 44px 40px; }
  .highlights, .segments, .agenda, .details { padding-block: 48px; }
  .field-grid { grid-template-columns: 1fr; gap: 18px; }
  .register-card { padding: 32px 24px 40px; }
  .register { padding-block: 40px; }
  .details-grid { grid-template-columns: 1fr; gap: 24px; }
  .detail--venue { grid-column: auto; }
  .site-footer .container { flex-direction: column; text-align: center; gap: 18px; }
  .footer-social { text-align: center; }
  .footer-social img { margin-inline: auto; }
  .popup-title { font-size: 28px; }
  .popup-line, .popup-line--em { font-size: 17px; }
  .popup-back { margin-top: 44px; }
  .popup-card { min-height: 0; padding: 36px 24px; }
}

/* Phone. The segment grid and the cards both stay 2-up here on purpose — they
   do not collapse to a single column. Type and padding come down instead so two
   columns still read at 320px. */
@media (max-width: 560px) {
  .segment-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 14px; }
  .segment-label { font-size: 12px; padding: 4px 8px; min-height: 24px; }
  .segment-desc { font-size: 12px; }
  .card-grid { gap: 12px; }
  .card, .card--wide, .card--row2 { padding: 14px; }
  .card-eyebrow { font-size: 12px; margin-bottom: 8px; }
  .card-title { font-size: 15px; margin-bottom: 8px; }
  .card-desc { font-size: 12px; }
  .section-title { font-size: 26px; }
  .intro-body { font-size: 17px; }
  .site-nav { font-size: 14px; gap: 16px; }
  .agenda-head { font-size: 19px; min-height: 0; }
  .agenda-head--dive { min-height: 0; }
  .consent-radios { gap: 24px; }
}

/* Users who asked for less motion get no hover transitions */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}