/* Simply Ai — base design system */

:root {
  /* Warm neutrals */
  --parchment: #F4EDE1;
  --parchment-2: #EFE6D5;
  --parchment-3: #E8DEC9;
  --mist: #F9F4EA;
  --ink: #1A1816;
  --ink-2: #2B2824;
  --dusk: #4A4842;
  --stone: #6B6862;
  --stone-2: #8A857C;
  --mute: #B5AE9F;

  /* Accents — all warm, desaturated */
  --clay: #B8552E;
  --clay-deep: #9A4121;
  --clay-soft: #E9C6B3;
  --moss: #6B7A5A;
  --moss-soft: #D6DAC8;
  --sakura: #D9A89A;
  --saffron: #C8895A;

  /* Surfaces */
  --surface: #FAF5EA;
  --surface-2: #F2EAD8;
  --line: rgba(26, 24, 22, 0.09);
  --line-2: rgba(26, 24, 22, 0.14);
  --line-strong: rgba(26, 24, 22, 0.22);

  /* Radii */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* Shadows — ultra restrained */
  --shadow-1: 0 1px 0 rgba(26,24,22,0.04), 0 1px 3px rgba(26,24,22,0.04);
  --shadow-2: 0 1px 0 rgba(26,24,22,0.04), 0 10px 30px -14px rgba(26,24,22,0.18);
  --shadow-3: 0 30px 80px -30px rgba(26,24,22,0.25), 0 2px 8px rgba(26,24,22,0.06);

  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--parchment);
  color: var(--ink);
  font-family: 'Inter Tight', 'Inter', system-ui, sans-serif;
  font-feature-settings: 'ss01', 'cv11';
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Type ——————————————————————————————— */
.serif { font-family: 'Newsreader', 'Iowan Old Style', Georgia, serif; font-weight: 400; letter-spacing: -0.01em; }
.mono { font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; }

h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p { margin: 0; }

.eyebrow {
  font-family: 'Inter Tight', sans-serif;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone);
  font-weight: 500;
}

.eyebrow-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dusk);
  background: rgba(255,255,255,0.35);
  font-weight: 500;
}

.eyebrow-pill .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--clay);
}

/* Layout ——————————————————————————————— */
.container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px;
}

.container-tight {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 32px;
}

.container-narrow {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 32px;
}

section { position: relative; }

/* Jot-paper dot background ——————————————————— */
.dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(26,24,22,0.18) 1px, transparent 1.4px);
  background-size: 22px 22px;
  background-position: 0 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.9) 12%, rgba(0,0,0,0.9) 88%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.9) 12%, rgba(0,0,0,0.9) 88%, rgba(0,0,0,0) 100%);
  opacity: 0.6;
}
.dots.dense { background-size: 16px 16px; opacity: 0.7; }
.dots.sparse { background-size: 30px 30px; opacity: 0.4; }
.dots.radial {
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, rgba(0,0,0,1) 0%, rgba(0,0,0,0.2) 60%, rgba(0,0,0,0) 85%);
          mask-image: radial-gradient(ellipse at 50% 40%, rgba(0,0,0,1) 0%, rgba(0,0,0,0.2) 60%, rgba(0,0,0,0) 85%);
}

/* Buttons ——————————————————————————————— */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  border-radius: var(--r-pill);
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.005em;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
  text-decoration: none;
  white-space: nowrap;
}

.btn-primary {
  background: var(--clay);
  color: #FDF7EC;
  border-color: var(--clay-deep);
}
.btn-primary:hover { background: var(--clay-deep); }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn-ghost:hover { background: rgba(26,24,22,0.04); }

.btn-subtle {
  background: rgba(26,24,22,0.05);
  color: var(--ink);
  border-color: transparent;
}
.btn-subtle:hover { background: rgba(26,24,22,0.08); }

.btn .arrow { transition: transform .3s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

/* Cards ——————————————————————————————— */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.card-raised {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
}

/* Section spacing ——————————————————————— */
.section-pad { padding: 120px 0; }
.section-pad-sm { padding: 80px 0; }
.section-pad-lg { padding: 160px 0; }

/* Divider ——————————————————————————————— */
.hairline { height: 1px; background: var(--line); width: 100%; }

/* Text utilities */
.t-stone { color: var(--stone); }
.t-dusk { color: var(--dusk); }
.t-clay { color: var(--clay); }
.t-ink { color: var(--ink); }
.t-muted { color: var(--stone-2); }

/* Reveal on scroll ——————————————————————— */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}
.reveal.d1 { transition-delay: .06s; }
.reveal.d2 { transition-delay: .12s; }
.reveal.d3 { transition-delay: .18s; }
.reveal.d4 { transition-delay: .24s; }
.reveal.d5 { transition-delay: .30s; }

/* Pulse dot */
.pulse-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--clay);
  position: relative;
  display: inline-block;
}
.pulse-dot::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--clay);
  opacity: 0.4;
  animation: pulse 2.2s ease-out infinite;
}
@keyframes pulse {
  0% { transform: scale(0.6); opacity: 0.5; }
  70% { transform: scale(1.6); opacity: 0; }
  100% { opacity: 0; }
}

/* Scroll progress caret */
.caret { display: inline-block; width: 7px; height: 14px; background: var(--ink); vertical-align: middle; animation: blink 1.1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* Marquee */
.marquee {
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marq 60s linear infinite;
}
@keyframes marq { to { transform: translateX(-50%); } }

/* Focus visible */
:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; border-radius: 4px; }

/* Tiny helpers */
.row { display: flex; align-items: center; }
.gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .gap-24 { gap: 24px; } .gap-32 { gap: 32px; }

/* Headline serif scales */
.h-display {
  font-family: 'Newsreader', serif;
  font-size: clamp(48px, 7vw, 96px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  font-weight: 400;
}
.h-display em { font-style: italic; color: var(--dusk); font-weight: 300; }

.h-1 {
  font-family: 'Newsreader', serif;
  font-size: clamp(40px, 5vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.022em;
  font-weight: 400;
}
.h-2 {
  font-family: 'Newsreader', serif;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.018em;
  font-weight: 400;
}
.h-3 {
  font-family: 'Newsreader', serif;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.012em;
  font-weight: 500;
}

.lead {
  font-size: 18px;
  line-height: 1.55;
  color: var(--dusk);
  max-width: 58ch;
}

.small { font-size: 13px; color: var(--stone); }


/* Nav — client sign-in pill */
.nav-right { display: flex; align-items: center; gap: 10px; }
.nav-signin {
  color: var(--dusk);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 99px;
  border: 1px solid var(--line, rgba(0,0,0,0.08));
  transition: color .2s ease, border-color .2s ease, background .2s ease;
  white-space: nowrap;
}
.nav-signin:hover {
  color: var(--ink);
  border-color: var(--line-strong, rgba(0,0,0,0.18));
  background: var(--parchment-2);
}
html[data-theme="dark"] .nav-signin { color: #C4BAA4; border-color: rgba(255,255,255,0.14); }
html[data-theme="dark"] .nav-signin:hover { color: #FBF3E2; border-color: rgba(255,255,255,0.28); background: rgba(255,255,255,0.04); }
@media (max-width: 720px) {
  .nav-signin { display: none; }
}

/* Footer sign-in subdomain caption */
.footer-cols .fsi-sub {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--stone-2);
  margin-top: 2px;
  text-transform: none;
}