/* ==========================================================================
   Aclarity.ai — Home
   Dark-first editorial design: Onyx surfaces, Linen text, Gilded accents.
   Poiret One = display, Jost = everything else (UI and long-form both).
   Two-font brand type system - Source Serif Pro retired site-wide as of
   2026-07-09; every former --font-serif consumer below now uses --font-ui
   (Jost) directly, self-hosted via the @font-face block that follows, no
   CDN import needed for it.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Webfonts (self-hosted, subset per script; variable weight 400–600)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Jost';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/jost-italic-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Jost';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/jost-italic-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Jost';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/jost-italic-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/jost-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/jost-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/jost-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poiret One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/poiret-one-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Poiret One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/poiret-one-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poiret One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/poiret-one-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Base palette */
  --onyx: #111313;    /* PRIMARY: default background surface */
  --linen: #F5EFE1;   /* text and focal moments */
  --bronze: #645022;  /* deep accent: dividers, rules */
  --sand: #D8C08C;    /* supporting accent: chips, badges, muted text on dark */
  --gilded: #C9A85F;  /* primary accent: CTAs, active nav, focus */
  --forest: #0A1913;  /* SECONDARY brand surface: headers, heroes */

  /* Derived tints (mixes of palette colors — no new hues) */
  --onyx-raised: #1B1E1D;
  --linen-bright: #FBF8EF;
  --sand-tint: rgba(216, 192, 140, 0.16);
  --forest-deep: #061109;
  --gilded-hover: #D8BC7B;

  /* Semantic */
  --text-body: var(--linen);
  --text-muted: var(--sand);
  --text-accent: var(--gilded);
  --text-faded: rgba(245, 239, 225, 0.75);
  --surface-page: var(--onyx);
  --surface-card: var(--onyx-raised);
  --surface-brand: var(--forest);
  --border-subtle: rgba(245, 239, 225, 0.14);
  --border-strong: rgba(216, 192, 140, 0.45);
  --divider: var(--bronze);
  --focus-ring: var(--gilded);

  /* Type */
  --font-display: 'Poiret One', cursive;
  --font-ui: 'Jost', sans-serif;
  --tracking-caps: 0.28em;

  /* Layout */
  --gutter: 48px;
  --content-max: 1240px;

  /* Motion */
  --ease-calm: cubic-bezier(0.4, 0, 0.2, 1);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.4;
  color: var(--text-body);
  background: var(--surface-page);
}

img { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes drift {
  from { transform: scale(1); }
  to   { transform: scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Letterspaced all-caps section labels */
.eyebrow {
  font-size: 12px;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--sand);
}

/* Nav - moved to the shared /styles/nav.css (nav.js mounts it into
   #site-nav-root), consumed by this page and /ask/ alike. Kept out of
   home.css so a nav change is never made in two places. */

/* --------------------------------------------------------------------------
   Hero — giant wordmark over full-bleed portrait, sits under the fixed
   shared nav (nav.css) - no top offset needed, the nav overlays it.
   -------------------------------------------------------------------------- */
.hero { position: relative; background: var(--onyx); }

.hero__media {
  position: relative;
  overflow: hidden;
  height: min(960px, 115vh);
}

.hero__drift { position: absolute; inset: 0; animation: drift 26s ease-in-out infinite alternate; }

.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

.hero__scrim--top {
  position: absolute;
  inset: 0 0 auto 0;
  height: 45%;
  background: linear-gradient(180deg, rgba(17, 19, 19, 0.30), transparent);
  pointer-events: none;
}

.hero__scrim--bottom {
  position: absolute;
  inset: auto 0 0 0;
  height: 55%;
  background: linear-gradient(0deg, rgba(17, 19, 19, 0.42), transparent);
  pointer-events: none;
}

.hero__wordmark {
  position: absolute;
  /* .site-nav is position:fixed and overlays the hero (nav.css) - this has
     to clear its actual rendered height (measured live: 116px desktop, own
     row--top min-height + padding + the desktop-only link row) plus a 16px
     breathing-room gap, or the fixed Onyx bar covers the top of the
     wordmark. Mobile gets its own shorter value below (77px nav, no link
     row) rather than sharing this one padded for the taller desktop case. */
  top: 132px;
  left: 0;
  right: 0;
  z-index: 2;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 11.5vw;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--linen);
  animation: fadeUp 0.9s var(--ease-calm) both;
  pointer-events: none;
}

.hero__foot {
  position: absolute;
  bottom: 52px;
  left: 0;
  right: 0;
  text-align: center;
  animation: fadeUp 1.1s 0.25s var(--ease-calm) both;
}

.hero__eyebrow { margin-bottom: 14px; }

.hero__tagline {
  font-family: var(--font-display);
  font-size: clamp(34px, 5.3vw, 64px);
  line-height: 1.12;
  color: var(--linen);
  text-wrap: balance;
}

.hero__cta-row {
  display: flex;
  justify-content: center;
  margin-top: 44px;
  padding: 0 40px;
}

.btn-primary {
  display: inline-block;
  background: var(--gilded);
  color: var(--onyx);
  border: none;
  border-radius: 999px;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 18px 56px;
  cursor: pointer;
  max-width: 100%;
  transition: background 150ms var(--ease-calm);
}
.btn-primary:hover { background: var(--gilded-hover); }

/* --------------------------------------------------------------------------
   How We Answer — horizontal scroll showcase
   -------------------------------------------------------------------------- */
.answers {
  background: var(--onyx);
  padding: 56px 0 64px;
  overflow: hidden;
}

.answers__eyebrow {
  text-align: center;
  margin-bottom: 32px;
  padding: 0 var(--gutter);
}

.answers__track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--gutter) 12px;
  -webkit-overflow-scrolling: touch;
}

.answer-card {
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: min(420px, 84vw);
  background: var(--surface-brand);
  border: 1px solid var(--divider);
  border-radius: 8px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.answer-card__head { display: flex; flex-direction: column; gap: 10px; }

.answer-card__tag {
  align-self: flex-start;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
}
.answer-card__tag--verified { color: var(--onyx); background: var(--gilded); }
.answer-card__tag--rejected { color: var(--linen); background: transparent; border: 1px solid rgba(245, 239, 225, 0.4); }
.answer-card__tag--steps { color: var(--onyx); background: var(--sand); }

.answer-card__subject {
  font-family: var(--font-ui);
  font-size: 15px;
  color: var(--linen);
}

.answer-card__body {
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-faded);
}

.answer-card__steps {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-faded);
}
.answer-card__steps strong { color: var(--linen); }

.answer-card__cite {
  font-family: var(--font-ui);
  font-style: italic;
  font-size: 13px;
  color: var(--sand);
}
.answer-card__cite--rejected { font-style: normal; opacity: 0.75; }

/* --------------------------------------------------------------------------
   Conversation demo — framed exhibit on forest
   -------------------------------------------------------------------------- */
.demo {
  background: var(--surface-brand);
  padding: 110px var(--gutter);
}

.demo__grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 72px;
  align-items: center;
  max-width: var(--content-max);
  margin: 0 auto;
}

.demo__eyebrow { margin-bottom: 22px; }

.demo__title {
  margin-bottom: 26px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(32px, 3.6vw, 44px);
  line-height: 1.2;
  color: var(--linen);
}

.demo__copy {
  font-family: var(--font-ui);
  font-size: 20px;
  line-height: 1.6;
  color: var(--text-faded);
  max-width: 44ch;
}

/* Integration point: replace the inside of .demo__card with the live ask widget. */
.demo__card {
  background: var(--onyx);
  border: 1px solid rgba(216, 192, 140, 0.3);
  border-radius: 8px;
  padding: 44px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
}

.ask-field {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 8px 8px 8px 24px;
}

.ask-field__input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  font-family: var(--font-ui);
  font-size: 15px;
  color: var(--linen);
}
.ask-field__input::placeholder { color: rgba(245, 239, 225, 0.45); }
.ask-field__input:focus { outline: none; }

.ask-field__btn {
  flex: none;
  background: var(--gilded);
  color: var(--onyx);
  border: none;
  border-radius: 999px;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 12px 26px;
  cursor: pointer;
  transition: background 150ms var(--ease-calm);
}
.ask-field__btn:hover { background: var(--gilded-hover); }

.demo__card-note {
  font-family: var(--font-ui);
  font-style: italic;
  font-size: 16px;
  color: rgba(245, 239, 225, 0.55);
  text-align: center;
}

/* --------------------------------------------------------------------------
   Pull-quote
   -------------------------------------------------------------------------- */
.pull-quote {
  text-align: center;
  padding: 110px var(--gutter) 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
}

.pull-quote p {
  max-width: 820px;
  font-family: var(--font-ui);
  font-size: clamp(28px, 3.8vw, 46px);
  line-height: 1.3;
  color: var(--linen);
}

/* --------------------------------------------------------------------------
   How it works — numbered offset rows
   -------------------------------------------------------------------------- */
.how {
  background: var(--surface-brand);
  padding: 90px var(--gutter);
}

.how__inner { max-width: var(--content-max); margin: 0 auto; }

.how__eyebrow { margin-bottom: 70px; text-align: center; }

.how-row {
  display: grid;
  grid-template-columns: 120px 1fr 520px;
  gap: 48px;
  align-items: center;
  padding: 36px 0;
  border-top: 1px solid var(--border-subtle);
}

.how-row--flip { grid-template-columns: 120px 520px 1fr; }

.how-row:last-child { border-bottom: 1px solid var(--border-subtle); }

.how-row__num {
  font-family: var(--font-display);
  font-size: 80px;
  color: var(--bronze);
  line-height: 1;
}

.how-row__title {
  margin-bottom: 12px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 34px;
  color: var(--linen);
}

.how-row__copy {
  font-family: var(--font-ui);
  font-size: 20px;
  line-height: 1.55;
  color: var(--text-faded);
  max-width: 42ch;
}

.how-row__media { overflow: hidden; }
.how-row__media > div { transition: transform 0.6s var(--ease-calm); }
.how-row__media:hover > div { transform: scale(1.04); }
.how-row__media img { width: 100%; height: 280px; object-fit: cover; }

/* --------------------------------------------------------------------------
   On the horizon
   -------------------------------------------------------------------------- */
.horizon { padding: 150px var(--gutter); }

.horizon__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  border-top: 1px solid var(--divider);
  padding-top: 22px;
  margin-bottom: 64px;
}

.horizon__note {
  font-family: var(--font-ui);
  font-style: italic;
  font-size: 18px;
  color: rgba(245, 239, 225, 0.6);
}

.horizon__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px;
}

.horizon-card {
  border-top: 1px solid var(--border-subtle);
  padding-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}

.horizon-card__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 30px;
  color: var(--linen);
}

.horizon-card__copy {
  font-family: var(--font-ui);
  font-size: 19px;
  line-height: 1.6;
  color: var(--text-faded);
}

/* --------------------------------------------------------------------------
   Founder
   -------------------------------------------------------------------------- */
.founder-faq {
  padding: 0 var(--gutter) 110px;
  background-color: var(--forest);
}

.founder {
  max-width: var(--content-max);
  margin: 0 auto;
  border-top: 1px solid var(--divider);
  padding-top: 26px;
}

.founder__eyebrow { margin-bottom: 26px; }

.founder__body { display: flex; gap: 28px; align-items: flex-start; }

.founder__portrait {
  flex: none;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
}

.founder__quote {
  margin-bottom: 14px;
  font-family: var(--font-ui);
  font-size: 20px;
  line-height: 1.55;
  color: var(--linen);
}

.founder__sig {
  font-family: var(--font-ui);
  font-style: italic;
  font-size: 18px;
  color: var(--sand);
}

.founder__pro-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding: 20px;
  border: 1px solid var(--divider);
  border-left: 3px solid var(--gilded);
  border-radius: 10px;
  background: rgba(245, 239, 225, 0.02);
  text-decoration: none;
  transition: background 150ms var(--ease-calm);
}
.founder__pro-link:hover { background: rgba(245, 239, 225, 0.06); }
.founder__pro-link span {
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.5;
  color: var(--gilded);
}
.founder__pro-link svg { flex: none; color: var(--gilded); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
  padding: 60px var(--gutter);
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--onyx);
}

.site-footer__links {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: rgba(245, 239, 225, 0.6);
  text-align: center;
}

.site-footer__links a { transition: color 150ms var(--ease-calm); }
.site-footer__links a:hover { color: var(--gilded); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  :root { --gutter: 32px; }

  .demo__grid { grid-template-columns: 1fr; gap: 48px; }

  .how-row,
  .how-row--flip {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .how-row__num { font-size: 56px; }
  .how-row--flip .how-row__media { order: 3; }

  .horizon { padding: 96px var(--gutter); }
  .horizon__grid { grid-template-columns: 1fr; gap: 40px; }

  .founder-faq { grid-template-columns: 1fr; gap: 56px; }
}

@media (max-width: 640px) {
  :root { --gutter: 20px; }

  .hero__media { height: 78vh; min-height: 480px; }
  /* Mobile nav is shorter than desktop (77px measured live - no second
     link row, tighter padding, nav.css's 640px breakpoint), so the 132px
     desktop clearance is more gap than needed here - own value, same
     "nav height + 16px" formula. */
  .hero__wordmark { top: 93px; font-size: 15vw; }
  .hero__foot { bottom: 32px; }
  .hero__cta-row { margin-top: 28px; }
  .btn-primary { padding: 16px 36px; }

  .demo { padding: 72px var(--gutter); }
  .demo__card { padding: 28px; }

  .pull-quote { padding: 72px var(--gutter) 64px; }

  .how { padding: 64px var(--gutter); }
  .how__eyebrow { margin-bottom: 40px; }
  .how-row__title { font-size: 28px; }
  .how-row__media img { height: 220px; }

  .founder__body { flex-direction: column; }
}