/* =========================================================
   STUDIO NOVO — Free Website Concept page
   Shared tokens, reset, buttons, header, footer, and the
   scroll-reveal helper live in common.css (loaded first).
   The form-card/field/select-wrap/form-lock/form-success pattern
   below mirrors contact.css's Get Started form so both lead forms
   on the site look and behave the same way.
   ========================================================= */

/* =========================================================
   Hero
   ========================================================= */
.fcp-hero{ padding: 88px 0 40px; }
.fcp-hero__inner{ max-width: 720px; margin: 0 auto; text-align:center; }
.fcp-hero__title{ font-size: clamp(2.2rem, 4.6vw, 3.1rem); line-height:1.15; margin-bottom: 20px; }
.fcp-hero__desc{ color: var(--ink-soft); font-size: 1.03rem; max-width: 580px; margin: 0 auto; }

.fcp-hero__benefits{
  display:flex; flex-wrap:wrap; justify-content:center; gap: 10px 24px;
  margin: 28px 0 8px;
}
.fcp-hero__benefits li{
  font-size:.9rem; color: var(--ink); font-weight:500; padding-left:22px; position:relative;
}
.fcp-hero__benefits li::before{ content:"✓"; position:absolute; left:0; color: var(--green); font-weight:600; }

.fcp-divider{ width:56px; height:1px; background: var(--line); margin: 30px auto; }

.gs-note{
  display:inline-flex; align-items:center; gap:14px;
  color: var(--ink-soft); font-size:.92rem; text-align:left;
}
.gs-note__icon{
  flex:0 0 auto; width:40px; height:40px; border-radius:50%;
  border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
  color: var(--green);
}
.gs-note__icon svg{ width:18px; height:18px; }

/* =========================================================
   How It Works — a small, compact 3-step strip between the hero
   and the form (deliberately smaller than the homepage's own
   "How It Works" section: numbered circle badges instead of large
   icons, tighter type, less vertical padding, so it stays a light
   orientation cue rather than a full section of its own).
   ========================================================= */
.fcp-how{ padding: 40px 0 4px; }
.fcp-how__head{ text-align:center; max-width: 460px; margin: 0 auto 32px; }
.fcp-how__head .eyebrow{ margin-bottom: 8px; }
.fcp-how__head h2{ font-size: clamp(1.4rem, 2.4vw, 1.8rem); }
.fcp-how__grid{
  display:grid; grid-template-columns: repeat(3,1fr); gap: 28px;
  max-width: 760px; margin: 0 auto;
}
.fcp-how__step{ text-align:center; padding: 0 10px; }
.fcp-how__num{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:50%;
  border:1px solid var(--green); color: var(--green);
  font-family: var(--serif); font-size:.92rem;
  margin-bottom: 12px;
}
.fcp-how__step h3{ font-size:.96rem; margin-bottom: 6px; }
.fcp-how__step p{ font-size:.82rem; color: var(--ink-soft); line-height:1.5; }

/* =========================================================
   Form section (mirrors contact.css's form card pattern)
   ========================================================= */
.form-section{ padding: 40px 0 100px; }
.form-card{
  max-width: 780px; margin: 0 auto;
  background: var(--paper); border:1px solid var(--line); border-radius: var(--radius-lg);
  padding: 52px 56px;
  box-shadow: 0 30px 70px -34px rgba(20,40,29,.22);
}
.form-card__head{ text-align:center; margin-bottom: 36px; }
.form-card__head h2{ font-size: 1.7rem; margin-bottom: 10px; }
.form-card__head p{ color: var(--ink-soft); font-size:.93rem; max-width: 480px; margin: 0 auto; }

.form-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap: 22px 20px;
  margin-bottom: 30px;
}
.field{ display:flex; flex-direction:column; gap:8px; }
.field--full{ grid-column: 1 / -1; }
.field label{ font-size:.86rem; font-weight:500; color: var(--ink); }
.field label span{ font-weight:400; color: var(--ink-faint); }
.field__required{ color: var(--green) !important; font-weight:600 !important; }
.field__hint{ font-size:.78rem; color: var(--ink-faint); margin-top: 2px; }

.field input,
.field textarea,
.select-wrap select{
  width:100%;
  font-family: var(--sans);
  font-size: .93rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 13px 15px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field input::placeholder,
.field textarea::placeholder{ color: var(--ink-faint); }
.field input:focus,
.field textarea:focus,
.select-wrap select:focus{
  outline:none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(30,59,44,.12);
}
.field textarea{ resize: vertical; min-height: 108px; }

.select-wrap{ position:relative; }
.select-wrap select{ appearance:none; -webkit-appearance:none; padding-right: 38px; cursor:pointer; }
.select-wrap::after{
  content:""; position:absolute; right:15px; top:50%; width:9px; height:9px;
  border-right:1.5px solid var(--ink-faint); border-bottom:1.5px solid var(--ink-faint);
  transform: translateY(-70%) rotate(45deg); pointer-events:none;
}

.form-lock{
  display:flex; align-items:flex-start; gap:8px;
  justify-content:center; text-align:center;
  font-size:.8rem; color: var(--ink-faint); line-height:1.5;
}

.form-success{
  display:none; text-align:center; margin-top: 18px;
  font-size:.9rem; color: var(--green-dark); font-weight:500;
  background: var(--green-mist); border-radius: var(--radius); padding: 12px 16px;
}
.form-success.is-visible{ display:block; }

.form-error{
  display:none; text-align:center; margin-top: 18px;
  font-size:.9rem; color:#B3452F; font-weight:500;
  background:#F7E7E2; border-radius: var(--radius); padding: 12px 16px;
}
.form-error.is-visible{ display:block; }
.form-error a{ color:#B3452F; text-decoration: underline; text-underline-offset: 2px; }

.field.has-error input,
.field.has-error select,
.field.has-error textarea{ border-color:#B3452F; }
.field__error{ font-size:.76rem; color:#B3452F; display:none; }
.field.has-error .field__error{ display:block; }
/* Group-level error (photo source) sits below the whole chip grid
   rather than a single input, so it gets a touch more top spacing. */
.field__error--group{ margin-top: -2px; }
.submit-wrap{
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

/* =========================================================
   Goals / Photo source — toggle-able chip options (checkbox or
   radio + styled box) rather than a plain dropdown, so choices read
   clearly at a glance. Shared look for both fields.
   ========================================================= */
.goal-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.goal-option{
  display:flex; align-items:center; gap:10px;
  border:1px solid var(--line); border-radius: var(--radius);
  padding: 12px 14px; cursor:pointer;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.goal-option:hover{ border-color: var(--ink-faint); }
/* Selected state — a restrained tint + darker hairline reads as
   premium/editorial rather than the flatter, brighter --green-mist
   fill used elsewhere (e.g. form-success), which looked closer to a
   generic "success" badge than a selected form control. */
.goal-option:has(input:checked){
  border-color: var(--green-dark);
  background: rgba(30,59,44,.05);
  box-shadow: inset 0 0 0 1px var(--green-dark);
}
.goal-option:has(input:checked) span{ color: var(--ink); font-weight:500; }
.goal-option input[type="checkbox"],
.goal-option input[type="radio"]{
  width:16px; height:16px; accent-color: var(--green-dark); flex:0 0 auto;
}
/* Suppress the browser's default focus ring on the radio/checkbox
   itself — the option's own border/background already communicates
   selection, so the native square outline just reads as a stray box
   around the dot. Keyboard users still get a clear focus cue via the
   parent .goal-option label below. */
.goal-option input[type="checkbox"]:focus,
.goal-option input[type="radio"]:focus,
.goal-option input[type="checkbox"]:focus-visible,
.goal-option input[type="radio"]:focus-visible{
  outline: none;
  box-shadow: none;
}
.goal-option:focus-within{
  border-color: var(--green-dark);
}
.goal-option span{ font-size:.88rem; color: var(--ink); }
.goal-option--other{ flex-wrap:wrap; }
.goal-option__other-input{
  flex: 1 1 100%; margin-top: 8px; width:100%;
  font-family: var(--sans); font-size:.85rem; color: var(--ink);
  border:1px solid var(--line); border-radius: var(--radius);
  padding: 9px 12px; background: var(--paper);
}
.goal-option__other-input:disabled{ opacity:.5; }

/* Photo source — three options only, one column reads better than a
   cramped 2-up grid at this width. */
.photo-source-grid{ grid-template-columns: 1fr; }
.photo-source-note{
  margin-top: 10px; padding: 12px 14px;
  background: var(--cream-2); border-radius: var(--radius);
  font-size: .84rem; color: var(--ink-soft); line-height:1.5;
}
.photo-source-note:empty{ display:none; }

/* =========================================================
   Responsive — Tablet
   ========================================================= */
@media (max-width: 1024px){
  .fcp-hero{ padding: 72px 0 30px; }
  .form-section{ padding: 32px 0 84px; }
  .form-card{ padding: 42px 38px; }
}

/* =========================================================
   Responsive — Mobile
   ========================================================= */
@media (max-width: 680px){
  .fcp-hero{ padding: 56px 0 8px; }
  .fcp-hero__benefits{ gap: 8px 18px; }
  .gs-note{ flex-direction:column; text-align:center; gap:10px; }

  .fcp-how{ padding: 32px 0 0; }
  .fcp-how__grid{ grid-template-columns: 1fr; gap: 22px; max-width: 320px; }

  .form-card{ padding: 30px 20px; }
  .form-grid{ grid-template-columns: 1fr; }
  .goal-grid{ grid-template-columns: 1fr; }
}