/* Polyment landing v2, Home v3 (4 Oct): the hero rebuilt phone first. Loaded after home-v2.css.
   The hero is one question with a typed goal, one subline, two buttons and the AI Codex drawing.
   Phones and tablets open the founding-list form in a bottom sheet; desktop keeps a one-field form
   in the hero. Everything below the hero is home-v2.css as it was. Directional spacing is logical. */

/* ---------- the hero ----------------------------------------------------------- */
.v3-hero { padding: clamp(16px, 2.6vw, 40px) 0 clamp(32px, 4vw, 56px); border-bottom: 0; }
.v3-hero .hx-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "h1" "sub" "actions" "art"; align-items: start; }
.v3-hero .hx-title { grid-area: h1; max-width: 14.5em; font-size: clamp(36px, 4.6vw, 64px); line-height: 1.06; text-wrap: pretty; }
/* The goal is a blank at the end of the question, written on the pencil rule: your dream job, the internship,
   the master's. Inline in the heading, sized to the widest goal so the line never moves. */
.v3-hero .hx-title .hx-goal { display: inline-grid; vertical-align: baseline; margin-top: 0; padding-bottom: .02em; border-bottom-width: 2px; }
.v3-hero .hx-title .hx-goal-size { padding-inline-end: .1em; }
.hx-sub {
  grid-area: sub; margin: 14px 0 0; max-width: 32ch;
  font-family: var(--font-serif); font-weight: 500; font-size: clamp(19px, 1.7vw, 24px); line-height: 1.35;
  letter-spacing: -.008em; color: var(--navy); font-variation-settings: "opsz" 72; text-wrap: pretty;
}
/* Two buttons and one quiet line: the primary opens the sheet (phones, tablets), the secondary goes to the clips. */
.hx-actions {
  grid-area: actions; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "join" "micro" "peek";
  gap: 10px; margin: 22px 0 0; max-width: 560px;
}
.hx-join { grid-area: join; width: 100%; min-width: 0; }
.hx-peek { grid-area: peek; width: 100%; min-width: 0; }
.hx-peek svg { width: 18px; height: 18px; }
.hx-micro { grid-area: micro; margin: -2px 0 0; font-size: 14px; line-height: 1.45; font-weight: 600; color: var(--slate); text-align: center; }
.hx-form--desk { display: none; }                         /* desktop only: the one-field form in the hero */
.hx-form--desk .hx-form { margin: 0; }
.hx-form--desk .form-privacy { margin: 10px 0 0; }
/* the drawing: one figure under the buttons on phones, a column beside the text on tablets, the rail on desktop */
.v3-hero .hx-art { grid-area: art; position: relative; margin: 24px auto 0; width: 100%; max-width: 420px; }
.v3-hero .hx-draw { display: none; width: 100%; height: auto; overflow: visible; }
.v3-hero .hx-draw--phone { display: block; }
.v3-hero .hx-draw .gl-core-ai { font-size: 21px; letter-spacing: .02em; }
.v3-hero .hx-motion { grid-area: art; align-self: start; justify-self: start; margin: 24px 0 0; z-index: 2; }
.hx-draw .lbl-start { text-anchor: start; }
.hx-draw .lbl-mid { text-anchor: middle; }
.hx-draw .faint-m { opacity: .6; }

/* The loop, as home-v2.css plays it, on the v3 hero: pencil, ink, one node gilds, every 7 s. One class, is-held, pauses it in place. */
.v3-hero .hx-art.is-held .hx-draw, .v3-hero .hx-art.is-held .hx-draw * { animation-play-state: paused !important; }
.v3-hero .is-playing .hx-draw .ink { stroke-dasharray: 1; animation: hx-cy-ink 7s linear .9s infinite both; }
.v3-hero .is-playing .hx-draw .n1 .ring { animation: hx-cy-ring-a 7s linear .9s infinite both; }
.v3-hero .is-playing .hx-draw .n2 .ring { animation: hx-cy-ring-b 7s linear .9s infinite both; }
.v3-hero .is-playing .hx-draw .n3 .ring { animation: hx-cy-ring-c 7s linear .9s infinite both; }
.v3-hero .is-playing .hx-draw .n1 .gl { animation: hx-cy-gl-n1 7s linear .9s infinite both; }
.v3-hero .is-playing .hx-draw .n2 .gl { animation: hx-cy-gl-b 7s linear .9s infinite both; }
.v3-hero .is-playing .hx-draw .n3 .gl { animation: hx-cy-gl-c 7s linear .9s infinite both; }
.v3-hero .is-playing .hx-draw .gild { animation: hx-cy-gild 7s linear .9s infinite both; }
.v3-hero .is-playing .hx-draw .flourish { animation: hx-cy-flourish 7s linear .9s infinite both; }

@media (max-width: 640px) {
  .v3-hero.hx { padding-top: 10px; }
  .v3-hero .hx-title { font-size: 36px; max-width: none; }
  .hx-sub { margin-top: 12px; font-size: 19px; }
  .hx-actions { margin-top: 18px; }
}
@media (min-width: 641px) and (max-width: 980px) {
  .v3-hero .hx-grid { grid-template-columns: minmax(0, 1fr) 260px; column-gap: 36px; grid-template-areas: "h1 art" "sub art" "actions art"; }
  .v3-hero .hx-art { margin: 0; max-width: none; align-self: center; }
  .v3-hero .hx-draw--phone { display: none; }
  .v3-hero .hx-draw--tab { display: block; }
  .v3-hero .hx-motion { align-self: end; margin: 0; }
  .hx-actions { grid-template-columns: auto auto; grid-template-areas: "join peek" "micro micro"; justify-content: start; align-items: center; column-gap: 12px; }
  .hx-join, .hx-peek { width: auto; }
  .hx-micro { text-align: start; margin: 0; }
}
@media (min-width: 981px) {
  .v3-hero .hx-grid { grid-template-columns: minmax(0, 1fr) var(--rail-w); column-gap: clamp(36px, 4.5vw, 64px); grid-template-areas: "h1 art" "sub art" "form art" "actions art"; }
  .v3-hero .hx-art { margin: 0; max-width: none; align-self: center; }
  .v3-hero .hx-draw--phone { display: none; }
  .v3-hero .hx-draw--wide { display: block; }
  .v3-hero .hx-motion { align-self: end; justify-self: end; margin: 0; }
  .hx-form--desk { display: block; grid-area: form; margin: 26px 0 0; max-width: 560px; }
  .hx-join { display: none; }                             /* the form's own button is the primary here */
  .hx-actions { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "peek micro"; align-items: center; column-gap: 16px; margin-top: 16px; }
  .hx-peek { width: auto; }
  .hx-micro { text-align: start; margin: 0; }
}

/* ---------- the join sheet (phones and tablets) ---------------------------------- */
/* "Save my place" opens one sheet from the bottom: a title, one field, the button, the privacy line.
   The scrim and the close button both close it; Escape too. Once sent, the sheet holds "Check your inbox",
   the optional aim (saved on tap, no extra button) and Leo's line. Desktop never shows it. */
.jsheet { position: fixed; inset: 0; z-index: 70; display: grid; align-items: end; justify-items: center; }
.jsheet[hidden] { display: none; }
.jsheet-scrim { position: absolute; inset: 0; margin: 0; padding: 0; border: 0; background: rgba(8, 29, 58, .5); cursor: default; }
.jsheet-panel {
  position: relative; width: 100%; max-width: 560px; max-height: 92vh; overflow: auto;
  background: var(--cream); color: var(--ink); border: 1px solid var(--line); border-bottom: 0; border-radius: 22px 22px 0 0;
  padding: 10px 20px calc(22px + env(safe-area-inset-bottom, 0px)); box-shadow: var(--shadow-pop);
}
@keyframes jsheet-up { from { transform: translateY(28px); opacity: 0; } to { transform: none; opacity: 1; } }
.jsheet.is-open .jsheet-panel { animation: jsheet-up .32s var(--ease-out) both; }
.jsheet-handle { width: 40px; height: 4px; margin: 0 auto 12px; border-radius: 2px; background: var(--graphite-soft); }
.jsheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.jsheet-head h2 { margin: 0; font-family: var(--font-serif); font-weight: 600; font-size: 24px; line-height: 1.2; color: var(--navy); }
.jsheet-close { display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--cream-surface); color: var(--navy); cursor: pointer; }
.jsheet-close:hover { border-color: var(--graphite-soft); background: #fff; }
.jsheet-close svg { width: 18px; height: 18px; }
.jsheet .hx-form { margin: 0; max-width: none; }
.jsheet .hx-label { margin-top: 2px; }
.jsheet .form-privacy { margin: 12px 0 0; }
body.sheet-open { overflow: hidden; }
@media (min-width: 981px) { .jsheet { display: none; } }
@media (prefers-reduced-motion: reduce) { .jsheet.is-open .jsheet-panel { animation: none; } }

/* ---------- the aim, asked after the email (4 Oct) --------------------------------- */
/* The chips (Quantum · AI · Robotics · Other) now sit in the form's done state, under "Check your inbox":
   optional, saved the moment a chip is tapped. "Other" opens "Which field?" as before. */
.wl-aim { margin: 14px 0 0; }
.wl-aim .aim { margin-bottom: 10px; }
.wl-aim .wl-other { margin: 0 0 8px; }
.wl-aim .wl-msg { margin: 0 0 8px; }
.wl-noted { margin: 0; min-height: 0; font-size: 14.5px; line-height: 1.45; font-weight: 600; color: var(--verdigris-ink); }
.wl-noted:empty { margin: 0; }
.wl-noted strong { color: var(--navy); }
.wl-after .hx-gloss { margin-top: 18px; }

/* ---------- the sticky bar's button opens the sheet ---------------------------------- */
.stickybar .btn { cursor: pointer; }