/* ══════════════════════════════════════════════════════════════════════════
   Request Pricing — the full-screen multistep form (page-request-pricing.php).

   Loaded ONLY on that template, on top of garden.css (tokens, .label, .pill).
   One question per screen, and every screen fits the viewport — no scrolling
   (Tom 2026-08-23). The shell is 100dvh, the KSP marquee is pinned at its
   foot, and short screens compress the type before anything ever clips.
   .rp-main still allows overflow-y as a last-resort safety valve (tiny
   landscape phones, open keyboards) so content can never become unreachable.

   Gravity Forms notes, learned the hard way:
   — GF's theme CSS prints in the FOOTER (the form renders mid-template), so
     it loads AFTER this head-enqueued sheet and wins every equal-specificity
     tie. That shipped visible checkbox squares and a boxed Back button on
     2026-08-23. Every rule fighting GF is therefore body.rp-body-prefixed
     and the contested properties are !important. Trap 8 (buttons marked
     !important by GF) applies to the buttons on top of that.
   — the field grid is never used: .gform_fields is forced to a flex column
     at every width — twelve 30px gaps in a narrow column is negative free
     space and every track collapses to 0 (the contact-form lesson).
   ══════════════════════════════════════════════════════════════════════════ */

.rp-body{
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--surface-cream);
  color: var(--ink);
  font-family: var(--sans);
}

.rp-shell{
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.rp-frame{
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ── Chrome ──────────────────────────────────────────────────────────────── */
.rp-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 0 6px;
  flex-shrink: 0;
}
.rp-brand{ display: inline-flex; }
.rp-brand__img{ height: 28px; width: auto; }
.rp-close{
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink);
  font-size: 24px;
  line-height: 1;
  text-decoration: none;
  transition: background var(--dur, .25s) var(--ease, ease), transform var(--dur, .25s) var(--ease, ease);
}
.rp-close:hover{ background: var(--surface-mint); transform: rotate(90deg); }

.rp-main{
  flex: 1;
  min-height: 0;
  overflow-y: auto;          /* safety valve only — the layout aims to never need it */
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding: 8px 0 16px;
}

/* Eyebrow ABOVE the counter, on every screen (template chrome, not form). */
.rp-eyebrow{ justify-content: center; margin: 0 auto 10px; flex-shrink: 0; }

.rp-count{
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--type-eyebrow-tracking, .16em);
  text-transform: uppercase;
  opacity: .55;
  margin: 0 auto 10px;
  flex-shrink: 0;
}

/* ── GF progress bar → thin brand bar ────────────────────────────────────── */
body.rp-body .rp-main .gf_progressbar_wrapper{
  max-width: 260px !important;
  margin: 0 auto 4px !important;
  padding: 0 0 12px !important;
}
body.rp-body .rp-main .gf_progressbar_title{ display: none; }
body.rp-body .rp-main .gf_progressbar{
  height: 4px;
  width: 100% !important;    /* GF reserves 16px on the right — off-centre bar */
  margin: 0 !important;
  padding: 0;
  background: rgba(5, 74, 71, .12);
  border-radius: 99px;
  overflow: hidden;
}
body.rp-body .rp-main .gf_progressbar_percentage{
  height: 100%;
  border-radius: 99px;
  background: var(--tertiary);
  transition: width .4s ease;
}
body.rp-body .rp-main .gf_progressbar_percentage span{ display: none; }

/* ── Question typography ─────────────────────────────────────────────────── */
/* The question renders INSIDE the form (GF html field), so GF's theme CSS
   can reach it with its own h2 margin reset — in some browsers that beat the
   bare-class rule and left the box pinned 56px off-axis ("still looks a
   little lopsided" — Tom, correctly). Armoured like every other GF fight. */
body.rp-body .rp-q{
  font-size: clamp(26px, 4.2vw, 46px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-align: center !important;   /* GF sets its own text-align on the form — inherited centring is not enough */
  text-wrap: balance;
  max-width: 720px !important;
  margin: 16px auto 26px !important;
}
body.rp-body .rp-q em{ font-family: var(--serif); font-style: italic; font-weight: 400; }

/* ── Field layout — flex column, never GF's grid ─────────────────────────── */
/* align-items, the gfield margins and the gfield padding are all !important
   for the same reason as everything else here: GF's footer-loaded CSS was
   re-stretching the field (stretch + max-width pins it LEFT, off-axis by
   156px) and padding the right of every field 16px, which pushed the
   question and progress bar 8px off-centre. "It's all crooked" — Tom. */
body.rp-body .rp-main .gform_fields{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  grid-gap: 0;
  gap: 0;
}
body.rp-body .rp-main .gfield{
  width: 100%;
  max-width: 520px;
  margin: 0 auto !important;
  padding: 0 !important;
}
body.rp-body .rp-main .gfield--type-html{ max-width: none; }
body.rp-body .rp-main .gfield--type-checkbox{ max-width: 680px; }
body.rp-body .rp-main .gform_required_legend{ display: none; }
body.rp-body .rp-main .gform_validation_errors{ display: none; }

/* Visible field labels (Tom 2026-08-23) — small centred caption above the
   input. The asterisk GF appends is redundant when every field is required. */
body.rp-body .rp-main .gfield_label{
  display: block !important;
  font-family: var(--sans) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink) !important;
  opacity: .6;
  text-align: center !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
}
body.rp-body .rp-main .gfield_required{ display: none !important; }

/* Each step fades up as it arrives (AJAX re-renders the page markup). */
.rp-main .gform_page,
.rp-confirm{ animation: rp-in .35s ease both; }
@keyframes rp-in{
  from{ opacity: 0; transform: translateY(12px); }
  to  { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce){
  .rp-main .gform_page, .rp-confirm{ animation: none; }
}

/* ── Inputs ──────────────────────────────────────────────────────────────── */
body.rp-body .rp-main .gfield input[type="text"],
body.rp-body .rp-main .gfield input[type="email"],
body.rp-body .rp-main .gfield input[type="tel"],
body.rp-body .rp-main .gfield select{
  width: 100%;
  font: inherit;
  font-size: 17px;             /* ≥16px or iOS zooms the viewport on focus */
  color: var(--ink);
  text-align: center;
  background: #fff;
  border: 1px solid rgba(5, 74, 71, .25);
  border-radius: var(--radius-pill, 999px);   /* fully round — Tom 2026-08-23 */
  padding: 14px 26px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
body.rp-body .rp-main .gfield input:focus,
body.rp-body .rp-main .gfield select:focus{
  outline: none;
  border-color: var(--secondary);
  box-shadow: 0 0 0 3px rgba(3, 130, 97, .15);
}
body.rp-body .rp-main .gfield input::placeholder{ color: rgba(5, 74, 71, .45); }

body.rp-body .rp-main .gfield select{
  appearance: none;
  -webkit-appearance: none;
  text-align: left;
  text-align-last: center;
  padding-right: 52px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23054A47' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 24px center;
}

/* ── Objectives — checkboxes as selectable pills ─────────────────────────── */
body.rp-body .rp-main .gfield_checkbox{
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: center;
  gap: 10px !important;
}
body.rp-body .rp-main .gchoice{ position: relative; margin: 0 !important; padding: 0 !important; }
/* GF's theme CSS styles the raw checkbox after this sheet loads — hiding it
   needs !important or the squares come back (shipped that way once). */
body.rp-body .rp-main .gchoice input[type="checkbox"]{
  position: absolute !important;
  opacity: 0 !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  pointer-events: none;
}
body.rp-body .rp-main .gchoice label{
  display: inline-flex !important;
  align-items: center;
  padding: 11px 18px !important;
  border: 1px solid rgba(5, 74, 71, .3);
  border-radius: 99px;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  color: var(--ink) !important;
  background: transparent;
  max-width: none !important;
  cursor: pointer;
  user-select: none;
  transition: background .2s ease, border-color .2s ease;
}
body.rp-body .rp-main .gchoice label:hover{ border-color: var(--secondary); }
body.rp-body .rp-main .gchoice input:checked + label{
  background: var(--surface-mint) !important;
  border-color: var(--secondary) !important;
}
body.rp-body .rp-main .gchoice input:focus-visible + label{
  box-shadow: 0 0 0 3px rgba(3, 130, 97, .25);
}

/* ── Validation ──────────────────────────────────────────────────────────── */
body.rp-body .rp-main .gfield_validation_message,
body.rp-body .rp-main .validation_message{
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin-top: 10px;
  color: var(--accent-coral) !important;
  font-size: 14px;
  font-weight: 500;
  text-align: center !important;
}

/* ── Step buttons — trap 8: GF marks its buttons !important ──────────────── */
body.rp-body .rp-main .gform_page_footer,
body.rp-body .rp-main .gform_footer{
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin: 26px 0 0 !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
}
body.rp-body .rp-main .gform_next_button,
body.rp-body .rp-main .gform_button{
  font-family: var(--sans) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--surface-cream) !important;
  background: var(--ink) !important;
  background-color: var(--ink) !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: var(--radius-pill, 99px) !important;
  padding: 14px 30px !important;
  margin: 0 !important;      /* GF's 10px right margin skews the centring */
  cursor: pointer;
  transition: background .25s ease;
}
body.rp-body .rp-main .gform_next_button:hover,
body.rp-body .rp-main .gform_button:hover{
  background: var(--secondary) !important;
  background-color: var(--secondary) !important;
}
/* Back is a plain text control. GF paints it as a boxed secondary button
   with longhand background-color, so the longhands are overridden here —
   the shorthand alone lost the tie once. */
body.rp-body .rp-main .gform_previous_button{
  font-family: var(--sans) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--ink) !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 8px 4px !important;
  margin: 0 !important;
  opacity: .65;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
body.rp-body .rp-main .gform_previous_button:hover{ opacity: 1; }
body.rp-body .rp-main .gform_ajax_spinner{ margin-left: 10px; width: 20px; height: 20px; }

/* ── Confirmation ────────────────────────────────────────────────────────── */
.rp-confirm{ max-width: 720px !important; margin: 0 auto !important; text-align: center !important; }
.rp-confirm__sub{
  font-size: 17px;
  line-height: 1.55;
  opacity: .8;
  max-width: 460px !important;
  margin: 0 auto 28px !important;
}
.rp-confirm .pill{ margin: 0 auto; }

/* ── KSP marquee — full-bleed bar pinned at the foot of the screen ───────── */
.rp-ksp{
  flex-shrink: 0;
  background: var(--surface-mint);
  color: var(--ink);
  overflow: hidden;
  padding: 13px 0;
}
.rp-ksp__track{
  display: flex;
  width: max-content;
  animation: rp-marquee 38s linear infinite;
  will-change: transform;
}
.rp-ksp__set{
  display: flex;
  align-items: center;
  gap: 52px;
  padding-right: 52px;
}
.rp-ksp__item{
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
}
.rp-ksp__tick{ width: 17px; height: 17px; flex: 0 0 17px; color: var(--secondary); }
@keyframes rp-marquee{ to{ transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce){
  .rp-ksp__track{ animation: none; }
}

/* ── Short screens — compress before anything can clip ───────────────────── */
@media (max-height: 760px){
  .rp-top{ padding-top: 14px; }
  body.rp-body .rp-q{ font-size: clamp(22px, 3.4vw, 34px); margin: 10px auto 18px !important; }
  .rp-eyebrow{ margin-bottom: 6px; }
  .rp-count{ margin-bottom: 6px; }
  body.rp-body .rp-main .gform_page_footer,
  body.rp-body .rp-main .gform_footer{ margin-top: 18px !important; }
  body.rp-body .rp-main .gfield input[type="text"],
  body.rp-body .rp-main .gfield input[type="email"],
  body.rp-body .rp-main .gfield input[type="tel"],
  body.rp-body .rp-main .gfield select{ padding: 11px 22px; }
  body.rp-body .rp-main .gchoice label{ padding: 8px 14px !important; font-size: 13.5px !important; }
}

/* ── Small screens ───────────────────────────────────────────────────────── */
@media (max-width: 640px){
  /* The forced question breaks are a wide-screen nicety; on a phone they cost
     a whole extra line (step 5 clipped by 6px). Natural wrap + balance. */
  body.rp-body .rp-q br{ display: none; }
  .rp-frame{ padding: 0 16px; }
  .rp-top{ padding-top: 14px; }
  .rp-brand__img{ height: 22px; }
  .rp-close{ width: 36px; height: 36px; font-size: 20px; }
  body.rp-body .rp-q{ font-size: clamp(21px, 6vw, 26px); margin: 8px auto 16px !important; }
  .rp-main{ padding-bottom: 10px; }
  body.rp-body .rp-main .gfield_label{ font-size: 11px !important; margin-bottom: 6px !important; }
  /* Two-up pills on phones — seven single-file rows was the one step that
     overflowed a 667px viewport (615px needed vs 572 available). Labels wrap
     inside their half-width pill instead. */
  body.rp-body .rp-main .gfield_checkbox{ gap: 7px !important; }
  body.rp-body .rp-main .gchoice{ width: calc(50% - 4px); }
  body.rp-body .rp-main .gchoice label{
    width: 100%;
    justify-content: center;
    text-align: center;
    white-space: normal;
    font-size: 12.5px !important;
    padding: 8px 10px !important;
  }
  body.rp-body .rp-main .gfield input[type="text"],
  body.rp-body .rp-main .gfield input[type="email"],
  body.rp-body .rp-main .gfield input[type="tel"],
  body.rp-body .rp-main .gfield select{ padding: 12px 22px; }
  body.rp-body .rp-main .gform_page_footer,
  body.rp-body .rp-main .gform_footer{ flex-direction: column-reverse; gap: 10px; margin-top: 16px !important; }
  body.rp-body .rp-main .gform_next_button,
  body.rp-body .rp-main .gform_button{ width: 100% !important; padding: 13px 26px !important; }
  .rp-ksp{ padding: 10px 0; }
  .rp-ksp__item{ font-size: 12.5px; }
  .rp-ksp__set{ gap: 36px; padding-right: 36px; }
}

/* Very short viewports (small Androids, landscape) — the objectives step is
   the tall pole; shave its paddings and gaps a little further. */
@media (max-height: 700px){
  body.rp-body .rp-q{ margin: 8px auto 14px !important; }
  body.rp-body .rp-main .gfield_checkbox{ gap: 6px !important; }
  body.rp-body .rp-main .gchoice label{ padding: 7px 10px !important; }
  body.rp-body .rp-main .gform_page_footer,
  body.rp-body .rp-main .gform_footer{ margin-top: 12px !important; }
  body.rp-body .rp-main .gfield_label{ margin-bottom: 4px !important; }
}