/* CTA, closing call to action.
   Measured from docs/research/fora/cta-full.json; every value in this file comes from
   viewports.desktop.rules / .flat or the tablet+mobile flats. See docs/research/components/cta.spec.md.
   Section box: 1440 -> 910 tall, 768 -> 491.2, 390 -> 582.41. */

.gf-cta{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:24px;
  width:100%;
  /* Full bleed, like every other section's ground. The 1600 cap here was capping the SECTION, so
     on a wide screen its gradient and its dune stopped 1600px across and the page went black down
     both sides: the closing panel read as a picture of a closing panel. The content keeps its own
     cap on .gf-cta-container below, which is where the measured layout lives. */
  margin-inline:auto;
  padding:0 24px;
  overflow:clip;
  background:linear-gradient(180deg,var(--bg) 0%,#1b2228 100%);
}

/* ---- column ------------------------------------------------------------- */

/* v2: the copy and the window sit ABOVE the dune. Fora lets the dune wash over the bottom of
   its mockup, which is fine for a picture and not fine for a form: at 1440 the dune's top edge
   lands on the submit button, covering it and eating the click. */
.gf-cta-container{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  gap:48px;
  width:100%;
  max-width:var(--container);   /* 1080 */
  padding:180px 0 0;
}

.gf-cta-row{
  position:relative;
  display:flex;
  flex-direction:row;
  align-items:flex-start;
  justify-content:flex-start;
  gap:48px;
  width:100%;
}

/* z-index 1: the copy paints over the mockup column */
.gf-cta-lockup{
  position:relative;
  z-index:1;
  display:flex;
  flex:1 0 0px;
  flex-direction:column;
  align-self:stretch;
  align-items:flex-start;
  justify-content:space-between;
  width:1px;
  padding:0 0 248px;
  overflow:hidden;
}

.gf-cta-stack{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:48px;
  width:100%;
}

.gf-cta-copy{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:24px;
  width:100%;
}

.gf-cta-heading-wrap{width:100%;max-width:610px}
.gf-cta-lead-wrap{width:100%;max-width:607px}

.gf-cta-heading,
.gf-cta-lead{text-align:start;text-wrap:balance}

/* .t-h2 / .t-body already carry the measured desktop type; only the h2 rescales */

/* ---- mockup column ------------------------------------------------------ */

.gf-cta-mockup-col{
  position:relative;
  flex:2 0 0px;
  width:1px;
  height:730px;
  border-top-left-radius:4px;
  overflow:visible;
}

/* Genesis browser window in Fora's `Chat UI` box: 960x675.55 at x 572, bleeding
   272px past the column so the section's overflow:clip cuts it at the viewport edge. */
.gf-cta-frame{
  position:absolute;
  top:46%;
  inset-inline-start:0;
  inset-inline-end:-272px;
  transform:translateY(-50%);
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:6px;
  max-width:960px;
  aspect-ratio:1.42105/1;
  padding:6px;
  border-top-left-radius:24px;
  border-top-right-radius:24px;
  overflow:clip;
  box-shadow:var(--shadow);
}
.gf-cta-frame::after{
  content:"";
  position:absolute;
  inset:0;
  border:1px solid var(--ink-10);
  border-radius:inherit;
  pointer-events:none;
}

/* measured hairline across the top edge of the frame */
.gf-cta-frame-line{
  position:absolute;
  z-index:1;
  top:0;
  left:0;
  right:0;
  height:1px;
  background-color:var(--ink);
  opacity:.75;
  -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgb(0,0,0) 50%,rgba(0,0,0,0) 100%);
          mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgb(0,0,0) 50%,rgba(0,0,0,0) 100%);
}

/* panel treatment measured on Fora's own inner panels: radius 18, rgba(255,255,255,.05) */
.gf-cta-window{
  display:flex;
  flex:1 0 0px;
  flex-direction:column;
  width:1px;
  height:100%;
  border-radius:18px;
  background-color:var(--ink-05);
  overflow:clip;
}

.gf-cta-chrome{
  display:flex;
  flex:0 0 auto;
  align-items:center;
  gap:8px;
  height:44px;
  padding:0 14px;
  border-bottom:1px solid rgba(255,255,255,.08);
  background-color:rgba(0,0,0,.35);
}
.gf-cta-dots{display:flex;flex:0 0 auto;gap:6px}
.gf-cta-dots i{width:10px;height:10px;border-radius:100px;background-color:rgba(255,255,255,.18)}
.gf-cta-address{
  flex:0 1 280px;
  height:22px;
  margin-inline:auto;
  border-radius:var(--radius-pill);
  background-color:rgba(255,255,255,.06);
}

/* ---- the form inside the window ---------------------------------------- */
/* The frame bleeds 272px past the column and the section clips it at the viewport edge, which
   is Fora's composition and stays. A form cannot be clipped, so the column inside is left
   anchored and capped at 560px: at 1280 it ends 156px clear of the cut, at 1440, 230px. */
.gf-cta-screen{
  position:relative;flex:1 1 auto;min-height:0;
  /* Glass, not a hole. The dune passes behind the window; at 25% black its hills stayed fully
     legible through the panel, which read as an accident. Denser ground plus a blur makes the
     translucency deliberate and keeps the fields legible over it. */
  background-color:rgba(8,10,12,.72);
  -webkit-backdrop-filter:blur(14px);
          backdrop-filter:blur(14px);
  overflow:auto;overscroll-behavior:contain;
}

/* [hidden] must win over these display rules, or the received panel just lands on top of the form */
.gf-cta-form[hidden],
.gf-cta-sent[hidden]{display:none!important}

.gf-cta-form{
  display:flex;flex-direction:column;align-items:flex-start;gap:24px;
  width:100%;max-width:560px;padding:36px 48px 40px;
  transition:opacity 300ms var(--ease-link);
}
.gf-cta-form-title{
  font-size:22px;line-height:33px;letter-spacing:-.44px;font-weight:400;color:var(--ink);
}
.gf-cta-form-sub{
  margin-top:-18px;
  font-size:14px;line-height:21px;letter-spacing:-.28px;color:var(--ink-65);
}

.gf-cta-fields{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px;width:100%}
.gf-cta-field{position:relative;display:flex;flex-direction:column;gap:6px;min-width:0}
.gf-cta-field--wide{grid-column:1 / -1}

.gf-cta-label{font-size:12px;line-height:18px;letter-spacing:-.24px;color:var(--ink-65)}
/* --ink-25 is a hairline colour, and on the form's dark panel it put this at 2.2:1. It is a
   word a visitor needs in order to know the field is skippable, so it is text, not a hairline. */
.gf-cta-optional{color:var(--ink-65)}

.gf-cta-input{
  width:100%;height:44px;padding:0 14px;box-sizing:border-box;
  border:1px solid var(--ink-10);border-radius:12px;
  background-color:rgba(255,255,255,.05);
  color:var(--ink);
  font-family:var(--font);font-size:14px;line-height:21px;letter-spacing:-.28px;
  transition:border-color 220ms var(--ease-link),background-color 220ms var(--ease-link);
  -webkit-appearance:none;appearance:none;
}
.gf-cta-input::placeholder{color:var(--ink-25)}
.gf-cta-input:hover{border-color:rgba(255,255,255,.2)}
.gf-cta-input:focus{outline:none;border-color:rgba(255,255,255,.4);background-color:rgba(255,255,255,.08)}
.gf-cta-input:focus-visible{outline:2px solid var(--white);outline-offset:2px}
.gf-cta-input:-webkit-autofill{-webkit-text-fill-color:var(--ink);-webkit-box-shadow:0 0 0 1000px #14171a inset}

/* the select keeps the same box, with its own caret since the native one cannot be themed */
.gf-cta-select{position:relative;display:block;width:100%}
.gf-cta-select select{padding-inline-end:38px;cursor:pointer}
.gf-cta-select select option{background-color:#14171a;color:var(--ink)}
.gf-cta-select select:invalid{color:var(--ink-25)}
.gf-cta-caret{position:absolute;top:50%;inset-inline-end:14px;transform:translateY(-50%);color:var(--ink-65);pointer-events:none}

.gf-cta-err{font-size:12px;line-height:18px;letter-spacing:-.24px;color:#ff9a8a}
.gf-cta-field.is-invalid .gf-cta-input{border-color:#ff9a8a}

/* honeypot: moved off screen rather than display:none, which some bots skip */
.gf-cta-pot{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}

.gf-cta-actions{display:flex;flex-direction:row;align-items:center;gap:16px;flex-wrap:wrap;width:100%}
.gf-cta-submit{
  position:relative;display:flex;align-items:center;justify-content:center;
  height:48px;padding:0 36px;flex:0 0 auto;box-sizing:border-box;
  border-radius:var(--radius-pill);
  background-color:rgba(255,255,255,.8);
  overflow:clip;cursor:pointer;
  transition:background-color .17s var(--ease-link);
}
.gf-cta-submit::after{content:"";position:absolute;inset:0;border:1px solid var(--ink);border-radius:inherit;pointer-events:none}
.gf-cta-submit-label,
.gf-cta-submit-sending{font-size:14px;line-height:21px;letter-spacing:-.28px;font-weight:400;color:#000;white-space:pre}
.gf-cta-submit-sending{display:none}
@media (hover:hover) and (pointer:fine){
  .gf-cta-submit:hover{background-color:var(--ink)}
}
.gf-cta-form.is-sending .gf-cta-submit{pointer-events:none;background-color:var(--ink-25)}
.gf-cta-form.is-sending .gf-cta-submit-label{display:none}
.gf-cta-form.is-sending .gf-cta-submit-sending{display:block}

.gf-cta-note{font-size:12px;line-height:18px;letter-spacing:-.24px;color:var(--ink-65)}
.gf-cta-formerr{font-size:12px;line-height:18px;letter-spacing:-.24px;color:#ff9a8a}

/* a rejected submit shakes the panel once, the same tell the studio's live form uses */
.gf-cta-form.is-shake{animation:gf-cta-shake 420ms cubic-bezier(.36,.07,.19,.97)}
@keyframes gf-cta-shake{
  10%,90%{transform:translateX(-2px)}
  20%,80%{transform:translateX(4px)}
  30%,50%,70%{transform:translateX(-7px)}
  40%,60%{transform:translateX(7px)}
}

/* ---- the received panel ------------------------------------------------- */
/* the panel covers the whole screen area, not just the form's 560px column, or its own edge
   shows as a seam down the middle of the window */
.gf-cta-sent{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:12px;
  padding:36px 48px 40px;
  background-color:rgba(8,10,12,.72);
  opacity:0;transition:opacity 420ms var(--ease-link);
}
.gf-cta-sent-title,.gf-cta-sent-body{max-width:420px}
.gf-cta-sent.is-on{opacity:1}
.gf-cta-sent:focus{outline:none}
.gf-cta-sent-mark{
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:100px;
  background-color:rgba(255,255,255,.1);color:var(--ink);
}
.gf-cta-sent-title{font-size:22px;line-height:33px;letter-spacing:-.44px;color:var(--ink)}
.gf-cta-sent-body{font-size:14px;line-height:21px;letter-spacing:-.28px;color:var(--ink-80);max-width:380px}

/* ---- dune (placeholder artwork, replace before launch) ------------------- */

.gf-cta-dune{
  position:absolute;
  z-index:0;
  pointer-events:none;          /* decorative artwork must never intercept a click */
  bottom:0;
  left:0;
  right:0;
  height:190px;
}
.gf-cta-dune img{width:100%;height:100%;object-fit:cover;object-position:50% 0}

/* ---- 810..1023.98 ------------------------------------------------------- */

/* Below 1280 the bleeding window would leave the form only a 368px slice of itself, so the
   row stacks instead: the copy on top, the window under it at the full column width, no bleed.
   Fora's own composition is kept where there is room for it, which is 1280 and up. */
@media (min-width:810px) and (max-width:1023.98px){
  .gf-cta-container{max-width:720px;padding:120px 0 240px}
  .gf-cta-row{flex-direction:column;gap:48px}
  .gf-cta-lockup{align-self:auto;flex:0 0 auto;width:100%;padding:0}
  .gf-cta-stack{gap:36px}
}
@media (max-width:1279px) and (min-width:810px){
  .gf-cta-heading{font-size:36px;line-height:48.6px;letter-spacing:-1.44px}
}

/* ---- <=809.98: the mockup is dropped, the copy sits in a 24px column ----- */

@media (max-width:809.98px){
  .gf-cta-container{max-width:729px;padding:80px 0 240px}
  .gf-cta-row{flex-direction:column;gap:40px}
  .gf-cta-lockup{align-self:auto;flex:0 0 auto;justify-content:center;gap:48px;width:100%;padding:0}
  .gf-cta-stack{gap:36px;padding:0}
  .gf-cta-copy{align-items:flex-start;gap:16px}
}

/* shared by both stacked ranges: the window sits in the flow, above the dune, sized by the form */
@media (max-width:1023.98px){
  .gf-cta-mockup-col{position:relative;z-index:1;flex:0 0 auto;width:100%;height:auto}
  .gf-cta-frame{position:static;transform:none;left:auto;right:auto;max-width:none;aspect-ratio:auto}
  .gf-cta-window{width:100%;height:auto}
  .gf-cta-screen{overflow:visible}
  .gf-cta-form{max-width:none}
  .gf-cta-sent{position:relative;inset:auto;min-height:260px}
}

@media (max-width:559.98px){
  .gf-cta-form,.gf-cta-sent{padding:28px 20px 32px}
  .gf-cta-fields{grid-template-columns:1fr;gap:16px}
  .gf-cta-submit{width:100%;padding:0 24px}
  .gf-cta-actions{gap:12px}
}
@media (max-width:809px){
  .gf-cta-heading{font-size:32px;line-height:43.2px;letter-spacing:-1.28px}
}

/* ---- reduced motion ----------------------------------------------------- */

@media (prefers-reduced-motion:reduce){
  .gf-cta-submit,.gf-cta-input,.gf-cta-form,.gf-cta-sent{transition:none}
  .gf-cta-form.is-shake{animation:none}
  .gf-cta-dune{transform:none!important;transition:none!important}
}

/* Inline links in the contact column: the catalogue alternative for visitors with no public link,
   and the fallback address in the submission error. Both have to be clickable, not just readable. */
.gf-cta-link{
  color:var(--ink);
  text-decoration:underline;
  text-underline-offset:2px;
  text-decoration-color:var(--ink-25);
  transition:text-decoration-color .3s var(--ease-link);
}
.gf-cta-link:hover{text-decoration-color:var(--ink)}
.gf-cta-link:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:2px}
.gf-cta-note--alt{margin-top:6px}