/* Aletheia Studio — company site. Same palette and type as the demo. */
@font-face { font-family: 'Fraunces'; src: url('/fonts/fraunces-latin-opsz-normal.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('/fonts/manrope-latin-wght-normal.woff2') format('woff2'); font-weight: 200 800; font-style: normal; font-display: swap; }

:root {
  --ink: #0E1116;
  --paper: #F4F1EA;
  --paper-2: #ECE7DC;
  --card: #FBF9F4;
  --text: #15181E;
  --text-2: #4A4F59;
  --text-3: #7B7F87;
  --ember: #FF5B2E;
  --ember-2: #C9381A;
  --ember-soft: #FFE3D8;
  --frost: #8FD3FF;
  --frost-2: #2F7FD6;
  --danger: #D92D20;
  --line: rgba(21, 24, 30, .12);
  --serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --sans: 'Manrope', ui-sans-serif, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --pad: clamp(16px, 5vw, 64px);
  --max: 1080px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0E1116; --paper-2: #161A22; --card: #161A22;
    --text: #F4F1EA; --text-2: #B9BDC6; --text-3: #8A8F99;
    --ember-2: #FF7A52; --ember-soft: rgba(255, 91, 46, .14);
    --line: rgba(244, 241, 234, .12);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--text); font: 400 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ul { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 2.5px solid var(--frost-2); outline-offset: 3px; border-radius: 6px; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }

/* ---- header ---- */
.top { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 22px; padding-bottom: 22px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font: 600 17px/1 var(--serif); letter-spacing: -.01em; text-decoration: none; }
.mark { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(90deg, var(--ember) 50%, var(--frost) 50%); box-shadow: 0 0 0 1.5px var(--text) inset; }
.top nav { display: flex; gap: 22px; font-size: 14.5px; }
.top nav a { text-decoration: none; color: var(--text-2); }
.top nav a:hover { color: var(--text); }
@media (max-width: 560px) { .top nav .hide-s { display: none; } }

/* ---- hero ---- */
.hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 6vw, 72px); align-items: center; padding-top: clamp(32px, 7vw, 88px); padding-bottom: clamp(48px, 8vw, 104px); }
@media (max-width: 860px) { .hero { grid-template-columns: minmax(0, 1fr); } }
.kicker { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ember-2); margin-bottom: 18px; }
h1 { font: 500 clamp(38px, 6.2vw, 68px)/1.04 var(--serif); letter-spacing: -.025em; }
.lede { margin-top: 22px; font-size: clamp(17px, 1.6vw, 19px); color: var(--text-2); max-width: 34em; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 22px; border-radius: 999px; font-weight: 700; font-size: 15.5px; text-decoration: none; transition: transform .15s ease, background .15s ease; }
.btn:hover { transform: translateY(-1px); }
.btn-main { background: var(--ink); color: #F4F1EA; }
@media (prefers-color-scheme: dark) { .btn-main { background: #F4F1EA; color: #0E1116; } }
.btn-alt { box-shadow: 0 0 0 1.5px var(--line) inset; }
.btn-alt:hover { box-shadow: 0 0 0 1.5px var(--text-3) inset; }

/* example conversation */
.chat { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 18px; box-shadow: 0 24px 60px -30px rgba(14, 17, 22, .35); }
.chat-head { display: flex; align-items: center; gap: 10px; padding: 4px 4px 14px; border-bottom: 1px solid var(--line); margin-bottom: 14px; font-size: 14px; font-weight: 700; }
.chat-head small { display: block; font-weight: 500; color: var(--text-3); font-size: 12.5px; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: #1F8A4C; margin-left: auto; }
.msg { max-width: 88%; padding: 10px 14px; border-radius: 16px; font-size: 14.5px; line-height: 1.5; margin-top: 8px; }
.msg.them { margin-left: auto; background: var(--ink); color: #F4F1EA; border-bottom-right-radius: 6px; }
@media (prefers-color-scheme: dark) { .msg.them { background: #2F3644; } .msg.bot { background: #232937; } .msg.alert { background: rgba(255, 91, 46, .16); } }
.msg.bot { background: var(--paper-2); border-bottom-left-radius: 6px; }
.msg.alert { background: var(--ember-soft); border-left: 3px solid var(--danger); }
.msg strong { font-weight: 700; }
.chat-note { margin-top: 14px; font-size: 12.5px; color: var(--text-3); text-align: center; }

/* ---- sections ---- */
section { padding-top: clamp(48px, 7vw, 88px); padding-bottom: clamp(48px, 7vw, 88px); border-top: 1px solid var(--line); }
h2 { font: 500 clamp(28px, 3.6vw, 40px)/1.1 var(--serif); letter-spacing: -.02em; max-width: 20em; }
.sub { margin-top: 12px; color: var(--text-2); max-width: 38em; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 36px; }
@media (max-width: 720px) { .grid { grid-template-columns: minmax(0, 1fr); } }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 24px; }
.card h3 { font: 600 19px/1.3 var(--sans); letter-spacing: -.01em; margin-bottom: 8px; }
.card p { color: var(--text-2); font-size: 15.5px; }
.tag { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ember-2); margin-bottom: 12px; }

.steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 36px; counter-reset: s; }
@media (max-width: 760px) { .steps { grid-template-columns: minmax(0, 1fr); } }
.steps li { counter-increment: s; padding: 24px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); }
.steps li::before { content: counter(s, decimal-leading-zero); display: block; font: 500 28px/1 var(--serif); color: var(--ember-2); margin-bottom: 14px; }
.steps h3 { font: 600 18px/1.3 var(--sans); margin-bottom: 6px; }
.steps p { color: var(--text-2); font-size: 15.5px; }

.about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 64px); align-items: start; }
@media (max-width: 760px) { .about { grid-template-columns: minmax(0, 1fr); } }
.about p + p { margin-top: 14px; }
.about .body { color: var(--text-2); }
.contact-card { background: var(--ink); color: #F4F1EA; border-radius: 22px; padding: 28px; }
@media (prefers-color-scheme: dark) { .contact-card { background: #1C212B; border: 1px solid var(--line); } }
.contact-card h3 { font: 500 26px/1.15 var(--serif); margin-bottom: 10px; }
.contact-card p { color: #C9CDD5; font-size: 15.5px; }
.contact-card a.mail { display: inline-block; margin-top: 18px; font-weight: 700; font-size: 17px; color: #F4F1EA; text-underline-offset: 4px; word-break: break-all; }
.contact-card .btn { margin-top: 20px; background: var(--ember); color: #0E1116; }

/* ---- footer ---- */
footer { border-top: 1px solid var(--line); padding-top: 28px; padding-bottom: 40px; font-size: 14px; color: var(--text-3); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
footer a { color: var(--text-2); }
footer nav { display: flex; gap: 18px; flex-wrap: wrap; }

/* ---- plain pages (privacy, 404) ---- */
.doc { max-width: 720px; padding-top: clamp(24px, 5vw, 56px); padding-bottom: 72px; }
.doc h1 { font-size: clamp(34px, 5vw, 48px); margin-bottom: 8px; }
.doc .meta { color: var(--text-3); font-size: 14.5px; margin-bottom: 32px; }
.doc h2 { font-size: 22px; font-family: var(--sans); font-weight: 700; letter-spacing: -.01em; margin-top: 32px; margin-bottom: 8px; }
.doc p, .doc li { color: var(--text-2); }
.doc ul { padding-left: 20px; margin-top: 8px; }
.doc li + li { margin-top: 6px; }

@media (prefers-reduced-motion: reduce) { .btn { transition: none; } .btn:hover { transform: none; } }