/* ===========================================================================
   showcase-linear.css — Linear harmonization layer for the landing page.

   Loaded AFTER showcase.css. The landing has its own warm token system scoped
   to `body.lp`; here we retune those tokens to the app's cool Linear palette +
   brand red, switch body text to Inter (the hero display keeps Archivo for
   punch), and align the wordmark logo and the CTAs — so the marketing site
   reads as the same product as the app, without rebuilding its layout.
   =========================================================================== */

body.lp{
  --ink0:#090a0c; --ink1:#0f1013;
  --paper:#f7f8f8; --mut:#8a8f98; --dim:#5c6069;
  --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.14);
  /* accent → the app's racing red (showcase calls it --gold / --accent-2) */
  --gold:#f5474f; --gold-ink:#fff; --glow:rgba(245,71,79,.42); --accent-2:#ff6a70;
  --loss:#f5474f; --led-r:#f5474f;
  font-family:'Inter',system-ui,sans-serif;
  letter-spacing:-.006em;
}

/* Wordmark logo — Saira, "Renn" ink + "block" red (matches the app nav).
   Sia l'hero (.brand) SIA la sticky bar (.topbar__brand): senza quest'ultima la
   sticky restava in Archivo (--display) e il logo cambiava font scrollando. */
.lp .brand,.lp .topbar__brand{font-family:'Saira',sans-serif;font-weight:700;letter-spacing:-.005em;text-transform:none;color:var(--paper)}
.lp .brand__b{color:var(--gold)}

/* Hero fallback bg → cool. (The video/image sits on top.) */
.lp .hero{background:#08090a}

/* CTAs → the Linear button language: rounded, sentence-case, Inter, thin border. */
.lp .cta{
  border-radius:8px;border-width:1px;text-transform:none;letter-spacing:-.006em;
  font-family:'Inter',sans-serif;font-weight:500;font-size:.95rem;padding:.8rem 1.5rem;
}
.lp .cta--solid,.lp .topbar__cta{background:var(--gold);border-color:transparent;color:#fff}
.lp .cta--solid:hover,.lp .topbar__cta:hover{background:var(--accent-2);border-color:transparent;color:#fff}
.lp .cta--ghost{border-color:var(--line2);color:var(--paper);background:transparent}
.lp .cta--ghost:hover{border-color:var(--paper);background:transparent;color:var(--paper)}
.lp .brand__tag{border-radius:8px;border-color:var(--line2);text-transform:none;letter-spacing:-.006em;font-family:'Inter',sans-serif;font-weight:500}
.lp .brand__tag:hover{background:var(--paper);color:var(--ink0)}

/* Nav links + kickers → calmer (keep them mono-tech but on the cool palette). */
.lp .hero__nav-links a:hover{color:var(--paper)}

/* Version next to the wordmark: quiet mono annotation, not a badge. The
   "pre-alpha" stage lives in the footer and the legal pages. */
/* Wordmark size unified with the app nav and the legal pages (18px everywhere),
   so "Rennblock" doesn't change size as you move between pages. */
.lp .topbar__brand,.lp .brand{display:inline-flex;align-items:center;font-size:18px}

/* --- Navbar unificata: stessa altezza in tutto il sito (64px), logo centrato ---
   Hero e sticky topbar alla stessa altezza dell'app e delle pagine legali, così
   il logo (top 17.6) non salta né scrollando né nella transizione al login. */
.lp .hero__nav{padding-top:0;padding-bottom:0;height:64px}
.lp .topbar__inner{padding-top:0;padding-bottom:0;height:64px}

/* Sticky navbar IDENTICA a quella dell'app (dopo il login): sfondo scuro solido
   + blur + bordo sotto, invece del vecchio gradiente. */
.lp .topbar.is-on{
  background:rgba(9,10,12,.86);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.07);
}

/* Nav links (hero + sticky) IDENTICI a quelli dell'app (.topnav__link): stesso
   font, stesso box pill all'hover/active, stessa spaziatura compatta — niente
   MAIUSCOLO mono né sottolineatura rossa. */
.lp .hero__nav-links,.lp .topbar__links{gap:.1rem}
.lp .hero__nav-links a,.lp .topbar__links a{
  font-family:'Inter',sans-serif;font-size:13px;font-weight:450;letter-spacing:0;text-transform:none;
  color:var(--mut);padding:.42rem .7rem;border-radius:7px;
  transition:color .15s var(--ease),background .15s var(--ease)
}
.lp .hero__nav-links a:hover,.lp .topbar__links a:hover,
.lp .hero__nav-links a.is-active,.lp .topbar__links a.is-active{color:var(--paper);background:rgba(255,255,255,.06)}
.lp .hero__nav-links a::after,.lp .topbar__links a::after{display:none !important}

/* I 2 pulsanti della sticky bar: compatti come il "Log in" dell'hero sul video
   (.brand__tag), non grandi come i CTA del corpo/fondo. */
.lp .topbar__actions .cta{min-width:0;padding:.62rem 1.35rem;font-size:.82rem}
.lp .topbar__badge{
  margin-left:.5rem;color:var(--dim);
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:.68rem;font-weight:500;letter-spacing:0;
}