/* SayKos Software - single page company site.
   Idiom: a company record, not a landing page. Everything is flat ink on white
   except the one product card, which is the only object with depth and the only
   dark surface. Its interior deliberately uses MyFamBud's real palette. */

:root {
  --paper:  #ffffff;
  --ink:    #101a21;
  --muted:  #5a6b76;
  --rule:   #e4e9ed;
  --accent: #0e7c86;

  /* MyFamBud's real dark-theme tokens, used only inside the preview so the card
     is a faithful likeness of the product rather than an invented dark box.
     Source of truth: web-app/src/styles/_colors.scss [data-theme='dark'],
     mirrored in landing-page/index.html. Copy values from there, never eyeball
     them - the landing page has drifted from the app once already (task 288). */
  --app-bg:     #2a2a2d;  /* --color-surface: sits behind the screenshot */

  /* MyFamBud's typeface. The rest of this page deliberately avoids Inter, so
     switching to it is what makes the card read as the product rather than as
     more of this site. */
  --app-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --measure: 34rem;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.sheet {
  max-width: var(--measure);
  margin: 0 auto;
  padding-inline: 1.5rem;
  padding-block: 4.5rem 3rem;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---- masthead ---- */

.masthead { margin-bottom: 4.5rem; }

.wordmark {
  font-family: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* ---- headline ---- */

.headline {
  font-family: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  font-weight: 500;
  font-size: clamp(2rem, 7vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: 0 0 1.25rem;
  text-wrap: balance;
}

.deck {
  margin: 0 0 3.25rem;
  color: var(--muted);
  font-size: 1.0625rem;
  max-width: 30rem;
}

/* ---- products ---- */

.products-title {
  font-family: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 1rem;
}

.product {
  display: block;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--rule);
  border-radius: 14px;
  overflow: hidden;
  background: var(--paper);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.product:hover,
.product:focus-visible {
  border-color: #cfd8de;
  box-shadow: 0 10px 30px -18px rgba(16, 26, 33, 0.45);
}

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

.product__preview {
  background: var(--app-bg);
  font-size: 0;   /* kills the inline-image baseline gap under the shot */
}

.product__shot {
  display: block;
  width: 100%;
  height: auto;
}

.product__body { padding: 1.375rem 1.5rem 1.5rem; }

.product__name {
  font-family: var(--app-font);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  margin: 0 0 0.375rem;
}

.product__line {
  margin: 0 0 0.875rem;
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.product__link {
  font-family: var(--app-font);
  font-size: 0.875rem;
  font-weight: 500;
  /* Company teal, not MyFamBud's #2cb4e0: that cyan is tuned to ride on a dark
     surface and lands near 2.3:1 on white. Brand fidelity stops at legibility. */
  color: var(--accent);
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}

/* ---- company note ---- */

.company {
  margin: 3.25rem 0 0;
  max-width: 30rem;
}

.mail {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(14, 124, 134, 0.35);
}

.mail:hover { border-bottom-color: var(--accent); }

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

/* ---- colophon ---- */

.colophon {
  margin-top: auto;
  padding-top: 3.5rem;
  color: var(--muted);
  font-size: 0.875rem;
}

/* ---- narrow screens ---- */

@media (max-width: 30rem) {
  .sheet { padding-block: 3rem 2.5rem; }
  .masthead { margin-bottom: 3rem; }
  .deck { margin-bottom: 2.5rem; }
  .company { margin-top: 2.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; }
}