/* ==========================================================================
   Unified card surface — why-us + workflow adopt the business-model shape.
   ==========================================================================
   Loaded last, same revert story as buttons.css: delete this file and its
   <link> and nothing else changes.

   Measured starting point (computed styles, 1280px, light theme):

     family    radius  border                      shadow                     grid gap
     business  14px    1px color-mix(in srgb, var(--palette-soft-ivory-bright) 16%, transparent)   0 24px 54px -38px /.72     12px
     why-us     0px    none                        none                        1px  <- line trick
     workflow  12px    1px color-mix(in srgb, var(--palette-forest-deep) 16%, transparent)      0 12px 30px /.05           14px

   So the three families genuinely differed in every surface property. This
   file settles all of them on the business-model values.

   WHAT IS DELIBERATELY NOT UNIFIED:

   - padding and min-height. responsive.css tunes both per breakpoint for
     these cards (e.g. `.concept-why-grid article { padding: 24px 20px }` at
     the narrow end, `min-height: 250px` at another). A blanket padding here
     would load later and flatten that tuning at every viewport. Padding of
     22 vs 24 vs 26px is also not what made the sections look unrelated —
     the missing radius, border and shadow were.

   - per-card background colours. The business bento is itself multicoloured
     (dark / acid / coral / blue), so keeping why-us and workflow colourful
     matches it rather than fighting it. Those are also `!important` in
     themes.css and intentionally so.

   SPECIFICITY NOTES:

   - Card rules use a `.concept-page` prefix to reach (0,2,1) and so tie the
     existing `.concept-why-grid article:nth-child(2)` / `border: 0` rules in
     hero.css; the tie is then broken by load order in this file's favour.
   - The grid-container rule needs `html[data-theme]` because themes.css
     styles it as `html[data-theme="light"] .concept-why-grid` — (0,2,1),
     which a plain `.concept-page .concept-why-grid` (0,2,0) would lose to.
     `data-theme` is always present (set by the inline head script before
     first paint), with a bare fallback below for the no-JS case.
   - Dark-theme `border-color: ... !important` in themes.css still wins over
     the border shorthand here, which is correct: it supplies the light
     hairline those dark card fills need. This file only guarantees that a
     border exists at all and that its width/style/radius match business.
   ========================================================================== */

.concept-page .concept-why-grid article,
.concept-page .concept-workflow-track article {
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--card-shadow);
  transition:
    border-color 420ms var(--concept-ease-out),
    box-shadow 420ms var(--concept-ease-out);
}

.concept-page .concept-why-grid article:hover {
  border-color: var(--line-hard);
  box-shadow: var(--card-shadow-hover);
}

.concept-page .concept-workflow-track article:hover {
  border-color: var(--line-hard);
  box-shadow:
    inset 0 0 0 1px var(--line),
    var(--card-shadow-hover);
}

/* The why-us grid drew its dividers with a 1px gap over a tinted container
   background. With rounded cards that tint would read as a slab behind them,
   so the separator trick is retired in favour of a real gap — the same 12px
   the business grid uses. */
html[data-theme] .concept-page .concept-why-grid,
.concept-page .concept-why-grid {
  gap: 12px;
  overflow: visible;
  border-radius: 0;
  background: none;
}

/* Workflow track was 14px; business is 12px. */
.concept-page .concept-workflow-track {
  gap: 12px;
}

@media (prefers-reduced-motion: reduce) {
  .concept-page .concept-why-grid article,
  .concept-page .concept-workflow-track article {
    transition: none;
  }
}