/* ===========================================================================
   Design modifiers: three axes, four values each.

   The layout carries the hero. These carry everything below it - how sections
   are separated, how cards are treated, how the plan panel reads. Thirteen
   brands sharing a component library will read as one company if the only
   difference above the fold, so the difference has to continue down the page.

   Applied as data-rhythm / data-cards / data-pricing on <body>, from the
   [design] section of brand.toml.

   Every selector here requires its attribute to be present. The original four
   brands declare none, so nothing in this file can reach them - which is the
   only way to add an axis to a site that is already serving.
   =========================================================================== */

/* ===========================================================================
   RHYTHM  -  how one section is told from the next
   =========================================================================== */

/* ruled: a hairline above every section, no background changes. Works on a
   page that is one colour throughout. */
[data-rhythm="ruled"] .section + .section,
[data-rhythm="ruled"] .section-deep + .section,
[data-rhythm="ruled"] .section + .section-deep { border-top: 1px solid var(--border); }
[data-rhythm="ruled"] .section-head {
  display: grid; gap: var(--space-3);
  border-bottom: 1px solid var(--border);
  padding-bottom: var(--space-5);
}

/* tight: a denser page. Suits a layout with a lot of sections. */
[data-rhythm="tight"] .section { padding-block: var(--space-16); }
[data-rhythm="tight"] .section-head { margin-bottom: var(--space-8); }
[data-rhythm="tight"] .grid { gap: var(--space-4); }

/* wide: the opposite, with room around each idea. */
[data-rhythm="wide"] .section { padding-block: calc(var(--space-24) + var(--space-8)); }
[data-rhythm="wide"] .section-head { margin-bottom: var(--space-16); }
[data-rhythm="wide"] .section-head h2 { font-size: var(--text-3xl); }
[data-rhythm="wide"] .grid { gap: var(--space-8); }

/* stepped: each section heading indents, like an outline. Falls back to flush
   on narrow screens, where an indent just steals the measure. */
[data-rhythm="stepped"] .section-head { padding-left: var(--space-12); position: relative; }
[data-rhythm="stepped"] .section-head::before {
  content: ""; position: absolute; left: 0; top: 0.65em;
  width: var(--space-8); height: 2px; background: var(--accent);
}
[data-rhythm="stepped"] .section:nth-of-type(even) .section-head { padding-left: var(--space-20); }
@media (max-width: 720px) {
  [data-rhythm="stepped"] .section-head,
  [data-rhythm="stepped"] .section:nth-of-type(even) .section-head { padding-left: 0; }
  [data-rhythm="stepped"] .section-head::before { position: static; display: block; margin-bottom: var(--space-4); }
}

/* ===========================================================================
   CARDS  -  feature and step treatment
   =========================================================================== */

/* flat: no box at all, a coloured leading rule instead. */
[data-cards="flat"] .card {
  background: transparent; border: 0; border-radius: 0;
  border-left: 2px solid var(--border);
  padding: var(--space-2) 0 var(--space-2) var(--space-5);
}
[data-cards="flat"] .card-link:hover { border-left-color: var(--primary); transform: none; }
[data-cards="flat"] .feature-icon { margin-bottom: var(--space-3); }

/* raised: no border, a shadow, and it lifts. */
[data-cards="raised"] .card {
  border-color: transparent;
  background: var(--bg-elevated);
  box-shadow: var(--shadow-md);
}
[data-cards="raised"] .card-link:hover {
  box-shadow: var(--shadow-lg);
  border-color: transparent;
  transform: translateY(-3px);
}

/* tinted: the card carries a wash of the brand primary. Kept at 8% because
   the palette's text contrast was measured against bg-elevated, and a heavier
   tint moves the background far enough to invalidate it. */
[data-cards="tinted"] .card {
  background: color-mix(in srgb, var(--primary) 8%, var(--bg-elevated));
  border-color: color-mix(in srgb, var(--primary) 22%, var(--border));
}
[data-cards="tinted"] .card-link:hover { border-color: var(--primary); }

/* numbered: a counter before each heading, so a grid of features reads as a
   list of them. */
[data-cards="numbered"] .grid { counter-reset: card; }
[data-cards="numbered"] .card { counter-increment: card; }
[data-cards="numbered"] .card h3::before {
  content: counter(card, decimal-leading-zero);
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  letter-spacing: 0.16em;
  color: var(--accent);
  margin-bottom: var(--space-2);
}

/* ===========================================================================
   PRICING  -  how the one panel that leads to money is presented
   =========================================================================== */

/* band: full-bleed, its own surface, edge to edge. */
[data-pricing="band"] #pricing {
  background: var(--bg-deep);
  border-block: 1px solid var(--border);
}
[data-pricing="band"] .checkout-panel {
  background: transparent; border: 0;
  max-width: 48rem; margin-inline: auto; text-align: center;
}
[data-pricing="band"] .plan-facts li { justify-content: flex-start; text-align: left; }

/* bare: no panel. A ruled list and a button, which is the least salesy the
   page can be. */
[data-pricing="bare"] .checkout-panel {
  background: transparent; border: 0; border-radius: 0;
  padding-inline: 0;
}
[data-pricing="bare"] .plan-facts li {
  border-bottom: 1px solid var(--border);
  padding-bottom: var(--space-3);
}
[data-pricing="bare"] .plan-facts li:last-child { border-bottom: 0; }
[data-pricing="bare"] .checkout-action { text-align: left; }

/* tinted: the panel is the brightest thing on the page, deliberately. */
[data-pricing="tinted"] .checkout-panel {
  background: color-mix(in srgb, var(--primary) 12%, var(--bg-elevated));
  border-color: color-mix(in srgb, var(--primary) 34%, var(--border));
  border-radius: var(--radius-xl);
}

/* boxed: heavy, square, technical. */
[data-pricing="boxed"] .checkout-panel {
  border: 2px solid var(--border);
  border-radius: 0;
  background: var(--bg-deep);
}
[data-pricing="boxed"] .plan-facts li { align-items: center; }
[data-pricing="boxed"] .checkout-action { text-align: left; }