/* Funnel module CSS (extracted from landing.html 2026-08-06 lean pass).
 *
 * This was a ~40KB inline <style> re-sent inside every HTML response and
 * invisible to the static-file cache. As a hashed static it is
 * immutable-cached; the HTML shrinks accordingly. Scoped to #gr-funnel /
 * .gr-* so it never collides with the design CSS (original scoping note
 * preserved below).
 */
  /* Scoped to #gr-funnel so it never collides with the design CSS. */
  /* Iter 2: the module is the full focus - fills the first viewport so the
     hero below is pushed down. */
  /* Full first viewport (2026-07-07): 80vh left a ~60px sliver of the hero's
     ThesisAI card peeking bottom-right on load. 100svh = only the centric
     URL-paste module above the fold (svh tracks mobile browser chrome).
     isolation + contain give the loader's animated blur/transform layers a
     self-contained compositing boundary so the example <video>s below stop
     flickering during generation (GPU layer thrash fix). */
  /* Optical centering v2 (2026-07-12 pm, Felix): the top-anchored iteration
     overshot ("I don't need it on top of the screen"). Back to flex-center,
     with a slightly heavier bottom pad so the block sits a touch ABOVE the
     geometric center - where a centered layout reads as centered - keeping
     more air below the URL input than above the headline. The 100svh - 69px
     pin is untouched: header + funnel still fill exactly one viewport and the
     hero's ThesisAI card never peeks on load. Same behavior on mobile (vh). */
  #gr-funnel { position: relative; overflow: hidden; display: flex; align-items: center;
    min-height: calc(100vh - 69px - var(--gr-announce-h, 0px));
    min-height: calc(100svh - 69px - var(--gr-announce-h, 0px));
    isolation: isolate; contain: paint;
    padding: clamp(2rem, 5vh, 3.5rem) 1rem clamp(3rem, 9vh, 5.5rem); }
  .gr-funnel__inner { position: relative; max-width: 780px; width: 100%; margin: 0 auto; text-align: center; }
  .gr-funnel__headline { font-size: clamp(2rem, 5.2vw, 3.2rem); line-height: 1.12; margin: 0 0 .8rem; font-weight: 700; }
  .gr-funnel__pct { color: #FF5A1F; }
  .gr-funnel__sub { font-size: clamp(1rem, 2vw, 1.25rem); opacity: .85; margin: 0 0 2rem; }
  /* Centered stack (2026-08-24, Felix): heading, URL input, Generate, then
     the sample pill - one centered column instead of input+button side by
     side. The input spans the column; the button keeps its own width. */
  .gr-funnel__form { display: flex; flex-direction: column; align-items: center;
    gap: .8rem; max-width: 600px; margin: 0 auto; }
  #gr-funnel-url {
    scroll-margin-top: 100px;
    width: 100%; padding: 1rem 1.1rem; border-radius: 12px;
    border: 1px solid rgba(255,90,31,.35); background: rgba(11,42,61,.72);
    color: inherit; font-size: 1rem;
    /* Centered text (2026-07-11, Felix): the module is centric, so the URL
       placeholder/text reads centered too instead of hugging the left edge. */
    text-align: center;
    box-shadow: 0 0 0 4px rgba(255,90,31,.06), 0 10px 34px rgba(5,28,44,.45);
  }
  #gr-funnel-url:focus { outline: none; border-color: rgba(255,90,31,.85); box-shadow: 0 0 0 4px rgba(255,90,31,.18); }
  #gr-funnel-go { padding-inline: 1.5rem; }
  /* Muted while the URL has not yet parsed as a site (validate-as-you-type). */
  #gr-funnel-go:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
  /* ---- generation stage: progress ring + preview (directly below input) ----
     3rem gap (2026-07-11, Felix): more air between the URL input's bottom and
     the top of the teaser frame. */
  /* 1.4rem (2026-08-24, Felix): the sample showcase must open close to the
     sample pill so the visitor never loses track (was 3rem of air). */
  .gr-funnel__stage { margin: 1.4rem auto 0; max-width: 600px; }
  .gr-funnel__stage[hidden] { display: none; }
  .gr-funnel__videowrap { position: relative; width: 270px; max-width: 80vw; margin: 0 auto; aspect-ratio: 9/16; border-radius: 14px; overflow: hidden; background: #000; }
  .gr-funnel__video { width: 100%; height: 100%; object-fit: cover; display: block; }
  .gr-funnel__video[hidden] { display: none; }
  /* The locked sample (2026-09-22a): a stored, pre-blurred, muted 9:16 file
     under a lock glyph, the hook line from the page across it. Fills the
     videowrap like the old player did; the blur is IN the file, never CSS. */
  .gr-funnel__locked { position: absolute; inset: 0; width: 100%; height: 100%; }
  .gr-funnel__locked[hidden] { display: none; }
  .gr-funnel__locked video { width: 100%; height: 100%; object-fit: cover; display: block; }
  .gr-funnel__locked::after { content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(5,28,44,.05) 0%, rgba(5,28,44,.55) 100%); pointer-events: none; }
  /* 2026-09-22b: the brand tint over the grey montage, and the lock as the
     checkout button (icon + price), large enough for a thumb. */
  .gr-funnel__tint { position: absolute; inset: 0; mix-blend-mode: color; opacity: .6; pointer-events: none; }
  .gr-funnel__tint[hidden] { display: none; }
  .gr-funnel__lock { position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%);
    z-index: 3; display: flex; flex-direction: column; align-items: center; gap: .55rem;
    padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: #fff; }
  .gr-funnel__lock-icon { width: 72px; height: 72px; border-radius: 999px;
    background: rgba(5,28,44,.72); border: 1px solid rgba(255,255,255,.45);
    display: flex; align-items: center; justify-content: center; transition: transform .15s ease; }
  .gr-funnel__lock-icon svg { width: 30px; height: 30px; }
  .gr-funnel__lock:hover .gr-funnel__lock-icon, .gr-funnel__lock:focus-visible .gr-funnel__lock-icon { transform: scale(1.06); }
  /* 2026-10-06: the visible label + price, one orange pill under the glyph. */
  .gr-funnel__lock-cta { display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap;
    padding: .55rem 1rem; border-radius: 999px; background: #ff5a1f; color: #1a0e06;
    font-weight: 700; font-size: .95rem; line-height: 1; box-shadow: 0 6px 20px rgba(255,90,31,.35); }
  .gr-funnel__lock-price { padding-left: .5rem; border-left: 1px solid rgba(26,14,6,.35); }
  .gr-funnel__lock:hover .gr-funnel__lock-cta, .gr-funnel__lock:focus-visible .gr-funnel__lock-cta { background: #e8480f; }
  .gr-funnel__lock:disabled { cursor: progress; opacity: .8; }
  .gr-funnel__lock:focus-visible { outline: 2px solid #fff; outline-offset: 6px; border-radius: 12px; }
  .gr-funnel__hook { position: absolute; left: 6%; right: 6%; bottom: 9%; z-index: 2; margin: 0;
    color: #fff; font-weight: 800; font-size: 1.15rem; line-height: 1.2; text-align: center;
    text-shadow: 0 2px 10px rgba(0,0,0,.6); overflow-wrap: anywhere;
    /* 2026-10-06: a long page headline never climbs into the lock. */
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
  .gr-funnel__status { min-height: 1.2em; font-size: .9rem; opacity: .8; margin-top: .6rem; }
  .gr-funnel__status:empty { display: none; }
  /* L-5: the human fallback shown only when the preview throttle hits. */
  .gr-funnel__b2b { font-size: .88rem; opacity: .85; margin-top: .3rem; }
  .gr-funnel__b2b[hidden] { display: none; }
  .gr-funnel__b2b a { color: #FF5A1F; font-weight: 600; text-decoration: underline; }

  .gr-funnel__mission-label { font-size: 1rem; font-weight: 600; opacity: .9;
    margin: 0 0 .8rem; text-align: center; }

  /* ---- mobile: single column, nothing cramped or overflowing ---- */
  @media (max-width: 600px) {
    /* the form is a centered column at every width since 2026-08-24 */
    #gr-funnel-go { width: 100%; }
    .gr-funnel__videowrap { width: 220px; }
    /* carousel mobile rules live in gorocket-avatar-carousel.css */
  }

/* The avatars section (2026-09-22, Felix): one button opens the showcase
   in place; it no longer sits under the URL input. */
.gr-avatars__open { text-align: center; margin: 0 0 1.2rem; }
.gr-avatars__open [hidden], .gr-avatars__open button[hidden] { display: none; }

/* Showcase v2 (2026-08-22): the pre-rendered sample ad inside the funnel
   stage. Same 9:16 frame metrics as the videowrap; the chip row wraps
   (up to 42 published avatars). Chip visuals reuse .sc-chip from
   gorocket-landing.css - the classes stayed on purpose. */
.gr-funnel__showcase { margin: 0 auto; max-width: 600px; }
.gr-funnel__showcase-frame { position: relative; width: 270px; max-width: 80vw;
  margin: 0 auto; aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden;
  background: #000; }
.gr-funnel__showcase-frame video { width: 100%; height: 100%;
  object-fit: cover; display: block; }
/* Tap to pause (2026-08-24, Felix): the whole frame toggles playback; a
   static centered play badge marks the paused state (no motion). */
.gr-funnel__showcase-frame { cursor: pointer; }
.gr-funnel__showcase-frame.is-paused::after { content: "";
  position: absolute; inset: 0; margin: auto; width: 64px; height: 64px;
  border-radius: 50%; background-color: rgba(5, 28, 44, .68);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f2f5fb'%3E%3Cpath d='M8.5 5.5v13l10-6.5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center;
  background-size: 28px; pointer-events: none; }
.gr-funnel__showcase-label { margin: .7rem 0 0; font-size: .85rem;
  color: #9aa6bf; text-align: center; }
.gr-funnel__showcase-label strong { color: #f2f5fb; }
/* 2026-08-30c: the picker is the face carousel; give it breathing room
   under the bridge CTA. Card visuals come from gorocket-avatar-carousel.css. */
.gr-funnel__showcase .gr-avcar { margin-top: 14px; }
/* Bridge (2026-08-29d): the crossing CTA under the player. Filled orange -
   this is the one action we want; static, no motion, no arrows. */
.sc-bridge { display: block; margin: 12px auto 2px; background: #FF5A1F;
  border: 1px solid #FF5A1F; border-radius: 999px; cursor: pointer;
  font-family: inherit; font-size: .95rem; font-weight: 700; color: #fff;
  padding: 11px 24px; transition: background .18s ease, box-shadow .18s ease; }
.sc-bridge:hover, .sc-bridge:focus-visible { background: #ff7a47;
  box-shadow: 0 0 16px rgba(255, 90, 31, .3); }

/* Gate 2 (2026-08-21, 4e): post-aha focus. Once the visitor's own preview
   is revealed, the generic pitch sections below it (hero, the 40x pitch,
   the example reel, the duplicate final CTA) hide - their ad is the page
   now. Pricing, FAQ, the authority marquee and the footer stay. */
body.gr-funnel-revealed .gr-hide-on-reveal { display: none; }

/* 2026-10-05: the script-by-email form under the locked sample. */
.gr-funnel__script { max-width: 420px; margin: 1rem auto 0; text-align: left; }
.gr-funnel__script[hidden] { display: none; }
.gr-funnel__script-label { display: block; font-size: .95rem; font-weight: 700; margin-bottom: .45rem; }
.gr-funnel__script-row { display: flex; gap: 8px; }
.gr-funnel__script-input { flex: 1 1 auto; min-width: 0; padding: 10px 12px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.06); color: #fff; font-size: 16px; }
.gr-funnel__script-input::placeholder { color: rgba(255,255,255,.45); }
.gr-funnel__script-btn { flex: 0 0 auto; padding-left: .95rem; padding-right: .95rem; }
.gr-funnel__script-status { font-size: .85rem; min-height: 1.2em; margin: .4rem 0 0; }
.gr-funnel__script-status:empty { display: none; }
.gr-funnel__script-fine { font-size: .75rem; opacity: .6; margin: .35rem 0 0; }
.gr-funnel__script-fine a { color: inherit; text-decoration: underline; }
.gr-funnel__script.is-sent .gr-funnel__script-row { display: none; }

/* 2026-10-14: the $0 storyboard preview (gorocket-storyboard-preview.js).
   Our rocket launches inside the 9:16 frame, its layer fades slowly onto a
   title card, then the visitor's four beats play. The composition is drawn
   at 1080x1920 (the emailed video's own coordinates) and scaled by --s. The
   lock sits on top of the frame and opens on hover. */
.gr-sbp { margin: 0 auto 4px; }
.gr-sbp[hidden] { display: none; }
.gr-sbp__frame { position: relative; width: min(300px, 74vw, calc(56svh * 9 / 16)); aspect-ratio: 9 / 16; margin: 0 auto;
  border-radius: 22px; overflow: hidden; background: #070a12; border: 1px solid rgba(148,163,196,.22);
  box-shadow: 0 30px 80px -30px rgba(255,90,31,.45), 0 0 0 6px rgba(255,255,255,.03); }
.gr-sbp__comp { position: absolute; left: 0; top: 0; width: 1080px; height: 1920px; transform: scale(var(--s, .27));
  transform-origin: 0 0; font-family: 'Space Grotesk', system-ui, sans-serif; color: #10131c; }
.gr-sbp__scene { position: absolute; inset: 0; opacity: 0; visibility: hidden; margin: 0; }
.gr-sbp:not(.is-ready) .gr-sbp__title { opacity: 1; visibility: visible; }
.gr-sbp__big { margin: 0; font-weight: 700; letter-spacing: -0.025em; line-height: 1.04; overflow-wrap: anywhere; }
.gr-sbp__big { font-size: 108px; }
.gr-sbp__word { display: inline-block; }

/* the title card: their domain and the four scenes ticking on */
.gr-sbp__title { background: radial-gradient(120% 70% at 50% 110%, rgba(255,90,31,.32), rgba(7,10,18,0) 60%), #070a12;
  color: #f2f5fb; padding: 360px 96px 0; }
.gr-sbp__kicker { margin: 0 0 24px; font-family: 'IBM Plex Mono', monospace; font-size: 34px; letter-spacing: .16em;
  text-transform: uppercase; color: #ff8a5c; }
.gr-sbp__domain { margin: 0 0 90px; font-size: 104px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; overflow-wrap: anywhere; }
.gr-sbp__slates { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; }
.gr-sbp__slates li { display: flex; align-items: center; gap: 30px; padding: 30px 36px; border-radius: 26px; font-size: 52px; font-weight: 600;
  background: rgba(255,255,255,.05); border: 2px solid rgba(148,163,196,.18); opacity: .25; }
.gr-sbp__slates span { font-family: 'IBM Plex Mono', monospace; font-size: 36px; color: #ff8a5c; }
.gr-sbp.is-launched .gr-sbp__slates li { animation: gr-sbp-tick .5s ease forwards; }
.gr-sbp.is-launched .gr-sbp__slates li:nth-child(2) { animation-delay: .9s; }
.gr-sbp.is-launched .gr-sbp__slates li:nth-child(3) { animation-delay: 1.8s; }
.gr-sbp.is-launched .gr-sbp__slates li:nth-child(4) { animation-delay: 2.7s; }
@keyframes gr-sbp-tick { to { opacity: 1; border-color: rgba(255,90,31,.6); background: rgba(255,90,31,.1); } }

/* the recommended style's own clip, the spoken lines as its captions */
.gr-sbp__hook { background: #000; }
.gr-sbp__clip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gr-sbp__shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,0) 60%); }
.gr-sbp__rec { position: absolute; left: 56px; right: 56px; top: 190px; margin: 0; padding: 20px 34px; border-radius: 999px; width: fit-content;
  background: rgba(7,10,18,.66); color: #fff; font-size: 42px; font-weight: 600; backdrop-filter: blur(6px); }
.gr-sbp__rec:empty { display: none; }
.gr-sbp__hook .gr-sbp__big { position: absolute; left: 72px; right: 72px; bottom: 560px; color: #fff; }

/* the slate: which scene of four is on */
.gr-sbp__slate { position: absolute; left: 56px; top: 56px; margin: 0; padding: 16px 30px; border-radius: 999px;
  background: rgba(7,10,18,.72); color: #fff; font-family: 'IBM Plex Mono', monospace; font-size: 46px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; opacity: 0; transition: opacity .3s ease; }
.gr-sbp.is-ready .gr-sbp__slate { opacity: 1; }
.gr-sbp__slate span:first-child { color: #ff8a5c; }
.gr-sbp__chip { position: absolute; right: 10px; top: 10px; z-index: 3; padding: 4px 10px; border-radius: 999px;
  background: rgba(7,10,18,.7); color: #f2f5fb; font: 600 11px/1.4 'IBM Plex Mono', monospace; letter-spacing: .1em; text-transform: uppercase; }

/* the launch: our rocket fires and leaves fast, the layer fades slowly */
.gr-sbp__launch { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden;
  background: radial-gradient(90% 60% at 50% 100%, rgba(255,90,31,.25), rgba(7,10,18,0) 70%), #070a12;
  transition: opacity 1.3s ease; }
.gr-sbp.is-launched .gr-sbp__launch { opacity: 0; }
.gr-sbp__stars { position: absolute; inset: -40% 0 0; background-image:
  radial-gradient(1.5px 1.5px at 12% 18%, #cfe8ff 50%, transparent), radial-gradient(1.5px 1.5px at 70% 12%, #fff 50%, transparent),
  radial-gradient(1px 1px at 40% 38%, #9fd8ff 50%, transparent), radial-gradient(1.5px 1.5px at 84% 46%, #fff 50%, transparent),
  radial-gradient(1px 1px at 22% 62%, #cfe8ff 50%, transparent), radial-gradient(1.5px 1.5px at 58% 74%, #fff 50%, transparent),
  radial-gradient(1px 1px at 90% 84%, #9fd8ff 50%, transparent), radial-gradient(1px 1px at 8% 90%, #fff 50%, transparent); }
.gr-sbp__rocket { position: absolute; left: 50%; bottom: 14%; transform: translateX(-50%); }
.gr-sbp__flame { opacity: 0; transform-box: view-box; transform-origin: 30px 62px; }
.gr-sbp__launch.is-go .gr-sbp__rocket { animation: gr-sbp-lift .95s cubic-bezier(.55,0,.9,.35) forwards; }
.gr-sbp__launch.is-go .gr-sbp__flame { animation: gr-sbp-flame .12s ease-in-out infinite alternate; }
.gr-sbp__launch.is-go .gr-sbp__stars { animation: gr-sbp-warp .95s cubic-bezier(.55,0,.9,.35) forwards; }
@keyframes gr-sbp-lift { 0% { transform: translate(-50%, 0) } 18% { transform: translate(calc(-50% + 2px), 2px) }
  26% { transform: translate(calc(-50% - 2px), 0) } 100% { transform: translate(-50%, -620%) } }
@keyframes gr-sbp-flame { from { opacity: .75; transform: scaleY(.85) } to { opacity: 1; transform: scaleY(1.25) } }
@keyframes gr-sbp-warp { to { transform: translateY(30%) scaleY(1.6); opacity: .5 } }

/* the lock on top of the frame: it opens on hover, the price pill pulses;
   a dark fade under it keeps it readable on every scene, their colour too */
.gr-sbp__frame::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 24%; z-index: 3; pointer-events: none;
  background: linear-gradient(to top, rgba(7,10,18,.78), rgba(7,10,18,0)); }
.gr-sbp .gr-funnel__lock { position: absolute; left: 50%; top: auto; bottom: 14px; transform: translateX(-50%);
  z-index: 4; flex-direction: row; gap: .5rem; }
.gr-sbp .gr-funnel__lock .gr-funnel__lock-icon { width: 44px; height: 44px; background: rgba(7,10,18,.78); animation: gr-sbp-ring 2.4s ease-out infinite; }
.gr-sbp .gr-funnel__lock .gr-funnel__lock-icon svg { width: 22px; height: 22px; overflow: visible; }
.gr-sbp__shackle { transform-box: view-box; transform-origin: 16px 11px; transition: transform .35s cubic-bezier(.3,.7,.3,1.4); }
.gr-sbp .gr-funnel__lock:hover .gr-sbp__shackle, .gr-sbp .gr-funnel__lock:focus-visible .gr-sbp__shackle { transform: translateY(-3px) rotate(-32deg); }
.gr-sbp .gr-funnel__lock .gr-funnel__lock-cta { position: relative; overflow: hidden; padding: .7rem 1.1rem; }
.gr-sbp .gr-funnel__lock .gr-funnel__lock-cta::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.55), rgba(255,255,255,0));
  animation: gr-sbp-shine 3.2s ease-in-out infinite; }
.gr-sbp .gr-funnel__lock:hover .gr-funnel__lock-cta { transform: scale(1.04); }
@keyframes gr-sbp-shine { 0%, 55% { left: -60% } 85%, 100% { left: 130% } }
@keyframes gr-sbp-ring { 0% { box-shadow: 0 0 0 0 rgba(255,90,31,.55) } 70%, 100% { box-shadow: 0 0 0 14px rgba(255,90,31,0) } }
/* a phone has no hover: the shackle breathes open now and then */
@media (hover: none) { .gr-sbp__shackle { animation: gr-sbp-breathe 4s ease-in-out infinite; } }
@keyframes gr-sbp-breathe { 0%, 70%, 100% { transform: none } 80%, 90% { transform: translateY(-3px) rotate(-32deg) } }
@media (prefers-reduced-motion: reduce) {
  .gr-sbp__launch { display: none; }
  .gr-sbp .gr-funnel__lock .gr-funnel__lock-icon, .gr-sbp .gr-funnel__lock .gr-funnel__lock-cta::after, .gr-sbp__shackle { animation: none; }
}

/* 2026-10-20: the lock and the doors show once the lines exist. While the
   worker retries the web tier's failed try, the title card says so (the
   wait line) in place of the four slates. */
.gr-sbp:not(.is-ready) .gr-funnel__lock, .gr-sbp:not(.is-ready) .gr-funnel__tiers { display: none; }
.gr-sbp__wait { display: none; margin: 40px 0 0; font-size: 52px; font-weight: 600; line-height: 1.3; color: #f2f5fb; }
.gr-sbp.is-pending .gr-sbp__slates { display: none; }
.gr-sbp.is-pending .gr-sbp__wait { display: block; }
/* the sheet's tier line under the lock (pages/storyboard.html .sb__tiers) */
.gr-funnel__tiers { margin: 10px auto 0; max-width: 420px; text-align: center; color: #9aa6bf; font-size: .88rem; }
.gr-funnel__tier { color: #ff8a5c; font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(255,138,92,.5); }
.gr-funnel__tier:hover { color: #fff; }
.gr-funnel__tier[disabled] { cursor: progress; opacity: .7; }

/* 2026-10-16 (Andreas's review; Felix): the optional note under the paste box, collapsed */
.gr-funnel__note { width: min(560px, 100%); margin: 10px auto 0; text-align: left; color: #9aa6bf; font-size: .9rem; }
.gr-funnel__note summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px; padding: 4px 2px; }
.gr-funnel__note summary::-webkit-details-marker { display: none; }
.gr-funnel__note summary::before { content: "+"; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 999px;
  border: 1px solid rgba(148,163,196,.4); font: 600 13px/1 'IBM Plex Mono', monospace; }
.gr-funnel__note[open] summary::before { content: "\2013"; }
.gr-funnel__note textarea { display: block; width: 100%; margin-top: 8px; padding: 10px 12px; border-radius: 12px; resize: vertical;
  background: rgba(13,19,34,.82); border: 1px solid rgba(148,163,196,.22); color: #f2f5fb; font: inherit; font-size: .95rem; }
.gr-funnel__note textarea:focus-visible { outline: 2px solid #ff5a1f; outline-offset: 1px; }

/* the concepts of their ad: chips under the preview, the active one lit */
.gr-sbp__concepts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 14px auto 0; max-width: 560px; }
.gr-sbp__concepts[hidden] { display: none; }
.gr-sbp__concept { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; cursor: pointer;
  background: rgba(13,19,34,.82); border: 1px solid rgba(148,163,196,.22); color: #f2f5fb; font: 600 .86rem 'Space Grotesk', system-ui, sans-serif;
  transition: border-color .2s ease, transform .2s ease; }
.gr-sbp__concept img { width: 26px; height: 26px; border-radius: 999px; object-fit: cover; }
.gr-sbp__concept:hover, .gr-sbp__concept:focus-visible { border-color: rgba(255,90,31,.6); transform: translateY(-1px); }
.gr-sbp__concept[aria-pressed="true"] { border-color: #ff5a1f; background: rgba(255,90,31,.14); }
.gr-sbp__concept[disabled] { opacity: .6; cursor: progress; }
.gr-sbp__concepts-note { width: 100%; text-align: center; margin: 0; color: #7f8aa5; font: 500 .74rem 'IBM Plex Mono', monospace; letter-spacing: .08em; text-transform: uppercase; }