/* Shared public site, account, calendar, invoice, and message design tokens. */
:root {
  color-scheme: dark;
  --background: #222321;
  --surface: #2D2E2A;
  --panel: #373833;
  --text: #E8E3D9;
  --secondary-text: #B7B2A8;
  --copper: #A96F48;
  --olive: #777B60;
  --action: #BA8058;
  --border: #494942;
  --control-border: #93907F;
  --accent-text: #D3A180;
  --error: #E0A296;
  --success: #B9C79A;
  --ink: var(--text);
  --muted: var(--secondary-text);
  --paper: var(--background);
  --cream: var(--surface);
  --white: var(--panel);
  --line: var(--border);
  --accent: var(--accent-text);
  --body-font: "Segoe UI", "Trebuchet MS", sans-serif;
  --heading-font: "Franklin Gothic Medium", "Trebuchet MS", sans-serif;
}
[hidden] { display:none !important; }
body { background:var(--background); color:var(--text); font-family:var(--body-font); }
h1,h2,h3,.stat strong { font-family:var(--heading-font); font-weight:500; letter-spacing:-.025em; }
h1,h2 { text-wrap:balance; }
button,input,select,textarea { color:var(--text); font-family:inherit; }
a,button,input,select,textarea { -webkit-tap-highlight-color:transparent; }
a { text-underline-offset:4px; }
a:hover { text-decoration-color:var(--copper); }
:focus-visible { outline:3px solid var(--accent-text); outline-offset:4px; }
::selection { background:var(--action); color:var(--background); }
.nav,.portal-nav { background:var(--surface); border-bottom:1px solid var(--border); gap:24px; }
.logo { font-family:var(--heading-font); font-weight:500; font-size:clamp(17px,1.8vw,23px); letter-spacing:-.015em; line-height:1.3; text-transform:none; }
.logo-tagline { display:block; color:var(--secondary-text); font-family:var(--body-font); font-size:12px; font-weight:400; letter-spacing:0; margin-top:7px; line-height:1.5; }
.hero .hero-brand { font-family:var(--heading-font); font-size:clamp(20px,2.3vw,30px); letter-spacing:-.02em; }
/* Keep the original name's footprint so surrounding hero elements stay in place. */
.hero .hero-brand { position:relative; }
.hero .hero-brand-sizing { visibility:hidden; }
.hero .hero-wordmark {
  position:absolute;
  inset:0;
  padding-inline:2px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  color:var(--text);
  font-family:var(--heading-font);
  font-size:clamp(23px,2.8vw,36px);
  font-weight:800;
  line-height:.95;
  letter-spacing:-.025em;
  text-transform:uppercase;
  white-space:nowrap;
}
.hero .hero-wordmark-service {
  font-size:clamp(9px,.85vw,11px);
  font-weight:700;
  line-height:1.1;
  letter-spacing:.08em;
}
.hero .brand-tagline { color:var(--accent-text); font-size:clamp(21px,2.1vw,29px); }
.hero h1 { font-size:clamp(46px,6vw,82px); line-height:1.06; }
.hero-art { border:0; border-radius:0; background:none; box-shadow:none; }
.hero-art::before,.hero-art::after { content:none; }
/* Feather the photograph itself so the surrounding charcoal stays uninterrupted.
   The face and ears remain inside the clear center at every viewport size. */
.phoenix-portrait {
  display:block;
  width:100%;
  max-width:480px;
  margin-inline:auto;
  height:auto;
  aspect-ratio:4 / 5;
  filter:saturate(.84);
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 48%,rgba(0,0,0,.96) 68%,rgba(0,0,0,.55) 82%,transparent 100%);
  mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 48%,rgba(0,0,0,.96) 68%,rgba(0,0,0,.55) 82%,transparent 100%);
}
.portrait { border-radius:12px; border:1px solid var(--border); }
.intro,.dark,.cta { background:var(--surface); color:var(--text); }
.dark .muted,.dark p,.method p,.dark-note p { color:var(--secondary-text); }
.dark .kicker,.step span,.num { color:var(--accent-text); }
.step h3 { color:var(--text); }
.card { border-radius:0 0 10px 10px; }
.card h3 { font-size:27px; }
footer { background:var(--surface); gap:24px; flex-wrap:wrap; }
.footer-tagline { color:var(--accent-text); }
.btn,.tabs button,.slot,.day,.conversation-button { transition:background-color .16s ease,border-color .16s ease; }
.btn { background:var(--action); color:var(--background); border:1px solid var(--copper); border-radius:6px; font-weight:650; line-height:1.5; min-height:44px; }
.btn:hover { background:#C28D67; border-color:#C28D67; }
.btn.alt { background:var(--surface); color:var(--text); border:1px solid var(--border); }
.btn.alt:hover { background:var(--panel); border-color:var(--olive); }
button:disabled,.btn:disabled { opacity:1; background:var(--surface); color:var(--secondary-text); border-color:var(--border); cursor:not-allowed; }
input,select,textarea { background:var(--background); color:var(--text); border:1px solid var(--control-border); border-radius:6px; min-height:46px; line-height:1.5; }
input::placeholder,textarea::placeholder { color:var(--secondary-text); opacity:1; }
input:hover,select:hover,textarea:hover { border-color:var(--olive); }
input:focus,select:focus,textarea:focus { border-color:var(--accent-text); }
input[type=checkbox],input[type=radio] { accent-color:var(--copper); min-height:auto; }
input[type=file]::file-selector-button { padding:8px 12px; margin-right:12px; background:var(--panel); color:var(--text); border:1px solid var(--border); border-radius:4px; cursor:pointer; }
label { color:var(--secondary-text); letter-spacing:.08em; }
.panel,.stat,.bubble { background:var(--panel); border:1px solid var(--border); border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.08); }
.stat strong { font-variant-numeric:tabular-nums; }
.message { background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--olive); border-radius:6px; color:var(--text); }
.message.error { border-left-color:var(--error); }
.error,.danger { color:var(--error); }
.empty,.form-note,.meta,.file-preview { color:var(--secondary-text); }
.tabs button { color:var(--secondary-text); border-radius:6px; min-height:44px; background:var(--surface); }
.tabs button:hover,.slot:hover:not(:disabled),.day:hover:not(:disabled) { background:var(--panel); border-color:var(--olive); }
.tabs button.active,.slot.selected { background:var(--panel); color:var(--text); border-color:var(--copper); box-shadow:inset 0 -3px var(--copper); }
.day { color:var(--text); background:var(--surface); min-width:0; }
.day:disabled { background:var(--background); color:var(--secondary-text); }
.day.selected { background:var(--panel); outline-color:var(--accent-text); color:var(--text); }
.week { color:var(--secondary-text); }
.week div { letter-spacing:0; }
.slot { color:var(--text); border-color:var(--border); border-radius:6px; min-height:44px; }
.badge { background:var(--surface); color:var(--text); border:1px solid var(--olive); border-radius:5px; }
.menu-panel { background:var(--panel); border-radius:8px; box-shadow:0 18px 40px rgba(0,0,0,.25); }
.menu-panel a { border-radius:4px; }
.unread-count,.menu-panel .unread-count { background:var(--action); color:var(--background); border-radius:12px; font-weight:700; }
.conversation-button { color:var(--text); border-radius:6px; }
.conversation-button.active { box-shadow:inset 3px 0 var(--copper); }
.bubble.mine { background:var(--surface); border-color:var(--olive); }
.bubble .sender { font-family:var(--heading-font); }
.bubble .sender small { font-family:var(--body-font); }
.attachment-link,.auth-help,.link-button { color:var(--accent-text); }
.dark-note { background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:10px; }
dialog { background:var(--panel); color:var(--text); border:1px solid var(--border); border-radius:10px; }
dialog::backdrop { background:rgba(22,23,21,.75); }
@media(max-width:1050px) { .navlinks { display:none; } }
@media(max-width:760px) {
  .nav,.portal-nav { padding:18px 6vw; gap:14px; }
  .portal-nav { flex-wrap:wrap; }
  .logo { max-width:24ch; }
  .nav .logo { max-width:19ch; }
  .nav-actions { flex-shrink:0; }
  .nav-controls { flex-wrap:wrap; }
  .logo-tagline { max-width:32ch; }
  .hero { padding-top:155px; }
  .hero h1 { font-size:clamp(42px,10vw,64px); }
  .hero-art { min-height:300px; }
  .calendar-head { gap:12px; flex-wrap:wrap; }
  .calendar-head h2 { font-size:24px; }
  .week div { font-size:10px; padding:8px 0; }
  .day { padding:5px 1px; font-size:13px; }
  .panel { min-width:0; }
  .message-layout { min-width:0; }
  .bubble { overflow-wrap:anywhere; }
  .hero .btn { margin:8px 6px 0 0; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition:none !important; } }

.hero > *, .intro > *, .method > *, .about > *, .step > * { min-width:0; }
h1,h2,h3 { overflow-wrap:anywhere; }
@media(max-width:480px) { .step { grid-template-columns:42px minmax(0,1fr); } form[name="discovery-call"] { padding:22px !important; border-radius:10px; } }

.menu-unread-badge { background:var(--action); color:var(--background); }