/* ==========================================================================
   FULLSTACK — Products page
   Shared components live in components.css; this file holds only what is
   unique to /products/.
   ========================================================================== */

/* ==========================================================================
   01. HERO VARIANT
   ========================================================================== */

/*
 * Measured on the rendered page: "We build products" is 11.06em wide, so the
 * title can be at most 9.04cqw of its column before it spills. 8.8cqw leaves a
 * small margin. The split is widened well past the homepage's 1.25fr so the
 * column is large enough for that cap to land near the reference's 84px; the
 * mark here is smaller (330 vs 380) and does not need the room.
 */
.fs-hero--products .fs-hero__inner {
  grid-template-columns: minmax(0, 2.5fr) minmax(0, 1fr);
}

/*
 * components.css stacks the hero below 1200 with a single-class rule; this
 * two-class override would otherwise win there, since a media query adds no
 * specificity. Restate the stack at the same weight.
 */
@media (max-width: 1200px) {
  .fs-hero--products .fs-hero__inner { grid-template-columns: minmax(0, 1fr); }
}

.fs-hero--products .fs-hero__title { font-size: min(var(--fs-text-d1), 8.8cqw); }

.fs-hero__text--secondary {
  margin-top: var(--fs-space-4);
  font-size: var(--fs-text-body);
  color: var(--fs-fg-muted);
  animation: fs-fade-up 0.8s var(--fs-ease) 0.6s both;
}

/* A slow idle drift on the mark, as in the approved hero. */
@keyframes fs-drift {
  0%, 100% { transform: translateY(-6px); }
  50% { transform: translateY(6px); }
}

/* The drift runs on the SVG itself; the bar assembly animations run on the
   paths inside it, so the two never contend for the same property. */
.fs-hero__mark--drift { animation: fs-drift 7s ease-in-out infinite; }

/* The drift is idle decoration, so it is the first thing to go. */
@media (prefers-reduced-motion: reduce) {
  .fs-hero__mark--drift { animation: none; }
}

/* ==========================================================================
   02. PORTFOLIO INDEX
   ========================================================================== */

.fs-portfolio__list {
  margin: var(--fs-section-gap) 0 0;
  padding: 0;
  list-style: none;
  border-top: var(--fs-border-emphasis) solid var(--fs-fg);
}

.fs-portfolio__item { border-bottom: var(--fs-border-width) solid var(--fs-border); }

.fs-portfolio__link {
  display: grid;
  grid-template-columns: 5.625rem minmax(0, 1fr) auto;
  gap: var(--fs-space-8);
  align-items: center;
  padding: var(--fs-space-6) var(--fs-space-4) var(--fs-space-6) 0;
  color: var(--fs-fg);
  transition: background-color var(--fs-duration-fast) var(--fs-ease);
}

.fs-portfolio__link:hover,
.fs-portfolio__link:focus-visible {
  background-color: var(--fs-light-bg-alt);
  color: var(--fs-fg);
}

.fs-portfolio__number {
  font-size: var(--fs-text-sm);
  color: var(--fs-fg-muted);
  padding-left: var(--fs-space-4);
}

.fs-portfolio__name {
  font-size: var(--fs-text-h1);
  font-weight: var(--fs-weight-black);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  line-height: 1;
}

@media (max-width: 560px) {
  .fs-portfolio__link {
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: var(--fs-space-2) var(--fs-space-4);
    padding-block: var(--fs-space-5);
  }
  .fs-portfolio__number { padding-left: 0; }
  .fs-portfolio__link .fs-label { grid-column: 2; }
}

/* ==========================================================================
   03. PRODUCT SECTION
   ========================================================================== */

.fs-product-intro { margin-bottom: var(--fs-section-gap); }

.fs-product-intro__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fs-space-4);
}

.fs-product-intro__meta .fs-section-header__eyebrow { margin: 0; }

.fs-product-intro__category {
  letter-spacing: 0.12em;
  color: var(--fs-fg-muted);
}

.fs-product-intro__title {
  margin-top: var(--fs-space-6);
  text-transform: uppercase;
}

.fs-product-intro__summary { margin-top: var(--fs-space-5); }

.fs-product-section__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fs-space-4);
  margin-top: var(--fs-space-6);
}

.fs-product-section__proof {
  margin-top: var(--fs-space-4);
  letter-spacing: 0.12em;
  color: var(--fs-fg-muted);
}

.fs-product-section__cta { margin-top: var(--fs-section-gap); }

@media (max-width: 560px) {
  .fs-product-section__actions { flex-direction: column; align-items: stretch; }
  .fs-product-section__actions .fs-btn,
  .fs-product-section__cta .fs-btn { width: 100%; }
}

/* ==========================================================================
   04. SHOWCASE — in-flow interface compositions
   The homepage mocks are absolutely positioned inside a card; here the same
   partials sit in the document flow, so the container supplies the frame.
   ========================================================================== */

.fs-showcase {
  position: relative;
  margin-top: var(--fs-section-gap);
}

.fs-showcase .fs-mock {
  position: relative;
  inset: auto;
}

/* --- SeatWise: a cropped stage, as in the reference -----------------------
   The dashboard, members panel and phone are absolutely placed on a fixed
   stage and deliberately bleed past its edges; the stage crops them. This is
   decorative composition, not document flow, which is why absolute placement
   is the right tool here. Below the layout breakpoint the stage dissolves and
   the same three nodes stack in normal flow. */

.fs-showcase__stage {
  position: relative;
  height: 35rem;
  overflow: hidden;
  background-color: var(--fs-dark-bg-raised);
}

.fs-showcase__stage .fs-mock--seatwise.fs-mock--full { position: absolute; inset: 0; }

.fs-showcase__stage .fs-mock__app {
  position: absolute;
  top: 3rem;
  left: 3rem;
  right: 26.25rem;
  bottom: -2.5rem;
  grid-template-columns: 11.25rem minmax(0, 1fr);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
}

.fs-showcase__stage .fs-mock__panel--members {
  position: absolute;
  top: 5.25rem;
  right: 2.75rem;
  width: 20.625rem;
  padding: 1.125rem 1.25rem;
  background-color: #fff;
  color: var(--fs-text-on-light);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

/* Bottom-right, hanging off the stage so the crop reads as a device edge —
   which is why only its top corners are rounded. */
.fs-showcase__stage .fs-mock__phone {
  position: absolute;
  right: 7.5rem;
  bottom: -2.125rem;
  left: auto;
  width: 11.25rem;
  border-radius: 22px 22px 0 0;
}

.fs-mock__row--member { grid-template-columns: minmax(0, 1fr) auto; }

.fs-mock__ledger {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin-top: 0.625rem;
}

.fs-mock__ledger-row {
  display: flex;
  justify-content: space-between;
  gap: var(--fs-space-4);
  padding: 0.5rem 0.75rem;
  background-color: var(--fs-light-bg-alt);
  font-size: 0.75rem;
}

.fs-mock__ledger-amount { font-weight: var(--fs-weight-bold); }

/* Narrower viewports: the members panel would crowd the dashboard, so the
   stage grows and the panel moves under it rather than beside it. */
@media (max-width: 1200px) {
  .fs-showcase__stage { height: 30rem; }
  .fs-showcase__stage .fs-mock__app { right: 18rem; }
  .fs-showcase__stage .fs-mock__panel--members { width: 15.5rem; top: 3rem; right: 1.5rem; }
  .fs-showcase__stage .fs-mock__phone { display: none; }
}

@media (max-width: 1023px) {
  /* Stage dissolves: the same nodes stack in flow, as the mobile board does. */
  .fs-showcase__stage {
    height: auto;
    overflow: visible;
    background-color: transparent;
  }

  .fs-showcase__stage .fs-mock--seatwise.fs-mock--full {
    position: relative;
    inset: auto;
    display: flex;
    flex-direction: column;
    gap: var(--fs-space-4);
  }

  .fs-showcase__stage .fs-mock__app,
  .fs-showcase__stage .fs-mock__panel--members {
    position: relative;
    inset: auto;
    width: auto;
    right: auto;
    top: auto;
    bottom: auto;
  }

  .fs-showcase__stage .fs-mock__app { grid-template-columns: minmax(0, 1fr); }
}

/* --- Dentist Dost: two phone screens ------------------------------------- */

.fs-showcase--phones .fs-mock--clinic.fs-mock--full {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: var(--fs-space-5);
}

.fs-mock__screen {
  flex: 1 1 0;
  max-width: 15rem;
  min-width: 0;
  padding: 1.125rem 1rem 1.5rem;
  background-color: var(--fs-dark-bg);
  color: var(--fs-text-on-dark);
  border: var(--fs-border-width) solid var(--fs-dark-border);
  border-radius: 22px;
  box-shadow: 0 20px 60px rgba(11, 13, 14, 0.28);
}

.fs-mock__screen--record { margin-top: 2.5rem; }

.fs-mock__screen .fs-mock__greeting { font-size: 0.9375rem; }
.fs-mock__screen .fs-mock__caption { margin-top: 0.25rem; color: var(--fs-text-on-dark-muted); }

.fs-mock__appt {
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
  padding: 0.625rem 0.75rem;
  background-color: var(--fs-dark-grid);
}

.fs-mock__appt-head {
  display: flex;
  justify-content: space-between;
  gap: var(--fs-space-2);
}

.fs-mock__screen .fs-mock__row-name { color: var(--fs-text-on-dark); }
.fs-mock__screen .fs-mock__row-detail { color: var(--fs-text-on-dark-muted); }
.fs-mock__screen .fs-mock__row-time { color: var(--fs-text-on-dark-muted); }

.fs-mock__action {
  margin-top: 0.875rem;
  padding: 0.5rem 0.75rem;
  border: var(--fs-border-width) dashed var(--fs-dark-border-strong);
  font-size: 0.71875rem;
  font-weight: var(--fs-weight-semibold);
  color: var(--fs-text-on-dark-muted);
  text-align: center;
}

.fs-mock__tile--light { background-color: var(--fs-dark-grid); }

.fs-mock__tile-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fs-space-2);
}

/* --- LYVOR: three cards -------------------------------------------------- */

.fs-showcase--cards .fs-mock--lyvor.fs-mock--full {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--fs-space-4);
  align-items: start;
  padding: 0;
}

.fs-showcase--cards .fs-mock__card {
  width: auto;
  padding: 1.125rem 1rem 1.25rem;
  border-radius: 20px;
  transform: none;
}

.fs-showcase--cards .fs-mock__card--routine { grid-row: span 2; }

.fs-mock__streak {
  margin-top: var(--fs-space-2);
  font-size: 1.75rem;
  font-weight: var(--fs-weight-black);
  letter-spacing: -0.02em;
  color: var(--fs-text-on-dark);
}

.fs-mock__dots {
  display: flex;
  gap: 0.25rem;
  margin-top: 0.75rem;
}

.fs-mock__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: var(--fs-dark-border-strong);
}

.fs-mock__dot--on { background-color: var(--fs-accent); }

@media (max-width: 560px) {
  .fs-showcase--phones .fs-mock--clinic.fs-mock--full { flex-direction: column; align-items: center; }
  .fs-mock__screen { max-width: 17.5rem; width: 100%; }
  .fs-mock__screen--record { margin-top: 0; }
  .fs-showcase--cards .fs-mock--lyvor.fs-mock--full { grid-template-columns: minmax(0, 1fr); }
  .fs-showcase--cards .fs-mock__card--routine { grid-row: auto; }
}

/* ==========================================================================
   05. BEFORE / AFTER SHIFT
   ========================================================================== */

.fs-shift {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 3vw, 3.75rem);
  align-items: center;
  margin-top: var(--fs-section-gap);
}

.fs-shift__title { text-transform: uppercase; }

.fs-shift__text {
  margin-top: var(--fs-space-5);
  font-size: var(--fs-text-body);
  line-height: var(--fs-leading-body);
  color: var(--fs-fg-body);
  max-width: 41.25rem;
}

.fs-shift__compare {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: var(--fs-space-5);
  align-items: center;
}

.fs-shift__panel {
  padding: var(--fs-space-6);
  border: var(--fs-border-width) solid var(--fs-border);
}

.fs-shift__panel--after {
  background-color: var(--fs-warm-white);
  color: var(--fs-graphite);
  border-color: var(--fs-warm-white);
}

.fs-shift__label {
  font-family: var(--fs-font-mono);
  font-size: var(--fs-text-mono);
  letter-spacing: var(--fs-tracking-mono);
  text-transform: uppercase;
  color: var(--fs-fg-muted);
}

.fs-shift__label--brand {
  display: flex;
  align-items: center;
  gap: var(--fs-space-2);
  font-weight: var(--fs-weight-semibold);
  color: var(--fs-graphite);
}

.fs-shift__items {
  margin: var(--fs-space-4) 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
  font-weight: var(--fs-weight-semibold);
  line-height: 1.85;
}

.fs-shift__panel--before .fs-shift__items { color: var(--fs-fg-body); }

.fs-shift__arrow {
  font-size: 1.25rem;
  color: var(--fs-fg-muted);
}

@media (max-width: 1023px) {
  .fs-shift { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  /* The comparison stacks and the arrow turns downward. */
  .fs-shift__compare { grid-template-columns: minmax(0, 1fr); }
  .fs-shift__arrow { text-align: center; }
  .fs-shift__arrow::before { content: '↓'; }
  .fs-shift__arrow { font-size: 0; line-height: 1; }
  .fs-shift__arrow::before { font-size: 1.25rem; }
}

/* ==========================================================================
   06. CAPABILITIES
   ========================================================================== */

.fs-capabilities {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  margin: var(--fs-section-gap) 0 0;
  padding: 0;
  list-style: none;
  background-color: var(--fs-divider);
  border: var(--fs-border-width) solid var(--fs-divider);
}

.fs-capability-item {
  display: flex;
  flex-direction: column;
  gap: var(--fs-space-2);
  padding: var(--fs-space-6) var(--fs-space-5) var(--fs-space-8);
  background-color: var(--fs-bg);
}

.fs-capability-item__number { color: var(--fs-fg-muted); }

.fs-capability-item__title {
  font-size: var(--fs-text-h4);
  font-weight: var(--fs-weight-extrabold);
  letter-spacing: var(--fs-tracking-tight);
  line-height: 1.25;
}

.fs-capability-item__text {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--fs-fg-body);
}

@media (max-width: 1023px) {
  .fs-capabilities { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .fs-capabilities { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   07. CONCEPT STATEMENT (LYVOR)
   ========================================================================== */

.fs-concept {
  margin-top: var(--fs-section-gap);
  padding-left: var(--fs-space-6);
  border-left: var(--fs-border-emphasis) solid var(--fs-accent);
}

.fs-concept__statement {
  font-size: var(--fs-text-h3);
  font-weight: var(--fs-weight-extrabold);
  letter-spacing: var(--fs-tracking-tight);
  line-height: 1.25;
  text-transform: uppercase;
}

.fs-concept__text {
  margin-top: var(--fs-space-4);
  font-size: var(--fs-text-body);
  line-height: var(--fs-leading-body);
  color: var(--fs-fg-body);
}

/* ==========================================================================
   08. MARKETS
   ========================================================================== */

.fs-markets__grid { margin-top: var(--fs-section-gap); }

.fs-market {
  gap: var(--fs-space-3);
  background-color: transparent;
}

.fs-market__name {
  margin-top: var(--fs-space-5);
  font-size: var(--fs-text-h3);
  font-weight: var(--fs-weight-extrabold);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.fs-market__what {
  font-size: 0.9375rem;
  color: var(--fs-fg-body);
}

.fs-market__type {
  margin-top: auto;
  padding-top: var(--fs-space-4);
  letter-spacing: 0.14em;
  color: var(--fs-fg-muted);
}

/* ==========================================================================
   09. PRODUCT EXPERIENCE
   ========================================================================== */

.fs-dimensions { margin: var(--fs-section-gap) 0 0; }

.fs-dimension { padding: var(--fs-space-6); }

.fs-dimension__title {
  font-size: var(--fs-text-h4);
  font-weight: var(--fs-weight-extrabold);
  letter-spacing: var(--fs-tracking-tight);
}

.fs-dimension__text {
  margin: var(--fs-space-2) 0 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--fs-fg-body);
}

.fs-experience__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--fs-space-8);
  margin-top: var(--fs-section-gap);
}

.fs-experience__footer .fs-pullquote { margin-top: 0; }

@media (max-width: 560px) {
  .fs-experience__footer .fs-btn { width: 100%; }
}

/* ==========================================================================
   10. WHAT'S NEXT / ROADMAP
   ========================================================================== */

.fs-whats-next { overflow: hidden; }
.fs-whats-next__title { margin-top: var(--fs-space-6); text-transform: uppercase; }
.fs-whats-next__text { margin-top: var(--fs-space-6); }

.fs-roadmap {
  margin: var(--fs-section-gap) 0 0;
  padding: 0;
  list-style: none;
}

.fs-roadmap__slot {
  display: flex;
  flex-direction: column;
  gap: var(--fs-space-3);
  align-items: flex-start;
  padding: var(--fs-space-6);
}

.fs-roadmap__number { color: var(--fs-fg-muted); }

.fs-roadmap__name {
  font-size: var(--fs-text-h3);
  font-weight: var(--fs-weight-extrabold);
  letter-spacing: var(--fs-tracking-tight);
}

/* Reserved slots read as deliberately empty, not as missing content. */
.fs-roadmap__slot--empty { opacity: 0.45; }
.fs-roadmap__name--empty { color: var(--fs-fg-muted); }

.fs-roadmap__pending {
  letter-spacing: 0.3em;
  color: var(--fs-fg-faint);
}