/*
 * BriefNext marketing site. Tokens and window chrome follow src/hosted/theme.ts
 * so the site and the panel read as one product. Keep them in step.
 *
 * Signals are a legend, not a mood:
 *   cyan     you, the answer, the action to take
 *   violet   the field, everyone else in your market
 *   magenta  a gap, a miss, something that needs attention
 *   lime     confirmed, done, it worked
 */

:root {
  --ink: #0b0f1a; --ink-2: #111628; --ink-3: #182040;
  --paper: #f3f0e8; --muted: #a9b0c2; --dim: #6f778c;
  --cyan: #44f0ff; --magenta: #ff4fd8; --violet: #8b7bff; --lime: #b7ff4a;
  --line: rgba(243, 240, 232, .14); --line-2: rgba(243, 240, 232, .26); --signal: rgba(68, 240, 255, .5);
  --display: "Oxanium", "Inter", system-ui, sans-serif;
  --ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --wrap: 1160px; --gutter: 24px;
}

* { box-sizing: border-box }
html { color-scheme: dark; -webkit-text-size-adjust: 100% }
body { margin: 0; background: var(--ink); color: var(--paper); font: 17px/1.6 var(--ui); -webkit-font-smoothing: antialiased; overflow-x: hidden }
body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 99; background: repeating-linear-gradient(0deg, rgba(243, 240, 232, .025) 0 1px, transparent 1px 3px) }
a { color: var(--paper); text-decoration: underline; text-decoration-color: var(--signal); text-underline-offset: 3px }
a:hover { text-decoration-color: var(--cyan); text-decoration-thickness: 2px }
a:focus-visible, summary:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px }
h1, h2, h3 { font-family: var(--display); font-weight: 600; letter-spacing: -.025em; margin: 0; text-wrap: balance }
p { margin: 0 }
ul { margin: 0; padding: 0; list-style: none }

.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--cyan); color: var(--ink); padding: 10px 14px; border-radius: 6px }
.skip:focus { left: 8px }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter) }
.eyebrow { font-family: var(--mono); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--cyan); margin: 0 0 20px }
.cyan { color: var(--cyan) }

/* Buttons. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font: 600 16px/1 var(--ui); padding: 17px 28px; border: 1px solid var(--cyan); border-radius: 8px; background: var(--cyan); color: var(--ink); text-decoration: none; min-height: 52px; transition: background 140ms ease, box-shadow 140ms ease }
.btn:hover { background: #7ff5ff; box-shadow: 0 0 32px rgba(68, 240, 255, .28); text-decoration: none }
.btn.small { font-size: 14px; padding: 12px 18px; min-height: 44px }

/* Header. */
.bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 22px; padding-bottom: 22px }
.mark { display: inline-flex; line-height: 0; text-decoration: none; padding: 6px 0 }
.mark img { display: block; width: 220px; height: auto }
.bar nav { display: flex; align-items: center; gap: 24px }
.bar nav a:not(.btn) { font-size: 15px; color: var(--muted); text-decoration: none; padding: 12px 0 }
.bar nav a:not(.btn):hover { color: var(--paper) }

/* Hero. */
.hero { position: relative; background: radial-gradient(80% 60% at 50% 0%, #141d3a 0%, var(--ink) 70%); overflow: hidden }
.hero-copy { text-align: center; padding-top: 48px; padding-bottom: 80px }
.hero h1 { font-size: clamp(40px, 6vw, 80px); line-height: 1.02; max-width: 13ch; margin: 0 auto }
.hero .sub { font-size: clamp(18px, 1.8vw, 22px); line-height: 1.5; color: var(--muted); max-width: 40ch; margin: 28px auto 40px }

/* Hero visual: BriefNext feeding the AI you use. */
.scene { display: grid; grid-template-columns: 1fr 160px 1.25fr; align-items: stretch; padding-bottom: 128px }
.source { display: flex; flex-direction: column; justify-content: space-around; align-items: flex-end }
.source { position: relative }
.source::before { content: "BriefNext knows"; position: absolute; top: -30px; right: 0; font: 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--cyan) }
.chip { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--ink-2); font-size: 16px; width: 270px; box-shadow: 0 10px 30px rgba(0, 0, 0, .3) }
.chip i { width: 10px; height: 10px; border-radius: 50%; flex: none }
.c-you i { background: var(--cyan); box-shadow: 0 0 12px var(--cyan) }
.c-field i { background: var(--violet) }
.c-gap i { background: var(--magenta) }
.c-done i { background: var(--lime) }
.wires { width: 100%; height: 100%; display: block; overflow: visible }
.wires path { fill: none; stroke: var(--cyan); stroke-width: 1.5; stroke-dasharray: 4 8; opacity: .75; animation: flow 1.6s linear infinite }
.wires circle { fill: var(--cyan) }
@keyframes flow { to { stroke-dashoffset: -24 } }
.drop { display: none }

.ai { align-self: center; background: var(--ink-2); border: 1px solid var(--line-2); border-radius: 14px; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); overflow: hidden }
.ai .tb { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--ink-3); font: 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted) }
.ai .tb i { width: 9px; height: 9px; border-radius: 50%; background: var(--dim) }
.ai .tb b { font-weight: 500; color: var(--paper); margin-left: 6px }
.ai .bd { padding: 26px; display: grid; gap: 18px }
.say { justify-self: end; background: rgba(243, 240, 232, .06); border: 1px solid var(--line); border-radius: 12px 12px 4px 12px; padding: 12px 16px; font-size: 17px }
.reply { border: 1px solid var(--signal); border-radius: 12px 12px 12px 4px; padding: 20px; background: linear-gradient(180deg, rgba(68, 240, 255, .08), rgba(68, 240, 255, .02)) }
.reply .k { font: 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--cyan); margin-bottom: 12px; display: block }
.reply .move { font-family: var(--display); font-weight: 600; font-size: 23px; line-height: 1.25; letter-spacing: -.02em }
.reply ul { display: grid; gap: 9px; margin-top: 16px; font-size: 15px; color: var(--muted) }
.reply li { display: flex; gap: 10px; align-items: center }
.reply li i { width: 8px; height: 8px; border-radius: 50%; flex: none }
.ai .note { font-size: 12px; color: var(--dim); padding: 0 26px 18px }

/* Sections. */
section { padding: 140px 0 }
.big { font-size: clamp(32px, 4.4vw, 56px); line-height: 1.08; max-width: 18ch }
.lead { font-size: clamp(18px, 1.7vw, 21px); color: var(--muted); max-width: 46ch; margin-top: 24px; line-height: 1.55 }
.center { text-align: center }
.center .big, .center .lead { margin-left: auto; margin-right: auto }

/* Problem. */
.pains { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 72px }
.pain { border-top: 2px solid var(--magenta); padding-top: 24px }
.pain h3 { font-size: clamp(22px, 2vw, 27px); line-height: 1.2 }
.pain p { color: var(--muted); margin-top: 12px; max-width: 32ch }

/* Steps. */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 72px; counter-reset: s }
.step { padding: 32px 28px 36px; border: 1px solid var(--line); border-radius: 14px; background: var(--ink-2) }
.step::before { counter-increment: s; content: "0" counter(s); display: block; font: 500 14px/1 var(--mono); color: var(--cyan); margin-bottom: 44px }
.step h3 { font-size: 24px; line-height: 1.2 }
.step p { color: var(--muted); margin-top: 12px }

/* Outcomes. */
.outcomes { display: grid; gap: 28px; margin-top: 72px }
.outcome { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; padding: 52px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(135deg, var(--ink-2), var(--ink)) }
.outcome h3 { font-size: clamp(28px, 3.2vw, 42px); line-height: 1.1 }
.outcome p { color: var(--muted); margin-top: 16px; font-size: 18px; max-width: 36ch }
.viz { display: grid; place-items: center }
.viz svg { width: 100%; max-width: 440px; height: auto; display: block }
.viz text { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; fill: var(--muted) }

/* Difference. */
.diff { display: grid; grid-template-columns: 1fr 1fr; margin-top: 72px; border: 1px solid var(--line); border-radius: 18px; overflow: hidden }
.diff > div { padding: 48px }
.diff > div + div { border-left: 1px solid var(--line); background: rgba(68, 240, 255, .04) }
.diff .label { font: 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 16px }
.diff .ours .label { color: var(--cyan) }
.diff h3 { font-size: clamp(28px, 3vw, 40px) }
.diff ul { display: grid; gap: 14px; margin-top: 28px; font-size: 18px }
.diff li { display: flex; gap: 14px; align-items: baseline; color: var(--muted) }
.diff li::before { content: ""; width: 14px; height: 1px; background: var(--line-2); flex: none; transform: translateY(-5px) }
.diff .ours li { color: var(--paper) }
.diff .ours li::before { background: var(--cyan) }
.quote { margin: 64px auto 0; max-width: 28ch; text-align: center; font-family: var(--display); font-weight: 600; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.3; letter-spacing: -.02em }
.quote span { color: var(--cyan) }

/* Access. */
.access { text-align: center; background: radial-gradient(60% 70% at 50% 100%, #142040 0%, var(--ink) 70%) }
.access .btn { margin-top: 44px }
.access .fine { margin-top: 18px; font-size: 14px; color: var(--dim) }

/* FAQ. */
.faq { max-width: 820px; margin: 56px auto 0 }
.faq details { border-bottom: 1px solid var(--line) }
.faq details:first-child { border-top: 1px solid var(--line) }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 26px 0; font-family: var(--display); font-weight: 600; font-size: clamp(19px, 1.8vw, 23px); letter-spacing: -.01em; min-height: 44px }
.faq summary::-webkit-details-marker { display: none }
.faq summary::after { content: "+"; font: 400 26px/1 var(--mono); color: var(--cyan); flex: none }
.faq details[open] summary::after { content: "\2212" }
.faq details p { color: var(--muted); padding: 0 0 26px; max-width: 60ch; font-size: 18px }

/* Footer. */
footer { border-top: 1px solid var(--line) }
footer .wrap { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; padding-top: 36px; padding-bottom: 56px; font-size: 14px; color: var(--muted) }
footer .mark img { width: 128px }
footer nav { display: flex; flex-wrap: wrap; gap: 4px 22px }
footer nav a { color: var(--muted); padding: 10px 0; display: inline-block }

@media (max-width: 980px) {
  .scene { grid-template-columns: 1fr; justify-items: center; padding-bottom: 96px }
  .source { display: grid; gap: 12px; justify-items: stretch; width: 100%; max-width: 560px; grid-template-columns: 1fr 1fr }
  .source::before { position: static; grid-column: 1 / -1; text-align: center; margin-bottom: 6px }
  .chip { width: auto }
  .wires { display: none }
  .drop { display: block; width: 2px; height: 56px; margin: 0 auto; background: repeating-linear-gradient(180deg, var(--cyan) 0 4px, transparent 4px 12px); opacity: .8 }
  .ai { width: 100%; max-width: 560px }
  .pains { grid-template-columns: 1fr; gap: 40px }
  .steps { grid-template-columns: 1fr; gap: 16px }
  .step::before { margin-bottom: 24px }
  .outcome { grid-template-columns: 1fr; gap: 36px; padding: 36px 28px }
  .diff { grid-template-columns: 1fr }
  .diff > div + div { border-left: 0; border-top: 1px solid var(--line) }
}
@media (max-width: 600px) {
  :root { --gutter: 16px }
  body { font-size: 16px }
  section { padding: 96px 0 }
  .mark img { width: 140px }
  .bar nav a.hide-sm { display: none }
  .hero-copy { padding-top: 40px; padding-bottom: 52px }
  .source { grid-template-columns: 1fr }
  .chip { font-size: 15px; padding: 12px 14px }
  .ai .bd { padding: 18px }
  .ai .note { padding: 0 18px 16px }
  .reply .move { font-size: 20px }
  .diff > div { padding: 32px 22px }
  .outcome { padding: 30px 20px }
}
@media (prefers-reduced-motion: reduce) {

  .wires path { animation: none }
  .btn { transition: none }
}