/* ============================================================
   site.css — hand-edited overrides + intake page styles
   Loaded by both index.html (overrides only) and intake.html.
   index.html is a Framer wget export; do not edit it directly.
   Add visual tweaks here.
   ============================================================ */

:root{
  --ph-bg:        #0d0d0e;
  --ph-bg-2:      #131314;
  --ph-ink:       rgba(239, 233, 221, 0.92);
  --ph-ink-soft:  rgba(239, 233, 221, 0.62);
  --ph-line:      rgba(255, 255, 255, 0.10);
  --ph-line-2:    rgba(255, 255, 255, 0.06);
  --ph-glass:     rgba(255, 255, 255, 0.05);
  --ph-glass-hi:  rgba(255, 255, 255, 0.10);
  --ph-accent:    #efe9dd;
  --ph-pill-r:    999px;
  --ph-radius:    14px;
  --ph-font:      -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  --ph-font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
}

/* Global font override — force SF Pro / system font everywhere,
   including inside the Framer-rendered home page. */
html, body,
html *, body * {
  font-family: var(--ph-font) !important;
}

/* ---------- Navbar Intake pill (injected by site.js into index.html) ---------- */
.ph-intake-pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 16px;border-radius:var(--ph-pill-r);
  background:var(--ph-glass);
  border:1px solid var(--ph-line);
  color:var(--ph-ink);
  font:500 13px/1 var(--ph-font);
  letter-spacing:.01em;
  text-decoration:none;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:background 180ms ease, border-color 180ms ease, transform 180ms ease;
  cursor:pointer;
}
.ph-intake-pill:hover{
  background:var(--ph-glass-hi);
  border-color:rgba(255,255,255,0.18);
}
.ph-intake-pill::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:var(--ph-accent);
  box-shadow:0 0 12px rgba(239,233,221,0.45);
}

/* ============================================================
   Intake page — dark, glassmorphic, matches posthuman theme
   ============================================================ */
body.ph-intake{
  margin:0;background:var(--ph-bg);color:var(--ph-ink);
  font-family:var(--ph-font);
  font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(1200px 600px at 75% -10%, rgba(239,233,221,0.06), transparent 60%),
    radial-gradient(900px 500px at 0% 100%, rgba(239,233,221,0.04), transparent 60%);
  min-height:100vh;
}
body.ph-intake a{color:var(--ph-ink)}
body.ph-intake *{box-sizing:border-box}

/* Floating pill navbar — matches the Framer home page navbar. */
.ph-topnav{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 28px;
  background:transparent;
  font-family:var(--ph-font);
}
.ph-brand{
  font-size:15px;letter-spacing:.01em;text-decoration:none;color:var(--ph-ink);
  padding:8px 4px;
}
.ph-brand b{font-weight:500}
.ph-topnav .ph-actions{display:flex;gap:8px;align-items:center}
.ph-topnav a.ph-link{
  font-size:13px;color:var(--ph-ink);text-decoration:none;
  padding:8px 16px;border-radius:var(--ph-pill-r);
  background:var(--ph-glass);
  border:1px solid var(--ph-line);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:background 180ms ease, border-color 180ms ease;
}
.ph-topnav a.ph-link:hover{
  background:var(--ph-glass-hi);
  border-color:rgba(255,255,255,0.18);
}
.ph-topnav a.ph-link.is-cta::before{
  content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--ph-accent);box-shadow:0 0 12px rgba(239,233,221,0.45);
  margin-right:8px;vertical-align:1px;
}

.ph-shell{max-width:880px;margin:0 auto;padding:48px 24px 96px}

.ph-progress{
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ph-ink-soft);margin:0 0 14px;
}

.ph-steps{
  display:flex;gap:8px;margin:0 0 40px;
  border:1px solid var(--ph-line);border-radius:var(--ph-pill-r);
  padding:6px;background:var(--ph-glass);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.ph-steps .ph-step{
  flex:1;text-align:center;padding:10px 14px;border-radius:var(--ph-pill-r);
  font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ph-ink-soft);transition:all 200ms ease;
}
.ph-steps .ph-step.active{background:var(--ph-accent);color:#0d0d0e;font-weight:500}
.ph-steps .ph-step.done{color:var(--ph-ink)}

h1.ph-h1{
  font-family:var(--ph-font-display);
  font-weight:300;font-size:48px;line-height:1.05;letter-spacing:-0.02em;
  margin:0 0 14px;color:var(--ph-ink);
}
h2.ph-h2{
  font-family:var(--ph-font-display);
  font-weight:400;font-size:22px;letter-spacing:-0.01em;
  margin:0 0 8px;color:var(--ph-ink);
}
.ph-lede{color:var(--ph-ink-soft);font-size:17px;margin:0 0 28px;max-width:640px}

.ph-card{
  background:var(--ph-bg-2);
  border:1px solid var(--ph-line);
  border-radius:var(--ph-radius);
  padding:28px;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.ph-card + .ph-card{margin-top:14px}
.ph-card p{color:var(--ph-ink-soft);margin:0 0 14px}

.ph-row{display:flex;gap:12px;flex-wrap:wrap}
.ph-row > *{flex:1;min-width:220px}

label.ph-field{display:block;font-size:12px;color:var(--ph-ink-soft);margin-bottom:6px;letter-spacing:.04em;text-transform:uppercase}
.ph-card input[type=text],
.ph-card input[type=email],
.ph-card input[type=password],
.ph-card input[type=tel],
.ph-card input[type=date],
.ph-card select,
.ph-card textarea{
  width:100%;padding:12px 14px;
  background:rgba(255,255,255,0.03);
  border:1px solid var(--ph-line);border-radius:10px;
  color:var(--ph-ink);font-size:15px;font-family:inherit;outline:none;
  transition:border-color 180ms, background 180ms;
}
.ph-card input:focus,.ph-card select:focus,.ph-card textarea:focus{
  border-color:rgba(239,233,221,0.4);
  background:rgba(255,255,255,0.05);
}

.ph-opt{display:flex;align-items:flex-start;gap:10px;padding:10px 0;cursor:pointer;color:var(--ph-ink);font-size:15px}
.ph-opt input{margin-top:3px;accent-color:var(--ph-accent)}
.ph-grid2{display:grid;grid-template-columns:1fr 1fr;gap:4px 24px}
@media (max-width:600px){.ph-grid2{grid-template-columns:1fr}}

.ph-actions{display:flex;justify-content:space-between;align-items:center;margin-top:32px;gap:12px;flex-wrap:wrap}
.ph-actions .ph-right{display:flex;gap:10px}

button.ph-btn,a.ph-btn{
  font-family:inherit;font-size:14px;cursor:pointer;
  padding:12px 22px;border-radius:var(--ph-pill-r);
  border:1px solid transparent;transition:transform 120ms, background 180ms, border-color 180ms;
  text-decoration:none;display:inline-flex;align-items:center;gap:8px;
}
.ph-btn-primary{background:var(--ph-accent);color:#0d0d0e}
.ph-btn-primary:hover{background:#fff}
.ph-btn-ghost{background:transparent;color:var(--ph-ink);border-color:var(--ph-line)}
.ph-btn-ghost:hover{background:var(--ph-glass);border-color:rgba(255,255,255,0.18)}
.ph-btn-soft{background:var(--ph-glass);color:var(--ph-ink);border-color:var(--ph-line)}
.ph-btn-soft:hover{background:var(--ph-glass-hi)}
.ph-btn:active{transform:translateY(1px)}

.ph-pill{
  display:inline-block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  padding:3px 8px;border-radius:6px;
  background:var(--ph-glass);border:1px solid var(--ph-line);
  color:var(--ph-ink-soft);margin-left:8px;vertical-align:middle;
}

.ph-test{
  border:1px solid var(--ph-line);border-radius:12px;padding:16px;
  background:rgba(255,255,255,0.02);
  display:grid;grid-template-columns:24px 1fr auto;gap:14px;align-items:start;margin-bottom:10px;
}
.ph-test input{accent-color:var(--ph-accent);margin-top:4px}
.ph-test .ph-name{font-weight:500;font-size:15px;color:var(--ph-ink)}
.ph-test .ph-desc{color:var(--ph-ink-soft);font-size:13px;margin-top:4px;line-height:1.5}
.ph-test .ph-price{font-weight:500;color:var(--ph-ink);white-space:nowrap}

.ph-timeline{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin:18px 0 8px}
@media (max-width:760px){.ph-timeline{grid-template-columns:1fr}}
.ph-tile{
  border:1px solid var(--ph-line);border-radius:12px;padding:18px;
  background:rgba(255,255,255,0.02);
}
.ph-tile h3{margin:6px 0 4px;font-size:16px;font-weight:500;color:var(--ph-ink)}
.ph-tile small{color:var(--ph-ink-soft);font-size:12px;letter-spacing:.06em;text-transform:uppercase}

.ph-info{
  background:rgba(239,233,221,0.04);border:1px solid var(--ph-line);border-radius:12px;
  padding:14px 16px;color:var(--ph-ink-soft);font-size:13px;line-height:1.55;
}
.ph-info strong{color:var(--ph-ink);font-weight:500}

.ph-calendar{display:flex;gap:10px;overflow-x:auto;padding:6px 0}
.ph-day{
  min-width:60px;border:1px solid var(--ph-line);border-radius:10px;padding:10px 0;
  text-align:center;background:rgba(255,255,255,0.02);cursor:pointer;font-size:12px;
  color:var(--ph-ink-soft);transition:all 180ms ease;
}
.ph-day strong{display:block;font-size:16px;color:var(--ph-ink);font-weight:500;margin-top:2px}
.ph-day:hover{border-color:rgba(255,255,255,0.2)}
.ph-day.sel{background:var(--ph-accent);border-color:var(--ph-accent);color:#0d0d0e}
.ph-day.sel strong{color:#0d0d0e}

.ph-summary{margin:0;padding:0 0 0 18px;color:var(--ph-ink-soft)}
.ph-summary li{margin-bottom:8px}
.ph-summary strong{color:var(--ph-ink);font-weight:500}

.ph-legal{font-size:12px;color:var(--ph-ink-soft);margin-top:18px;line-height:1.55;opacity:.85}

.ph-step-view{display:none}
.ph-step-view.active{display:block;animation:phFade .25s ease}
@keyframes phFade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}