/* ============================================================
   yourpage.bio shared theme
   Linked by index.html, intake.html and pay.html so all three
   stay in sync. Page-specific rules live in each page's own
   <style> block.
   ============================================================ */
/* ============================================================
   1. TOKENS
   Every colour on the page is a token. A theme (or an inverted
   band) only has to redefine the tokens; nothing else changes.
   ============================================================ */
:root{
  color-scheme:dark;
  --bg:#0C1B26; --bg-2:#0A1620;
  --surface:#122834; --surface-2:#16303D; --surface-3:#1B3A48;
  --text:#E8F4F1; --text-2:#D3E4DF; --muted:#A9C0BA; --dim:#7FA096;
  --line:#1D3541; --line-2:#24485A;
  --accent:#4FE3B4; --accent-2:#8CF0CF; --on-accent:#0C1B26;
  --accent-soft:rgba(79,227,180,.10);
  --accent-ring:rgba(79,227,180,.16);
  --warn:#FF7A66;--warn-soft:#2A1614;--warn-ink:#FFB3A6;
  --bar:#183542;
  --nav-bg:rgba(12,27,38,.90);
  --shadow:0 40px 80px -40px rgba(0,0,0,.6);
  --shadow-sm:0 18px 36px -24px rgba(0,0,0,.7);
  --glow:radial-gradient(60% 55% at 78% 22%, rgba(79,227,180,.11), transparent 70%);
}
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#F5FAF8; --bg-2:#EAF3EF;
  --surface:#FFFFFF; --surface-2:#F0F7F4; --surface-3:#E2F0EA;
  --text:#0B1A24; --text-2:#1E323C; --muted:#4C6660; --dim:#5F7A74;
  --line:#DCE9E5; --line-2:#BFD6CF;
  --accent:#0C8A66; --accent-2:#0A6E51; --on-accent:#FFFFFF;
  --accent-soft:rgba(12,138,102,.08);
  --accent-ring:rgba(12,138,102,.18);
  --warn:#C0452C;--warn-soft:#FDECE8;--warn-ink:#8F2F1C;
  --bar:#D7E7E1;
  --nav-bg:rgba(245,250,248,.90);
  --shadow:0 34px 64px -38px rgba(11,26,36,.30);
  --shadow-sm:0 16px 32px -22px rgba(11,26,36,.25);
  --glow:radial-gradient(60% 55% at 78% 22%, rgba(12,138,102,.10), transparent 70%);
}

/* An inverted band: always the opposite of the active theme, so the
   page keeps its dark / light rhythm whichever mode you are in. */
.band-alt{
  color-scheme:light;
  --bg:#E8F4F1; --bg-2:#DCEAE6;
  --surface:#FFFFFF; --surface-2:#F1F8F5; --surface-3:#E2F0EA;
  --text:#0B1A24; --text-2:#1E323C; --muted:#4A6A63; --dim:#5C7A72;
  --line:#C9DDD7; --line-2:#B4CEC7;
  --accent:#0C8A66; --accent-2:#0A6E51; --on-accent:#FFFFFF;
  --accent-soft:rgba(12,138,102,.08);
  --accent-ring:rgba(12,138,102,.18);
  --warn:#C0452C;--warn-soft:#FDECE8;--warn-ink:#8F2F1C;
  --bar:#CFE3DC;
  --shadow:0 34px 64px -38px rgba(11,26,36,.24);
  --shadow-sm:0 16px 32px -22px rgba(11,26,36,.2);
}
:root[data-theme="light"] .band-alt{
  color-scheme:dark;
  --bg:#0C1B26; --bg-2:#0A1620;
  --surface:#122834; --surface-2:#16303D; --surface-3:#1B3A48;
  --text:#E8F4F1; --text-2:#D3E4DF; --muted:#A9C0BA; --dim:#7FA096;
  --line:#1D3541; --line-2:#24485A;
  --accent:#4FE3B4; --accent-2:#8CF0CF; --on-accent:#0C1B26;
  --accent-soft:rgba(79,227,180,.10);
  --accent-ring:rgba(79,227,180,.16);
  --warn:#FF7A66;--warn-soft:#2A1614;--warn-ink:#FFB3A6;
  --bar:#183542;
  --shadow:0 40px 80px -40px rgba(0,0,0,.6);
  --shadow-sm:0 18px 36px -24px rgba(0,0,0,.7);
}

/* ============================================================
   2. BASE
   ============================================================ */
*{box-sizing:border-box;}
html,body{max-width:100%;overflow-x:hidden;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:'IBM Plex Sans',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  transition:background-color .25s ease, color .25s ease;
}
img,svg{max-width:100%;}
a{color:var(--accent);text-decoration:none;}
a:hover{color:var(--accent-2);}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px;}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.035em;line-height:1.12;text-wrap:pretty;}
p{margin:0;text-wrap:pretty;}
section{background:var(--bg);color:var(--text);transition:background-color .25s ease, color .25s ease;}

.wrap{max-width:1180px;margin:0 auto;padding:0 40px;}
.wrap-sm{max-width:960px;margin:0 auto;padding:0 40px;}
.sec{padding:104px 0;}
.stack{display:flex;flex-direction:column;}
.eyebrow{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);}
.kicker{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);}
.h2{font-size:clamp(26px,2.6vw,36px);}
.lede{font-size:16.5px;line-height:1.62;color:var(--muted);}
.body{font-size:15.5px;line-height:1.6;color:var(--muted);}
.strong-ink{color:var(--text);font-weight:600;}

.card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:0 0 44px 0;padding:34px;
  transition:transform .14s ease-out, border-color .14s ease-out, box-shadow .14s ease-out, background-color .25s ease;
}
.card-hover:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:var(--shadow-sm);}
.grid{display:grid;gap:20px;}
.g-2{grid-template-columns:repeat(auto-fit,minmax(340px,1fr));}
.g-3{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));}
.g-4{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}

.btn{
  display:inline-block;font-weight:600;font-size:16px;padding:16px 28px;
  border-radius:0 0 22px 0;border:1px solid transparent;cursor:pointer;
  font-family:inherit;letter-spacing:-.2px;text-align:center;
  transition:background-color .14s, border-color .14s, color .14s, transform .12s;
}
.btn-primary{background:var(--accent);color:var(--on-accent);}
.btn-primary:hover{background:var(--accent-2);color:var(--on-accent);transform:translateY(-1px);}
.btn-ghost{border-color:var(--line-2);color:var(--text);background:transparent;}
.btn-ghost:hover{border-color:var(--accent);color:var(--text);}
.btn-sm{font-size:14.5px;padding:11px 20px;border-radius:0 0 16px 0;white-space:nowrap;}

.dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none;margin-top:7px;}
.chiprow{display:flex;align-items:center;gap:22px;flex-wrap:wrap;font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);}
.chiprow span.c{display:flex;align-items:center;gap:8px;}
.chiprow span.c i{width:6px;height:6px;background:var(--accent);flex:none;font-style:normal;}

@keyframes yp-spin{to{transform:rotate(360deg);}}
@keyframes yp-spin-r{to{transform:rotate(-360deg);}}
@keyframes yp-blink{0%,49%{opacity:1;}50%,100%{opacity:0;}}
@keyframes yp-breathe{0%,100%{transform:scale(1);}50%{transform:scale(1.04);}}
@keyframes yp-dot{0%,100%{opacity:1;}50%{opacity:.2;}}
@keyframes yp-rise{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}

/* ============================================================
   3. NAV + THEME TOGGLE
   ============================================================ */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;border-bottom:1px solid transparent;transition:background-color .2s ease-out, border-color .2s ease-out;}
.nav-in{max-width:1180px;margin:0 auto;padding:14px 40px;display:flex;align-items:center;justify-content:space-between;gap:24px;}
.nav.on{background:var(--nav-bg);border-bottom-color:var(--line);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);}
.brand{display:flex;align-items:center;gap:11px;color:var(--text);}
.brand b{font-weight:600;font-size:18px;letter-spacing:-.6px;}
.brand i{color:var(--accent);font-style:normal;}
.nav-links{display:flex;align-items:center;gap:26px;font-size:14.5px;}
.nav-links a{color:var(--muted);}
.nav-links a:hover{color:var(--text);}
.theme-btn{
  width:38px;height:38px;flex:none;display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--line-2);border-radius:0 0 14px 0;
  color:var(--muted);cursor:pointer;transition:border-color .14s,color .14s;
}
.theme-btn:hover{border-color:var(--accent);color:var(--accent);}
.theme-btn .i-sun{display:none;}
:root[data-theme="light"] .theme-btn .i-sun{display:block;}
:root[data-theme="light"] .theme-btn .i-moon{display:none;}


/* ============================================================
   FORM CONTROLS (intake / pay)
   ============================================================ */
.inp{
  width:100%;font-family:inherit;font-size:16px;color:var(--text);
  background:var(--bg);border:1px solid var(--line-2);border-radius:0 0 14px 0;
  padding:13px 15px;transition:border-color .15s, box-shadow .15s, background-color .25s, color .25s;
}
.inp.mono{font-family:'IBM Plex Mono',monospace;}
textarea.inp{line-height:1.5;resize:vertical;}
.inp:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring);outline:none;}
.inp.bad{border-color:var(--warn);}
.inp::placeholder{color:var(--dim);}

.chip-btn{
  border:1px solid var(--line-2);background:var(--bg);color:var(--text-2);
  border-radius:0 0 12px 0;padding:10px 16px;font-family:inherit;font-size:14.5px;
  cursor:pointer;transition:.14s;
}
.chip-btn:hover{border-color:var(--accent);}
.chip-btn.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);font-weight:600;}

.choice-btn{
  border:1px solid var(--line-2);background:var(--bg);color:var(--text-2);
  border-radius:0 0 18px 0;padding:16px 18px;font-family:inherit;font-size:15px;
  font-weight:600;text-align:left;cursor:pointer;transition:.14s;
}
.choice-btn:hover{border-color:var(--accent);}
.choice-btn.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);}

.lab{font-weight:600;font-size:14.5px;color:var(--text);}
.opt{color:var(--dim);font-weight:400;}
.req{color:var(--accent);}
.help{font-size:13px;color:var(--dim);line-height:1.5;}
.err{display:none;font-size:13px;color:var(--warn);}
.field{display:flex;flex-direction:column;gap:7px;}
.group{display:flex;flex-wrap:wrap;gap:9px;}

.navbtn{
  background:none;border:1px solid var(--line-2);color:var(--text-2);font-family:inherit;
  font-weight:600;font-size:15px;padding:14px 22px;border-radius:0 0 18px 0;cursor:pointer;transition:.14s;
}
.navbtn:hover{border-color:var(--accent);color:var(--accent);}
.sendbtn{
  background:var(--accent);border:none;color:var(--on-accent);font-family:inherit;
  font-weight:600;font-size:16px;padding:15px 30px;border-radius:0 0 20px 0;cursor:pointer;transition:.14s;
}
.sendbtn:hover{background:var(--accent-2);}
.sendbtn:disabled{opacity:.6;cursor:default;}
.linkbtn{
  background:none;border:none;color:var(--dim);font-family:'IBM Plex Mono',monospace;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;
  padding:9px 4px;min-height:34px;   /* a thumb needs more than the text's 16px */
}
.linkbtn:hover{color:var(--accent);}

/* Error / alert panel used on both forms */
.alert-bad{
  background:var(--warn-soft);border:1px solid var(--warn);color:var(--warn-ink);
  border-radius:0 0 14px 0;padding:13px 16px;font-size:14.5px;line-height:1.5;
}

@keyframes yp-in{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
@keyframes yp-spin-slow{to{transform:rotate(360deg);}}

/* ============================================================
   SHARED RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .wrap,.wrap-sm{padding:0 20px;}
  .nav-in{padding:12px 20px;}
  .nav-links{display:none;}
  .sec{padding:64px 0;}
  .card{padding:24px;}
  .g-2,.g-3,.g-4{grid-template-columns:1fr;}
  .card{border-radius:0 0 28px 0;}
}
@media (max-width:480px){
  .wrap,.wrap-sm{padding:0 16px;}
  .card{padding:20px;}
  .nav-in .btn-sm{padding:10px 13px;font-size:13.5px;}
  .theme-btn{width:34px;height:34px;}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation:none !important;transition:none !important;}
}