/* ==========================================================================
   A2Amazing waitlist, shared stylesheet
   Tokens sourced from BKM/identity/brand-assets.md (see project README).
   No external fonts, no CDN, system font stack only, per build constraint.
   ========================================================================== */

:root {
  --grad-1: #403676; /* deep blue-purple, corner */
  --grad-2: #6C4C8D; /* purple */
  --grad-3: #6E47C4; /* blue-purple */
  --grad-4: #C9489A; /* pink/magenta, headline-only, never body text */

  --light-bg: #FDFDFD;
  --dark-text: #030303;
  --white: #FFFFFF;

  --accent-panel: rgba(3, 3, 3, 0.32);
  --card-border: rgba(255, 255, 255, 0.14);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 8px;

  --shadow-soft: 0 20px 60px -20px rgba(64, 54, 118, 0.45);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* ---------- Type scale (task 1162) ---------------------------------
     Ryan: "make all the sub header text and body text a couple points
     bigger," everything except headlines. Moved to tokens rather than
     patching each selector, so the next size pass touches four lines,
     not eight. Baseline is the unstyled browser default (1rem = 16px);
     nothing here touched .headline, .eyebrow, .section-title, or
     .section-label, none of which were named in the feedback.
       --fs-label: form field labels + checkbox option text.
         0.94-0.95rem (~15-15.2px) -> 1.05rem (16.8px), +~1.7px.
       --fs-body: paragraph copy (.panel p, .bar-callout) and list
         items (.bullets li). 1rem/0.98rem (~16-15.7px) -> 1.125rem
         (18px), +2px, matching Ryan's own "16 to 18" example exactly.
       --fs-subhead: the .subhead line under every headline. Was
         clamp(1.05rem, 2.4vw, 1.25rem) (16.8-20px) -> widened at both
         ends to 18.4-22px, +1.6-2px, same clamp shape so it keeps
         scaling fluidly rather than jumping at a breakpoint.
       --fs-card-title: .panel h3, the group-card titles on Page A.
         1.15rem (18.4px) -> 1.3rem (20.8px), +2.4px. This also crosses
         the WCAG large-text bold threshold (18.66px @ 700 weight): it
         now clears contrast at the 3:1 bar instead of 4.5:1, a safer
         position than before, not a riskier one. See the .panel h3
         rule below and the README verification note. */
  --fs-label: 1.05rem;
  --fs-body: 1.125rem;
  --fs-subhead: clamp(1.15rem, 2.5vw, 1.375rem);
  --fs-card-title: 1.3rem;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font);
  background: var(--light-bg);
  color: var(--dark-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

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

/* ---------- Dark zone ---------------------------------------------------
   The four brand hexes are used unmodified per BKM/identity/brand-assets.md
   §Print-safety note (screen-only, no CMYK conversion applies). A radial
   glow anchored at the darkest stop sits behind text-bearing regions so
   body copy always resolves against a very dark purple regardless of
   where it lands on the diagonal. This guarantees the 4.5:1 body-text
   floor without relying on layout coincidence, while the diagonal sweep
   (dark corner -> pink corner, 135deg, brand-assets.md:44-47 sample order)
   still reads at the page edges, the same "energy" as the flyer.
   -------------------------------------------------------------------- */

.dark-zone {
  position: relative;
  background:
    radial-gradient(ellipse 130% 110% at 50% 30%, rgba(64, 54, 118, 0.92) 0%, rgba(64, 54, 118, 0) 68%),
    linear-gradient(135deg, var(--grad-1) 0%, var(--grad-2) 35%, var(--grad-3) 65%, var(--grad-4) 100%);
  color: var(--white);
  isolation: isolate;
}

.dark-zone > * {
  position: relative;
  z-index: 1;
}

/* ---------- Hero background artwork (task 1164) --------------------------
   Replaces task 1143's inline-SVG circuit/ribbon/sparkle/binary-edge
   approximation (including the .dark-zone::before dot texture, both
   removed outright rather than layered under the photo, since two
   competing treatments fight each other) with Ryan's real generated
   artwork: source assets/hero-bg.{webp,jpg}, from a2a-background.png
   (1376x768), which matches the printed flyer's composition, not an
   approximation of it.

   Two landmarks in that composition drive everything below:
     - the circuit traces split left/right and leave an empty gap dead
       center at the top. .logo-mark sits inside that gap (see each page's
       hero markup) rather than floating at an arbitrary position.
     - a calm, low-detail dark band runs across the image's vertical
       middle. .eyebrow/.headline/.subhead land there; the busy detail
       (traces, ribbons, sparkles) stays pushed to the top edge and the
       left/right ribbons, exactly like the flyer.

   Delivered as WebP with a JPEG fallback via image-set() (the plain
   url() JPEG declaration comes first so browsers that don't parse
   image-set() keep it rather than getting nothing): ~101KB / ~144KB,
   both well under the 400KB budget the 1586KB source PNG blew past.

   Scoped to the hero itself via .hero-photo, not the whole .dark-zone,
   so it works identically whether the hero IS the dark-zone element
   (Pages B/C's <section class="dark-zone hero-pad hero-photo">) or sits
   inside one (Page A's <section class="hero-pad hero-photo"> inside
   <body class="dark-zone">). Page A's below-hero sections keep the
   plain .dark-zone gradient above, unchanged; that is what makes Page A
   "dark end to end" without stretching a 768px-tall photo the full
   scroll length of the page, which would look nothing like native
   resolution by the second screen.

   Contrast: near-black scrim (rgba(5,3,15,...), not a brand hue, so it
   darkens indiscriminately, including the bright white circuit-trace
   nodes and sparkle glints that would otherwise sit under text).
   First pass used a radial ellipse centered on the text column; real
   worst-case pixel testing (see below) showed its edges fall off too
   fast, failing at the outer edge of a 600px-wide subhead line (as low
   as 1.94:1 measured). Replaced with a full-width vertical band so
   alpha never depends on x, only on how far down the hero the text
   sits: solid ~0.6 alpha from 42% to 94% of hero height (covers every
   eyebrow/headline/subhead position across both page layouts, hero
   without an eyebrow and hero with one, at both the 1440px and 375px
   breakpoints, with margin on both ends), fading to 0 above 28% so the
   circuit gap and logo stay untouched, fading to 0.22 at 100% so the
   bottom ribbon crossing keeps some color. Verified by compositing the
   real source pixels through the exact cover-crop + gradient math for
   all 10 real headline/subhead/eyebrow boxes pulled live via
   getBoundingClientRect at both breakpoints: worst case 6.56:1, next
   is 6.67:1, everything else clears 6.5:1+ (several 18-19:1 where text
   sits over the darkest part of the image before any scrim). Full
   numbers in Team Inbox/2026-08-21-senior-developer-task1164-background-art.md. -------------------------------------------------- */

.hero-photo {
  position: relative;
  isolation: isolate;
}

.hero-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  background-image:
    linear-gradient(180deg, rgba(5, 3, 15, 0) 0%, rgba(5, 3, 15, 0) 28%, rgba(5, 3, 15, 0.6) 42%, rgba(5, 3, 15, 0.6) 94%, rgba(5, 3, 15, 0.22) 100%),
    url("../assets/hero-bg.jpg");
  background-image:
    linear-gradient(180deg, rgba(5, 3, 15, 0) 0%, rgba(5, 3, 15, 0) 28%, rgba(5, 3, 15, 0.6) 42%, rgba(5, 3, 15, 0.6) 94%, rgba(5, 3, 15, 0.22) 100%),
    image-set(url("../assets/hero-bg.webp") type("image/webp"), url("../assets/hero-bg.jpg") type("image/jpeg"));
}

.hero-photo > * {
  position: relative;
  z-index: 1;
}

.logo-mark {
  /* Task 1162: "make logo 2x again," on top of task 1143's 128px -> 256px
     pass. Desktop ceiling is 512px, deliberately not higher: the source
     file (assets/logo.png) is 1024x1024, so 512px at a 2x/Retina pixel
     ratio lands exactly on native resolution. Anything past 512 upscales
     and softens. Kept the same 34vw mid-scaling factor as task 1143 so
     the fluid-growth window (the same ~494-753px range, just against
     bigger endpoints now) still feels like the same system, not a
     different one, meaning most laptop widths (1280-1440px) land in the
     435-490px range and only screens >=1506px wide hit the literal 512.

     Mobile floor is 220px, not a literal re-doubling of 168px (336px
     would run 90% of a 375px screen, the exact "absurd" case flagged in
     the brief). Applied the same discipline as task 1143 instead: that
     pass grew mobile 31% (128->168) while desktop grew 100% (128->256),
     a ~0.31 ratio of mobile-growth to desktop-growth. Desktop is again
     growing 100% (256->512) this round, so mobile grows by that same
     ~0.31 ratio: 168 * 1.3125 = 220.5, rounded to 220px (+31%, 58.7% of
     a 375px viewport). Verified by screenshot at 375px that eyebrow +
     headline + subhead still read as the taller, dominant block above
     the fork buttons. Margin bumped in step so the gap around the mark
     grows with it instead of the mark eating into a fixed gutter. */
  width: clamp(220px, 34vw, 512px);
  height: clamp(220px, 34vw, 512px);
  margin: 0 auto clamp(12px, 2.5vw, 26px);
  /* Task 1166: "logo, header, and sub head can shift up some, text needs
     to shift up a bit more than the logo does." Two separate levers, not
     one shared offset: this margin (was clamp(24px,4.5vw,48px), roughly
     halved) closes the dead gap between the logo and the eyebrow/headline
     block specifically, so text gets an extra shift the logo itself does
     not, on top of the shared .hero-pad top-padding reduction below.
     Mobile: 24px -> 12px (-12px). Desktop (>=1506px, literal clamp
     ceiling): 48px -> 26px (-22px). See css comment above .hero-pad for
     the combined per-breakpoint totals. */
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.35));
  animation: rise 0.7s var(--ease) both;
  position: relative;
  z-index: 1;
}

.eyebrow {
  text-align: center;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.82);
  max-width: 560px;
  margin: 0 auto 18px;
  animation: rise 0.7s 0.05s var(--ease) both;
}

.headline {
  text-align: center;
  font-size: clamp(2.4rem, 7vw, 3.6rem);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
  text-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  animation: rise 0.7s 0.1s var(--ease) both;
}

.subhead {
  text-align: center;
  font-size: var(--fs-subhead);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.92);
  max-width: 600px;
  margin: 0 auto;
  animation: rise 0.7s 0.15s var(--ease) both;
}

/* Task 1166: top padding only, 56px -> 40px mobile / 88px -> 64px desktop
   (see the responsive block below), shifts the whole hero block (logo,
   eyebrow, headline, subhead) up together. Combined with the .logo-mark
   margin-bottom cut above, the two levers give the logo a 16px (mobile) /
   24px (desktop) shift and the text block a 28px (mobile) / 46px
   (desktop) shift, i.e. text moves roughly 1.75-1.9x further than the
   logo, per Ryan's "text needs to shift up a bit more than the logo
   does." Bottom padding (space to the next section) is untouched,
   out of scope for this request. */
.hero-pad {
  padding: 40px 0 64px;
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* text-carrying panels inside a dark zone, guarantees contrast regardless
   of gradient position beneath (see .dark-zone comment above) */
.panel {
  background: var(--accent-panel);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: 28px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.panel + .panel {
  margin-top: 20px;
}

.panel h3 {
  margin: 0 0 10px;
  font-size: var(--fs-card-title);
  font-weight: 700;
}

.panel p {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.92);
}

.bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 640px;
  display: grid;
  gap: 12px;
}

.bullets li {
  position: relative;
  padding-left: 28px;
  font-size: var(--fs-body);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.92);
}

.bullets.on-light li,
.bullets.on-light li::before {
  color: var(--dark-text);
}

.bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
}

.bullets.not-for li::before {
  border-radius: 2px;
}

.section-label {
  text-transform: uppercase;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  color: var(--grad-1);
  margin: 0 0 14px;
}

.dark-zone .section-label {
  color: rgba(255, 255, 255, 0.7);
}

section {
  padding: 48px 0;
}

.section-title {
  font-size: clamp(1.5rem, 4vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 22px;
}

/* ---------- Light zone --------------------------------------------------- */

.light-zone {
  background: var(--light-bg);
  color: var(--dark-text);
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 17px 24px;
  border-radius: var(--radius-md);
  font-size: 1.02rem;
  font-weight: 700;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease), filter 0.18s var(--ease);
  font-family: inherit;
}

.btn:active {
  transform: scale(0.98);
}

.btn-primary {
  background: linear-gradient(135deg, var(--grad-3), var(--grad-4));
  color: var(--white);
  box-shadow: 0 14px 30px -10px rgba(110, 71, 196, 0.55);
}

.btn-primary:hover {
  filter: brightness(1.06);
  box-shadow: 0 18px 38px -10px rgba(110, 71, 196, 0.65);
  transform: translateY(-1px);
}

.btn-ghost {
  background: rgba(255, 255, 255, 0.08);
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.35);
}

.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.16);
  transform: translateY(-1px);
}

.btn:focus-visible {
  outline: 3px solid var(--grad-4);
  outline-offset: 3px;
}

.track-buttons {
  display: grid;
  gap: 14px;
  margin-top: 28px;
}

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

.form-card {
  background: var(--white);
  border: 1px solid rgba(3, 3, 3, 0.08);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-soft);
}

.field {
  margin-bottom: 20px;
}

.field:last-of-type {
  margin-bottom: 0;
}

.field label {
  display: block;
  font-weight: 600;
  font-size: var(--fs-label);
  margin-bottom: 8px;
  line-height: 1.4;
}

.field .req {
  color: var(--grad-4);
  font-weight: 700;
}

.field input[type="text"],
.field input[type="email"],
.field select,
.field textarea {
  width: 100%;
  padding: 13px 14px;
  border: 1.5px solid rgba(3, 3, 3, 0.14);
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-family: inherit;
  color: var(--dark-text);
  background: var(--light-bg);
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}

.field textarea {
  resize: vertical;
  min-height: 88px;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--grad-3);
  box-shadow: 0 0 0 4px rgba(110, 71, 196, 0.15);
}

.field input:invalid.touched,
.field select:invalid.touched,
.field textarea:invalid.touched {
  border-color: #d13b5c;
  box-shadow: 0 0 0 4px rgba(209, 59, 92, 0.12);
}

.error-msg {
  display: none;
  color: #b8264a;
  font-size: 0.85rem;
  margin-top: 6px;
  font-weight: 600;
}

.field.has-error .error-msg {
  display: block;
}

.checkbox-group {
  display: grid;
  gap: 10px;
}

.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1.5px solid rgba(3, 3, 3, 0.12);
  border-radius: var(--radius-sm);
  background: var(--light-bg);
  cursor: pointer;
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
}

.checkbox-row:hover {
  border-color: var(--grad-3);
}

.checkbox-row input {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  accent-color: var(--grad-3);
  flex-shrink: 0;
}

.checkbox-row span {
  font-size: var(--fs-label);
  line-height: 1.45;
}

.form-foot-note {
  font-size: 0.82rem;
  color: rgba(3, 3, 3, 0.55);
  margin-top: 16px;
  line-height: 1.5;
}

/* ---------- Success + error views -------------------------------------------- */

.success-view,
.error-view {
  display: none;
}

.success-view.is-active,
.error-view.is-active {
  display: block;
  animation: rise 0.5s var(--ease) both;
}

.form-view.is-hidden {
  display: none;
}

.success-check,
.error-mark {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

.error-mark {
  background: rgba(184, 38, 74, 0.1);
}

.error-view .form-card {
  border-color: rgba(184, 38, 74, 0.18);
}

.error-contact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 24px;
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  border: 1.5px solid rgba(184, 38, 74, 0.25);
  background: rgba(184, 38, 74, 0.05);
  color: #b8264a;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.95rem;
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
}

.error-contact:hover {
  border-color: #b8264a;
  background: rgba(184, 38, 74, 0.1);
}

.error-retry {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 12px;
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  border: 1.5px solid rgba(3, 3, 3, 0.14);
  background: transparent;
  color: var(--dark-text);
  font-weight: 600;
  font-size: 0.9rem;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
}

.error-retry:hover {
  border-color: rgba(3, 3, 3, 0.3);
  background: rgba(3, 3, 3, 0.03);
}

.success-links h4 {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(3, 3, 3, 0.5);
  margin: 24px 0 12px;
}

.success-links h4:first-of-type {
  margin-top: 28px;
}

.link-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.link-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  border: 1.5px solid rgba(3, 3, 3, 0.1);
  text-decoration: none;
  color: var(--dark-text);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.4;
  transition: border-color 0.15s var(--ease), transform 0.15s var(--ease), background 0.15s var(--ease);
  background: var(--light-bg);
}

.link-list a:hover {
  border-color: var(--grad-3);
  transform: translateX(2px);
  background: #fff;
}

.link-list a .arrow {
  flex-shrink: 0;
  opacity: 0.4;
  transition: transform 0.15s var(--ease), opacity 0.15s var(--ease);
}

.link-list a:hover .arrow {
  opacity: 1;
  transform: translateX(3px);
}

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

.site-footer {
  padding: 32px 0 48px;
  text-align: center;
  font-size: 0.82rem;
  color: rgba(3, 3, 3, 0.45);
}

.dark-zone .site-footer {
  color: rgba(255, 255, 255, 0.5);
}

/* ---------- Bar callout ------------------------------------------------------ */

.bar-callout {
  background: rgba(64, 54, 118, 0.06);
  border-left: 4px solid var(--grad-1);
  border-radius: var(--radius-sm);
  padding: 20px 22px;
  max-width: 640px;
  line-height: 1.6;
  font-size: var(--fs-body);
}

/* ---------- Responsive --------------------------------------------------- */

@media (min-width: 720px) {
  .wrap {
    max-width: 760px;
  }
  .form-card {
    padding: 40px;
  }
  section {
    padding: 64px 0;
  }
  .hero-pad {
    padding: 64px 0 96px;
  }
}

@media (max-width: 480px) {
  .wrap {
    padding: 0 18px;
  }
  .form-card {
    padding: 22px;
    border-radius: var(--radius-md);
  }
  .panel {
    padding: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}