/* ==========================================================================
   Draft Party - CCC 2026 workplace landing page
   Rendition 1c: centred stack, form card over the chevron.
   Brand tokens distilled from design/draft-party-theme.css.
   ========================================================================== */

@font-face {
  font-family: 'Geom Graphic';
  src: url('assets/ggr.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --navy-900: #072b4b;
  --navy-700: #104373;
  --navy-600: #14528c;
  --cyan-100: #81f7ff;
  --cyan-500: #00e3ff;

  --ink: #104373;          /* type on light */
  --ink-soft: #3c5e7a;     /* body copy on light */
  --ink-muted: #5c7d95;    /* secondary copy on light */
  --line: #dde6ee;         /* control borders */
  --line-card: #e3ebf2;    /* card border */
  --surface-soft: #f7fafc; /* role card fill */
  --danger: #c1121f;

  --edge: linear-gradient(90deg, #00e3ff 0%, #81f7ff 50%, #00e3ff 100%);
  --font-display: 'Geom Graphic', 'Montserrat', system-ui, sans-serif;
  --font-body: 'Montserrat', system-ui, -apple-system, sans-serif;

  /* Layout values that shift between the desktop and mobile artboards. */
  --chevron-height: 112px;
  --card-lift: -72px;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  max-width: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  background: #fff;
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  /* Sticky footer: the main area grows so the footer sits at the bottom of
     tall viewports instead of leaving white space under it. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

img { max-width: 100%; }

a { color: var(--navy-700); text-decoration: none; }
a:hover { color: #009ed9; text-decoration: underline; }

input, select, button { font-family: inherit; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Honeypot. Parked off screen rather than hidden with display:none, so a bot
   that fills in every field it can find still takes the bait. Never shown to a
   person, and hidden from assistive tech. */
.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.header {
  position: relative;
  background: var(--navy-900) url('assets/header-bg.webp') center top / cover no-repeat;
}

.header__bar {
  max-width: 1150px;
  margin: 0 auto;
  padding: 22px 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header__logo {
  height: 36px;
  width: auto;
  display: block;
}

.header__copy {
  position: relative;
  z-index: 1;
  /* The artboard uses 820px; 900px is what the real Geom Graphic needs to keep
     the headline on the two lines the design shows. */
  max-width: 900px;
  margin: 0 auto;
  padding: 46px 40px 120px;
  text-align: center;
}

.header__referral {
  margin: 0 0 18px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cyan-100);
}

.header__referral[hidden] { display: none; }

.header__title {
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.02;
  font-size: clamp(36px, 4.9vw, 58px);
  color: #fff;
  text-wrap: balance;
}

.header__lede {
  margin: 0 auto;
  max-width: 56ch;
  font-size: 18px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  text-wrap: pretty;
}

/* Cyan chevron divider: a gradient wedge with a white wedge stacked over it. */
.chevron {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: var(--chevron-height);
  pointer-events: none;
}

.chevron__gradient,
.chevron__fill {
  position: absolute;
  inset: 0;
}

.chevron__gradient {
  background: var(--edge);
  clip-path: polygon(0 0, 50% 92%, 100% 0, 100% 100%, 0 100%);
}

.chevron__fill {
  background: #fff;
  clip-path: polygon(0 7%, 50% 99%, 100% 7%, 100% 100%, 0 100%);
}

/* --------------------------------------------------------------------------
   Form card
   -------------------------------------------------------------------------- */

.main {
  flex: 1 0 auto;
  background: #fff;
  padding: 0 40px 64px;
}

.card {
  position: relative;
  z-index: 2;
  max-width: 720px;
  margin: var(--card-lift) auto 0;
  background: #fff;
  border: 2px solid var(--line-card);
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(7, 43, 75, 0.16);
  padding: 38px 40px 34px;
}

.form[hidden] { display: none; }

.form__legend {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
}

/* Role choice ---------------------------------------------------------- */

.roles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 0 0 28px;
}

.role {
  position: relative;
  display: block;
  cursor: pointer;
  border: 2px solid var(--line);
  border-radius: 14px;
  padding: 20px;
  background: var(--surface-soft);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.role:hover { border-color: var(--cyan-100); }

.role__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
}

.role__body { display: block; }

.role__head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 10px;
}

.role__dot {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 2px solid var(--navy-700);
  transition: box-shadow 150ms ease;
}

.role__title {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  /* The artboard sets 14.5px; Geom Graphic is wider than the fallback the
     artboard rendered with, and 13.5px keeps both titles on two lines in the
     narrow desktop columns. The mobile card is wide enough for 14.5px. */
  font-size: 13.5px;
  line-height: 1.25;
  color: var(--ink);
}

.role__desc {
  display: block;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-muted);
}

.role:has(.role__input:checked) {
  box-shadow: inset 0 0 0 2px var(--navy-700), 0 8px 20px rgba(16, 67, 115, 0.16);
}

.role:has(.role__input:checked) .role__dot {
  box-shadow: inset 0 0 0 4px var(--navy-700);
}

.role:has(.role__input:focus-visible) {
  outline: 3px solid var(--navy-700);
  outline-offset: 2px;
}

.roles--invalid .role { border-color: var(--danger); }

/* Fields ---------------------------------------------------------------- */

.fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

.field--wide { grid-column: 1 / -1; }

.field__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
}

.field__control {
  height: 52px;
  padding: 0 14px;
  border: 2px solid var(--line);
  border-radius: 10px;
  font-size: 16px;
  color: var(--ink);
  background: #fff;
  width: 100%;
}

select.field__control { padding: 0 12px; }

.field__control:hover { border-color: var(--cyan-100); }

/* The design calls for a 3px cyan focus ring; cyan on white does not reach
   AA contrast, so the ring on the light card is navy instead. */
.field__control:focus-visible,
.button:focus-visible,
.footer a:focus-visible {
  outline: 3px solid var(--navy-700);
  outline-offset: 1px;
}

.field__control[aria-invalid="true"] { border-color: var(--danger); }

.field__error {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--danger);
}

.field__error[hidden] { display: none; }

.field__error--role { margin: -18px 0 18px; }

.field__error--submit { margin: 18px 0 -6px; }

/* Buttons ---------------------------------------------------------------- */

.button {
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 150ms ease, box-shadow 150ms ease;
}

.button--primary {
  display: block;
  margin: 24px 0 12px;
  width: 100%;
  min-height: 58px;
  padding: 10px 14px;
  border: 2px solid var(--cyan-500);
  border-radius: 12px;
  font-size: 15px;
  color: #fff;
  background: var(--navy-700);
}

.button--primary:hover {
  background: var(--navy-600);
  box-shadow: 0 0 12px rgba(0, 227, 255, 0.55);
}

.button--primary[disabled] {
  cursor: progress;
  opacity: 0.78;
  box-shadow: none;
}

.button--ghost {
  height: 48px;
  padding: 0 18px;
  background: #fff;
  border: 2px solid var(--navy-700);
  border-radius: 8px;
  font-size: 13px;
  color: var(--navy-700);
}

.button--ghost:hover { background: #f0f5f9; }

.form__privacy {
  margin: 0;
  text-align: center;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-muted);
}

/* Confirmation ----------------------------------------------------------- */

.done {
  padding: 24px 4px;
  text-align: center;
}

.done[hidden] { display: none; }

.done__title {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 30px;
  line-height: 1.05;
  color: var(--ink);
}

.done__title:focus-visible {
  outline: 3px solid var(--navy-700);
  outline-offset: 4px;
}

.done__message {
  margin: 0 auto 22px;
  max-width: 44ch;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* Proof line ------------------------------------------------------------- */

.proof {
  max-width: 720px;
  margin: 22px auto 0;
  text-align: center;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-muted);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.footer__brand {
  background: #fff;
  padding: 0 40px 34px;
  text-align: center;
}

.footer__logo {
  height: 52px;
  width: auto;
  display: inline-block;
}

.footer__links {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--ink-muted);
  display: flex;
  gap: 14px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.footer__sep { color: #c1d4e1; }

.footer__rule {
  height: 5px;
  background: var(--edge);
}

.footer__social {
  background: var(--navy-900) url('assets/footer-bg.webp') center / cover;
  padding: 26px;
  display: flex;
  gap: 20px;
  justify-content: center;
}

.footer__social-link {
  display: flex;
  align-items: center;
  padding: 4px;
  border-radius: 6px;
}

.footer__social-link svg {
  height: 21px;
  width: auto;
  fill: #fff;
  display: block;
}

.footer__social-link:hover svg { fill: var(--cyan-100); }

.footer__social-link:focus-visible {
  outline: 3px solid var(--cyan-500);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Mobile artboard (390px)
   -------------------------------------------------------------------------- */

@media (max-width: 700px) {
  :root {
    --chevron-height: 58px;
    --card-lift: -34px;
  }

  .header__bar { padding: 18px 22px; }
  .header__logo { height: 28px; }

  .header__copy { padding: 14px 22px 86px; }

  .header__referral {
    margin: 0 0 14px;
    font-size: 11px;
    letter-spacing: 0.16em;
    line-height: 1.6;
  }

  .header__title { margin: 0 0 14px; line-height: 1.04; }
  .header__lede { font-size: 16px; }

  .chevron__gradient { clip-path: polygon(0 0, 50% 90%, 100% 0, 100% 100%, 0 100%); }
  .chevron__fill { clip-path: polygon(0 10%, 50% 100%, 100% 10%, 100% 100%, 0 100%); }

  .main { padding: 0 20px 30px; }

  .card {
    border-radius: 18px;
    box-shadow: 0 16px 40px rgba(7, 43, 75, 0.14);
    padding: 24px 20px 26px;
  }

  .roles {
    grid-template-columns: 1fr;
    gap: 14px;
    margin: 0 0 24px;
  }

  .role { padding: 18px; }
  .role__title { font-size: 14.5px; }

  .field__error--role { margin: -16px 0 18px; }

  .fields { grid-template-columns: 1fr; }

  .button--primary {
    font-size: 14px;
    letter-spacing: 0.08em;
  }

  .done { padding: 10px 0; }

  .done__title {
    margin: 0 0 12px;
    font-size: 24px;
    line-height: 1.08;
  }

  .done__message {
    margin: 0 0 20px;
    font-size: 15.5px;
  }

  .proof { font-size: 14px; }

  .footer__brand { padding: 0 22px 26px; }
  .footer__logo { height: 40px; }

  .footer__links {
    margin: 12px 0 0;
    font-size: 12px;
    gap: 10px;
  }

  .footer__rule { height: 4px; }

  .footer__social { padding: 20px; gap: 18px; }
  .footer__social-link svg { height: 19px; }
}

/* Form <-> confirmation swap ---------------------------------------------- */

.form,
.done {
  transition: opacity 180ms ease, transform 180ms ease;
}

.form.is-leaving,
.done.is-leaving {
  opacity: 0;
  transform: translateY(-6px);
}

.form.is-entering,
.done.is-entering {
  opacity: 0;
  transform: translateY(8px);
}

.card.is-resizing {
  overflow: hidden;
  transition: height 280ms ease;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}