/* =============================================================================
   Solutions page — pages/solutions.html

   Two inline <style> blocks (the hero and the solution explorer) were moved
   here in W4.2 and converted onto the design system. The trailing LEGACY block
   — rules for markup that no longer exists in any HTML file — was deleted in
   W5.1.
   ============================================================================= */

/* =============================================================================
   HERO — the compact hero (hero.css § compact) over the shared sailboat.
   hero.md § Compact, contrast: the sunlit water at the top of the frame put
   the 16px kicker under 4.5:1, so the crop is anchored to the darker bottom
   of the photo instead of raising the overlay.
   ============================================================================= */
.hero--compact .hero__image {
  object-position: 50% 100%;
}

/* =============================================================================
   BUILDING BLOCKS — the three blocks and the "Built for" ribbon, a near-white
   section (.section.bg-light) between the white intro and the white explorer.
   ============================================================================= */
/* --- The three blocks — .card / .grid-3 carry everything else -------------- */
.bb__blocks {
  max-width: var(--content-max-width);
  margin-inline: auto;
}

.bb__blk {
  align-items: flex-start;
  text-align: left;
}

.bb__blk-cube {
  width: var(--space-18);
  height: var(--space-18);
  flex: none;
  margin-bottom: var(--card-gap);
}

/* --- Isometric cube illustrations ------------------------------------------
   Genuine illustrations, not icons, so they stay inline SVG (icon-map.md
   exclusion list). The artwork is untouched; only the hardcoded fills moved
   out to these classes. The cards sit on white, so the ghost strokes use the
   border grey rather than the translucent white they had on the dark band.
   --------------------------------------------------------------------------- */
.cube-art {
  --cube-top: var(--color-primary-pale);
  --cube-left: var(--color-accent-cyan);
  --cube-right: var(--color-accent-cyan-dark);
  --cube-mini-top: var(--color-primary-pale);
  --cube-mini-left: var(--color-mid-gray);
  --cube-mini-right: var(--color-text-gray);
  --cube-ghost: var(--color-mid-gray);
  --cube-spark: var(--color-accent-orange);
  display: block;
  width: 100%;
  height: 100%;
}

.cube-art__top { fill: var(--cube-top); }
.cube-art__left { fill: var(--cube-left); }
.cube-art__right { fill: var(--cube-right); }
.cube-art__mini-top { fill: var(--cube-mini-top); }
.cube-art__mini-left { fill: var(--cube-mini-left); }
.cube-art__mini-right { fill: var(--cube-mini-right); }
.cube-art__ghost { stroke: var(--cube-ghost); }
.cube-art__spark { fill: var(--cube-spark); }

/* "Tailored to you, fast" — the EdTech trio. */
.cube-art--tutoring {
  --cube-top: var(--color-division-highlight);
  --cube-left: var(--color-accent);
  --cube-right: var(--color-division-brand);
}

/* "Standalone or integrated" — the steel cube of the original. */
.cube-art--insights {
  --cube-top: var(--color-primary-pale);
  --cube-left: var(--color-mid-gray);
  --cube-right: var(--color-text-gray);
}

/* --- "Built for" trust ribbon ---------------------------------------------- */
.bb__trust {
  max-width: var(--content-max-width);
  margin-block-start: var(--gap-section-lg);
  margin-inline: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  background-color: var(--color-white);
}

.bb__trust-inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-8);
  padding: var(--space-5) var(--space-8);
}

.bb__trust-label {
  white-space: nowrap;
  color: var(--section-fg-muted);
}

.bb__trust-logos {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  flex: 1;
  gap: var(--space-5) var(--space-8);
}

.bb__trust-logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 1rem;
  font-weight: 700;
  line-height: 140%;
  white-space: nowrap;
  color: var(--section-fg-muted);
}

.bb__trust-logo .g {
  width: var(--space-5);
  height: var(--space-5);
  flex-shrink: 0;
  border-radius: var(--border-radius-sm);
  background-color: var(--color-division-card-bg);
}

@media (max-width: 600px) {
  .bb__trust-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-5);
  }

  .bb__trust-logos {
    gap: var(--space-3) var(--space-6);
  }
}

/* =============================================================================
   SOLUTION EXPLORER (was the inline <style> at solutions.html:333)

   A master-detail panel: a sticky rail of nine solutions on the left, the
   selected solution on the right. Below 900px the rail is replaced by the
   .md-sw dropdown. The nine ids are routing keys held by the inline script,
   not DOM anchors — see contracts.md §3.
   ============================================================================= */
.md-section {
  /* Geometry locked to the artwork: the screenshot deliberately overhangs its
     cover. */
  --explorer-rail-width: 320px;
  --cover-height: 250px;
  --cover-img-height: 356px;
  padding-block: var(--section-padding-y);
  padding-inline: var(--content-padding);
  background-color: var(--color-white);
}

.md-wrap {
  max-width: var(--content-max-width);
  margin-inline: auto;
}

.md-explore {
  display: grid;
  grid-template-columns: var(--explorer-rail-width) 1fr;
  align-items: start;
  gap: var(--card-grid-gap);
}

/* --- Left rail ------------------------------------------------------------- */
.md-over {
  position: sticky;
  top: calc(var(--nav-height) + var(--space-4));
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  background-color: var(--color-white);
  box-shadow: var(--shadow-card);
}

/* No element carries .md-over__head — see the report. */
.md-over__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: var(--space-4) var(--space-4) var(--space-3);
}

.md-over__head b {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-primary);
}

.md-over__head span {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-mid-gray);
}

.md-track {
  position: relative;
}

/* The pill that slides behind the selected rail item. Its height and offset are
   set from JS; only the travel is animated here. */
.md-ind {
  position: absolute;
  left: var(--space-2);
  right: var(--space-2);
  top: 0;
  height: var(--space-12);
  z-index: 0;
  pointer-events: none;
  border-radius: var(--border-radius-md);
  background-color: var(--color-division-card-bg);
  transform: translateY(0);
  transition:
    transform var(--duration-moderate) var(--ease-standard),
    height var(--duration-moderate) var(--ease-standard);
}

.md-grp {
  padding-block: var(--space-2);
}

.md-grp + .md-grp {
  border-top: 1px solid var(--color-border);
}

.md-grp__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-1) var(--space-3) var(--space-2);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 140%;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-gray)  /* mid-gray is 3.29:1 on white at 12px/700 and fails AA; text-gray is 5.95:1 */;
}

/* No element carries .ct — see the report. */
.md-grp__label .ct {
  font-size: 0.6875rem;
  color: var(--color-border);
}

.md-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  position: relative;
  z-index: 1;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  text-align: left;
  border-radius: var(--border-radius-md);
}

.md-item h6 {
  margin: 0;
  color: var(--color-primary);
  transition: color var(--duration-fast) var(--ease-standard);
}

.md-item:hover h6,
.md-item.on h6 {
  color: var(--color-division-brand);
}

.md-item.on h6 {
  font-weight: 700;
}

.md-item.on .md-item__icon {
  background-color: var(--color-division-brand);
  color: var(--color-white);
}

/* --- Right detail panel ---------------------------------------------------- */
.md-detail {
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  background-color: var(--color-white);
  box-shadow: var(--shadow-card);
  overflow: visible;
}

.md-detail.swap .md-cover,
.md-detail.swap .md-dbody > * {
  animation: mdSlideUp var(--duration-moderate) var(--ease-standard);
}

@keyframes mdSlideUp {
  from { transform: translateY(var(--space-2)); }
  to { transform: none; }
}

.md-cover {
  position: relative;
  z-index: 1;
  height: var(--cover-height);
  overflow: visible;
  border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
  background-image: radial-gradient(
    120% 130% at 80% 0%,
    var(--color-primary) 0%,
    var(--color-primary-darkest) 70%
  );
}

.md-cover__img {
  position: absolute;
  left: 50%;
  top: var(--space-6);
  z-index: 3;
  height: var(--cover-img-height);
  width: auto;
  max-width: none;
  transform: translateX(-50%) translateY(0);
  filter: drop-shadow(0 18px 26px color-mix(in srgb, var(--color-primary-darkest) 32%, transparent));
}

/* No element ever shows the badge; it is kept because the script writes to it. */
.md-cover__badge {
  display: none;
}

.md-cover__caption {
  display: block;
  margin: calc(-1 * var(--space-5)) 0 var(--space-3);
  text-align: right;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  /* The cover is not clickable, so the caption shows at rest instead of on hover. */
  color: var(--color-mid-gray);
}

.md-dbody {
  position: relative;
  z-index: 5;
  padding: var(--card-padding);
  background-color: var(--color-white);
  border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
}

.md-detail h3 {
  margin-top: var(--space-3);
}

.md-dsub {
  margin-top: var(--space-2);
  font-weight: 700;
  color: var(--color-division-brand);
}

.md-ddesc {
  max-width: 64ch;
  margin-top: var(--space-3);
  margin-bottom: 0;
  color: var(--color-text-gray);
}

/* --- Principles (AI Homework Tutor only) ----------------------------------- */
.md-principles {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.md-principle {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  color: var(--color-division-brand);
}

.md-principle .icon {
  margin-top: var(--space-1);
}

.md-principle p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 160%;
  color: var(--color-text-gray);
}

/* --- Capability accordion -------------------------------------------------- */
.md-cap {
  margin-top: var(--space-5);
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-md);
  background-color: var(--color-white);
}

.md-cap__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-4) var(--space-5);
  text-align: left;
}

.md-cap__header:focus-visible {
  outline: 2px solid var(--focus-ring, var(--color-primary));
  outline-offset: -2px;
}

.md-cap__title {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 140%;
  color: var(--color-primary);
}

.md-cap__sub {
  margin-top: var(--space-1);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 160%;
  color: var(--color-text-gray);
}

.md-cap__chev {
  margin-left: auto;
  color: var(--color-division-brand);
  transition: transform var(--duration-fast) var(--ease-standard);
}

.md-cap.open .md-cap__chev {
  transform: rotate(90deg);
}

.md-cap__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--duration-moderate) var(--ease-standard);
}

.md-cap.open .md-cap__body {
  grid-template-rows: 1fr;
}

.md-cap__body-inner {
  overflow: hidden;
}

.md-cap-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: 0 var(--space-5) var(--space-5);
}

.md-cap-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: 0.9375rem;
  line-height: 160%;
  color: var(--color-text-gray);
}

.md-cap-item .tk {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--space-6);
  height: var(--space-6);
  border-radius: var(--border-radius-sm);
  background-color: var(--color-division-card-bg);
  color: var(--color-division-brand);
}

/* --- Panel CTA — .btn .btn--division .btn--lg carry the rest --------------- */
.md-dcta {
  width: 100%;
  margin-top: var(--space-6);
}

/* =============================================================================
   MOBILE SOLUTION SWITCHER — replaces the rail below 900px
   ============================================================================= */
.md-sw {
  display: none;
}

.md-sw__trigger {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-md);
  background-color: var(--color-white);
  transition:
    border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}

.md-sw__trigger:hover {
  border-color: var(--color-mid-gray);
}

.md-sw.open .md-sw__trigger {
  border-color: var(--color-division-brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-division-brand) 15%, transparent);
}

.md-sw.open .md-sw__icon {
  background-color: var(--color-division-brand);
  color: var(--color-white);
}

.md-sw__text {
  display: flex;
  flex-direction: column;
  flex: 1;
  text-align: left;
}

.md-sw__label {
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-mid-gray);
}

.md-sw__title {
  margin-top: var(--space-1);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-primary);
}

.md-sw__chev {
  margin-left: auto;
  color: var(--color-mid-gray);
  transition: transform var(--duration-base) var(--ease-standard);
}

.md-sw.open .md-sw__chev {
  transform: rotate(180deg);
  color: var(--color-division-brand);
}

.md-sw__drop {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin-top: var(--space-1);
  max-height: 0;
  /* Without this the nine collapsed option buttons stay in the tab order. */
  visibility: hidden;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  background-color: var(--color-white);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(calc(-1 * var(--space-2)));
  transition:
    max-height var(--duration-moderate) var(--ease-standard),
    opacity var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}

.md-sw.open .md-sw__drop {
  max-height: 70vh;
  overflow-y: auto;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}

.md-sw__grp {
  padding-block: var(--space-2);
}

.md-sw__grp + .md-sw__grp {
  border-top: 1px solid var(--color-border);
}

.md-sw__grp-label {
  display: block;
  padding: var(--space-2) var(--space-4) var(--space-1);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 140%;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-mid-gray);
}

.md-sw__opt {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  text-align: left;
  transition: background-color var(--duration-fast) var(--ease-standard);
}

.md-sw__opt:hover {
  background-color: var(--color-near-white);
}

.md-sw__opt-name {
  flex: 1;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-primary);
}

.md-sw__opt-check {
  opacity: 0;
  color: var(--color-division-brand);
}

.md-sw__opt.on .md-sw__opt-name {
  font-weight: 700;
  color: var(--color-division-brand);
}

.md-sw__opt.on .md-sw__opt-icon {
  background-color: var(--color-division-brand);
  color: var(--color-white);
}

.md-sw__opt.on .md-sw__opt-check {
  opacity: 1;
}

/* =============================================================================
   Breakpoints — desktop-first, 1200 / 900 / 600 (contracts.md §2).
   The semantic spacing tokens are already responsive, so only the layout
   changes need a query.
   ============================================================================= */
@media (max-width: 900px) {
  .md-explore {
    grid-template-columns: 1fr;
  }

  .md-over {
    display: none;
  }

  .md-sw {
    display: block;
    position: relative;
    z-index: 10; /* over .md-dbody (z-index 5), under the nav */
    padding-bottom: var(--space-4);
  }

  .md-cover {
    --cover-height: 180px;
    --cover-img-height: 260px;
  }

  .md-detail.swap .md-cover {
    animation: none;
  }

  .md-detail[data-sol="content-conversion"] .md-cover {
    --cover-img-height: 220px;
  }
}