/* ================================================================
   READYLAYER — get-started.css
   Page-specific styles for /get-started only.
   Load order: after main.css only (services.css not needed here)
   All classes prefixed gs- to avoid collision.

   Reused from main.css (no new CSS needed):
     rl-eyebrow, rl-header / nav, all CSS variables,
     rl-year (footer year span), Bootstrap .container,
     .visually-hidden-focusable (Bootstrap utility)

   This page does NOT use:
     svc-hero, svc-page-cta, rl-btn-primary, rl-btn-ghost,
     rl-footer — conversion pages use minimal gs-footer-strip only

   Architecture note:
     The full-viewport two-panel layout (gs-page-wrap) is unique
     to this page and should not be promoted to main.css.
     The gs-process-steps pattern is structurally similar to
     frm-assess-steps but lives on a dark background — keep separate.
   ================================================================ */


/* ----------------------------------------------------------------
   BODY OVERRIDE
   This page needs full-height panel layout; prevent rl-main
   top-padding from interfering.
   ---------------------------------------------------------------- */
.gs-body { background: var(--rl-off-white); }

/* Suppress the default rl-main top margin — page has its own panel padding */
.gs-body .rl-main,
.gs-body main {
  padding-top: 0;
  margin-top:  0;
}


/* ----------------------------------------------------------------
   FULL-VIEWPORT TWO-PANEL LAYOUT
   ---------------------------------------------------------------- */
.gs-page-wrap {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  min-height:            calc(100vh - 64px); /* subtract nav height */
  margin-top:            64px;               /* push below fixed nav */
}

@media (max-width: 991.98px) {
  .gs-page-wrap { grid-template-columns: 1fr; }
}


/* ----------------------------------------------------------------
   LEFT PANEL  (dark info + process steps)
   ---------------------------------------------------------------- */
.gs-left-panel {
  background:      var(--rl-near-black);
  padding:         80px 72px;
  position:        relative;
  overflow:        hidden;
  display:         flex;
  flex-direction:  column;
  justify-content: space-between;
  gap:             3rem;
}

/* Ambient radial glow */
.gs-left-panel::before {
  content:        '';
  position:       absolute;
  bottom:         -100px;
  right:          -100px;
  width:          500px;
  height:         500px;
  background:     radial-gradient(ellipse, rgba(200,80,42,.08) 0%, transparent 65%);
  pointer-events: none;
}

.gs-lp-content {
  position:  relative;
  z-index:   1;
  animation: rl-fadeUp 0.8s ease forwards;
}

.gs-lp-h1 {
  font-family:    var(--rl-font-display);
  font-size:      clamp(2rem, 3.5vw, 2.8rem);
  font-weight:    800;
  color:          var(--rl-off-white);
  line-height:    1.12;
  letter-spacing: -0.02em;
  margin-bottom:  1.25rem;
}
.gs-lp-h1 em { font-style: italic; color: var(--rl-accent); }

.gs-lp-intro {
  font-size:     1rem;
  color:         rgba(245,242,236,.55);
  line-height:   1.8;
  margin-bottom: 3rem;
  max-width:     420px;
  font-weight:   300;
}

/* Process steps */
.gs-process-steps {
  display:        flex;
  flex-direction: column;
  gap:            1px;
}

.gs-ps {
  display:               grid;
  grid-template-columns: 36px 1fr;
  gap:                   1rem;
  align-items:           start;
  padding:               1.25rem 1.25rem 1.25rem 0;
  border-bottom:         1px solid rgba(255,255,255,.05);
}
.gs-ps:last-child { border-bottom: none; }

.gs-ps-num {
  width:           36px;
  height:          36px;
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-family:     var(--rl-font-mono);
  font-size:       0.65rem;
  font-weight:     700;
  background:      rgba(200,80,42,.15);
  border:          1px solid rgba(200,80,42,.25);
  color:           var(--rl-accent);
  flex-shrink:     0;
}

.gs-ps-text strong {
  display:       block;
  font-size:     0.9rem;
  font-weight:   600;
  color:         var(--rl-off-white);
  margin-bottom: 0.2rem;
}
.gs-ps-text span {
  font-size:   0.8rem;
  color:       rgba(245,242,236,.4);
  line-height: 1.6;
}

/* Commitments strip */
.gs-commits {
  list-style:     none;
  padding:        0;
  display:        flex;
  flex-direction: column;
  gap:            0.6rem;
  position:       relative;
  z-index:        1;
  animation:      rl-fadeUp 0.8s 0.2s ease forwards;
}

.gs-commit {
  display:     flex;
  align-items: center;
  gap:         0.75rem;
  font-size:   0.8rem;
  color:       rgba(245,242,236,.4);
  line-height: 1.5;
}
.gs-commit::before {
  content:     '✓';
  font-size:   0.7rem;
  color:       #4aae80; /* green — not in main.css variables, localised here */
  font-weight: 700;
  flex-shrink: 0;
}

@media (max-width: 991.98px) {
  .gs-left-panel { padding: 60px 24px; }
  .gs-lp-intro   { margin-bottom: 2rem; }
}


/* ----------------------------------------------------------------
   RIGHT PANEL  (warm form)
   ---------------------------------------------------------------- */
.gs-right-panel {
  background:      var(--rl-warm);
  padding:         80px 72px;
  display:         flex;
  flex-direction:  column;
  justify-content: flex-start;
}

.gs-form-header {
  margin-bottom: 2.5rem;
  animation:     rl-fadeUp 0.8s 0.1s ease forwards;
}

.gs-form-title {
  font-family:    var(--rl-font-display);
  font-size:      1.5rem;
  font-weight:    700;
  letter-spacing: -0.01em;
  margin-bottom:  0.35rem;
}

.gs-form-subtitle {
  font-size:   0.88rem;
  color:       var(--rl-mid);
  line-height: 1.5;
}

@media (max-width: 991.98px) {
  .gs-right-panel { padding: 60px 24px 80px; }
}


/* ----------------------------------------------------------------
   FORM  (inside right panel)
   ---------------------------------------------------------------- */
.gs-form {
  display:        flex;
  flex-direction: column;
  gap:            1.25rem;
  animation:      rl-fadeUp 0.8s 0.2s ease forwards;
}

.gs-form-row {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   1rem;
}
@media (max-width: 991.98px) { .gs-form-row { grid-template-columns: 1fr; } }

/* Individual field */
.gs-field {
  display:        flex;
  flex-direction: column;
  gap:            0.4rem;
}

/* Fieldset reset for the service selector group */
.gs-field--fieldset {
  border:  none;
  padding: 0;
  margin:  0;
  min-width: 0;
}
.gs-field--fieldset legend {
  font-family:    var(--rl-font-mono);
  font-size:      0.6rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color:          var(--rl-mid);
  margin-bottom:  0.4rem;
  padding:        0;
  float:          none;
  width:          100%;
}

/* Shared input / select / textarea styles */
.gs-field label:not(legend) {
  font-family:    var(--rl-font-mono);
  font-size:      0.6rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color:          var(--rl-mid);
}

.gs-field input,
.gs-field select,
.gs-field textarea {
  padding:            0.85rem 1rem;
  border:             1.5px solid var(--rl-border);
  background:         var(--rl-off-white);
  font-family:        var(--rl-font-body);
  font-size:          0.9rem;
  color:              var(--rl-black);
  outline:            none;
  transition:         border-color 0.2s;
  border-radius:      0; /* sharp corners throughout */
  -webkit-appearance: none;
  appearance:         none;
  width:              100%;
}

.gs-field input:focus,
.gs-field select:focus,
.gs-field textarea:focus { border-color: var(--rl-accent); }

.gs-field input::placeholder,
.gs-field textarea::placeholder { color: #bbb; }

/* Select chevron */
.gs-field select {
  background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236b6560' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: right 0.85rem center;
  padding-right:       2.5rem;
}

.gs-field textarea {
  resize:     vertical;
  min-height: 100px;
}

/* Service selector — radio card grid */
.gs-service-selector {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   0.5rem;
}
@media (max-width: 479.98px) { .gs-service-selector { grid-template-columns: 1fr; } }

.gs-svc-opt { position: relative; }

/* Visually hide the native radio */
.gs-svc-opt input[type="radio"] {
  position: absolute;
  opacity:  0;
  width:    0;
  height:   0;
}

.gs-svc-opt label {
  display:        flex;
  flex-direction: column;
  gap:            0.25rem;
  padding:        0.9rem 1rem;
  border:         1.5px solid var(--rl-border);
  background:     var(--rl-off-white);
  cursor:         pointer;
  transition:     all 0.2s;
  /* override the field label styles */
  font-family:    var(--rl-font-body);
  font-size:      inherit;
  letter-spacing: normal;
  text-transform: none;
  color:          var(--rl-black);
}
.gs-svc-opt label:hover { border-color: rgba(200,80,42,.4); }

/* Focus-visible ring for keyboard users */
.gs-svc-opt input:focus-visible + label {
  outline:        2px solid var(--rl-accent);
  outline-offset: 2px;
}

/* Checked state */
.gs-svc-opt input:checked + label {
  border-color: var(--rl-accent);
  background:   var(--rl-accent-ll);
}
.gs-svc-opt input:checked + label .gs-svc-opt-name { color: var(--rl-accent); }

.gs-svc-opt-name {
  font-size:   0.85rem;
  font-weight: 600;
  color:       var(--rl-black);
  transition:  color 0.2s;
}

.gs-svc-opt-price {
  font-family: var(--rl-font-mono);
  font-size:   0.6rem;
  color:       var(--rl-mid);
}

/* Submit area */
.gs-form-submit {
  display:        flex;
  flex-direction: column;
  gap:            0.75rem;
}

.gs-btn-submit {
  padding:     1rem 2rem;
  background:  var(--rl-accent);
  color:       #fff;
  border:      none;
  font-family: var(--rl-font-body);
  font-size:   0.97rem;
  font-weight: 600;
  cursor:      pointer;
  transition:  background 0.2s;
  text-align:  center;
  width:       100%;
}
.gs-btn-submit:hover          { background: var(--rl-accent-d); }
.gs-btn-submit:focus-visible  {
  outline:        2px solid var(--rl-accent);
  outline-offset: 3px;
}

.gs-form-disclaimer {
  font-size:   0.75rem;
  color:       var(--rl-mid);
  line-height: 1.6;
}


/* ----------------------------------------------------------------
   SUCCESS STATE  (replaces form on submit)
   ---------------------------------------------------------------- */
.gs-form-success {
  padding:    3rem 2rem;
  text-align: center;
}

/* JS uses hidden attribute; this rule handles the visible transition */
.gs-form-success:not([hidden]) {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  animation:      rl-fadeUp 0.6s ease forwards;
}

.gs-success-icon {
  font-size:     2.5rem;
  margin-bottom: 1rem;
  color:         var(--rl-accent);
}

.gs-form-success h3 {
  font-family:   var(--rl-font-display);
  font-size:     1.6rem;
  font-weight:   700;
  margin-bottom: 0.75rem;
}

.gs-form-success p {
  font-size:  0.92rem;
  color:      var(--rl-mid);
  line-height: 1.7;
  max-width:  380px;
}


/* ----------------------------------------------------------------
   MINIMAL FOOTER STRIP
   Not the full rl-footer — conversion pages keep this clean.
   ---------------------------------------------------------------- */
.gs-footer {
  background:  var(--rl-black);
  padding:     32px 0;
  border-top:  1px solid rgba(200,80,42,.15);
}

.gs-footer-strip {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  gap:             1rem;
  flex-wrap:       wrap;
}

.gs-footer-copy {
  font-family: var(--rl-font-mono);
  font-size:   0.75rem;
  color:       rgba(245,242,236,.2);
}

.gs-footer-links {
  display:     flex;
  gap:         1.5rem;
  flex-wrap:   wrap;
  align-items: center;
}

.gs-footer-links a {
  font-family:     var(--rl-font-mono);
  font-size:       0.75rem;
  color:           rgba(245,242,236,.3);
  text-decoration: none;
  transition:      color 0.2s;
}
.gs-footer-links a:hover { color: var(--rl-off-white); }

@media (max-width: 575.98px) {
  .gs-footer-strip    { flex-direction: column; align-items: flex-start; }
}