@import url('../../../shared/design-system/flow-family.v1.css');

/* Root-only composition.
   No local palette, typography, geometry or vertical semantic system is allowed. */

.flow-root-intro,
.flow-product-hero{
  display:grid;
  gap:var(--wb-space-3);
  margin-bottom:var(--wb-space-5);
}

.flow-root-eyebrow{
  margin:0;
  color:var(--wb-blue);
  font-size:var(--wb-type-xs);
  font-weight:var(--wb-font-weight-semibold);
  letter-spacing:.08em;
  text-transform:uppercase;
}

.flow-root-intro h1,
.flow-product-hero h1{
  margin:0;
  max-width:820px;
  color:var(--wb-navy);
  font-size:clamp(2.3rem,5vw,4rem);
  line-height:1.04;
  letter-spacing:-.035em;
  font-weight:var(--wb-font-weight-semibold);
}

.flow-root-lead{
  margin:0;
  max-width:820px;
  color:var(--wb-blue);
  font-size:var(--wb-type-lg);
  line-height:1.6;
}

.flow-root-grid,
.flow-output-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--wb-space-4);
}

.flow-root-card{
  min-height:190px;
  display:grid;
  align-content:start;
  gap:var(--wb-space-3);
}

.flow-root-card--link{
  color:inherit;
  text-decoration:none;
  transition:transform .16s ease,box-shadow .16s ease;
}

.flow-root-card--link:hover{
  transform:translateY(-2px);
}

.flow-root-card--link:focus-visible,
.flow-root-back:focus-visible{
  outline:3px solid var(--wb-yellow);
  outline-offset:3px;
}

.flow-root-card__title{
  display:flex;
  align-items:center;
  gap:var(--wb-space-2);
}

.flow-root-card h2,
.flow-output-card h3,
.flow-product-feature h2,
.flow-product-copy h2{
  margin:0;
  color:var(--wb-navy);
  line-height:1.2;
}

.flow-root-card h2{font-size:var(--wb-type-xl)}
.flow-output-card h3{font-size:var(--wb-type-lg)}
.flow-product-feature h2,
.flow-product-copy h2{font-size:var(--wb-type-xl)}

.flow-root-card p,
.flow-output-card p,
.flow-product-feature p,
.flow-product-copy p,
.flow-product-status{
  margin:0;
  color:var(--wb-blue);
}

.flow-root-card__link{
  color:var(--wb-navy);
  font-weight:var(--wb-font-weight-semibold);
}

.flow-root-boundary,
.flow-product-boundary{
  margin-top:var(--wb-space-5);
}

.flow-root-back{
  display:inline-flex;
  align-items:baseline;
  gap:var(--wb-space-2);
  color:inherit;
  text-decoration:none;
}

.flow-product-status{
  display:flex;
  align-items:center;
  gap:var(--wb-space-3);
  flex-wrap:wrap;
}

.flow-product-section{
  display:grid;
  gap:var(--wb-space-4);
  margin-top:var(--wb-space-6);
}

.flow-product-section--split{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.flow-product-copy{
  display:grid;
  gap:var(--wb-space-2);
  max-width:780px;
}

.flow-output-card,
.flow-product-feature{
  display:grid;
  gap:var(--wb-space-3);
  align-content:start;
}

.flow-output-number{
  color:var(--wb-blue);
  font-size:var(--wb-type-xs);
  font-weight:var(--wb-font-weight-semibold);
  letter-spacing:.08em;
}

@media(max-width:700px){
  .flow-root-grid,
  .flow-output-grid,
  .flow-product-section--split{
    grid-template-columns:1fr;
  }
}