/* The marketing site's own layout.
 *
 * Everything visual comes from @ecosystem/design (linked before this file).
 * Per packages/design/README.md this file may consume semantic tokens and may
 * NOT redefine any .ds-* component — so every rule below is a `.www-*` block
 * of this app's own, and every value is a token.
 *
 * Why this app has more layout CSS than the others: `css/layout.css` owns the
 * application shell — a sidebar you navigate from and a main column that
 * scrolls independently. That is the right shape for a tool and the wrong
 * shape for a page a stranger reads once. A marketing page is a single column
 * of full-width bands, which is a different thing rather than a variant of the
 * same thing, and the design README's rule 9 says a pattern earns its place in
 * the package on its SECOND consumer. There is one marketing site.
 *
 * Account keeps the default accent and so does this: it speaks for the whole
 * suite rather than for one app in it.
 */

/* --- bands ---------------------------------------------------------------
   A marketing page is a stack of full-bleed bands with a constrained column
   inside each. The band owns the background; the wrap owns the measure.
------------------------------------------------------------------------- */
.www { background: var(--ds-canvas); }

.www-wrap {
  width: 100%;
  max-width: var(--ds-container-lg);
  margin-inline: auto;
  padding-inline: var(--ds-space-5);
}

.www-section { padding-block: var(--ds-space-7); }
.www-section--hero { padding-block: var(--ds-space-8) var(--ds-space-7); }
.www-section--apps { padding-top: var(--ds-space-0); }
.www-section--sunken {
  background: var(--ds-surface-sunken);
  border-block: var(--ds-border-width) solid var(--ds-border);
}

/* --- header --------------------------------------------------------------- */

.www-header {
  position: sticky;
  top: 0;
  z-index: var(--ds-z-sticky);
  background: var(--ds-surface);
  border-bottom: var(--ds-border-width) solid var(--ds-border);
}
.www-bar {
  width: 100%;
  max-width: var(--ds-container-lg);
  margin-inline: auto;
  padding: var(--ds-space-3) var(--ds-space-5);
  display: flex;
  align-items: center;
  gap: var(--ds-space-5);
}
.www-bar__end {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--ds-space-4);
}

.www-mark {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  color: inherit;
  text-decoration: none;
  font-weight: var(--ds-weight-semibold);
}
.www-mark__glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--ds-radius-md);
  background: var(--ds-accent);
  color: var(--ds-on-accent);
  font-size: var(--ds-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.www-mark__name { font-size: var(--ds-text-base); }

.www-nav { display: flex; gap: var(--ds-space-4); }
.www-nav a,
.www-signin {
  color: var(--ds-text-muted);
  text-decoration: none;
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-medium);
}
.www-nav a:hover,
.www-signin:hover { color: var(--ds-text); }

@media (max-width: 40rem) {
  .www-bar { gap: var(--ds-space-3); flex-wrap: wrap; }
  .www-nav { order: 3; width: 100%; }
  .www-bar__end { gap: var(--ds-space-3); }
}

/* --- hero ----------------------------------------------------------------
   One promise, one sentence explaining it, one button. Anything else on a
   first screen is competing with the thing it is there to say.
------------------------------------------------------------------------- */
.www-hero { max-width: 46rem; }
.www-hero__headline {
  font-size: clamp(var(--ds-text-3xl), 5vw, 3.25rem);
  line-height: var(--ds-leading-tight);
  letter-spacing: -0.02em;
  margin-bottom: var(--ds-space-4);
  text-wrap: balance;
}
.www-hero__headline--sm { font-size: clamp(var(--ds-text-2xl), 4vw, 2.5rem); }
.www-hero__lede {
  font-size: var(--ds-text-lg);
  color: var(--ds-text-muted);
  max-width: var(--ds-measure);
}
.www-hero__cta {
  margin-top: var(--ds-space-5);
  display: flex;
  align-items: center;
  gap: var(--ds-space-4);
  flex-wrap: wrap;
}
.www-hero__note { font-size: var(--ds-text-xs); color: var(--ds-text-muted); }

.www-eyebrow {
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ds-accent);
  margin-bottom: var(--ds-space-3);
}
.www-appheader { max-width: 46rem; }
/* The wide lockup, above the eyebrow. Height-constrained so every app's header
   lines up regardless of how wide its particular lockup is. */
.www-appheader__logo {
  display: block;
  height: 3.5rem;
  width: auto;
  max-width: 100%;
  margin-bottom: var(--ds-space-4);
}

.www-h2 {
  font-size: var(--ds-text-2xl);
  line-height: var(--ds-leading-tight);
  margin-bottom: var(--ds-space-4);
}

.www-prose { max-width: var(--ds-measure); }
.www-prose p { margin-bottom: var(--ds-space-4); color: var(--ds-text-muted); }
.www-prose p:last-child { margin-bottom: 0; }

/* --- the apps ------------------------------------------------------------
   The set is the product, so it goes directly under the promise rather than
   below three columns of adjectives.
------------------------------------------------------------------------- */
.www-apps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--ds-space-4);
}
.www-app {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-2);
  padding: var(--ds-space-5);
  background: var(--ds-surface);
  border: var(--ds-border-width) solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  color: inherit;
  text-decoration: none;
  transition:
    border-color var(--ds-duration-fast) var(--ds-ease),
    box-shadow var(--ds-duration-fast) var(--ds-ease);
}
.www-app:hover { border-color: var(--ds-border-strong); box-shadow: var(--ds-shadow-sm); }
.www-app__head { display: flex; align-items: center; gap: var(--ds-space-2); flex-wrap: wrap; }
/* Fixed box, not `height: auto`: the logos are square but the badge beside
   them is not, and letting the art set the row height makes the cards in a
   grid disagree about where their names sit. */
.www-app__logo { width: 1.75rem; height: 1.75rem; object-fit: contain; flex-shrink: 0; }
.www-app__name { font-size: var(--ds-text-lg); font-weight: var(--ds-weight-semibold); }
.www-app__lede { color: var(--ds-text-muted); font-size: var(--ds-text-sm); flex: 1; }
.www-app__go {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-1);
  margin-top: var(--ds-space-2);
  color: var(--ds-accent);
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-medium);
}

/* --- pillars -------------------------------------------------------------- */

.www-pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--ds-space-6) var(--ds-space-5);
}
.www-pillar__icon { color: var(--ds-accent); display: block; margin-bottom: var(--ds-space-3); }
.www-pillar__title { font-size: var(--ds-text-lg); margin-bottom: var(--ds-space-2); }
.www-pillar__body { color: var(--ds-text-muted); font-size: var(--ds-text-sm); }

/* --- highlights ----------------------------------------------------------- */

.www-highlights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--ds-space-5);
  margin: 0;
}
.www-highlight dt { font-weight: var(--ds-weight-semibold); margin-bottom: var(--ds-space-2); }
.www-highlight dd { margin: 0; color: var(--ds-text-muted); font-size: var(--ds-text-sm); }

/* --- pricing -------------------------------------------------------------- */

.www-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: var(--ds-space-5);
  align-items: start;
}
.www-plan {
  padding: var(--ds-space-6);
  background: var(--ds-surface);
  border: var(--ds-border-width) solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
}
.www-plan__name { font-size: var(--ds-text-lg); margin-bottom: var(--ds-space-2); }
.www-plan__price {
  display: flex;
  align-items: baseline;
  gap: var(--ds-space-2);
  font-size: var(--ds-text-3xl);
  font-weight: var(--ds-weight-semibold);
  line-height: var(--ds-leading-tight);
}
.www-plan__interval {
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-normal);
  color: var(--ds-text-muted);
}
/* Not priced yet is a different statement from free, and must not read like a
   number. See PlansService: a null price is never rendered as 0. */
.www-plan__unpriced { font-size: var(--ds-text-lg); color: var(--ds-text-muted); }
.www-plan__tagline {
  margin-top: var(--ds-space-3);
  color: var(--ds-text-muted);
  font-size: var(--ds-text-sm);
}
.www-plan__rows { list-style: none; margin: var(--ds-space-5) 0; padding: 0; }
.www-plan__row {
  display: flex;
  justify-content: space-between;
  gap: var(--ds-space-4);
  padding-block: var(--ds-space-3);
  border-bottom: var(--ds-border-width) solid var(--ds-border);
  font-size: var(--ds-text-sm);
}
.www-plan__row:last-child { border-bottom: 0; }
.www-plan__what { color: var(--ds-text-muted); }
.www-plan__value { font-weight: var(--ds-weight-medium); white-space: nowrap; }

.www-note {
  margin-top: var(--ds-space-5);
  font-size: var(--ds-text-xs);
  color: var(--ds-text-muted);
  max-width: var(--ds-measure);
}

.www-faq {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: var(--ds-space-5);
}
.www-faq__q { font-size: var(--ds-text-base); margin-bottom: var(--ds-space-2); }
.www-faq__a { color: var(--ds-text-muted); font-size: var(--ds-text-sm); }

/* --- form ----------------------------------------------------------------- */

.www-form { max-width: 32rem; }
/* Colour is never the only signal — both carry a sentence, and the sentence is
   the message (design rule 8). */
.www-form__ok { color: var(--ds-success); font-weight: var(--ds-weight-medium); }
.www-form__error {
  color: var(--ds-danger);
  font-weight: var(--ds-weight-medium);
  margin-bottom: var(--ds-space-4);
}

.www-closing { max-width: var(--ds-measure); }
.www-closing p { color: var(--ds-text-muted); }

/* --- footer --------------------------------------------------------------- */

.www-foot {
  background: var(--ds-surface);
  border-top: var(--ds-border-width) solid var(--ds-border);
  padding-block: var(--ds-space-7) var(--ds-space-5);
}
.www-foot__inner {
  width: 100%;
  max-width: var(--ds-container-lg);
  margin-inline: auto;
  padding-inline: var(--ds-space-5);
  display: grid;
  grid-template-columns: minmax(14rem, 2fr) repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--ds-space-6);
}
.www-foot__about p {
  margin-top: var(--ds-space-3);
  color: var(--ds-text-muted);
  font-size: var(--ds-text-sm);
  max-width: 28rem;
}
.www-foot__title {
  font-size: var(--ds-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ds-text-subtle);
  margin-bottom: var(--ds-space-3);
}
.www-foot__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ds-space-2); }
.www-foot__list a { color: var(--ds-text-muted); text-decoration: none; font-size: var(--ds-text-sm); }
.www-foot__list a:hover { color: var(--ds-text); }
.www-foot__legal {
  width: 100%;
  max-width: var(--ds-container-lg);
  margin: var(--ds-space-6) auto 0;
  padding: var(--ds-space-4) var(--ds-space-5) 0;
  border-top: var(--ds-border-width) solid var(--ds-border);
  font-size: var(--ds-text-xs);
  color: var(--ds-text-subtle);
}

/* --- The two halves of the product ----------------------------------------
   The site stopped being a row of app cards when it started being two things:
   four apps that carry a job from enquiry to payment, and four that are the
   rest of a workspace. The heading above each is doing the positioning, so it
   gets room rather than being a label on a grid. */

.www-group + .www-group {
  margin-top: var(--ds-space-8);
}

.www-group__head {
  max-width: var(--ds-measure);
  margin-bottom: var(--ds-space-5);
}

.www-group__lede {
  color: var(--ds-text-muted);
  margin-top: var(--ds-space-2);
}

.www-group__link {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-1);
  font-weight: var(--ds-weight-medium);
}

/* --- The loop --------------------------------------------------------------
   A numbered list, because the argument IS the order: a job arrives, is quoted,
   is booked, is done, is billed, is paid. Rendered as an <ol> rather than as
   cards so it reads as a sequence to a screen reader too. */

.www-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-5);
  max-width: var(--ds-measure);
}

.www-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--ds-space-4);
  align-items: start;
}

.www-step__n {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--ds-radius-full);
  background: var(--ds-accent-subtle);
  color: var(--ds-accent);
  font-weight: var(--ds-weight-semibold);
  font-variant-numeric: tabular-nums;
}

.www-step__title {
  font-size: var(--ds-text-lg);
  font-weight: var(--ds-weight-semibold);
  margin: 0 0 var(--ds-space-2);
}

.www-step__app {
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
  font-size: var(--ds-text-sm);
  margin-top: var(--ds-space-2);
}