/* ==========================================================================
   Tenslor Inc
   One stylesheet, hand written, no build step. Edit it directly.

   Contents
     1.  Fonts
     2.  Design tokens
     3.  Base and reset
     4.  Layout
     5.  Typography helpers
     6.  Buttons
     7.  Cards
     8.  Header
     9.  Hero
     10. Metrics strip
     11. Home page sections
     12. Products page
     13. About page
     14. Updates page
     15. Contact page
     16. Footer
     17. Motion
   ========================================================================== */

/* 1. Fonts ---------------------------------------------------------------- */

@font-face {
  font-family: 'Quicksand';
  src: url('fonts/quicksand.woff2') format('woff2-variations');
  font-weight: 300 700;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'Nunito';
  src: url('fonts/nunito.woff2') format('woff2-variations');
  font-weight: 200 1000;
  font-display: swap;
  font-style: normal;
}

/* 2. Design tokens -------------------------------------------------------- */

:root {
  --bg-base: #070b14;
  --bg-surface: #0c1220;
  --bg-raised: #111a2e;
  --border: #1e2a45;
  --blue: #3b6fd4;
  --amber: #f6ad55;

  /* Sampled from the logo. 6.77:1 on --bg-base, so it clears AA both as text
     and as a button fill carrying dark text. */
  --accent: #a882f9;
  --accent-soft: rgba(168, 130, 249, 0.45);

  --text: #e6eaf2;
  --text-dim: #8a94a8;

  --font-display: 'Quicksand', system-ui, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-body: 'Nunito', system-ui, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Mono', Consolas, 'Courier New', monospace;

  --container: 1120px;
  --header-height: 64px;
}

/* 3. Base and reset ------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  background-color: var(--bg-base);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  min-width: 320px;
  background-color: var(--bg-base);
}

img,
video {
  display: block;
  max-width: 100%;
  /* Without this, a width/height attribute pair holds the height fixed while
     max-width shrinks the width, and the image stretches vertically. */
  height: auto;
}

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

ul {
  list-style: none;
  padding: 0;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

::selection {
  background-color: var(--accent);
  color: var(--bg-base);
}

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

/* Jumps a keyboard user past the navigation. Hidden until focused. */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 100;
  background-color: var(--accent);
  color: var(--bg-base);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  padding: 0.5rem 0.875rem;
  border-radius: 0.375rem;
  transition: top 150ms ease;
}

.skip-link:focus-visible {
  top: 1rem;
}

/* 4. Layout --------------------------------------------------------------- */

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

@media (min-width: 640px) {
  .container {
    padding-inline: 2rem;
  }
}

/* Every page except the home page clears the fixed header. The home page and
   the interior heroes run underneath it instead, so they opt out. */
.page-body {
  padding-top: var(--header-height);
}

.page-body--flush {
  padding-top: 0;
}

.section {
  padding-bottom: 6rem;
}

@media (min-width: 1024px) {
  .section {
    padding-bottom: 8rem;
  }
}

.section-head {
  padding-top: 3rem;
}

@media (min-width: 640px) {
  .section-head {
    padding-top: 4rem;
  }
}

.centered {
  text-align: center;
}

.measure {
  max-width: 68ch;
  margin-inline: auto;
}

/* 5. Typography helpers --------------------------------------------------- */

/* Reading scale, applied by how much text the reader has to get through.
   Long passages also take the brighter colour; --text-dim is for genuinely
   secondary material, not for paragraphs people are meant to read. */
.copy-prose {
  font-size: 1.0625rem;
  line-height: 1.65;
}

.copy-body {
  font-size: 1rem;
  line-height: 1.6;
}

.copy-note {
  font-size: 0.8125rem;
  line-height: 1.55;
}

.lead {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--text-dim);
  max-width: 62ch;
}

.centered .lead {
  margin-inline: auto;
}

.dim {
  color: var(--text-dim);
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}

h1 {
  font-size: 2.25rem;
  line-height: 1.08;
  margin-top: 1rem;
}

h2 {
  font-size: 1.875rem;
  line-height: 1.15;
}

h3 {
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

@media (min-width: 640px) {
  h1 {
    font-size: 3rem;
  }
  h2 {
    font-size: 2.25rem;
  }
}

.stack > * + * {
  margin-top: 1.5rem;
}

/* 6. Buttons -------------------------------------------------------------- */

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.25rem;
}

.centered .button-row {
  justify-content: center;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.75rem 1.5rem;
  border-radius: 0.375rem;
  font-size: 1rem;
  font-weight: 600;
  transition: background-color 150ms ease, opacity 150ms ease, color 150ms ease;
}

.btn--primary {
  background-color: var(--accent);
  color: var(--bg-base);
}

.btn--primary:hover {
  opacity: 0.9;
}

.btn--ghost {
  border: 1px solid var(--border);
  color: var(--text);
}

.btn--ghost:hover {
  background-color: var(--bg-raised);
}

.btn--small {
  padding: 0.625rem 1.25rem;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--blue);
  transition: color 150ms ease;
}

.link-arrow:hover {
  color: var(--accent);
}

/* 7. Cards ---------------------------------------------------------------- */

.card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}

.card--glow:hover {
  border-color: var(--accent-soft);
  box-shadow: 0 0 0 1px rgba(168, 130, 249, 0.15), 0 0 24px rgba(168, 130, 249, 0.07);
}

.card--pad {
  padding: 1.75rem;
}

.grid-3 {
  display: grid;
  gap: 1.25rem;
  margin-top: 2.5rem;
}

@media (min-width: 768px) {
  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Status badges. The dot colour is set inline per product. */
.status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  white-space: nowrap;
}

.status-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 9999px;
  flex-shrink: 0;
}

/* 8. Header --------------------------------------------------------------- */

.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  transition: background-color 200ms ease, border-color 200ms ease;
}

.site-header.is-scrolled {
  background-color: var(--bg-raised);
  border-bottom-color: var(--border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
}

.wordmark img {
  width: 28px;
  height: 28px;
  border-radius: 0.375rem;
}

.wordmark span {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.site-nav ul {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}

.site-nav a {
  color: var(--text-dim);
  transition: color 150ms ease;
}

.site-nav a:hover,
.site-nav a[aria-current='page'] {
  color: var(--text);
}

.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 0.375rem;
  color: var(--text-dim);
}

.menu-toggle:hover {
  color: var(--text);
}

.mobile-nav {
  display: none;
  border-top: 1px solid var(--border);
  background-color: var(--bg-raised);
}

.mobile-nav.is-open {
  display: block;
}

.mobile-nav ul {
  flex-direction: column;
  padding-block: 0.5rem;
}

.mobile-nav a {
  display: block;
  padding-block: 0.75rem;
  color: var(--text);
}

@media (max-width: 639px) {
  .site-nav {
    display: none;
  }
}

@media (min-width: 640px) {
  .menu-toggle,
  .mobile-nav {
    display: none;
  }
}

/* 9. Hero ----------------------------------------------------------------- */

.hero-media {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: var(--bg-surface);
}

/* The home page leads with the video, so it gets more room. Interior pages
   should reach their content sooner. */
.hero-media--video {
  height: 54vh;
  min-height: 300px;
}

.hero-media--image {
  height: 34vh;
  min-height: 220px;
}

.hero-media img,
.hero-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 640px) {
  .hero-media--video {
    height: 62vh;
  }
  .hero-media--image {
    height: 40vh;
  }
}

@media (min-width: 1024px) {
  .hero-media--video {
    height: 74vh;
  }
  .hero-media--image {
    height: 46vh;
  }
}

/* Keeps the header legible over lighter parts of the media. */
.hero-scrim-top {
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 6rem;
  pointer-events: none;
  background-image: linear-gradient(
    to bottom,
    rgba(7, 11, 20, 0.85) 0%,
    rgba(7, 11, 20, 0.66) 30%,
    rgba(7, 11, 20, 0.38) 58%,
    rgba(7, 11, 20, 0.14) 82%,
    rgba(7, 11, 20, 0) 100%
  );
}

/* Settles the media into the page. Opaque at the very bottom so it never meets
   the page background in a seam, then eased in many small steps: a ramp that
   flattens abruptly shows as a banded edge. */
.hero-scrim-bottom {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 6rem;
  pointer-events: none;
  background-image: linear-gradient(
    to top,
    rgba(7, 11, 20, 1) 0%,
    rgba(7, 11, 20, 0.99) 12%,
    rgba(7, 11, 20, 0.93) 28%,
    rgba(7, 11, 20, 0.78) 45%,
    rgba(7, 11, 20, 0.5) 65%,
    rgba(7, 11, 20, 0.2) 83%,
    rgba(7, 11, 20, 0) 100%
  );
}

@media (min-width: 640px) {
  .hero-scrim-top {
    height: 8rem;
  }
  .hero-scrim-bottom {
    height: 10rem;
  }
}

@media (min-width: 1024px) {
  .hero-scrim-bottom {
    height: 14rem;
  }
}

/* Motion running longer than five seconds needs a way to stop it. */
.video-toggle {
  position: absolute;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  border: 1px solid var(--border);
  background-color: rgba(7, 11, 20, 0.7);
  backdrop-filter: blur(4px);
  color: var(--text-dim);
  transition: color 150ms ease;
}

.video-toggle:hover {
  color: var(--text);
}

.hidden {
  display: none;
}

.hero-copy {
  padding-top: 3rem;
  padding-bottom: 4rem;
}

@media (min-width: 1024px) {
  .hero-copy {
    padding-top: 4rem;
  }
}

/* 10. Metrics strip ------------------------------------------------------- */

.metrics {
  margin-top: 1.25rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background-color: var(--bg-surface);
  overflow: hidden;
}

.metrics__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin-right: -1px;
  margin-bottom: -1px;
}

.metrics__cell {
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 1.5rem 1.25rem;
}

.metrics__value {
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.metrics__label {
  margin-top: 0.25rem;
  color: var(--text-dim);
  font-size: 0.8125rem;
  line-height: 1.55;
}

.metrics__footnote {
  margin-top: 0.75rem;
  color: var(--text-dim);
  font-size: 0.8125rem;
}

@media (min-width: 640px) {
  .metrics__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .metrics__grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* The Products page repeats the strip in a tighter form. */
.metrics--compact .metrics__cell {
  padding: 1rem;
}

.metrics--compact .metrics__value {
  font-size: 1.25rem;
}

@media (min-width: 1024px) {
  .metrics--compact .metrics__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 11. Home page sections -------------------------------------------------- */

.section-title {
  margin-top: 1rem;
}

.flagship {
  display: flex;
  flex-direction: column;
}

.flagship__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.flagship__head h3 {
  font-size: 1.25rem;
}

.flagship__tagline {
  margin-top: 0.75rem;
  flex-grow: 1;
  color: var(--text-dim);
}

.flagship .link-arrow {
  margin-top: 1.5rem;
}

.quiet-card {
  display: block;
  margin-top: 1.25rem;
  padding: 1.75rem;
  color: var(--text-dim);
  transition: color 150ms ease;
}

.quiet-card:hover {
  color: var(--text);
}

.closing {
  border-top: 1px solid var(--border);
  background-color: var(--bg-surface);
  padding-block: 6rem;
  text-align: center;
}

.closing p {
  margin-top: 1rem;
  color: var(--text-dim);
}

.closing .button-row {
  justify-content: center;
  margin-top: 2rem;
}

/* 12. Products page ------------------------------------------------------- */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  padding-bottom: 4rem;
}

.filter-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 1rem;
  border: 1px solid var(--border);
  border-radius: 9999px;
  background-color: var(--bg-surface);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--text-dim);
  transition: border-color 150ms ease, color 150ms ease;
}

.filter-pill:hover {
  border-color: var(--accent-soft);
  color: var(--text);
}

.product-list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.product {
  scroll-margin-top: 6rem;
  padding: 1.75rem;
}

.product__layout {
  display: grid;
  gap: 2rem;
}

.product__category {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--text-dim);
}

.product__name {
  margin-top: 0.75rem;
  font-size: 1.5rem;
}

.product__tagline {
  margin-top: 0.75rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.5;
}

.product .status {
  margin-top: 1rem;
}

.product__cta {
  margin-top: 1.75rem;
}

.product__summary + .product__summary {
  margin-top: 1rem;
}

.highlights {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.highlights li {
  display: flex;
  gap: 0.75rem;
  font-size: 1rem;
  line-height: 1.6;
}

.highlights li::before {
  content: '';
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  margin-top: 0.55rem;
  border-radius: 1px;
  background-color: var(--accent);
}

.product__shot {
  margin-top: 2rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background-color: var(--bg-raised);
  overflow: hidden;
}

/* The screenshots are full page captures in eight different shapes, some of
   them very tall with a lot of empty page below the fold. Framing them all to
   the same 16:9 window and anchoring to the top shows the part that actually
   says what the product is, and keeps the eight entries visually consistent. */
.product__shot img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: top center;
}

@media (min-width: 640px) {
  .product {
    padding: 2.5rem;
  }
  .product__name {
    font-size: 1.875rem;
  }
}

@media (min-width: 1024px) {
  .product__layout {
    grid-template-columns: 320px 1fr;
    gap: 3rem;
  }
}

/* 13. About page ---------------------------------------------------------- */

.founder {
  margin-top: 4rem;
}

.facts {
  margin-top: 2rem;
  padding: 1.75rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background-color: var(--bg-surface);
}

.facts dl {
  display: grid;
  gap: 0.75rem 2rem;
  margin-top: 1.25rem;
}

.facts dt {
  color: var(--text-dim);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
}

.facts dd {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.55;
}

.facts__serving {
  margin-top: 1.25rem;
  color: var(--text-dim);
  font-size: 0.8125rem;
}

@media (min-width: 640px) {
  .facts dl {
    grid-template-columns: 190px 1fr;
  }
}

/* 14. Updates page -------------------------------------------------------- */

.updates {
  display: flex;
  flex-direction: column;
  margin-top: 3.5rem;
}

.update {
  border-top: 1px solid var(--border);
  padding-block: 2rem;
}

.update:first-child {
  border-top: none;
  padding-top: 0;
}

.update__date {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--text-dim);
}

.update h2 {
  margin-top: 0.5rem;
  font-size: 1.25rem;
  font-weight: 600;
}

.update p {
  margin-top: 0.75rem;
}

/* 15. Contact page -------------------------------------------------------- */

.email-card {
  margin-top: 3.5rem;
  max-width: 42rem;
  margin-inline: auto;
  padding: 2rem;
}

.email-card__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
}

.email-card__address {
  font-family: var(--font-mono);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--accent);
  word-break: break-all;
}

.copy-button {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  border: 1px solid var(--border);
  border-radius: 0.375rem;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  transition: background-color 150ms ease;
}

.copy-button:hover {
  background-color: var(--bg-raised);
}

.routing {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  max-width: 42rem;
  margin: 2.5rem auto 0;
  color: var(--text-dim);
}

.routing a {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--blue);
  transition: color 150ms ease;
}

.routing a:hover {
  color: var(--accent);
}

.contact-closing {
  max-width: 42rem;
  margin: 2.5rem auto 0;
  color: var(--text-dim);
}

.contact-location {
  max-width: 42rem;
  margin: 1rem auto 0;
  color: var(--text-dim);
}

@media (min-width: 640px) {
  .email-card {
    padding: 2.5rem;
  }
  .email-card__address {
    font-size: 1.5rem;
  }
}

/* 16. Footer -------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--border);
  background-color: var(--bg-surface);
}

.site-footer__inner {
  display: grid;
  gap: 3rem;
  padding-block: 4rem;
}

.site-footer h2 {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.site-footer ul {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin-top: 1rem;
}

.site-footer a {
  color: var(--text-dim);
  transition: color 150ms ease;
}

.site-footer a:hover {
  color: var(--text);
}

.footer-tagline {
  margin-top: 1rem;
  max-width: 20rem;
  color: var(--text-dim);
}

.footer-legal {
  margin-top: 1.5rem;
  max-width: 20rem;
  color: var(--text-dim);
}

.footer-legal + .footer-legal {
  margin-top: 0.5rem;
}

@media (min-width: 640px) {
  .site-footer__inner {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .site-footer__inner {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 17. Motion -------------------------------------------------------------- */

/* One orchestrated load on the hero, staggered. Nothing else animates in. */
@media (prefers-reduced-motion: no-preference) {
  .rise {
    opacity: 0;
    transform: translateY(14px);
    animation: rise 600ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: calc(var(--rise-index, 0) * 60ms);
  }

  @keyframes rise {
    to {
      opacity: 1;
      transform: none;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .card,
  .btn,
  .site-header {
    transition: none;
  }
}