/* ============================================================
   FIRST CHAIR — membership signup UI
   Matches the ProRinse dark-pine system (tokens from styles.css).
   Placements: embedded section, footer form, popup modal, nav link.
   ============================================================ */

/* --- shared form --- */
.fc-form{ display:flex; gap:10px; width:100%; max-width:440px; }
.fc-form input[type=email]{
  flex:1 1 auto; min-width:0;
  background:rgba(244,246,244,.05);
  border:1px solid var(--line);
  border-radius:999px;
  padding:15px 20px;
  font-family:var(--font); font-size:14px; color:var(--txt);
  outline:none; transition:border-color .25s var(--ease), background .25s var(--ease);
}
.fc-form input[type=email]::placeholder{ color:var(--mut); }
.fc-form input[type=email]:focus{ border-color:var(--pine); background:rgba(31,165,116,.08); }
.fc-form button{
  flex:0 0 auto; cursor:pointer; border:0;
  background:var(--pine); color:var(--ink-deep);
  border-radius:999px; padding:15px 26px;
  font-family:var(--font); font-weight:600; font-size:13px; letter-spacing:.04em;
  transition:background .25s var(--ease), transform .25s var(--ease);
}
.fc-form button:hover{ background:var(--pine-bright); transform:translateY(-2px); }
.fc-form button:disabled{ opacity:.55; cursor:default; transform:none; }
.fc-msg{ margin:12px 2px 0; font-size:13px; min-height:18px; color:var(--mut); }
.fc-msg.ok{ color:var(--pine-bright); }
.fc-msg.err{ color:#ff8f7a; }

/* --- embedded section --- */
.first-chair{ padding:clamp(72px,10vw,132px) 0; border-top:1px solid var(--line-soft); }
.fc-band{
  border:1px solid var(--line); border-radius:20px;
  background:linear-gradient(160deg, var(--ink-2), var(--ink-deep));
  padding:clamp(36px,5vw,64px);
  display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center;
}
.fc-band .eyebrow{ color:var(--pine); }
.fc-h{ margin:12px 0 14px; font-weight:600; letter-spacing:-.03em; line-height:1.02;
  font-size:clamp(1.9rem,4vw,3.2rem); color:var(--txt); }
.fc-lead{ margin:0 0 4px; font-size:1.02rem; line-height:1.55; color:var(--olive); max-width:44ch; }
.fc-perks{ list-style:none; margin:22px 0 0; padding:0; display:grid; gap:10px; }
.fc-perks li{ position:relative; padding-left:22px; font-size:.96rem; color:var(--txt); }
.fc-perks li::before{ content:""; position:absolute; left:0; top:8px; width:8px; height:8px;
  border-radius:50%; background:var(--pine); }
.fc-note{ margin:14px 2px 0; font-size:12px; color:var(--mut); }
@media (max-width:820px){ .fc-band{ grid-template-columns:1fr; gap:28px; } }

/* --- footer signup --- */
.fc-footer{ border-top:1px solid var(--line-soft); padding:44px 0; }
.fc-footer .fc-foot-grid{ display:flex; justify-content:space-between; align-items:center; gap:28px; flex-wrap:wrap; }
.fc-foot-copy strong{ display:block; font-size:1.05rem; color:var(--txt); font-weight:600; letter-spacing:-.01em; }
.fc-foot-copy span{ font-size:.9rem; color:var(--mut); }

/* --- popup modal --- */
.fc-pop{ position:fixed; inset:0; z-index:120; display:none; align-items:center; justify-content:center;
  padding:24px; background:rgba(4,10,8,.72); backdrop-filter:blur(6px); opacity:0; transition:opacity .35s var(--ease); }
.fc-pop.open{ display:flex; opacity:1; }
.fc-pop-card{
  position:relative; width:100%; max-width:460px;
  border:1px solid var(--line); border-radius:22px;
  background:linear-gradient(165deg, var(--ink-2), var(--ink-deep));
  padding:clamp(30px,5vw,46px);
  transform:translateY(14px) scale(.98); transition:transform .4s var(--ease); }
.fc-pop.open .fc-pop-card{ transform:none; }
.fc-pop .eyebrow{ color:var(--pine); }
.fc-pop-h{ margin:12px 0 10px; font-weight:600; letter-spacing:-.03em; line-height:1.05;
  font-size:clamp(1.6rem,4vw,2.2rem); color:var(--txt); }
.fc-pop-sub{ margin:0 0 22px; font-size:.98rem; line-height:1.55; color:var(--olive); }
.fc-pop .fc-form{ max-width:none; }
.fc-x{ position:absolute; top:16px; right:18px; width:34px; height:34px; border:0; cursor:pointer;
  background:transparent; color:var(--mut); font-size:22px; line-height:1; transition:color .2s var(--ease); }
.fc-x:hover{ color:var(--txt); }
@media (max-width:520px){ .fc-form{ flex-direction:column; } .fc-form button{ width:100%; } }

/* nav link */
.nav-panel a.fc-nav-link{ color:var(--pine); }