/* Shared visual language; the homepage uses the app's sans-serif family. */

/* ── Promoted from index-page.css ──────────────────────────────────────────
 * The document base, `wrap`, `button`, `hero-actions` and the box `eyebrow` sits in were the
 * homepage's alone: `index-page.css` declared them and only the homepage loads that file, while an
 * inner page took its own copies from `home.css`. With the prototype set deleted every route loads
 * this file, so the definitions live here, at the homepage's values — which is why an inner page's
 * page width moves from the prototype's 1260 to the homepage's 1240. The values are moved, not
 * copied: a rule that used to load before this file has to keep loading before the refinements this
 * file makes to it, so the homepage's own cascade is unchanged. The narrow-width and
 * reduced-motion refinements travel with them, below, in their original order. */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); font-family: var(--sans); background: #fff; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--plum); outline-offset: 4px; }
/* The homepage's plum closing band (`.final-cta`) uses the same plum as the default focus ring,
 * which makes a focused link or button on it invisible. Paper keeps the ring visible against the
 * band's own background; the offset matches every other ring. The inner pages' equivalent band,
 * `.final`, is a class `pages.css` owns, so its matching rule lives there instead of here — this
 * file only touches the classes the homepage itself defines. */
.final-cta a:focus-visible, .final-cta button:focus-visible { outline: 3px solid var(--paper); outline-offset: 4px; }
.wrap { width: min(1240px, calc(100% - 64px)); margin: 0 auto; }
.eyebrow { display: block; font: 600 12px/1.5 var(--sans); letter-spacing: 0; text-transform: none; }
.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 48px;
  padding: 0 20px;
  border: 1px solid var(--ink);
  border-radius: 5px;
  background: var(--coral);
  color: white;
  box-shadow: 4px 4px 0 var(--ink);
  font: 600 12px/1.5 var(--sans);
  letter-spacing: 0;
  text-decoration: none;
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.button:hover { transform: translate(-1px, -1px); box-shadow: 6px 6px 0 var(--ink); }
.hero-actions { display: flex; align-items: center; gap: 20px; margin-top: 32px; }

.hero { background-image: none; background-color: var(--blue); }
.hero::after { display: none; }
.hero-grid { gap: 48px; padding-top: 65px; padding-bottom: 65px; }
.hero h1 { line-height: 1.08; letter-spacing: -.035em; }
.homepage .brand{font:900 19px var(--wordmark);letter-spacing:-.04em}.homepage .brand span{font-weight:400}
.homepage .hero h1{letter-spacing:-.03em}.homepage .hero h1 em{font-style:normal;font-size:1em;font-weight:600}
.homepage .system-label{gap:20px;line-height:1.5}.homepage .system-label span{max-width:48%}
.homepage .hero .lead{max-width:56ch}.homepage .section-head h2{max-width:24ch}.homepage .section-head p{max-width:62ch;margin-top:16px}
.homepage .source-links span{font-weight:500}
.homepage .workspace-rail a,.homepage .activation-step p,.homepage .feed-row b,.homepage .company-result b,.homepage .ai-task b{font-size:14px}
.homepage .final-cta h2{max-width:24ch}.homepage .final-cta .eyebrow{color:inherit}
@media(max-width:600px){.homepage .hero h1{font-size:clamp(36px,10vw,44px)}.homepage .section-head h2,.homepage .activation-head h2,.homepage .ai-copy h2{font-size:32px}.homepage .search-system{padding:0}.homepage .system-label{font-size:12px}.homepage .source strong{font-size:24px}.homepage .hero-grid{gap:40px}}
.hero h1 em { line-height: inherit; }
.lead { line-height: 1.65; }
.button,.nav-links .nav-cta { border: 0; border-radius: 8px; background: var(--coral); box-shadow: none; font: 600 14px/1.4 var(--sans); letter-spacing: 0; }
.button:hover { transform: none; box-shadow: none; background: var(--coral-hover); }
.nav-links a { font: 550 13px/1.4 var(--sans); letter-spacing: 0; }
/* Weight only. The tracked-out `.06em` this rule used to carry was the prototype's label idiom: the
 * homepage escaped it through a `.homepage .eyebrow` rescue and every inner page did not, so the one
 * label recipe rendered at two trackings. The promoted `eyebrow` rule above sets `letter-spacing: 0`
 * and `text-transform: none` for every page, which is what the rescue said, so the rescue is gone
 * with the declaration that made it necessary. */
.eyebrow { font: 650 12px/1.5 var(--sans); }
.search-system,.source,.opportunity,.workspace-preview,.quote-card,.activation-step,.ai-panel { box-shadow: none; border-color: var(--line); }
.source,.opportunity { border-radius: 12px; }
.source h2,.source strong,.opportunity h2 { font-family: var(--sans); }
.section-head p,.section p { line-height: 1.65; }
.section { padding-top: 80px; padding-bottom: 80px; }
.site-nav { background: #fffffff5; }
.free-note { font: 600 12px/1.6 var(--sans); color: var(--green); }
.mini-sidebar a { min-height: 40px; }
.discovery-grid,.workspace-demo,.ai-board{box-shadow:none;border-color:var(--line);border-radius:12px;overflow:hidden}.workspace-rail{background:var(--surface);color:var(--ink)}.workspace-rail a{color:var(--muted);font-family:var(--sans);font-size:13px}.workspace-rail a.active{color:var(--plum);background:var(--plum-soft)}.workspace-title h3,.work-surface h4,.work-detail h4{font-family:var(--sans)}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:40px}.nav-links{gap:15px}.nav-links a:nth-child(-n+3){display:none}.section{padding-top:56px;padding-bottom:56px}}
@media (max-width: 680px) { .wrap { width: min(100% - 32px, 1240px); } .hero-actions { align-items: stretch; flex-direction: column; } }
@media(max-width:600px){.wrap{width:calc(100% - 36px)}.site-nav .wrap{gap:12px}.nav-links{gap:12px}.nav-links .nav-cta{padding:10px;font-size:12px}.brand{font-size:17px}.hero-grid{padding-top:42px;padding-bottom:42px}.hero h1{font-size:clamp(40px,10vw,60px)}.source-row{grid-template-columns:1fr}.hero-actions{align-items:flex-start}.search-system{padding:18px}.section-head h2{font-size:30px}.source strong{font-size:24px}.nav-links a{font-size:12px}}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .button { transition: none; } }


/* Header on inner pages. The homepage's `nav.site-nav` now renders on every route, but the homepage
 * geometry lives in `index-page.css`, which only the homepage loads. These rules give an inner page
 * the same bar, in the same tokens, and port the old `marketing-header.css` layouts — the Features
 * disclosure, its menu, and the mobile disclosure — onto the new names. Scoped to `.marketing-page`,
 * matching this file's `.homepage` idiom, so the homepage's cascade is untouched.
 *
 * A sticky bar hides an anchor target sized for a static one, so the page scrolls short of the bar's
 * height. `scroll-padding-top` belongs to the scrollport, which is `html` here (`home.css` already
 * sets one there), so it is declared on both the body class and the document element. */
.marketing-page { scroll-padding-top: 88px; }
html:has(.marketing-page) { scroll-padding-top: 88px; }
.marketing-page .site-nav { height: 72px; position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--line); backdrop-filter: blur(12px); color: var(--ink); font-family: var(--sans); }
.marketing-page .site-nav .wrap { height: 100%; display: flex; align-items: center; justify-content: space-between; }
.marketing-page .site-nav .brand { font: 900 19px var(--wordmark); letter-spacing: -.04em; text-decoration: none; white-space: nowrap; color: var(--ink); }
.marketing-page .site-nav .brand span { font-weight: 400; }
.marketing-page .nav-links { display: flex; align-items: center; }
.marketing-page .nav-links a { text-decoration: none; color: var(--ink); }
.marketing-page .nav-links a:hover { text-decoration: underline; }
.marketing-page .nav-links a[aria-current="page"] { color: var(--coral); }
.marketing-page .nav-links .nav-cta { display: inline-flex; align-items: center; justify-content: center; color: var(--paper); white-space: nowrap; }
.marketing-page .nav-links .nav-cta:hover { background: var(--coral-hover); text-decoration: none; }
.marketing-page .site-nav a:focus-visible, .marketing-page .site-nav summary:focus-visible { outline: 3px solid var(--plum); outline-offset: 4px; }
/* The gaps and the call to action's padding are declared only above the widths this file already
 * refines, so a narrow inner page takes the same values the homepage's bar does rather than
 * out-specifying them. */
@media (min-width: 601px) {
  .marketing-page .site-nav .wrap { gap: var(--space-6); }
  .marketing-page .nav-links .nav-cta { padding: var(--space-3) var(--space-4); }
}
@media (min-width: 901px) { .marketing-page .nav-links { gap: var(--space-6); } }

.marketing-page .nav-features { position: relative; }
.marketing-page .nav-features > summary, .marketing-page .nav-menu > summary { cursor: pointer; font: 550 13px/1.4 var(--sans); padding: var(--space-3) 0; white-space: nowrap; list-style: none; }
.marketing-page .nav-features > summary::-webkit-details-marker, .marketing-page .nav-menu > summary::-webkit-details-marker { display: none; }
.marketing-page .nav-features > summary.feature-section-current { color: var(--coral); }
.marketing-page .nav-features-menu { position: absolute; top: 100%; left: calc(var(--space-3) * -1); width: 310px; padding: var(--space-3); background: var(--paper); border: 1px solid var(--line); border-radius: 12px; }
.marketing-page .nav-features-menu a { display: block; padding: var(--space-3); border-radius: 8px; }
.marketing-page .nav-features-menu a:hover { background: var(--surface); text-decoration: none; }
.marketing-page .nav-features-menu a span { display: block; font: 600 14px/1.4 var(--sans); }
.marketing-page .nav-features-menu a small { display: block; margin-top: var(--space-1); font: 400 12px/1.5 var(--sans); color: var(--muted); }

.marketing-page .nav-menu { display: none; }
.marketing-page .nav-menu > div { position: absolute; top: 100%; left: 0; right: 0; padding: var(--space-4) var(--space-8); background: var(--paper); border-bottom: 1px solid var(--line); }
.marketing-page .nav-menu[open] > div { max-height: calc(100dvh - 140px); overflow-y: auto; }
.marketing-page .nav-menu a { display: block; padding: var(--space-4) 0; font: 550 13px/1.4 var(--sans); }
.marketing-page .nav-menu .nav-features-menu { position: static; width: auto; padding: 0 0 var(--space-2) var(--space-3); border: 0; border-left: 2px solid var(--line); border-radius: 0; }
.marketing-page .nav-menu .nav-features-menu a { padding: var(--space-3) 0; }

@media (max-width: 1100px) {
  .marketing-page .nav-links > a:not(.nav-cta), .marketing-page .nav-links > .nav-features { display: none; }
  .marketing-page .nav-menu { display: block; }
}
@media (max-width: 680px) { .marketing-page .site-nav { height: 64px; } }
@media (max-width: 600px) {
  .marketing-page, html:has(.marketing-page) { scroll-padding-top: 80px; }
  .marketing-page .nav-features > summary, .marketing-page .nav-menu > summary { font-size: 12px; }
}

/* Footer. One five-column footer on every route, the homepage included, so these rules are global:
 * the old `site.css` layout with every value remapped onto the homepage's tokens. The `.site-footer`
 * and `.wrap` declarations also have to out-specify `index-page.css`'s bare `footer` rules, which the
 * homepage's own one-row footer used to own. */
.site-footer { background: var(--surface); border-top: 1px solid var(--line); color: var(--ink); padding: var(--space-10) 0 var(--space-8); font-family: var(--sans); }
.site-footer .wrap { display: block; }
.site-footer a { color: var(--ink); text-decoration: none; font-size: 13px; line-height: 1.5; }
.site-footer a:hover { text-decoration: underline; }
.site-footer .brand { font: 900 19px var(--wordmark); letter-spacing: -.04em; white-space: nowrap; }
.site-footer .brand span { font-weight: 400; }
.footer-top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-6); }
.site-footer .footer-top p { margin: 0; font: 18px/1.5 var(--serif); color: var(--ink); }
.footer-columns { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-8); padding: var(--space-8) 0; border-bottom: 1px solid var(--line); }
.site-footer .footer-columns nav { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.site-footer .footer-columns h2 { margin: 0 0 var(--space-2); font: 650 12px/1.5 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.site-footer .footer-columns a[aria-current="page"] { color: var(--coral); text-decoration: underline; text-underline-offset: 4px; }
.site-footer .footer-email { overflow-wrap: break-word; max-width: 100%; }
.footer-legal { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4) var(--space-8); padding-top: var(--space-6); }
.site-footer .footer-legal p { margin: 0; font-size: 12px; color: var(--muted); }
.site-footer .footer-legal nav { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-6); }
.site-footer .footer-legal a { font-size: 12px; }
.site-footer .footer-legal a[aria-current="page"] { color: var(--coral); }
/* The error page. `root.tsx`'s ErrorBoundary renders inside `Layout`, so it takes whichever body
 * class the path resolves to — an error on `/` gets the homepage's set, which does not include
 * `pages.css`. The rule belongs to the file every route loads. */
.error-page { width: min(1240px, calc(100% - 64px)); margin: 0 auto; padding: calc(var(--space-10) * 2) 0; }
.error-page h1 { margin: 0 0 var(--space-4); font: 600 clamp(32px, 5vw, 48px)/1.08 var(--sans); letter-spacing: -.02em; }
.error-page p { max-width: 600px; margin: 0 0 var(--space-6); color: var(--muted); font: 17px/1.65 var(--sans); }
.error-page a { color: var(--coral); text-underline-offset: 3px; }
@media (max-width: 680px) { .error-page { width: min(100% - 32px, 1240px); } }
@media (max-width: 600px) { .error-page { width: calc(100% - 36px); } }

@media (max-width: 900px) { .footer-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .footer-top { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
  .footer-columns { grid-template-columns: 1fr 1fr; }
}