/* heymake landing page · built on brand/styles tokens + components. No new colors or spacing. */

:root { --hm-page: #FAF9FF; } /* page background below the header */
body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--hm-page); }
.top, main { width: 100%; max-width: 1200px; margin: 0 auto; padding-inline: 16px; }
@media (min-width: 640px)  { .top, main { padding-inline: 24px; } }
@media (min-width: 1024px) { .top, main { padding-inline: 32px; } }
/* 80px between sections. The space above the animation depends only on the window height,
   never on the content, so opening "Tell us why" adds to the bottom without moving anything above it. */
main { flex: 1; display: flex; flex-direction: column; gap: 80px; padding-block: clamp(40px, calc(14vh - 20px), 160px) 80px; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 16px; top: -64px; z-index: 10; background: var(--hm-white); padding: 8px 16px; border-radius: var(--hm-radius-md); box-shadow: var(--hm-shadow-2); }
.skip:focus { top: 16px; }

/* ---- top bar ---- */
/* Logo is pinned 60px from the left edge of the window at every width, not to the content column. */
.top { max-width: none; margin: 0; padding-block: 0; padding-inline: 60px; background: var(--hm-white); display: flex; justify-content: flex-start; align-items: center; gap: 16px; height: 89px; } /* everything vertically centered in the white bar */
/* Logo + tagline share a bottom line; the pair is centered in the bar with everything else */
.brand { display: flex; align-items: baseline; gap: 16px; }
.logo { display: inline-flex; padding: 8px; margin-left: -8px; }
.logo:hover { text-decoration: none; }
.logo .wordmark { font-size: 32px; }
.top .tag { white-space: nowrap; }
.top .tagline { font-size: 16px; white-space: nowrap; }
@media (min-width: 768px) { .top .tagline { margin-left: -10px; } }
/* Top right: Tell your friends + Share */
.top-share { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.tell { margin-right: 10px; font-family: var(--hm-font-display); font-weight: 600; font-size: 15px; color: var(--hm-ink-2); white-space: nowrap; }
/* Phones: logo + pill on the first line, tagline under them */
@media (max-width: 767px) {
  .top { flex-wrap: wrap; height: auto; padding-block: 24px; row-gap: 8px; }
  .top { padding-inline: 60px 16px; }
  .brand { display: contents; }
  .top .tagline { order: 3; flex-basis: 100%; }
  .top-share { order: 4; flex-basis: 100%; margin-left: 0; }
}

/* ---- 1. announce ---- */
.hero { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.lockup { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; --wm: clamp(40px, min(9vw, 11vh), 100px); }
.lockup .wordmark { font-size: var(--wm); }

/* Animated wordmark — from brand/docs/design-system.html: make → designer → client → you.
   Each word shows for 2s with a 350ms slide; full loop 8s. */
.anim { line-height: 1; }
.anim .slot { position: relative; display: inline-block; overflow: hidden; line-height: 1; padding: 0.12em 0 0.26em; margin: -0.12em 0 -0.26em; vertical-align: baseline; }
.anim .ghost { visibility: hidden; }
.anim .w { position: absolute; left: 0; top: 0.12em; line-height: 1; white-space: nowrap; opacity: 0; transform: translateY(0.6em); animation: hm-rotate 8s cubic-bezier(.2,.7,.2,1) infinite; }
.anim .w1 { color: var(--hm-action);   animation-delay: 0s; }
.anim .w2 { color: var(--hm-designer); animation-delay: 2s; }
.anim .w3 { color: var(--hm-client);   animation-delay: 4s; }
.anim .w4 { color: var(--hm-developer); animation-delay: 6s; }
.anim .w4 { left: 0.06em; } /* "heyyou": the two y's touch at tight letter-spacing */
@keyframes hm-rotate {
  0%     { opacity: 0; transform: translateY(0.6em); }
  4.4%   { opacity: 1; transform: translateY(0); }      /* 350ms in */
  25%    { opacity: 1; transform: translateY(0); }      /* hold to 2s */
  29.4%  { opacity: 0; transform: translateY(-0.6em); } /* 350ms out */
  100%   { opacity: 0; transform: translateY(-0.6em); }
}

@media (prefers-reduced-motion: reduce) {
  .anim .w { animation: none; }
  .anim .w1 { opacity: 1; transform: none; }
}

.pitch { max-width: 1152px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.pitch h1 { font-size: 20px; font-weight: 800; }
.pitch h1 span { display: inline-block; }
.pitch h1 .shake { margin: 0 8px; }
.pitch .subhead { margin: 0; max-width: 720px; text-wrap: balance; font-size: 16px; color: var(--hm-ink-2); }
@media (min-width: 640px) { .pitch h1 { font-size: 24px; } }
@media (max-width: 639px) { .pitch h1 span { display: block; } .pitch h1 .shake { margin: 4px 0; } }

[hidden] { display: none !important; }
.q-title { margin: 0; font-family: var(--hm-font-display); font-weight: 700; font-size: 18px; line-height: 1.3; color: var(--hm-ink); }

/* ---- 2. reaction ---- */
.reaction { display: flex; flex-direction: column; align-items: center; gap: 16px; scroll-margin-top: 16px; margin-top: -40px; } /* 40px above the question (main gap is 80) */
.reaction-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.react .emoji { font-size: 18px; line-height: 1; }
.react .count { min-width: 24px; height: 24px; padding: 0 8px; border-radius: var(--hm-radius-pill); background: var(--hm-action-tint); color: var(--hm-action-on-tint); font-size: 13px; display: inline-flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; }
.react[aria-pressed="true"] { background: var(--hm-action); border-color: var(--hm-action); color: var(--hm-white); }
.react[aria-pressed="true"]:hover { background: var(--hm-action-hover); border-color: var(--hm-action-hover); color: var(--hm-white); }
.react[aria-pressed="true"] .count { background: var(--hm-white); color: var(--hm-action-on-tint); }
/* After feedback is sent the answer is locked: the picked one stays purple, the other greys out */
.react[disabled][aria-pressed="true"], .react[disabled][aria-pressed="true"]:hover { background: var(--hm-action); border-color: var(--hm-action); color: var(--hm-white); cursor: default; }
.react[disabled][aria-pressed="false"] .count { background: var(--hm-border); color: var(--hm-ink-3); }

/* ---- 3. feedback ---- */
/* Everything stacks in one column: feedback card, then share + social */
.flow { width: 100%; max-width: 640px; margin: -40px auto 0; display: flex; flex-direction: column; gap: 40px; } /* 40px under the question and under the feedback card (main adds 80px, so pull up 40) */
.flow-step { width: 100%; min-width: 0; }
/* Feedback modal: brand .modal on a 45% ink scrim */
.feedback-dialog { padding: 0; border: 0; background: transparent; width: calc(100% - 32px); max-width: 480px; overflow: visible; }
.feedback-dialog::backdrop { background: rgba(30, 27, 46, 0.45); }
.feedback-dialog .modal { max-width: none; text-align: left; }
.feedback-dialog .actions { margin-top: 16px; }
/* Success state: check, title and message centered; close in the corner, Done on the right */
.thanks { position: relative; align-items: center; text-align: center; padding-top: 32px; }
.thanks-close { position: absolute; top: 16px; right: 16px; }
.thanks-icon { width: 50px; height: 50px; border-radius: 50%; background: var(--hm-success-tint); color: var(--hm-success); display: inline-flex; align-items: center; justify-content: center; }
.thanks-icon svg { width: 24px; height: 24px; }
.thanks h4 { margin-top: 8px; font-size: 28px; font-weight: 800; }
.thanks p { max-width: 36ch; text-wrap: balance; }
.feedback-dialog .thanks { text-align: center; }
.thanks h4:focus { outline: none; }
.thanks h4:focus-visible { outline: 3px solid var(--hm-focus); }
.thanks .actions { align-self: stretch; }
.feedback-dialog .input { font-size: 16px; line-height: 1.55; min-height: 96px; }
.field-block { width: 100%; margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 8px; }
.error { font-size: 13px; color: var(--hm-error); font-weight: 500; }
@media (prefers-reduced-motion: no-preference) {
  .feedback-dialog[open] { animation: hm-pop 160ms ease-out; }
  .feedback-dialog[open]::backdrop { animation: hm-fade 160ms ease-out; }
}
@keyframes hm-pop { from { opacity: 0; transform: translateY(8px); } }
@keyframes hm-fade { from { opacity: 0; } }
.q-title#role-q { margin: 0; }
.required { font-family: var(--hm-font-body); font-size: 13px; font-weight: 500; color: var(--hm-ink-2); }
.role-seg.is-error { border-color: var(--hm-error); }
.role-seg { align-self: flex-start; }
.role-seg button { height: 40px; }
/* Phones: stack the two options so each label stays on one line */
@media (max-width: 479px) {
  .role-seg { display: grid; grid-template-columns: 1fr; width: 100%; }
  .role-seg button { justify-content: center; border-right: 0; }
  .role-seg button:first-child { border-bottom: 2px solid var(--hm-border); }
}
.error { font-size: 13px; color: var(--hm-error); font-weight: 500; }

/* ---- 4. share + social ---- */
.then { display: flex; flex-direction: column; gap: 32px; }
.then-block { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; text-align: center; }
.share-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 8px; }
.social { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

/* Status line: dot + words */
.notice { margin: 0; display: flex; align-items: flex-start; gap: 8px; font-size: 14px; line-height: 1.5; font-weight: 500; text-align: left; }
.notice:empty { display: none; }
.notice.is-success { color: var(--hm-success); }
.notice.is-error { color: var(--hm-error); }
.notice .dot { width: 8px; height: 8px; margin-top: 6.5px; border-radius: 50%; background: currentColor; flex-shrink: 0; }

/* Short laptop screens: tighten so everything fits above the fold */
@media (min-width: 1024px) and (max-height: 820px) {
  .top { height: 73px; }
  .hero { gap: 16px; }
  .lockup { --wm: clamp(40px, min(9vw, 9vh), 100px); }
}

/* Share: copies straight away; the menu is only a fallback when copying is blocked */
.share-dd { position: relative; }
.share-trigger .icon-check, .share-trigger.is-copied .icon-share { display: none; }
.share-trigger.is-copied .icon-check { display: block; }
.share-trigger.is-copied, .share-trigger.is-copied:hover { color: var(--hm-success); border-color: var(--hm-success); background: var(--hm-success-tint); }
.share-menu { left: auto; right: 0; top: calc(100% + 8px); bottom: auto; width: 320px; max-width: calc(100vw - 32px); text-align: left; }
.share-dd.is-open .share-menu { display: flex; flex-direction: column; gap: 8px; }
.share-menu .dd-group { padding: 0; }
.share-url { height: 40px; font-size: 14px; color: var(--hm-ink-2); background: var(--hm-surface); border-color: var(--hm-border); }
.share-hint { color: var(--hm-ink-2); }