/* ===========================================================================
   Techno Goober — CTA button system
   ---------------------------------------------------------------------------
   Extracted 2026-08-29 from /cta-system/index.html, which remains the
   living spec page for these three weights:

       .tgbtn--primary   brand fill      the ask
       .tgbtn--ghost     outlined        the alternative
       .tgbtn--quiet     text + rule     the afterthought

   Accessibility, carried over verbatim from the spec and not to be traded
   away: real <a> elements; :focus-visible keeps a 3px ring and is never
   removed; 48px minimum hit height; the cookie and arrow are aria-hidden
   decoration and the label is the accessible name; motion binds only on
   (hover:hover) and (pointer:fine); prefers-reduced-motion drops all
   transform work.

   Behaviour lives in assets/tg-cta.js. The CSS below is a complete
   affordance on its own — if GSAP or JS never arrives, the buttons still
   respond.

   NOTE: /ai-websites/, /pricing-999/, /goober-math/ and /real-people/ still
   carry their own inline copies of this code. They should be migrated to
   this file; until they are, a change here must be mirrored there.
   =========================================================================== */

.tgbtn{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;
  min-height:3rem;                     /* 48px hit target */
  padding:.9rem 1.9rem;
  border-radius:999px;
  border:1px solid transparent;
  font-family:"Bricolage Grotesque",system-ui,sans-serif;
  font-weight:700;
  font-size:clamp(.9375rem,1.5vw,1.0625rem);
  letter-spacing:.01em;
  line-height:1.1;
  text-decoration:none;
  cursor:pointer;
  overflow:hidden;                     /* clips the sweep */
  isolation:isolate;
  -webkit-tap-highlight-color:transparent;
  transform-origin:50% 50%;
}

/* the accent that sweeps across on hover — sits under the label */
.tgbtn__fill{
  position:absolute;inset:0;z-index:0;
  transform:translateX(-101%);
  pointer-events:none;
}
.tgbtn__inner{
  position:relative;z-index:1;
  display:inline-flex;align-items:center;gap:.6rem;
}
.tgbtn__label{display:inline-block}
.tgbtn__arrow,.tgbtn__cookie{display:inline-block;will-change:transform}
.tgbtn__cookie{font-size:1.05em;line-height:1}

/* --- primary ------------------------------------------------------- */
.tgbtn--primary{background:#4ab683;color:#052017}
.tgbtn--primary .tgbtn__fill{background:#7fdcae}

/* --- ghost --------------------------------------------------------- */
.tgbtn--ghost{background:transparent;color:#eef3f0;border-color:#31463c}
.tgbtn--ghost .tgbtn__fill{background:#4ab683}

/* --- quiet --------------------------------------------------------- */
.tgbtn--quiet{
  background:transparent;color:#9db3a9;padding:.75rem .25rem;border-radius:.25rem;
  font-weight:600;font-size:.9375rem;overflow:visible;
}
.tgbtn--quiet .tgbtn__fill{display:none}
.tgbtn--quiet .tgbtn__inner{gap:.4rem}
.tgbtn--quiet::after{
  content:"";position:absolute;left:.25rem;right:.25rem;bottom:.45rem;height:1px;
  background:currentColor;opacity:.35;transform:scaleX(1);transform-origin:left center;
}

/* --- focus: always visible, never removed --------------------------- */
.tgbtn:focus-visible{
  outline:3px solid #eef3f0;
  outline-offset:3px;
}

/* --- fallbacks when JS or motion is unavailable ---------------------- */
/* Pure-CSS affordance so the button is never inert. GSAP takes over
   these same properties when it loads. */
@media (hover:hover) and (pointer:fine){
  .tgbtn--primary:hover{background:#5cc793}
  .tgbtn--ghost:hover{border-color:#4ab683;color:#4ab683}
  .tgbtn--quiet:hover{color:#4ab683}
}
.tgbtn:active{background-color:#3da173}
.tgbtn--ghost:active,.tgbtn--quiet:active{background-color:transparent}

@media (prefers-reduced-motion:reduce){
  .tgbtn,.tgbtn *{transition:none !important;transform:none !important}
  .tgbtn__fill{display:none}
}

/* ===================================================================
   PAPER-BAND VARIANTS — added when this system was extracted from
   /cta-system/ for use on pages that alternate light and dark bands
   (assets/tg-look.css). The ghost variant's colours are tweened by
   GSAP in tg-cta.js using hard-coded dark-ground hex, so a paper
   band gets its own class the script deliberately does not match.
   =================================================================== */
.tgbtn--ghost-dk{
  background:transparent;color:#171C1A;border-color:rgba(23,28,26,.24);
}
.tgbtn--ghost-dk .tgbtn__fill{display:none}
@media (hover:hover) and (pointer:fine){
  .tgbtn--ghost-dk:hover{border-color:#2C7654;color:#2C7654}
}
.tgbtn--ghost-dk:active{background-color:transparent}
.tgbtn--quiet-dk{
  background:transparent;color:#5A6560;padding:.75rem .25rem;border-radius:.25rem;
  font-weight:600;font-size:.9375rem;overflow:visible;
}
.tgbtn--quiet-dk .tgbtn__fill{display:none}
.tgbtn--quiet-dk .tgbtn__inner{gap:.4rem}
.tgbtn--quiet-dk::after{
  content:"";position:absolute;left:.25rem;right:.25rem;bottom:.45rem;height:1px;
  background:currentColor;opacity:.35;transform:scaleX(1);transform-origin:left center;
}
@media (hover:hover) and (pointer:fine){ .tgbtn--quiet-dk:hover{color:#2C7654} }
.tgbtn--ghost-dk:focus-visible,.tgbtn--quiet-dk:focus-visible{outline:3px solid #171C1A;outline-offset:3px}

/* A row of CTAs, used wherever a section closes with an ask. */
.tgcta-row{display:flex;flex-wrap:wrap;align-items:center;gap:.85rem 1.25rem}
.tgcta-row--center{justify-content:center}

/* ===================================================================
   THE GREEN CLOSING BAND
   assets/tg-look.css paints `main ~ section .rounded-[2rem]` flat brand
   green site-wide, and restates .btn-primary / .btn-outline for it. The
   same has to be done here or the dark-ground weights disappear into the
   green. Use --primary, --ghost-dk and --quiet-dk inside that band: the
   plain --ghost tweens its colour back to cream in tg-cta.js, which no
   stylesheet can override.
   =================================================================== */
main ~ section .rounded-\[2rem\] .tgbtn--primary{background:#171C1A;color:#F4F1E9}
main ~ section .rounded-\[2rem\] .tgbtn--primary .tgbtn__fill{background:#2A322F}
main ~ section .rounded-\[2rem\] .tgbtn--ghost-dk{color:#08251A;border-color:rgba(8,37,26,.42)}
main ~ section .rounded-\[2rem\] .tgbtn--quiet-dk{color:#14402E}
main ~ section .rounded-\[2rem\] .tgbtn:focus-visible{outline-color:#08251A}
@media (hover:hover) and (pointer:fine){
  main ~ section .rounded-\[2rem\] .tgbtn--primary:hover{background:#2A322F}
  main ~ section .rounded-\[2rem\] .tgbtn--ghost-dk:hover{border-color:#08251A;color:#08251A}
  main ~ section .rounded-\[2rem\] .tgbtn--quiet-dk:hover{color:#08251A}
}