/* ── AIGriefBot homepage, Oct 2026 redesign ──────────────────────────────
   Scoped to .home so no other page changes. Dark dusk brand kept (dark-only
   by design: the shared nav and footer are built for it).

   Tokens
     night #0B0E14 (page) · surface #111620 · raised #161C28
     mist #E9EDF2 (text) · one accent: dusk amber #C08A52
   Type
     Outfit (display, light weights) + Manrope (body), self-hosted in style.css, OFL.
   Shape
     buttons = full pill · panels = 22px · inner tiles = 14px
   Motion
     gentle reveal on scroll (opacity + translate only), chat lines arrive in
     sequence. Everything is static under prefers-reduced-motion and without JS. */


.home {
  --h-bg: #0B0E14;
  --h-surface: #111620;
  --h-raised: #161C28;
  --h-line: rgba(233, 237, 242, .10);
  --h-line-strong: rgba(233, 237, 242, .18);
  --h-text: #E9EDF2;
  --h-soft: rgba(233, 237, 242, .76);
  --h-muted: rgba(233, 237, 242, .60);
  --h-accent: #C08A52;
  --h-accent-soft: rgba(192, 138, 82, .16);
  --h-teal: rgba(30, 58, 63, .55);
  --h-display: 'Outfit', 'Manrope', system-ui, sans-serif;
  --h-body: 'Manrope', system-ui, sans-serif;
  --h-r-panel: 22px;
  --h-r-tile: 14px;
  --h-ease: cubic-bezier(.16, 1, .3, 1);
  --h-wrap: 1440px;
  --h-gutter: 5vw;   /* same side padding as the shared nav, so every left edge lines up with the logo */

  font-family: var(--h-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--h-text);
  overflow-x: clip;
}
.home h1, .home h2, .home h3 {
  font-family: var(--h-display);
  font-weight: 350;
  letter-spacing: -.02em;
  text-transform: none;
  color: var(--h-text);
  text-wrap: balance;
}
.home p { text-wrap: pretty; }
.home h2 { font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.08; }
.home h3 { font-size: 1.3rem; line-height: 1.25; font-weight: 400; letter-spacing: -.01em; }
.home a:focus-visible, .home button:focus-visible {
  outline: 2px solid var(--h-accent); outline-offset: 3px; border-radius: 6px;
}
.home .h-btn:focus-visible { border-radius: 999px; }

.h-wrap { width: 100%; max-width: var(--h-wrap); margin: 0 auto; padding: 0 var(--h-gutter); }
.h-section { padding: clamp(72px, 9vw, 128px) 0 clamp(80px, 10vw, 136px); }
.h-lead { color: var(--h-soft); font-size: 1.125rem; max-width: 58ch; margin-top: 18px; }
.h-label { font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--h-accent); margin-bottom: 18px; }
.h-small { font-size: .92rem; color: var(--h-muted); }
.h-link { color: var(--h-text); text-decoration: underline; text-decoration-color: rgba(192, 138, 82, .7); text-underline-offset: 4px; text-decoration-thickness: 1px; transition: text-decoration-color .25s var(--h-ease); }
.h-link:hover { text-decoration-color: var(--h-accent); }

/* buttons */
.h-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  white-space: nowrap; border-radius: 999px; padding: 17px 34px;
  font-family: var(--h-body); font-weight: 700; font-size: 1rem; letter-spacing: .01em;
  transition: transform .3s var(--h-ease), background-color .3s var(--h-ease), box-shadow .3s var(--h-ease), border-color .3s var(--h-ease);
}
.h-btn-primary { background: #F2F4F7; color: #10141B; box-shadow: 0 10px 30px -12px rgba(192, 138, 82, .55); }
.h-btn-primary:hover { background: #FFFFFF; transform: translateY(-2px); box-shadow: 0 16px 38px -14px rgba(192, 138, 82, .7); }
.h-btn-quiet { border: 1px solid var(--h-line-strong); color: var(--h-text); }
.h-btn-quiet:hover { border-color: rgba(233, 237, 242, .45); background: rgba(233, 237, 242, .05); transform: translateY(-2px); }
.h-btn:active { transform: translateY(1px) scale(.98); }
.h-btn .h-ic { width: 18px; height: 18px; }
.h-textlink { display: inline-flex; align-items: center; gap: 8px; color: var(--h-soft); font-weight: 600; padding: 10px 2px; transition: color .25s var(--h-ease); }
.h-textlink:hover { color: var(--h-text); }
.h-textlink .h-ic { width: 18px; height: 18px; transition: transform .3s var(--h-ease); }
.h-textlink:hover .h-ic { transform: translateY(2px); }
.h-ic { display: inline-block; width: 24px; height: 24px; flex: 0 0 auto; }
.h-ic svg { width: 100%; height: 100%; display: block; }

/* ── hero: copy left, photograph right ── */
.h-hero {
  position: relative; min-height: min(100dvh, 920px);
  display: grid; align-items: center;
  padding: 120px 0 72px;
  isolation: isolate;
}
.h-hero::after { /* ambient dusk light behind the copy */
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  left: -12vw; top: 10%; width: 62vw; height: 62vw; max-width: 900px; max-height: 900px;
  background: radial-gradient(circle, rgba(192, 138, 82, .16), transparent 62%);
}
.h-hero-pic { position: absolute; inset: 0 0 0 42%; z-index: -1; margin: 0; overflow: hidden; }
.h-hero-pic img { width: 100%; height: 100%; object-fit: cover; object-position: 34% 42%; display: block; filter: saturate(.92); }
.h-hero-pic::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, var(--h-bg) 0%, rgba(11, 14, 20, .82) 16%, rgba(11, 14, 20, .28) 36%, rgba(11, 14, 20, 0) 54%),
    linear-gradient(180deg, rgba(11, 14, 20, .6) 0%, rgba(11, 14, 20, 0) 24%, rgba(11, 14, 20, 0) 70%, var(--h-bg) 100%);
}
.h-hero-copy { max-width: min(34rem, 40vw); }
.h-hero h1 { font-size: clamp(3.2rem, 7vw, 6rem); line-height: 1.02; font-weight: 300; letter-spacing: -.035em; }
.h-hero-sub { margin-top: 26px; color: var(--h-soft); font-size: clamp(1.1rem, 1.4vw, 1.3rem); line-height: 1.55; max-width: 30ch; }
.h-hero-ctas { margin-top: 40px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }

/* ── promise strip under the hero ── */
.h-promises { border-top: 1px solid var(--h-line); border-bottom: 1px solid var(--h-line); }
.h-promises ul { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); }
.h-promises li { padding: 26px 28px; display: flex; flex-direction: column; gap: 2px; }
.h-promises li + li { border-left: 1px solid var(--h-line); }
.h-promises strong { font-family: var(--h-display); font-weight: 400; font-size: 1.15rem; letter-spacing: -.01em; }
.h-promises span { color: var(--h-muted); font-size: .95rem; }

/* ── sample conversation: split ── */
.h-sample { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.h-sample-note { margin-top: 26px; padding-left: 18px; border-left: 2px solid var(--h-accent); color: var(--h-soft); max-width: 44ch; }
.h-chat {
  background: linear-gradient(180deg, var(--h-raised), var(--h-surface));
  border: 1px solid var(--h-line); border-radius: var(--h-r-panel);
  padding: 22px 22px 26px;
  box-shadow: 0 40px 80px -40px rgba(4, 6, 10, .9), inset 0 1px 0 rgba(233, 237, 242, .06);
}
.h-chat-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 6px 18px; border-bottom: 1px solid var(--h-line); margin-bottom: 18px; }
.h-chat-name { font-family: var(--h-display); font-size: 1.2rem; font-weight: 400; }
.h-chat-tag { font-size: .78rem; color: var(--h-muted); border: 1px solid var(--h-line-strong); border-radius: 8px; padding: 3px 9px; }
.h-chat-log { display: flex; flex-direction: column; gap: 10px; }
.h-msg { max-width: 84%; padding: 13px 17px; border-radius: 18px; font-size: 1rem; line-height: 1.5; }
.h-msg-them { align-self: flex-start; background: rgba(233, 237, 242, .07); border-bottom-left-radius: 6px; }
.h-msg-you { align-self: flex-end; background: #E9EDF2; color: #12161E; border-bottom-right-radius: 6px; }
.h-voice { margin-top: 28px; display: flex; align-items: center; gap: 16px; }
.h-voice-btn { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--h-line-strong); background: var(--h-accent-soft); color: var(--h-text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: transform .3s var(--h-ease), background-color .3s var(--h-ease); }
.h-voice-btn:hover { background: rgba(192, 138, 82, .28); transform: scale(1.04); }
.h-voice-btn:active { transform: scale(.96); }
.h-voice-btn .h-ic { width: 20px; height: 20px; }
.h-voice p { margin: 0; }
.h-voice-title { font-weight: 700; }

/* ── how it works: connected rows ── */
.h-steps { list-style: none; margin-top: 56px; position: relative; }
.h-steps::before { content: ''; position: absolute; left: 11px; top: 14px; bottom: 14px; width: 1px; background: linear-gradient(180deg, var(--h-accent), rgba(192, 138, 82, .1)); }
.h-step { display: grid; grid-template-columns: 24px minmax(0, 18rem) minmax(0, 1fr); gap: 0 clamp(20px, 4vw, 56px); padding: 30px 0; }
.h-step + .h-step { border-top: 1px solid var(--h-line); }
.h-step-dot { width: 23px; height: 23px; border-radius: 50%; background: var(--h-bg); border: 1px solid var(--h-accent); margin-top: 6px; position: relative; z-index: 1; }
.h-step-dot::after { content: ''; position: absolute; inset: 6px; border-radius: 50%; background: var(--h-accent); }
.h-step h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.h-step p { color: var(--h-soft); max-width: 56ch; margin: 4px 0 0; }
.h-how-cta { margin-top: 48px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.h-how-cta p { margin: 0; max-width: 46ch; }

/* ── what you can add: icon row ── */
.h-add { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px 36px; margin-top: 56px; }
.h-add-item { padding-top: 24px; border-top: 1px solid var(--h-line-strong); }
.h-add-item .h-ic { color: var(--h-accent); width: 30px; height: 30px; }
.h-add-item h3 { margin: 18px 0 8px; }
.h-add-item p { color: var(--h-soft); font-size: 1rem; margin: 0; }

/* ── three ways: bento ── */
.h-ways { display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: auto auto; gap: 18px; margin-top: 56px; }
.h-way { border-radius: var(--h-r-panel); border: 1px solid var(--h-line); padding: 32px; display: flex; flex-direction: column; gap: 12px; position: relative; overflow: hidden; isolation: isolate; transition: transform .45s var(--h-ease), border-color .45s var(--h-ease); }
.h-way:hover { transform: translateY(-3px); border-color: var(--h-line-strong); }
.h-way p { color: var(--h-soft); margin: 0; max-width: 46ch; }
.h-way-price { margin-top: auto; padding-top: 18px; display: flex; align-items: baseline; gap: 10px; font-size: .95rem; color: var(--h-muted); }
.h-way-price strong { font-family: var(--h-display); font-size: 1.6rem; font-weight: 400; color: var(--h-text); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.h-way-sample { border-radius: var(--h-r-tile); background: rgba(233, 237, 242, .07); padding: 13px 16px; font-size: .98rem; line-height: 1.45; align-self: flex-start; display: inline-flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.h-way-sample .h-ic { width: 26px; height: 26px; padding: 6px; border-radius: 50%; background: #E9EDF2; color: #12161E; }
.h-way-read { grid-column: 8 / span 5; grid-row: 1; background: var(--h-surface); }
.h-way-voice { grid-column: 8 / span 5; grid-row: 2; background: linear-gradient(160deg, rgba(30, 58, 63, .7), var(--h-surface) 70%); }
.h-way-see { grid-column: 1 / span 7; grid-row: 1 / span 2; min-height: 520px; justify-content: flex-end; background: var(--h-raised); padding: 40px; }
.h-way-see::before { content: ''; position: absolute; inset: 0; z-index: -2; background: url('../img/hero-presence.webp') 58% 40% / cover no-repeat; opacity: .55; }
.h-way-see::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11, 14, 20, .1) 0%, rgba(11, 14, 20, .55) 45%, rgba(11, 14, 20, .96) 88%); }
.h-way-see h3 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.h-ways-note { margin-top: 26px; color: var(--h-muted); }

/* ── legacy: tinted panel ── */
.h-legacy {
  border-radius: calc(var(--h-r-panel) + 6px); padding: clamp(40px, 6vw, 80px);
  background:
    radial-gradient(70% 90% at 100% 0%, rgba(192, 138, 82, .18), transparent 60%),
    radial-gradient(60% 80% at 0% 100%, var(--h-teal), transparent 70%),
    var(--h-surface);
  border: 1px solid var(--h-line);
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(36px, 6vw, 88px); align-items: start;
}
.h-legacy-list { list-style: none; display: flex; flex-direction: column; gap: 28px; }
.h-legacy-list h3 { font-size: 1.25rem; margin-bottom: 6px; }
.h-legacy-list p { color: var(--h-soft); margin: 0; font-size: 1rem; }
.h-legacy-cta { margin-top: 36px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.h-legacy-cta .h-small { margin: 0; }

/* ── hard questions: sticky heading + answers ── */
.h-hq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(36px, 6vw, 96px); align-items: start; }
.h-hq-side { position: sticky; top: 40px; }
.h-hq-side p { margin-top: 22px; }
.h-hq-list { display: flex; flex-direction: column; }
.h-hq-item { padding: 30px 0; }
.h-hq-item:first-child { padding-top: 0; }
.h-hq-item + .h-hq-item { border-top: 1px solid var(--h-line); }
.h-hq-item h3 { font-size: clamp(1.4rem, 2.1vw, 1.75rem); margin-bottom: 12px; }
.h-hq-item p { color: var(--h-soft); margin: 0; max-width: 62ch; }

/* ── trust: panel of four ── */
.h-trust { margin-top: 52px; display: grid; grid-template-columns: repeat(2, 1fr); border: 1px solid var(--h-line); border-radius: var(--h-r-panel); overflow: hidden; background: var(--h-surface); }
.h-trust-item { padding: clamp(28px, 4vw, 44px); display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 20px; }
.h-trust-item:nth-child(2n) { border-left: 1px solid var(--h-line); }
.h-trust-item:nth-child(n+3) { border-top: 1px solid var(--h-line); }
.h-trust-item .h-ic { grid-row: span 2; width: 44px; height: 44px; padding: 10px; border-radius: 12px; background: var(--h-accent-soft); color: var(--h-accent); }
.h-trust-item h3 { font-size: 1.25rem; }
.h-trust-item p { color: var(--h-soft); margin: 0; font-size: 1rem; }
.h-trust-note { margin-top: 26px; color: var(--h-muted); }

/* ── journal: rows ── */
.h-journal { margin-top: 48px; border-top: 1px solid var(--h-line); }
.h-post { display: grid; grid-template-columns: 7rem minmax(0, 1fr) 28px; gap: 24px; align-items: baseline; padding: 28px 4px; border-bottom: 1px solid var(--h-line); transition: background-color .3s var(--h-ease), padding .3s var(--h-ease); }
.h-post:hover { background: rgba(233, 237, 242, .03); }
.h-post-min { color: var(--h-muted); font-size: .92rem; font-variant-numeric: tabular-nums; }
.h-post h3 { font-size: clamp(1.25rem, 1.9vw, 1.5rem); }
.h-post p { margin: 6px 0 0; color: var(--h-soft); max-width: 70ch; font-size: 1rem; }
.h-post .h-ic { width: 22px; height: 22px; color: var(--h-muted); align-self: center; transition: transform .3s var(--h-ease), color .3s var(--h-ease); }
.h-post:hover .h-ic { transform: translateX(4px); color: var(--h-accent); }
.h-journal-more { margin-top: 26px; }

/* ── closing promise ── */
.h-close { text-align: center; position: relative; isolation: isolate; padding: clamp(96px, 12vw, 160px) 0 clamp(104px, 13vw, 170px); }
.h-close::before { content: ''; position: absolute; z-index: -1; left: 50%; top: 50%; width: min(900px, 120vw); height: 520px; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(192, 138, 82, .17), transparent); pointer-events: none; }
.h-close h2 { font-size: clamp(2.4rem, 5vw, 4rem); }
.h-close p { color: var(--h-soft); max-width: 58ch; margin: 22px auto 0; }
.h-close-ctas { margin-top: 40px; display: flex; justify-content: center; align-items: center; gap: 18px; flex-wrap: wrap; }

/* ── reveal on scroll (only when JS is running and motion is welcome) ── */
@media (prefers-reduced-motion: no-preference) {
  .js .home .rv { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--h-ease), transform .9s var(--h-ease); transition-delay: calc(var(--i, 0) * 90ms); }
  .js .home .rv.in { opacity: 1; transform: none; }
  .js .home .h-chat .h-msg { opacity: 0; transform: translateY(10px); transition: opacity .7s var(--h-ease), transform .7s var(--h-ease); transition-delay: calc(var(--i, 0) * 420ms + 200ms); }
  .js .home .h-chat.in .h-msg { opacity: 1; transform: none; }
  .js .home .h-hero-copy > * { animation: hRise 1.1s var(--h-ease) both; animation-delay: calc(var(--i, 0) * 110ms + 80ms); }
  .js .home .h-hero-pic { animation: hFade 1.6s var(--h-ease) both; }
}
@keyframes hRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes hFade { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .home .h-btn, .home .h-way, .home .h-post { transition: none; }
  .home .h-btn:hover, .home .h-way:hover { transform: none; }
}

/* ── tablet ── */
@media (max-width: 1024px) {
  .h-add { grid-template-columns: repeat(2, 1fr); }
  .h-way-see { min-height: 440px; }
  .h-step { grid-template-columns: 24px minmax(0, 1fr); }
  .h-step p { grid-column: 2; margin-top: 8px; }
}
@media (max-width: 900px) {
  .h-sample, .h-legacy, .h-hq { grid-template-columns: 1fr; }
  .h-hq-side { position: static; }
  .h-ways { grid-template-columns: 1fr; }
  .h-way-read, .h-way-voice, .h-way-see { grid-column: 1; grid-row: auto; }
  .h-way-see { min-height: 400px; }
}

/* ── phones: everything single-column ── */
@media (max-width: 760px) {
  .home { font-size: 1.0625rem; }
  .h-hero-copy { max-width: none; }
  .h-hero { min-height: 0; padding: 0 0 48px; display: block; }
  .h-hero-pic { position: relative; inset: auto; height: 86vw; max-height: 520px; min-height: 300px; z-index: 0; }
  .h-hero-pic img { object-position: 62% 40%; }
  .h-hero-pic::after { background: linear-gradient(180deg, rgba(11, 14, 20, .55) 0%, rgba(11, 14, 20, 0) 30%, rgba(11, 14, 20, 0) 55%, var(--h-bg) 100%); }
  .h-hero-copy { margin-top: -56px; position: relative; z-index: 1; }
  .h-hero h1 { font-size: clamp(2.9rem, 13vw, 3.8rem); }
  .h-hero-ctas { margin-top: 30px; flex-direction: column; align-items: stretch; gap: 8px; }
  .h-hero-ctas .h-textlink { justify-content: center; }
  .h-promises ul { grid-template-columns: 1fr; }
  .h-promises li { padding: 20px 4px; }
  .h-promises li + li { border-left: 0; border-top: 1px solid var(--h-line); }
  .h-msg { max-width: 92%; }
  .h-chat { padding: 16px 14px 20px; }
  .h-add { grid-template-columns: 1fr; gap: 28px; }
  .h-way, .h-way-see { padding: 26px; }
  .h-trust { grid-template-columns: 1fr; }
  .h-trust-item:nth-child(2n) { border-left: 0; }
  .h-trust-item + .h-trust-item { border-top: 1px solid var(--h-line); }
  .h-post { grid-template-columns: minmax(0, 1fr) 22px; gap: 4px 16px; }
  .h-post-min { grid-column: 1; }
  .h-post > div { grid-column: 1; }
  .h-post .h-ic { grid-column: 2; grid-row: 1 / span 2; }
  .h-how-cta, .h-legacy-cta, .h-close-ctas { flex-direction: column; align-items: stretch; }
  .h-how-cta .h-btn, .h-legacy-cta .h-btn, .h-close-ctas .h-btn { width: 100%; }
  .h-close-ctas .h-textlink { justify-content: center; }
}