/* ============================================================================
   Golazzi landing: the landing framework's design system, on
   flowerexecution.com's settings (its paper, ink and column).
   Palette/type/shadows/motion are tokens in :root.
   Border convention: components draw their hairline from --shadow-card /
   --shadow-control (which begin with a 0 0 0 1px ring), with `border: 0`.
   A plain hairline `border: … var(--hairline)` is only for row dividers that
   have no shadow (the stat grid, steps, faq).
   Golazzi's own colours come in three places only: the app icon, the lime
   highlighter (behind "every shot", the live dot, the closing band's button)
   and the icon's dark green, which stands in for black on the page's two
   inked moments (the primary buttons and the closing band).
   ========================================================================= */
:root {
  color-scheme: light;
  --ink: #1b1916;
  --ink-2: #575049;
  --ink-3: #6f685f; /* darker than flowerexecution.com's #9c9488: the consent
                       line and the captions are small, and must pass AA (5:1) */
  --hairline: rgba(50, 42, 28, 0.11);
  --accent: #0a1513; /* the app icon's dark green: primary buttons, the closing band */
  --lime: #d3ff51; /* the app icon's crosshair: a highlighter, never text */
  --marker: var(--lime);
  --pink: #e05f96; /* the flower's core and the signature ring */
  --panel: #efece3;
  --red: #b4553f;
  --control-bg: #fffdf8;
  --pill-bg: #fffdf8;
  --tabs-bg: rgba(55, 45, 25, 0.06);
  --bg: #f7f5ef;
  --font-sans: "Inter", "Inter Fallback", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:
    "JetBrains Mono", "JetBrains Mono Fallback", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-hand: "Caveat", var(--font-sans);
  --tracking: -0.01em;
  --shadow-card:
    0 0 0 1px rgba(45, 36, 20, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 1px 2px rgba(45, 36, 20, 0.04), 0 6px 16px rgba(45, 36, 20, 0.06);
  --shadow-control:
    0 0 0 1px rgba(45, 36, 20, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 2px 5px rgba(45, 36, 20, 0.08);
  --shadow-control-hover:
    0 0 0 1px rgba(45, 36, 20, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 2px 5px rgba(45, 36, 20, 0.1);
  --shadow-card-hover:
    0 0 0 1px rgba(45, 36, 20, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 2px 4px rgba(45, 36, 20, 0.05), 0 10px 24px rgba(45, 36, 20, 0.08);
  --shadow-pill: 0 0 0 1px rgba(45, 36, 20, 0.07), 0 1px 2px rgba(45, 36, 20, 0.07);
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ease-smooth: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-bloom: cubic-bezier(0.16, 1.02, 0.3, 1);
  --ease-focus: cubic-bezier(0.2, 0.85, 0.25, 1);
  --ease-flip: cubic-bezier(0.77, 0, 0.175, 1);
  --fade: 0.22s var(--ease-out);
  --radius-sm: 6px;
  --radius-md: 9px;
  --pad: 24px;
}
@media (max-width: 480px) {
  :root {
    --pad: 18px;
  }
}

/* ---------- fonts ----------
   Self-hosted (the CSP allows no font origin but our own). Inter and JetBrains
   Mono are variable files cut to the weights the page uses; Caveat carries
   only letters, for the signature and the note under the clip. The fallbacks
   are metric-matched to the framework's, so the swap does not move a line. */
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-var.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/assets/fonts/jetbrains-mono-var.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Caveat";
  src: url("/assets/fonts/caveat-600.woff2") format("woff2");
  font-weight: 500 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Inter Fallback;
  src: local("Arial");
  size-adjust: 107.06%;
  ascent-override: 89.77%;
  descent-override: 22.28%;
  line-gap-override: 0%;
}
@font-face {
  font-family: JetBrains Mono Fallback;
  src: local("Menlo");
  size-adjust: 100.5%;
  ascent-override: 77%;
  descent-override: 22%;
  line-gap-override: 0%;
}

/* ---------- base ---------- */
* {
  box-sizing: border-box;
}
/* `hidden` has to beat any class that sets display, or a panel the script has
   hidden still renders. */
[hidden] {
  display: none !important;
}
html {
  scroll-padding-top: 72px; /* anchors land below the sticky bar */
}
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: clip;
  display: grid;
  place-items: center;
  background: var(--bg);
  color: var(--ink);
  font: 400 14px/1.5 var(--font-sans);
  letter-spacing: var(--tracking);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
main {
  width: 100%;
  min-width: 0;
  max-width: 440px;
  padding: 0 var(--pad) 56px;
}
@media (max-width: 480px) {
  main {
    padding-bottom: 44px;
  }
}
h1,
h2,
h3,
p,
figure,
fieldset {
  margin: 0;
}
fieldset {
  padding: 0;
  border: 0;
  min-width: 0;
}

/* section entrance stagger (top-level children fade up on load) */
@media (prefers-reduced-motion: no-preference) {
  main > * {
    animation: enter 0.6s var(--ease-out) both;
  }
  main > :nth-child(1) { animation-delay: 0ms; }
  main > :nth-child(2) { animation-delay: 80ms; }
  main > :nth-child(3) { animation-delay: 0.16s; }
  main > :nth-child(4) { animation-delay: 0.24s; }
  main > :nth-child(5) { animation-delay: 0.32s; }
  main > :nth-child(6) { animation-delay: 0.4s; }
  main > :nth-child(7) { animation-delay: 0.48s; }
}
@keyframes enter {
  0% { opacity: 0; transform: translateY(6px); filter: blur(3px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0px); }
}

button {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
a {
  -webkit-tap-highlight-color: transparent;
}
:focus {
  outline: none;
}
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px #2d241466;
  border-radius: var(--radius-sm);
}
::selection {
  background: #2d24141f;
  color: var(--ink);
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* shared section heading */
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.section-head h2 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: var(--tracking);
  color: var(--ink-2);
}
.section-note {
  flex: none;
  font: 400 12px/1 var(--font-mono);
  letter-spacing: var(--tracking);
  color: var(--ink-3);
}
.section-foot {
  margin: 12px 2px 0;
  font: 400 11px/1.5 var(--font-sans);
  letter-spacing: var(--tracking);
  color: var(--ink-3);
  text-wrap: pretty;
}
/* inline links get a 24px tall hit area without moving the line */
.section-foot a,
.wl-consent a {
  padding-block: 6px;
}
.section-foot a {
  color: var(--ink-2);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--ink-3) 60%, transparent);
  text-underline-offset: 2px;
  transition: color 0.14s ease, text-decoration-color 0.2s var(--ease-out);
}
.section-foot a:hover {
  color: var(--ink);
  text-decoration-color: currentColor;
}

/* ---------- header (flowerexecution.com's sticky masthead) ---------- */
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  /* bleeds to the column edges, soft paper + blur, hairline divider */
  position: sticky;
  top: 0;
  z-index: 50;
  margin: 0 calc(var(--pad) * -1) 30px;
  padding: 14px var(--pad);
  background: rgba(247, 245, 239, 0.82);
  -webkit-backdrop-filter: saturate(1.5) blur(10px);
  backdrop-filter: saturate(1.5) blur(10px);
  box-shadow: 0 1px 0 var(--hairline);
}
@media (max-width: 480px) {
  .top {
    margin-bottom: 26px;
    padding-block: 12px;
  }
}
.title-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  text-decoration: none;
}
.brand-mark {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  display: block;
  flex: none;
  box-shadow: 0 0 0 1px rgba(10, 21, 19, 0.12);
}
/* the wordmark, set like the framework's header h1 (the page's h1 is the hero) */
.wordmark {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.top-right {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.mute-btn {
  appearance: none;
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--ink-3);
  transition: color 0.12s ease, transform 0.12s ease;
}
.mute-btn:hover {
  color: var(--ink);
}
.mute-btn:active {
  transform: scale(0.92);
}
.mute-btn svg {
  width: 15px;
  height: 15px;
  display: block;
}
.mute-btn .ic-off {
  display: none;
}
.mute-btn.muted .ic-on {
  display: none;
}
.mute-btn.muted .ic-off {
  display: block;
}
/* the sounds only play for a mouse, so a touch screen has nothing to mute */
@media (hover: none), (pointer: coarse) {
  .mute-btn {
    display: none;
  }
}
.dl-btn {
  appearance: none;
  border: 0;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 500 12px/1 var(--font-sans);
  letter-spacing: var(--tracking);
  color: var(--ink);
  background: var(--control-bg);
  height: 26px;
  padding: 0 11px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-control);
  white-space: nowrap;
  transition: color 0.12s ease, transform 0.12s ease, box-shadow 0.16s var(--ease-out);
}
.dl-btn:hover {
  box-shadow: var(--shadow-control-hover);
}
.dl-btn:active {
  transform: scale(0.96);
}
/* The header's one real call to action: the icon's dark green rather than
   black, with a top highlight and a lift under it, so on paper it reads as a
   raised object instead of a hole cut in the page. */
.dl-btn.is-dark {
  color: #fffdf8;
  background: linear-gradient(180deg, #24332f 0%, var(--accent) 100%);
  box-shadow:
    inset 0 1px 0 rgba(240, 255, 250, 0.16),
    inset 0 0 0 1px rgba(0, 0, 0, 0.35),
    0 1px 2px rgba(10, 21, 19, 0.22),
    0 5px 12px -3px rgba(10, 21, 19, 0.34);
  transition: transform 0.16s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.dl-btn.is-dark:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(240, 255, 250, 0.22),
    inset 0 0 0 1px rgba(0, 0, 0, 0.35),
    0 2px 5px rgba(10, 21, 19, 0.22);
}
.dl-btn.is-dark:active {
  transform: translateY(0) scale(0.97);
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.4),
    inset 0 0 0 1px rgba(0, 0, 0, 0.35),
    0 1px 2px rgba(10, 21, 19, 0.2);
}

/* ---------- hero: kicker, headline, subline, the form ---------- */
.hero {
  margin-bottom: 44px;
}
.kicker {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 14px;
  font: 500 10px/1 var(--font-mono);
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--ink-3);
}
/* the waitlist is open: a lime pilot light, ringed so it holds on paper */
.live-dot {
  position: relative;
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 1px rgba(10, 21, 19, 0.45);
}
@media (prefers-reduced-motion: no-preference) {
  .live-dot::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(10, 21, 19, 0.35);
    animation: live 2.4s var(--ease-out) infinite;
  }
}
@keyframes live {
  from { transform: scale(1); opacity: 1; }
  to { transform: scale(2.6); opacity: 0; }
}
.hero-title {
  font: 600 clamp(24px, 6.9vw, 30px) / 1.18 var(--font-sans);
  letter-spacing: -0.028em;
  color: var(--ink);
  text-wrap: balance;
}
.hero-sub {
  margin-top: 14px;
  font: 400 13px/1.55 var(--font-sans);
  letter-spacing: var(--tracking);
  color: var(--ink-2);
  text-wrap: pretty;
}

/* a highlighter swipe behind a phrase (flowerexecution.com's .hl-mark), in
   the icon's lime */
.hl-mark {
  position: relative;
  isolation: isolate;
  white-space: nowrap;
}
.hl-swipe {
  position: absolute;
  left: -5px;
  top: 0.14em;
  width: calc(100% + 8px);
  height: 0.94em;
  z-index: -1;
  color: var(--marker);
  opacity: 0.85;
  mix-blend-mode: multiply;
  overflow: visible;
}
/* swiped on left to right, like every other mark on the site */
.hl-draw {
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  animation: hl-draw 0.5s 0.45s var(--ease-out) forwards;
}
@keyframes hl-draw {
  to {
    stroke-dashoffset: 0;
  }
}

/* ---------- the video deck ----------
   Without JavaScript the videos sit two by two, each with its caption. With
   it they stack into a fanned deck: the front one plays, and when it ends (or
   on Next) it is tossed aside, slips behind the deck and the next comes
   forward. main.js places the cards (--x/--r/--s/--o) and starts the moves. */
.deck {
  margin-bottom: 44px;
}
.deck-cards {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 10px;
  margin: 8px 0 0;
  padding: 0;
}
.deck-frame {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: 14px;
  overflow: hidden;
  background: var(--accent); /* the poster's own dark, before it paints */
  box-shadow: 0 0 0 1px rgba(10, 21, 19, 0.5), 0 2px 4px rgba(45, 36, 20, 0.08),
    0 14px 30px -10px rgba(45, 36, 20, 0.35);
}
.deck-frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.deck-card-title,
.deck-caption-title {
  margin-top: 8px;
  font: 600 12px/1.3 var(--font-sans);
  letter-spacing: var(--tracking);
  color: var(--ink);
}
.deck-card-note,
.deck-caption-note {
  margin-top: 2px;
  font: 400 11px/1.45 var(--font-sans);
  letter-spacing: var(--tracking);
  color: var(--ink-3);
}

/* the deck: cards as wide as the fan allows (216px, less on a narrow phone),
   the fanned stack centred in the column */
.js .deck-stage {
  --cw: min(216px, 100cqw - 124px);
  --deck-left: calc((100cqw - var(--cw) * 1.565) / 2);
  position: relative;
  container-type: inline-size;
  margin-top: 8px;
}
.js .deck-cards {
  display: block;
  position: relative;
  height: calc(var(--cw) * 16 / 9 + 24px);
  margin: 0;
}
.js .deck-card {
  position: absolute;
  left: var(--deck-left);
  top: 14px;
  width: var(--cw);
  aspect-ratio: 9 / 16;
  transform-origin: 50% 100%;
  transform: translate(calc(var(--cw) * var(--x, 0)), 0px) rotate(var(--r, 0deg)) scale(var(--s, 1));
  opacity: var(--o, 1);
  transition: transform 0.55s var(--ease-out), opacity 0.55s var(--ease-out);
}
.js .deck-frame {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  box-shadow: 0 0 0 1px rgba(10, 21, 19, 0.35), 0 6px 14px -6px rgba(45, 36, 20, 0.3);
  transition: box-shadow 0.55s var(--ease-out);
}
.js .deck-card[data-place="0"] .deck-frame {
  box-shadow: 0 0 0 1px rgba(10, 21, 19, 0.5), 0 2px 4px rgba(45, 36, 20, 0.08),
    0 18px 36px -12px rgba(45, 36, 20, 0.4);
}
.js .deck-card-title,
.js .deck-card-note {
  display: none; /* the caption under the deck speaks for the front card */
}
.deck-caption {
  margin-top: 6px;
  text-align: center;
}
.deck-caption-title {
  font-size: 13px;
}
.deck-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 14px;
}
.deck-prev {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  color: var(--ink);
  background: var(--control-bg);
  box-shadow: var(--shadow-control);
  transition: box-shadow 0.16s var(--ease-out), transform 0.12s ease;
}
.deck-prev:hover {
  box-shadow: var(--shadow-control-hover);
}
.deck-prev:active,
.deck-next:active {
  transform: scale(0.96);
}
.deck-count {
  min-width: 64px;
  text-align: center;
  font: 500 12px/1 var(--font-mono);
  color: var(--ink-2);
}
.btn.deck-next {
  height: 44px;
  gap: 8px;
  padding: 0 16px 0 18px;
  border-radius: 999px;
}
.deck-prev svg,
.deck-next svg {
  width: 16px;
  height: 16px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The moves. A card first clears the deck on its own layer and only then
   changes layer, so it never cuts through the card beside it. -0 and -1 are
   the same move twice: a new name is what restarts it. --b* is the back of
   the deck, where a card comes from on Previous. */
@keyframes deck-out-0 {
  0% { transform: translate(0px, 0px) rotate(0deg) scale(1); opacity: 1; z-index: 50; animation-timing-function: cubic-bezier(0.2, 0, 0, 1); }
  42% { transform: translate(calc(var(--cw) * -0.86), calc(var(--cw) * -0.046)) rotate(-12deg) scale(0.95); opacity: 1; z-index: 50; animation-timing-function: cubic-bezier(0.45, 0, 0.2, 1); }
  43% { z-index: 0; }
  100% { transform: translate(calc(var(--cw) * var(--x)), 0px) rotate(var(--r)) scale(var(--s)); opacity: var(--o); z-index: 0; }
}
@keyframes deck-out-1 {
  0% { transform: translate(0px, 0px) rotate(0deg) scale(1); opacity: 1; z-index: 50; animation-timing-function: cubic-bezier(0.2, 0, 0, 1); }
  42% { transform: translate(calc(var(--cw) * -0.86), calc(var(--cw) * -0.046)) rotate(-12deg) scale(0.95); opacity: 1; z-index: 50; animation-timing-function: cubic-bezier(0.45, 0, 0.2, 1); }
  43% { z-index: 0; }
  100% { transform: translate(calc(var(--cw) * var(--x)), 0px) rotate(var(--r)) scale(var(--s)); opacity: var(--o); z-index: 0; }
}
@keyframes deck-in-0 {
  0% { transform: translate(calc(var(--cw) * var(--bx)), 0px) rotate(var(--br)) scale(var(--bs)); opacity: var(--bo); z-index: 0; animation-timing-function: cubic-bezier(0.45, 0, 0.2, 1); }
  50% { transform: translate(calc(var(--cw) * -0.86), calc(var(--cw) * -0.046)) rotate(-12deg) scale(0.95); opacity: 1; z-index: 0; animation-timing-function: cubic-bezier(0.2, 0, 0, 1); }
  51% { z-index: 50; }
  100% { transform: translate(0px, 0px) rotate(0deg) scale(1); opacity: 1; z-index: 50; }
}
@keyframes deck-in-1 {
  0% { transform: translate(calc(var(--cw) * var(--bx)), 0px) rotate(var(--br)) scale(var(--bs)); opacity: var(--bo); z-index: 0; animation-timing-function: cubic-bezier(0.45, 0, 0.2, 1); }
  50% { transform: translate(calc(var(--cw) * -0.86), calc(var(--cw) * -0.046)) rotate(-12deg) scale(0.95); opacity: 1; z-index: 0; animation-timing-function: cubic-bezier(0.2, 0, 0, 1); }
  51% { z-index: 50; }
  100% { transform: translate(0px, 0px) rotate(0deg) scale(1); opacity: 1; z-index: 50; }
}

/* pause / play: a small white field, so it reads as the thing to press. On
   the deck it sits at the front card's bottom right. */
.clip-toggle {
  position: absolute;
  z-index: 60;
  left: calc(var(--deck-left) + var(--cw) - 40px);
  top: calc(14px + var(--cw) * 16 / 9 - 40px);
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  color: var(--ink);
  background: rgba(255, 253, 248, 0.92);
  box-shadow: 0 0 0 1px rgba(45, 36, 20, 0.12), 0 2px 6px rgba(0, 0, 0, 0.28);
  transition: transform 0.12s ease, background-color 0.16s var(--ease-out);
}
.clip-toggle:hover {
  background: #fff;
}
.clip-toggle:active {
  transform: scale(0.92);
}
.clip-toggle svg {
  width: 13px;
  height: 13px;
  display: block;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.clip-toggle .ic-pause {
  fill: none;
}
.clip-toggle .ic-play,
.deck.paused .ic-pause {
  display: none;
}
.deck.paused .ic-play {
  display: block;
}

/* ---------- waitlist form ----------
   Inputs and the role pills are the one place the raised white field is
   right: they are the things you touch. */
.waitlist {
  margin-top: 24px;
}
.wl-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* "I'm a" + four pills, one line on most phones; wraps on the smallest */
.wl-roles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.wl-roles legend {
  float: left; /* a floated legend joins the row instead of sitting on the border */
  margin-right: 4px;
  padding: 0;
  font: 500 12px/28px var(--font-sans);
  letter-spacing: var(--tracking);
  color: var(--ink-2);
}
.wl-roles legend span {
  font-weight: 400;
  color: var(--ink-3);
}
.chip {
  position: relative;
  display: inline-flex;
}
.chip input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.chip span {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 11px;
  border-radius: 999px;
  font: 500 12px/1 var(--font-sans);
  letter-spacing: var(--tracking);
  color: var(--ink);
  background: var(--control-bg);
  box-shadow: var(--shadow-control);
  pointer-events: none;
  transition: color 0.12s ease, background-color 0.16s var(--ease-out),
    box-shadow 0.16s var(--ease-out), transform 0.12s ease;
}
.chip:hover span {
  box-shadow: var(--shadow-control-hover);
}
.chip input:active + span {
  transform: scale(0.96);
}
.chip input:checked + span {
  color: #fffdf8;
  background: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(10, 21, 19, 0.22);
}
.chip input:focus-visible + span {
  box-shadow: var(--shadow-control), 0 0 0 2px var(--bg), 0 0 0 4px #2d241466;
}
.wl-row {
  display: flex;
  gap: 8px;
}
.wl-email {
  appearance: none;
  flex: 1;
  min-width: 0;
  height: 40px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  font: 400 14px/1 var(--font-sans);
  letter-spacing: var(--tracking);
  color: var(--ink);
  background: var(--control-bg);
  box-shadow: var(--shadow-control);
  transition: box-shadow 0.16s var(--ease-out);
}
.wl-email::placeholder {
  color: var(--ink-3);
}
.wl-email:hover {
  box-shadow: var(--shadow-control-hover);
}
.wl-email:focus-visible {
  border-radius: 8px;
  box-shadow: var(--shadow-control), 0 0 0 2px var(--accent);
}
.wl-email[aria-invalid="true"] {
  box-shadow: var(--shadow-control), 0 0 0 1.5px var(--red);
}
.btn {
  appearance: none;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 8px;
  font: 560 13px/1 var(--font-sans);
  letter-spacing: var(--tracking);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: box-shadow 0.16s var(--ease-out), transform 0.12s ease, opacity 0.16s ease;
}
.btn:active {
  transform: scale(0.97);
}
.btn-primary {
  color: #fffdf8;
  background: linear-gradient(180deg, #24332f 0%, var(--accent) 100%);
  box-shadow: inset 0 1px 0 rgba(240, 255, 250, 0.14), 0 2px 6px rgba(10, 21, 19, 0.24);
}
.btn[aria-busy="true"] {
  opacity: 0.6;
  pointer-events: none;
}
.wl-consent {
  font: 400 11px/1.5 var(--font-sans);
  letter-spacing: var(--tracking);
  color: var(--ink-3);
}
.wl-consent a {
  color: var(--ink-2);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--ink-3) 60%, transparent);
  text-underline-offset: 2px;
}
.wl-consent a:hover {
  color: var(--ink);
}
.wl-status {
  font: 500 12px/1.4 var(--font-sans);
  letter-spacing: var(--tracking);
  color: var(--red);
}
.wl-status:empty {
  display: none;
}
/* the honeypot: off screen, out of the tab order, read by nothing */
.ap-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
/* on the list: the framework's done panel, with the check drawn on */
.wl-done {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--panel);
  box-shadow: 0 0 0 1px var(--hairline), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  font: 400 13px/1.45 var(--font-sans);
  letter-spacing: var(--tracking);
  color: var(--ink-2);
  text-align: left;
}
.wl-done b {
  font-weight: 600;
  color: var(--ink);
}
.wl-done:focus-visible {
  border-radius: 12px;
}
.wl-done-ic {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 1px rgba(10, 21, 19, 0.3);
}
.wl-done-ic svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (prefers-reduced-motion: no-preference) {
  .wl-done:not([hidden]) {
    animation: done-in 0.42s var(--ease-bloom) both;
  }
  .wl-done:not([hidden]) .wl-done-ic path {
    stroke-dasharray: 22;
    stroke-dashoffset: 22;
    animation: note-draw 0.4s 0.18s var(--ease-out) forwards;
  }
}
@keyframes done-in {
  from { opacity: 0; transform: scale(0.97) translateY(4px); }
  to { opacity: 1; transform: none; }
}
/* phones: a 16px field keeps iOS from zooming in on focus, and the controls
   grow to a comfortable thumb size */
@media (max-width: 480px), (pointer: coarse) {
  .wl-email {
    height: 44px;
    font-size: 16px;
  }
  .btn {
    height: 44px;
  }
  .chip span {
    height: 32px;
    padding: 0 12px;
  }
  .wl-roles legend {
    line-height: 32px;
  }
}
/* a phone's column fits the four pills or the label beside them, not both:
   the label takes its own line so the pills stay one row */
@media (max-width: 480px) {
  .wl-roles legend {
    float: none;
    width: 100%;
    margin: 0 0 2px;
    line-height: 1.4;
  }
}

/* ---------- how it works (numbered steps) ---------- */
.steps {
  margin-bottom: 44px;
}
.steps-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.step {
  position: relative;
  display: flex;
  gap: 14px;
  padding: 14px 2px;
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
/* connector line joining the numbered badges (masked by the opaque badges) */
.step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 27px;
  bottom: -27px;
  width: 1px;
  background: var(--hairline);
  transform-origin: top;
}
.step-num {
  position: relative;
  z-index: 1;
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--ink);
  box-shadow: 0 2px 6px rgba(28, 26, 23, 0.22);
  font: 600 10.5px/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  color: #fff;
}
.step-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-top: 3px;
}
.step-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font: 600 13px/1.3 var(--font-sans);
  letter-spacing: var(--tracking);
  color: var(--ink);
}
.step-desc {
  font: 400 12.5px/1.5 var(--font-sans);
  letter-spacing: var(--tracking);
  color: var(--ink-2);
  text-wrap: pretty;
}
/* scroll-in: steps fade up, connector lines draw downward */
.steps-list.stagger .step {
  opacity: 0;
  transform: translateY(8px);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.steps-list.stagger.in .step {
  opacity: 1;
  transform: none;
}
.steps-list.stagger .step::before {
  transform: scaleY(0);
  transition: transform 0.5s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms + 150ms);
}
.steps-list.stagger.in .step::before {
  transform: scaleY(1);
}

/* ---------- faq (accordion) ---------- */
.faq {
  margin-bottom: 44px;
}
.faq-grid {
  display: flex;
  flex-direction: column;
}
.faq-item {
  border-top: 1px solid var(--hairline);
  transition: border-color 0.2s var(--ease-out);
}
.faq-item:last-child {
  border-bottom: 1px solid var(--hairline);
}
.faq-item:hover,
.faq-item:hover + .faq-item {
  border-top-color: #2d241426;
}
.faq-h {
  font: inherit;
}
.faq-q {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  appearance: none;
  background: none;
  border: none;
  padding: 15px 2px;
  cursor: pointer;
  text-align: left;
}
.faq-q-text {
  flex: 1;
  font: 500 13px/1.35 var(--font-sans);
  letter-spacing: var(--tracking);
  color: var(--ink);
  text-wrap: pretty;
}
/* +/− toggle (reads more "expandable" than a chevron) */
.faq-ic {
  position: relative;
  flex: none;
  width: 12px;
  height: 12px;
  margin-left: 4px;
  color: var(--ink-3);
  transition: color 0.2s var(--ease-out);
}
.faq-ic::before,
.faq-ic::after {
  content: "";
  position: absolute;
  background: currentColor;
  border-radius: 1px;
  transition: transform 0.28s var(--ease-smooth), opacity 0.2s var(--ease-out);
}
.faq-ic::before {
  left: 0;
  right: 0;
  top: 50%;
  height: 1.5px;
  transform: translateY(-50%);
}
.faq-ic::after {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1.5px;
  transform: translateX(-50%);
}
.faq-item.open .faq-ic {
  color: var(--ink-2);
}
.faq-item.open .faq-ic::after {
  transform: translateX(-50%) scaleY(0);
  opacity: 0;
}
/* Answers start open and only fold once the script that unfolds them is
   known to run (index.html marks <html class="js"> before first paint). */
.faq-a {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.26s var(--ease-out);
}
.js .faq-item:not(.open) .faq-a {
  grid-template-rows: 0fr;
}
.faq-a-inner {
  overflow: hidden;
}
.faq-a p {
  margin: 0;
  padding: 0 28px 16px 2px;
  font: 400 12.5px/1.55 var(--font-sans);
  letter-spacing: var(--tracking);
  color: var(--ink-2);
  text-wrap: pretty;
}

/* ---------- closing CTA band ----------
   The page's one inked slab. flowerexecution.com's band, in the icon's dark
   green, with the icon on top and the form inside. */
.cta-band {
  margin: 8px 0 12px;
}
.cta-band-inner {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  color: #fff;
  border-radius: 16px;
  padding: 30px 22px 26px;
  background: radial-gradient(130% 120% at 50% -10%, #1d2f2a 0%, var(--accent) 55%);
  box-shadow: 0 0 0 1px rgba(10, 21, 19, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 18px 40px -14px rgba(10, 21, 19, 0.45);
}
/* faint crosshair watermark (the icon's reticle), cropped into the corner */
.cta-glyph {
  position: absolute;
  right: -26px;
  bottom: -30px;
  width: 150px;
  height: 150px;
  color: rgba(211, 255, 81, 0.07);
  pointer-events: none;
}
.cta-band-inner > :not(.cta-glyph) {
  position: relative;
  z-index: 1;
}
.cta-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 6px;
  border-radius: 11px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 6px 16px -4px rgba(0, 0, 0, 0.6);
}
.cta-title {
  font: 600 16px/1.3 var(--font-sans);
  letter-spacing: -0.01em;
  color: #fff;
  text-wrap: balance;
}
.cta-sub {
  max-width: 32ch;
  font: 400 13px/1.5 var(--font-sans);
  letter-spacing: var(--tracking);
  color: rgba(255, 255, 255, 0.66);
  text-wrap: pretty;
}
.cta-note {
  margin-top: 10px;
  font: 400 11px/1.4 var(--font-mono);
  letter-spacing: var(--tracking);
  color: rgba(255, 255, 255, 0.5);
}
/* the form, re-inked for the slab */
.cta-band .waitlist {
  width: 100%;
  margin-top: 12px;
}
.cta-band .wl-roles {
  justify-content: center;
}
.cta-band .wl-roles legend {
  float: none;
  width: 100%;
  margin: 0 0 2px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.72);
}
.cta-band .wl-roles legend span {
  color: rgba(255, 255, 255, 0.5);
}
.cta-band .chip span {
  color: #fff;
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}
.cta-band .chip:hover span {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}
.cta-band .chip input:checked + span {
  color: var(--accent);
  background: var(--lime);
  box-shadow: none;
}
.cta-band .chip input:focus-visible + span {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5), 0 0 0 2px var(--accent),
    0 0 0 4px rgba(255, 255, 255, 0.6);
}
.cta-band .wl-email {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);
}
.cta-band .wl-email:focus-visible {
  box-shadow: 0 0 0 2px var(--lime);
}
.cta-band .wl-email[aria-invalid="true"] {
  box-shadow: 0 0 0 2px #ff9a85;
}
/* the lime button: the icon's crosshair as the closing call to action */
.btn-lime {
  color: var(--accent);
  background: var(--lime);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 4px 14px -4px rgba(0, 0, 0, 0.5);
}
.btn-lime:focus-visible {
  box-shadow: 0 0 0 2px var(--accent), 0 0 0 4px var(--lime);
}
.cta-band .wl-consent {
  color: rgba(255, 255, 255, 0.5);
}
.cta-band .wl-consent a {
  color: rgba(255, 255, 255, 0.75);
  text-decoration-color: rgba(255, 255, 255, 0.35);
}
.cta-band .wl-consent a:hover {
  color: #fff;
}
.cta-band .wl-status {
  color: #ff9a85;
}
.cta-band .wl-done {
  color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.cta-band .wl-done b {
  color: #fff;
}

/* ---------- footer ---------- */
/* One shape on every page (flowerexecution.com's). Five rows: the links are
   the rows, the signature sits on row 4 and the copyright on row 5. */
.footer2 {
  position: relative;
  margin-top: 44px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: repeat(5, 20px);
  align-items: center;
  gap: 10px 24px;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
  font: 400 12px/1 var(--font-mono);
  letter-spacing: var(--tracking);
  color: var(--ink-3);
}
.footer2 a {
  color: var(--ink-2);
  text-decoration: none;
  transition: color 0.14s ease;
}
.footer2 a:hover {
  color: var(--ink);
}
/* Sized from the mark's own geometry: the bloom sits at y=158 of the 420 unit
   box and the stem meets the ground at y=380, so the height is set to put those
   two on the wordmark row and the signature row exactly. */
.f2-flower {
  position: absolute;
  left: -56px;
  top: -37px;
  width: 162px;
  height: 170px;
  overflow: visible;
  cursor: pointer;
}
.f2-flower:focus-visible {
  outline: 2px solid var(--ink-3);
  outline-offset: 2px;
  border-radius: 8px;
}
.f2-wordmark {
  grid-column: 1;
  grid-row: 1;
  padding-left: 36px;
  display: flex;
  align-items: center;
  gap: 7px;
  font: 600 12.5px/1 var(--font-sans);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.f2-nav {
  display: contents;
}
.f2-nav a {
  grid-column: 2;
  justify-self: end;
}
.f2-sign {
  grid-column: 1;
  grid-row: 4;
  justify-self: start;
  margin-left: 36px;
}
.f2-meta {
  grid-column: 1;
  grid-row: 5;
  font-size: 11px;
  white-space: nowrap;
}
/* On a phone the footer is one column, so there is no gutter to plant the
   flower in and its stem would run straight through the links. */
@media (max-width: 560px) {
  .footer2 {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    align-items: start;
    gap: 15px; /* the framework's 11px put the stacked links 23px apart: under
                  the 24px a finger needs between targets */
  }
  .f2-flower {
    display: none;
  }
  .f2-wordmark {
    grid-column: 1;
    grid-row: 1;
    padding-left: 0;
  }
  .f2-nav a {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
  }
  .f2-sign {
    grid-column: 1;
    grid-row: 7;
    margin-left: 0;
    justify-self: start;
  }
  .f2-meta {
    grid-column: 1;
    grid-row: 8;
  }
}

/* ---------- the signature ---------- */
.footer2 .f2-sign {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  /* a small row is too little to tap: pad the hit area out and pull the same
     amount back off the margin so the footer row does not grow */
  padding-block: 8px;
  margin-block: -8px;
  font: 500 16px/1 var(--font-hand);
  letter-spacing: 0.01em;
  color: var(--ink-3);
  text-decoration: none;
  transition: color 0.15s linear;
}
.footer2 .f2-sign b {
  position: relative;
  font-weight: 600;
  color: var(--ink-2);
  transition: color 0.15s linear;
}
.footer2 .f2-sign:hover,
.footer2 .f2-sign:focus-visible {
  color: var(--ink-2);
}
.footer2 .f2-sign:hover b,
.footer2 .f2-sign:focus-visible b {
  color: var(--ink);
}
/* two passes of a pen around the initials */
.f2-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 52px;
  height: 27px;
  transform: translate(-50%, -50%) rotate(-3deg);
  color: var(--pink);
  overflow: visible;
  pointer-events: none;
}
/* Always there, drawn once on load. Hover deepens it rather than summoning it. */
.f2-ring-draw {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-dasharray: 170;
  stroke-dashoffset: 170;
  opacity: 0.7;
  animation: f2-ring-draw 0.75s 0.4s var(--ease-out) forwards;
  transition: opacity 0.2s var(--ease-out);
}
.f2-ring-draw:nth-child(2) {
  animation-delay: 0.62s;
}
@keyframes f2-ring-draw {
  to {
    stroke-dashoffset: 0;
  }
}
.f2-sign:hover .f2-ring-draw,
.f2-sign:focus-visible .f2-ring-draw {
  opacity: 1;
}
.sign-card {
  position: absolute;
  left: 0;
  bottom: calc(100% + 10px);
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 9px;
  width: 248px;
  padding: 13px 14px 12px;
  border-radius: 14px;
  background: var(--control-bg);
  box-shadow: var(--shadow-card);
  text-decoration: none;
  pointer-events: none;
  opacity: 0;
  transform: translateY(5px) scale(0.97);
  transform-origin: 0 100%;
  transition: opacity 0.14s linear, transform 0.22s var(--ease-out);
}
.sign-card-top {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sign-card-pic {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}
.sign-card-txt {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
  margin-right: auto;
}
.sign-card-name {
  font: 600 13px/1 var(--font-sans);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.sign-card-at {
  font: 400 11px/1 var(--font-mono);
  letter-spacing: 0.04em;
  color: var(--ink-3);
}
.sign-card-x {
  display: flex;
  margin-left: 2px;
  color: var(--ink-3);
}
.sign-card-x svg {
  display: block;
  width: 13px;
  height: 13px;
}
.sign-card-bio {
  font: 500 12.5px/1.4 var(--font-sans);
  letter-spacing: -0.005em;
  color: var(--ink-2);
  text-align: left;
}
.sign-card-stats {
  display: flex;
  gap: 14px;
  font: 400 11px/1 var(--font-mono);
  letter-spacing: 0.03em;
  color: var(--ink-3);
}
.sign-card-stats b {
  font-weight: 600;
  color: var(--ink);
}
@media (hover: hover) and (pointer: fine) {
  .f2-sign:hover .sign-card {
    opacity: 1;
    transform: none;
  }
}
.f2-sign:focus-visible .sign-card {
  opacity: 1;
  transform: none;
}

/* ---------- the flower (footer mark; flower.js animates it) ---------- */
.hero-stem {
  fill: none;
  stroke: var(--ink);
  stroke-width: 5;
  stroke-linecap: round;
}
/* 1.55 at the bloom's x3.4 scale reads as the same line weight as the stem */
.hero-petals {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.55;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.hero-core {
  fill: var(--pink);
}
.hero-sway {
  transform-origin: 206px 380px;
  animation: hero-sway 5s ease-in-out infinite alternate;
}
@keyframes hero-sway {
  from {
    transform: rotate(-1.5deg);
  }
  to {
    transform: rotate(1.6deg);
  }
}

/* ---------- small screens ---------- */
@media (max-width: 480px) {
  .top-right {
    gap: 8px;
  }
  .footer2 {
    margin-top: 36px;
  }
}
@media (max-width: 360px) {
  .dl-btn.is-dark {
    padding: 0 9px;
  }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .dl-btn.is-dark:hover,
  .dl-btn.is-dark:active,
  .btn:active,
  .chip input:active + span,
  .clip-toggle:active,
  .deck-prev:active,
  .deck-next:active {
    transform: none;
  }
  /* the deck still moves on, without the toss: cards just change places */
  .js .deck-card {
    animation: none !important;
    transition: opacity 0.2s linear;
  }
  .hl-draw {
    animation: none;
    stroke-dashoffset: 0;
  }
  .f2-ring-draw {
    animation: none;
    stroke-dashoffset: 0;
  }
  .sign-card {
    transition: opacity 0.14s linear;
    transform: none;
  }
  .hero-sway {
    animation: none;
  }
  .faq-a,
  .faq-ic::before,
  .faq-ic::after {
    transition: none;
  }
}