/* Alfreya B2B demo: shared brand styles.
 *
 * Ported from the alfreya.com design system (alfreya-business/src/app/type.css,
 * v4): warm porcelain paper, near-black ink, one oxblood accent reserved for
 * the AI layer and "live" markers, Newsreader for display, Host Grotesk for
 * the interface. Hairline rules instead of boxes, pill buttons in sentence
 * case, nothing below 12px.
 *
 * Fonts load from Google Fonts in each page's <head>; the stacks fall back to
 * Georgia / Helvetica so the page still reads well offline. */
:root {
  --paper: #f6f3ee;
  --paper-2: #eee9e1;
  --bone: #fbfaf7;
  --ink: #171513;
  --ink-2: #3d3934;
  --muted: #625c52;
  --faint: #7a7468;
  --line: rgba(23, 21, 19, 0.12);
  --line-strong: rgba(23, 21, 19, 0.28);
  --on-ink: #f3efe8;
  --on-ink-muted: rgba(243, 239, 232, 0.72);
  --oxblood: #6b1f2a;
  --oxblood-soft: rgba(107, 31, 42, 0.1);
  --danger: #9a2f22;
  --ok: #2f6b45;

  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-sans: "Host Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --spring: cubic-bezier(0.32, 0.72, 0, 1);
  --gutter: clamp(16px, 4vw, 40px);
  --wrap: 1180px;

  /* Older names still read by page styles. */
  --bg: var(--paper);
  --panel: var(--bone);
  --hair: var(--line);
  --accent: var(--ink);
  --accent-ink: var(--ink);
  --radius: 4px;
  --shadow: none;

  color-scheme: light;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
html, body {
  background: var(--paper); color: var(--ink);
  font: 400 16px/1.6 var(--font-sans);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
::selection { background: var(--ink); color: var(--paper); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }
a { color: inherit; }
img { display: block; max-width: 100%; }

/* ---------- Type ---------- */
.serif, .display, .h1, .h2, .h3 {
  font-family: var(--font-display); font-optical-sizing: auto; font-weight: 400;
}
.display { font-size: clamp(44px, 6.4vw, 88px); font-weight: 300; line-height: 0.98; letter-spacing: -0.025em; }
.h1 { font-size: clamp(36px, 4.6vw, 60px); font-weight: 300; line-height: 1.02; letter-spacing: -0.022em; }
.h2 { font-size: clamp(28px, 3vw, 38px); line-height: 1.08; letter-spacing: -0.016em; }
.h3 { font-size: 26px; line-height: 1.15; letter-spacing: -0.012em; }
.display em, .h1 em, .h2 em, .h3 em { font-style: italic; }
.lede { font-size: clamp(17px, 1.5vw, 19px); line-height: 1.55; color: var(--muted); max-width: 34em; text-wrap: pretty; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2);
}
.eyebrow::before { content: ""; width: 18px; height: 1px; background: currentColor; }
.meta { font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.muted { color: var(--muted); }
.live-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--oxblood); flex: none;
  animation: live-pulse 2.4s infinite;
}
@keyframes live-pulse {
  0% { box-shadow: 0 0 0 0 rgba(107, 31, 42, 0.45); }
  70%, 100% { box-shadow: 0 0 0 7px rgba(107, 31, 42, 0); }
}

/* ---------- Header ---------- */
.site-head {
  position: sticky; top: 0; z-index: 20;
  background: rgba(246, 243, 238, 0.86);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent; transition: border-color 0.3s ease;
}
.site-head.stuck { border-bottom-color: var(--line); }
.site-head-in {
  max-width: var(--wrap); margin: 0 auto; height: 68px; padding: 0 var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.logo img { height: 22px; width: auto; }
.logo-tag {
  font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
  padding-left: 12px; border-left: 1px solid var(--line-strong); line-height: 1;
}
.head-actions { display: flex; align-items: center; gap: 8px; }

/* Legacy wordmark, kept for any page that still uses it. */
.brand { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.01em; font-size: 22px; }
.brand .dot { display: none; }
.topbar { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; }
.topbar .actions { display: flex; gap: 8px; align-items: center; }

/* ---------- Buttons ---------- */
.pill {
  appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 38px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: transparent; color: var(--ink);
  font: 500 13.5px/1 var(--font-sans); text-decoration: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.3s var(--spring), color 0.3s var(--spring), border-color 0.3s ease;
}
.pill:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pill.quiet { border-color: transparent; }
.pill.quiet:hover { background: rgba(23, 21, 19, 0.06); color: var(--ink); border-color: transparent; }

.btn {
  appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-height: 52px; padding: 0 26px; border: 0; border-radius: 999px;
  background: var(--ink); color: var(--paper);
  font: 500 15px/1 var(--font-sans); letter-spacing: 0.005em; text-decoration: none;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform 0.5s var(--spring), background-color 0.3s ease, opacity 0.2s ease;
}
.btn:hover { transform: translateY(-1px); background: #000; }
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.5; cursor: default; transform: none; }
/* Pill with a nested arrow island (the alfreya.com primary button). The
 * arrow is a pseudo-element so scripts can rewrite the label freely. */
.btn.arrow { padding: 0 8px 0 26px; justify-content: space-between; }
.btn.arrow::after {
  content: ""; width: 36px; height: 36px; border-radius: 50%; flex: none;
  background: rgba(243, 239, 232, 0.14) var(--arrow-light) center / 15px no-repeat;
  transition: transform 0.6s var(--spring);
}
.btn.arrow:hover::after { transform: translateX(3px) rotate(-45deg); }
.btn.gold { background: var(--ink); }
.btn.block { width: 100%; }
:root {
  --arrow-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f3efe8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --arrow-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23171513' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E");
}

/* ---------- Surfaces ---------- */
.card { background: var(--bone); border: 1px solid var(--line); border-radius: 4px; }

/* ---------- Forms ---------- */
.field { display: grid; gap: 8px; }
.field label, label.lbl { font-size: 13px; font-weight: 500; color: var(--ink-2); }
input[type="email"], input[type="password"], input[type="text"] {
  width: 100%; min-height: 52px; padding: 0 16px;
  border: 1px solid var(--line-strong); border-radius: 4px; background: #fff; color: var(--ink);
  font: 400 16px/1.2 var(--font-sans); /* 16px stops iOS zooming on focus */
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
input::placeholder { color: var(--faint); }
input:hover { border-color: rgba(23, 21, 19, 0.45); }
input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(23, 21, 19, 0.08); }

.err { color: var(--danger); font-size: 14px; }
.err:empty { display: none; }

/* Thin ink arc: the house busy indicator. */
.spinner {
  width: 28px; height: 28px; border-radius: 50%;
  border: 1.5px solid var(--line); border-top-color: var(--ink);
  animation: alf-spin 0.9s linear infinite;
}
@keyframes alf-spin { to { transform: rotate(360deg); } }

/* Page-load reveal. */
.rise { animation: alf-rise 0.9s var(--ease) both; }
.rise.d1 { animation-delay: 0.06s; } .rise.d2 { animation-delay: 0.12s; }
.rise.d3 { animation-delay: 0.18s; } .rise.d4 { animation-delay: 0.24s; }
@keyframes alf-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}