/* ============================================================
   AlphaPods — GET STARTED / CONTACT PAGE
   Built on the same tokens as the landing page (css/style.css).
   Geometry [R] measured off the supplied 966px screenshot, scaled
   to the 1920 artboard (x1.99). Everything here is [D]/[R]; there
   is no Figma frame for this page.
   ============================================================ */

/* ---- page shell ---------------------------------------------------- */
/* [M] The reference render's flat background measures #161616, not the
   landing page's #0E0E0E — verified against mid-greys, which match the
   --text-muted token exactly (#9E9E9E), so there is no gamma shift in
   the reference and the lighter base is real. Scoped to this page: only
   get-started.html loads this sheet. The footer picks it up via var(--bg). */
body{ --bg:#161616; background:var(--bg); }
/* the breathing room above the footer belongs to .gs, so its wash covers it */
.footer{ margin-top:0; }

/* [M] Footer bloom, measured off the reference as a delta map over the base:
   warm orange peaking at x=24% (delta R+39 G+4 B+3) and swinging to violet
   by x=67% (delta R+13 B+18), both centred below the footer's bottom edge so
   the wash is strongest along the bottom. The shared .footer in style.css is
   a single magenta at 62%; this overrides it for this page only. */
.footer{
  background:
    radial-gradient(66% 135% at 23% 134%, rgba(240,60,32,.34), transparent 74%),
    radial-gradient(54% 120% at 62% 128%, rgba(122,26,160,.24), transparent 72%),
    var(--bg);
}

.gs{
  position:relative;
  padding-block:150px 231px;               /* [R] heading cap y=258; the tail runs
                                              down to the footer rule at y=1365 */
  overflow:hidden;
}

/* warm bloom, low-left — the same family as .hero__bg but mirrored, since
   the screenshot's glow sits under the copy column rather than the art */
.gs__bg{
  position:absolute;inset:0;z-index:0;pointer-events:none;
/* [M] Two blooms, both in the LEFT half — measured off the reference as a
   delta map over the #161616 base. The warm one peaks at the left edge
   around 54% down (delta R+19 G+1 B+4) and the plum one sits lower and
   further in (delta R+10 B+10, G unchanged), which is why the wash reads
   red at the edge and violet by the time it reaches the lattice. Both are
   gone by 47% of the page width. An earlier single warm bloom missed the
   violet half entirely. */
  background:
    radial-gradient(ellipse 880px 900px at 1% 50%,  rgba(216,46,30,.105), transparent 70%),
    radial-gradient(ellipse 820px 860px at 14% 84%, rgba(172,22,172,.080), transparent 74%);
  /* The section clips its children (overflow:hidden); fading the tail keeps
     the wash from ending in a hard horizontal line above the footer, while
     still reaching it — the reference is still tinted at the footer rule. */
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 92%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 0%,#000 92%,transparent 100%);
}
/* faint ruled grid, matching the CTA card's 79px pitch */
.gs__grid{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    repeating-linear-gradient(90deg, rgba(214,219,220,.035) 0 1px, transparent 1px 79px),
    repeating-linear-gradient(0deg,  rgba(214,219,220,.035) 0 1px, transparent 1px 79px);
  -webkit-mask-image:radial-gradient(ellipse 80% 80% at 60% 40%,#000,transparent 85%);
          mask-image:radial-gradient(ellipse 80% 80% at 60% 40%,#000,transparent 85%);
}
/* node lattice, bottom-left [R] */
.gs__art{
  /* [M] Placement matched to the reference. The asset is narrow at its top
     and widest through its middle, so WHICH band of it shows matters as much
     as the scale: at 925 wide (874 tall) and pulled 460px below the section,
     the visible band is the top ~300 rows, which is the widening part the
     reference shows. The footer rule cuts it flat, as it does in the
     reference. Circle diameter measures ~99px in both. */
  position:absolute;left:-118px;bottom:-460px;z-index:0;
  width:925px;pointer-events:none;opacity:.78;   /* [M] strokes measure #2E1F3D */
}
.gs__art img{ width:100%;height:auto;display:block; }

.gs__dot{
  position:absolute;z-index:1;border-radius:50%;pointer-events:none;
}
.gs__dot--a{ right:157px;bottom:192px;width:12px;height:12px;background:#8E2B1C; }
.gs__dot--b{ right:113px;bottom:138px;width:16.1px;height:16.1px;background:#E2532F; }

/* ---- the two columns ----------------------------------------------- */
.gs__inner{
  position:relative;z-index:2;
  width:var(--content);
  max-width:calc(100% - (var(--gutter) * 2));
  margin-inline:auto;
  display:grid;
  grid-template-columns:minmax(0,600px) minmax(0,734px);   /* [R] card 370 x1.99 */
  justify-content:space-between;
  align-items:start;
  gap:60px;
}

/* ---- left column ---------------------------------------------------- */
.gs__title{
  margin:0;
  max-width:600px;
  font-family:var(--font-display);
  font-size:88px;line-height:92px;          /* [R] line pitch 46 x1.99 */
  letter-spacing:-3px;
  font-weight:500;
  /* [M] The same white -> lavender ramp the hero uses, spanning the heading's
     box: sampling the reference gives an identical colour at every x across
     all three lines (x=96 -> #D8D3E3, x=192 -> #ACA1C5), which is what a
     single box-wide 90deg gradient produces. "Your" needs no treatment of
     its own — it is just where the ramp happens to be. */
  /* The hero's colours, but the ramp completes at 84% of the box rather than
     100%: measuring glyph interiors, the reference reaches a given tint ~16%
     sooner than a full-width ramp does (at x=240 it sits at t=0.94 where a
     100% ramp gives 0.79). [M] */
  background:linear-gradient(90deg,var(--title-from) 0%,var(--title-to) 84%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.gs__lede{
  margin:34px 0 0;
  max-width:590px;                          /* [R] breaks after "right" */
  font-size:19px;line-height:26px;
  color:var(--text-muted);
}

/* contact pair — "Email Us" / "Call Us" [R] y=706 on the artboard */
.gs__contact{
  display:flex;
  flex-wrap:wrap;                           /* drop the second column rather
                                               than crush it — the email is one
                                               unbreakable token and never gives
                                               its width back */
  gap:34px 86px;                            /* [R] second column starts x=562 */
  margin-top:66px;
}
.gs__contact > div{ flex:0 0 auto; }

.gs__contact-label{
  display:block;
  font-size:15px;line-height:25px;
  letter-spacing:1.4px;
  color:var(--accent-violet);               /* [R] both labels are violet */
}
.gs__contact-value{
  display:block;margin-top:8px;
  font-size:19px;line-height:26px;
  color:var(--text);
  white-space:nowrap;                       /* the phone number must not break */
  transition:opacity .2s ease;
}
a.gs__contact-value:hover{ opacity:.72; }
.gs__contact-note{
  display:block;margin-top:6px;
  font-size:14px;line-height:20px;
  color:var(--text-muted);
}

.gs__cta{ margin-top:56px; }                /* [R] button top y=864 */

/* ---- form card ------------------------------------------------------ */
.gs__card{
  position:relative;
  padding:72px 88px 56px;                   /* [R] copy inset 49 x1.99 */
  border:1px solid var(--card-line);
  border-radius:32px;
  /* [M] warm at ~27% in from the card's left edge (delta R+13), swinging to
     violet at ~90% (delta B+8). Measuring the card's four corners shows it
     is really a flat violet wash (delta 3,0,8, near-uniform) with a warm
     bloom in the TOP-LEFT corner only — not the diagonal it looks like. */
  background:
    radial-gradient(ellipse 168% 138% at 0% 0%,   rgba(230,112,44,.074), transparent 86%),
    radial-gradient(ellipse 170% 200% at 100% 86%, rgba(60,24,155,.082), transparent 88%);
}
.gs__card-title{
  margin:0 0 44px;
  font-family:var(--font-display);
  font-size:40px;line-height:46px;          /* [R] ink 22 tall x1.99 */
  letter-spacing:-1px;
  font-weight:500;
  color:var(--text);
}

.field{ margin-bottom:50px; }   /* [R] label pitch 124 on the artboard */
.field:last-of-type{ margin-bottom:40px; }
.field label{
  display:block;
  font-size:15px;line-height:22px;
  color:var(--text-muted);
}
.field input,
.field textarea{
  display:block;width:100%;
  margin-top:14px;
  padding:0 0 10px;
  font-family:var(--font-body);
  font-size:18px;line-height:28px;
  color:var(--text);
  background:transparent;
  border:0;
  border-bottom:1px solid rgba(214,219,220,.26);
  border-radius:0;
  outline:none;
  transition:border-color .2s ease;
}
.field textarea{
  min-height:72px;resize:vertical;
  padding-bottom:12px;
}
.field input::placeholder,
.field textarea::placeholder{ color:var(--text-muted);opacity:1; }
.field input:focus,
.field textarea:focus{ border-bottom-color:var(--grad-from); }
.field.is-invalid input,
.field.is-invalid textarea{ border-bottom-color:#E2532F; }
.field__error{
  display:none;margin-top:8px;
  font-size:13px;line-height:18px;
  color:#E2532F;
}
.field.is-invalid .field__error{ display:block; }

/* Outlined at rest, gradient on hover — the same outlined treatment the
   landing page's .btn--ghost uses (#E1692D rule, orange icon).
   The gradient rides on a pseudo-element so it can fade in: a solid
   background cannot transition into a linear-gradient. `isolation` keeps
   that -1 layer inside the button, otherwise it would paint behind the
   card's own background instead of behind the button's label. */
.gs__submit{
  --icon-color:#E43C16;
  position:relative;
  isolation:isolate;
  /* transparent, not the landing page's #0D0D0D — in the reference the
     button interior measures the same as the card around it */
  background:transparent;
  border:1px solid #E1692D;
  color:var(--text);
  min-width:144px;height:47px;padding:0 18px;gap:12px;   /* [D] narrower than the
                                       shared 172px button box — "Submit" is a short label */
  justify-content:flex-start;
  font-size:18px;line-height:25px;
  border-radius:13px;
  transition:color .2s ease, border-color .2s ease;
}
.gs__submit::after{
  content:"";
  position:absolute;inset:-1px;z-index:-1;
  border-radius:inherit;
  background:linear-gradient(135deg,var(--grad-from) 0%,var(--grad-mid) 50%,var(--grad-to) 100%);
  opacity:0;
  transition:opacity .2s ease;
}
.gs__submit .btn__icon{ width:13px;height:13px;transition:background-color .2s ease; }

.gs__submit:hover,
.gs__submit:focus-visible{
  --icon-color:#FFFFFF;
  color:#FFFFFF;
  border-color:transparent;
}
.gs__submit:hover::after,
.gs__submit:focus-visible::after{ opacity:1; }

.gs__thanks{
  display:none;margin-top:26px;
  font-size:16px;line-height:24px;
  color:var(--text);
}
.gs__thanks.is-visible{ display:block; }

/* server-side failure (expired nonce, network) */
.gs__error{
  display:none;margin-top:26px;
  font-size:16px;line-height:24px;
  color:#E2532F;
}
.gs__error.is-visible{ display:block; }
.gs__submit[disabled]{ opacity:.6;cursor:progress; }

/* honeypot — off-screen, not display:none, so naive bots still fill it */
.gs__hp{ position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden; }

/* ---- responsive [D] -------------------------------------------------- */
@media (max-width:1439px){
  .gs__inner{ grid-template-columns:minmax(0,1fr) minmax(0,560px);gap:48px; }
  .gs__contact{ gap:30px 48px; }            /* keeps the pair on one row at 1439 */
  .gs__card{ padding:56px 56px 48px; }
  .gs__title{ font-size:68px;line-height:74px;letter-spacing:-2px; }
  .gs__card-title{ font-size:34px;line-height:40px;margin-bottom:36px; }
}

/* below this the copy column is too narrow to hold the heading and the
   contact pair side by side with the card [D] */
@media (max-width:1199px){
  .gs__inner{ grid-template-columns:1fr;gap:56px; }
  .gs__title{ max-width:none; }
  .gs__card{ max-width:734px; }
}

@media (max-width:1023px){
  .gs{ padding-block:72px 96px; }
  .gs__title{ font-size:52px;line-height:58px; }
  .gs__art{ width:560px;left:-140px;bottom:-280px;opacity:.5; }
  .gs__dot{ display:none; }
  .gs__card{ padding:44px 36px 40px; }
}

@media (max-width:767px){
  .gs{ padding-block:48px 72px; }
  .gs__title{ font-size:38px;line-height:44px;letter-spacing:-1.2px; }
  .gs__lede{ font-size:16px;line-height:24px;margin-top:24px; }
  .gs__contact{ flex-direction:column;gap:28px;margin-top:40px; }
  .gs__cta{ margin-top:36px; }
  .gs__art{ display:none; }
  .gs__card{ padding:32px 22px 32px;border-radius:24px; }
  .gs__card-title{ font-size:28px;line-height:34px;margin-bottom:28px; }
  .field{ margin-bottom:26px; }
}