/* ==========================================================================
   TrustBrick landing page: hero, 3D stage, scroll story, lifecycle
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: min(88vh, 980px);
  display: flex;
  align-items: center;
  padding-block: calc(var(--header-h) + var(--sp-5)) var(--sp-7);
  background:
    radial-gradient(120% 90% at 78% 18%, rgba(42, 67, 146, 0.55) 0%, transparent 62%),
    radial-gradient(80% 70% at 12% 92%, rgba(244, 88, 28, 0.18) 0%, transparent 60%),
    linear-gradient(168deg, var(--navy-900) 0%, var(--navy-850) 46%, #0c1837 100%);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}

/* Blueprint grid behind the scene */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(120, 160, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120, 160, 255, 0.055) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(85% 75% at 60% 45%, #000 30%, transparent 100%);
  z-index: -1;
}

/* The copy column has to clear the longest headline line - at 1.08fr it was
   652px against the ~665px "Managing Properties." needs at 72px, so the three
   line composition silently became four and the hero grew a whole line taller.
   The 3D keeps well over 500px at every desktop width. */
.hero__inner {
  display: grid;
  /* Reference spec: 52% copy / 48% stage. 1.08fr : 1fr is that ratio. */
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  /* Was clamp(sp-6, 3vw, sp-8), which the >=1440 override pushed to 80px -
     well past the 24-48px the reference allows between copy and stage. */
  gap: clamp(1.5rem, 2.4vw, 3rem);
  align-items: center;
  width: 100%;
}
.hero__copy { max-width: 54rem; min-width: 0; }

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.35rem 0.85rem 0.35rem 0.6rem;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: var(--sp-5);
}
.hero__eyebrow svg { width: 0.95rem; height: 0.95rem; color: var(--orange-400); }

.hero h1 {
  /* 66px floor at desktop, rising to 88px on very wide screens, per the
     refinement brief. The vh term below keeps the three lines above the fold
     on short viewports without dropping under the floor. */
  font-size: min(clamp(4.125rem, 1rem + 3.6vw, 5.5rem), 11vh);
  text-wrap: balance;
  color: #fff;
  letter-spacing: -0.035em;
  line-height: 1.0;
  margin-bottom: var(--sp-5);
}
.hero h1 .accent {
  background: linear-gradient(96deg, var(--orange-400) 8%, #ffb489 92%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__lede {
  /* Reference spec: 18px, 1.5-1.6 line height, never wider than 600px. */
  font-size: 1.125rem;
  color: rgba(226, 233, 248, 0.88);
  max-width: 600px;
  margin-bottom: var(--sp-5);
  line-height: 1.55;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-6); }
/* .btn--lg is 22px/58px, which the reference calls oversized for the hero.
   Scoped to the hero so the shared button scale is untouched elsewhere. */
.hero__cta .btn {
  font-size: 1rem;
  min-height: 52px;
  padding: 0.85rem 1.6rem;
  border-radius: 10px;
}

.hero__proof {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-4) var(--sp-5);
  margin: 0;
  padding: var(--sp-5) 0 0;
  list-style: none;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.hero__proof-item { display: flex; align-items: flex-start; gap: var(--sp-3); min-width: 0; }
@media (max-width: 1240px) {
  .hero__proof { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.hero__proof-icon {
  display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--orange-400);
  flex: none;
}
.hero__proof-icon svg { width: 1.2rem; height: 1.2rem; }
.hero__proof-text { min-width: 0; }
.hero__proof-text strong {
  display: block;
  font-size: 1.02rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.25;
}
.hero__proof-text > span {
  display: block;
  margin-top: 2px;
  font-size: 0.82rem;
  color: rgba(185, 196, 221, 0.82);
  line-height: 1.4;
}

/* Architectural metadata plate on the 3D panel ---------------------------- */
.hero-3d__meta {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  z-index: 3;
  display: grid;
  gap: var(--sp-2);
  margin: 0;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-lg);
  background: rgba(8, 15, 38, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(10px) saturate(140%);
  /* Reference spec: 160-190px. */
  min-width: 172px;
}
.hero-3d__meta > div { display: grid; gap: 2px; min-width: 0; }
.hero-3d__meta dt {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(185, 196, 221, 0.75);
}
.hero-3d__meta dd {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.hero-3d__meta dd [data-3d-percent] { color: var(--orange-400); }
/* Nothing in the plate may break mid-word: "CONSTRUCTION" wrapping to two
   lines is what forced the old mobile rule to strip the plate entirely. */
.hero-3d__meta dt { white-space: nowrap; }

/* The old 66px desktop floor is gone: the reference wants 58-68px, and a floor
   of 66px left almost no room under the ceiling. The single clamp above covers
   1025px upward; below that responsive.css takes over. */

/* --------------------------------------------------------------------------
   2. 3D stage
   -------------------------------------------------------------------------- */
.hero-3d {
  position: relative;
  /* Width is pinned to the grid track so aspect-ratio resolves the height.
     Without this, min-height drives the width and the panel overflows its
     column (clipped by the hero's overflow:hidden). */
  width: 100%;
  aspect-ratio: 16 / 12;
  max-height: min(72vh, 700px);
  border-radius: var(--r-xl);
  overflow: hidden;
  background:
    radial-gradient(70% 60% at 50% 100%, rgba(42, 67, 146, 0.4) 0%, transparent 70%),
    linear-gradient(180deg, rgba(10, 19, 48, 0.2) 0%, rgba(10, 19, 48, 0.65) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  touch-action: pan-y;

  /* The chrome used to be four independently anchored absolute boxes, two of
     which claimed the same top-right corner - the metadata plate covered the
     pause/restart buttons outright and swallowed their clicks. The pieces that
     share an edge now share a grid row, so the layout resolves the positions
     instead of hand-tuned offsets doing it. */
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  align-content: start;
  gap: var(--sp-2);
  padding: var(--sp-4);

  /* Read by the WebGL renderer. The camera's own framing puts the tower's
     crown and mast above the top edge - 133px of it at 1440x900, and 177px at
     the worst pose - so the frame is pulled back and dropped until the whole
     building sits inside it with its base still grounded behind the progress
     card. The short frames below use their own values: they also have to clear
     the overlays docked across the bottom. */
  --stage-lens-lift: -0.17;
  --stage-zoom: 1.65;
}
/* The render is a background layer, never a grid item. As a flow child it was
   pushed down by anything laid out above it and spilled out of the frame. */
.hero-3d canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.hero-3d__label {
  position: relative;
  z-index: 3;
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  align-self: center;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.3rem 0.7rem;
  border-radius: var(--r-pill);
  background: rgba(10, 19, 48, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(6px);
}
.hero-3d__label .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green-500);
  box-shadow: 0 0 0 3px rgba(23, 164, 75, 0.25);
}

.hero-3d__stage {
  position: absolute;
  z-index: 3;
  bottom: var(--sp-4);
  left: var(--sp-4);
  right: var(--sp-4);
  padding: var(--sp-4);
  border-radius: var(--r-lg);
  background: rgba(10, 19, 48, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
}
.hero-3d__stage-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.hero-3d__stage-name {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
}
.hero-3d__stage-num {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--orange-400);
  font-weight: 700;
}
.hero-3d__stage-title { font-weight: 650; color: #fff; font-size: 1rem; }
.hero-3d__stage-note { font-size: 0.78rem; color: rgba(185, 196, 221, 0.85); }

.hero-3d__track {
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
}
.hero-3d__fill {
  height: 100%;
  width: 0%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--orange-500), var(--orange-400));
  transition: width 420ms var(--ease);
}

/* Sits beside the "Live build" pill rather than in the top-right corner: the
   corner belongs to the metadata plate, and the plate is the taller of the
   two, so the buttons are the pair that moves. */
.hero-3d__controls {
  position: relative;
  z-index: 3;
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  display: flex;
  gap: var(--sp-2);
}
.hero-3d__btn {
  display: grid; place-items: center;
  width: 2rem; height: 2rem;
  border-radius: var(--r-sm);
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(10, 19, 48, 0.6);
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background-color var(--dur-fast) var(--ease);
}
.hero-3d__btn:hover { background: rgba(42, 67, 146, 0.75); color: #fff; }
.hero-3d__btn svg { width: 0.95rem; height: 0.95rem; }

/* CSS fallback scene: used when WebGL is unavailable or reduced motion is on */
/* The clearance for the docked chrome is a bottom *inset*, not padding:
   percentage padding resolves against the inline size, so on a 640x322 frame
   `padding-bottom: 44%` reserved 281px of a 322px box and left the drawing
   40px tall. Inset percentages resolve against the height, which is what this
   reservation actually means. */
.hero-3d__fallback {
  position: absolute;
  inset: 0 0 24% 0;
  z-index: 1;
  display: grid;
  place-items: end center;
}
.hero-3d__fallback[hidden] { display: none; }
.fallback-building {
  width: min(60%, 260px);
  /* Width alone let the 200x260 drawing run taller than the frame on short
     stages, so its base was cut off. Capping the height makes it fit instead;
     max-height percentages resolve against the height, unlike padding. */
  max-height: 78%;
  min-height: 0;
  filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.45));
}
.fallback-building .lit { animation: window-glow 4.5s ease-in-out infinite alternate; }
.fallback-building .lit:nth-child(3n) { animation-delay: 1.1s; }
.fallback-building .lit:nth-child(3n + 1) { animation-delay: 2.3s; }
@keyframes window-glow {
  from { opacity: 0.35; }
  to { opacity: 1; }
}

/* --------------------------------------------------------------------------
   3. Search panel (overlapping the hero)
   -------------------------------------------------------------------------- */
.search-panel {
  position: relative;
  z-index: 5;
  /* Lifts the panel up over the hero so the two read as one composition. */
  margin-top: clamp(-5.5rem, -4vw, -3.5rem);
  margin-bottom: var(--section-y-tight);
}
.search-panel__card {
  width: min(100%, 1400px);
  margin-inline: auto;
  background: var(--surface);
  border-radius: var(--r-xl);
  box-shadow: 0 30px 70px -30px rgba(10, 19, 48, 0.45),
              0 2px 8px -2px rgba(10, 19, 48, 0.12);
  border: 1px solid var(--line);
  padding: clamp(var(--sp-5), 2.4vw, var(--sp-7));
}
.search-panel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.search-panel__head { margin-bottom: var(--sp-6); }
.search-panel__head h2 { margin: 0; font-size: var(--step-3); }
.search-panel__form {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
  gap: var(--sp-4);
  align-items: end;
}
.search-panel__form .field { margin-bottom: 0; }
.search-panel__form .field__label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.search-panel__form .select,
.search-panel__form .input {
  height: 3.4rem;
  font-size: 1rem;
  font-weight: 600;
}
.search-panel__form .btn {
  height: 3.4rem;
  padding-inline: clamp(1.25rem, 2vw, 2.25rem);
  font-size: 1rem;
  white-space: nowrap;
}
@media (max-width: 1280px) {
  .search-panel__form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .search-panel__form .btn { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .search-panel__form { grid-template-columns: minmax(0, 1fr); }
}
.search-panel__extra {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line-soft);
  align-items: center;
}
.search-panel__extra-label {
  font-size: var(--step--1);
  font-weight: 650;
  color: var(--ink-500);
  margin-right: var(--sp-2);
}

/* --------------------------------------------------------------------------
   4. Lifecycle rail
   -------------------------------------------------------------------------- */
.lifecycle {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: clamp(var(--sp-3), 1.2vw, var(--sp-5));
}
.lifecycle__item {
  position: relative;
  padding: clamp(var(--sp-5), 1.6vw, var(--sp-6));
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--surface);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
  overflow: hidden;
}
.lifecycle__item::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--orange-500), var(--orange-400));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.lifecycle__item:hover {
  border-color: var(--navy-200);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  color: inherit;
}
.lifecycle__item:hover::after { transform: scaleX(1); }
.lifecycle__num {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--orange-600);
  letter-spacing: 0.08em;
}
.lifecycle__item h3 {
  font-size: var(--step-0);
  margin: var(--sp-2) 0 var(--sp-2);
  font-weight: 650;
}
.lifecycle__item p {
  font-size: 0.88rem;
  color: var(--ink-500);
  margin: 0;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   4b. Featured solutions - the premium end of the catalogue
   -------------------------------------------------------------------------- */
/* These deliberately do not reuse .product-card. A 499 checklist card and a
   49,999 enterprise card reading as the same object was the reason nothing
   above the bundle registered as a different level of the ecosystem. */
.premium {
  position: relative;
  background:
    radial-gradient(70% 90% at 8% 0%, var(--navy-050) 0%, transparent 58%),
    radial-gradient(60% 80% at 96% 6%, var(--orange-050) 0%, transparent 55%),
    var(--surface);
  overflow: hidden;
}
/* A faint drawing grid, matched to the hero, so the band reads architectural
   rather than as one more white section. */
.premium::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(42, 67, 146, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(42, 67, 146, 0.05) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(80% 70% at 50% 30%, #000 10%, transparent 100%);
  pointer-events: none;
}
.premium > .container { position: relative; }

/* Two per row: the brief asks for two premium cards inside the first screen
   of this section, which a three- or four-up grid cannot deliver. */
.premium-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(var(--sp-5), 2vw, var(--sp-7));
  list-style: none;
  margin: 0;
  padding: 0;
}

.premium-card {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.premium-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--navy-200);
}
/* The accent rail is the only thing separating the four tiers at a glance. */
.premium-card::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 4px;
  background: var(--navy-500);
  z-index: 2;
}
.premium-card[data-accent="orange"]::after { background: var(--orange-500); }
.premium-card[data-accent="green"]::after { background: var(--green-500); }

.premium-card__media {
  position: relative;
  aspect-ratio: 16 / 7;
  overflow: hidden;
  background: var(--navy-900);
  border-bottom: 1px solid var(--line);
}
/* The console artwork is 1120x700. Shown whole at card width its labels fall
   under 7px, so the card crops into the top-left of the frame instead - the
   sidebar and KPI row read as a detail shot rather than an unreadable
   thumbnail. The readable full-size dashboard is the console showcase below. */
.premium-card__media img {
  width: 158%;
  height: auto;
  display: block;
  transform-origin: 0 0;
  transition: transform var(--dur-slow) var(--ease);
}
.premium-card:hover .premium-card__media img { transform: scale(1.04); }
/* Fades the crop into the card so it does not end on a hard cut. */
.premium-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(190deg, rgba(10, 19, 48, 0) 42%,
                              rgba(10, 19, 48, 0.42) 100%);
  pointer-events: none;
}

.premium-card__rank {
  position: absolute;
  left: var(--sp-5);
  bottom: var(--sp-4);
  z-index: 1;
  font-family: var(--font-mono);
  font-size: clamp(2.4rem, 3.4vw, 3.6rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.05em;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 2px 18px rgba(10, 19, 48, 0.75);
}

.premium-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(var(--sp-5), 2vw, var(--sp-7));
}
.premium-card__eyebrow {
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy-500);
  margin-bottom: var(--sp-2);
}
.premium-card[data-accent="orange"] .premium-card__eyebrow { color: var(--orange-600); }
.premium-card[data-accent="green"] .premium-card__eyebrow { color: var(--green-600); }

.premium-card__title {
  font-size: var(--step-3);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-3);
}
.premium-card__title a { color: inherit; text-decoration: none; }
.premium-card__title a:hover { color: var(--orange-600); }

.premium-card__price {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  font-size: clamp(2rem, 2.6vw, 2.75rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--navy-800);
  margin-bottom: var(--sp-4);
}
.premium-card__price small {
  font-size: var(--step--1);
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-500);
}

.premium-card__purpose {
  color: var(--ink-600);
  margin-bottom: var(--sp-5);
  max-width: 46ch;
}

.premium-card__features {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  list-style: none;
  margin: 0 0 var(--sp-6);
  padding: 0;
}
.premium-card__features li {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0;
  padding: 0.4rem 0.75rem;
  border-radius: var(--r-pill);
  background: var(--surface-alt);
  border: 1px solid var(--line);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink-700);
}
.premium-card__features svg { width: 0.9rem; height: 0.9rem; color: var(--green-600); }

.premium-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4) var(--sp-5);
  margin-top: auto;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line-soft);
}

@media (max-width: 1024px) {
  .premium-grid { grid-template-columns: minmax(0, 1fr); }
  .premium-card__media { aspect-ratio: 16 / 6; }
}
@media (max-width: 560px) {
  .premium-card__media img { width: 200%; }
  .premium-card__foot { flex-direction: column; align-items: stretch; }
  .premium-card__foot .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   5. Scroll story
   -------------------------------------------------------------------------- */
.story {
  position: relative;
  background: var(--navy-900);
  color: #fff;
  /* `clip`, not `hidden`: overflow:hidden makes this a scroll container, which
     silently disables position:sticky on .story__viz - the pinned visual just
     scrolled away with the steps. `clip` still trims the blueprint wash. */
  overflow: clip;
}
.story::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(120, 160, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120, 160, 255, 0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(70% 60% at 50% 40%, #000 20%, transparent 100%);
}
/* The visual is the subject here, so it takes half the row and stays pinned
   while the ten steps move past it. */
.story__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(var(--sp-6), 4vw, var(--sp-9));
  align-items: start;
}

.story__viz {
  position: sticky;
  top: calc(var(--header-h) + var(--sp-5));
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

/* ---- the scene ---------------------------------------------------------- */
.story__scene {
  position: relative;
  aspect-ratio: 8 / 7;
  max-height: 66vh;
  border-radius: var(--r-xl);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background:
    radial-gradient(72% 68% at 50% 42%, rgba(42, 67, 146, 0.34), transparent 74%),
    linear-gradient(168deg, #0c1637 0%, #070e24 100%);
  overflow: hidden;
}
.story__scene .scene { display: block; width: 100%; height: 100%; }

/* Every overlay is drawn into the same frame and only the active stage's group
   is shown. One attribute on the parent drives the whole scene, which is why
   home.js only has to set data-stage. */
.scene__layer {
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity 520ms var(--ease), transform 520ms var(--ease),
              visibility 0s linear 520ms;
}
.story__scene[data-stage="building"]      .scene__layer[data-layer="building"],
.story__scene[data-stage="discovery"]     .scene__layer[data-layer="discovery"],
.story__scene[data-stage="documentation"] .scene__layer[data-layer="documentation"],
.story__scene[data-stage="tenant"]        .scene__layer[data-layer="tenant"],
.story__scene[data-stage="maintenance"]   .scene__layer[data-layer="maintenance"],
.story__scene[data-stage="transaction"]   .scene__layer[data-layer="transaction"],
.story__scene[data-stage="broker"]        .scene__layer[data-layer="broker"],
.story__scene[data-stage="agency"]        .scene__layer[data-layer="agency"],
.story__scene[data-stage="operations"]    .scene__layer[data-layer="operations"],
.story__scene[data-stage="enterprise"]    .scene__layer[data-layer="enterprise"] {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 520ms var(--ease), transform 520ms var(--ease),
              visibility 0s;
}

/* SVG groups need an explicit box before percentage transform-origins work. */
.scene__tower, .scene__city, .scene__layer, .scene__board,
.scene__pin, .scene__ring, .scene__node, .scene__badge, .scene__seal,
.scene__sheet, .scene__ping {
  transform-box: fill-box;
  transform-origin: center;
}
.scene__tower {
  transform-origin: center bottom;
  transition: transform 620ms var(--ease), opacity 620ms var(--ease);
}
.scene__city {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 620ms var(--ease), transform 620ms var(--ease);
}

/* The asset recedes and the estate comes forward: same building, wider frame. */
.story__scene[data-stage="broker"] .scene__city,
.story__scene[data-stage="agency"] .scene__city,
.story__scene[data-stage="operations"] .scene__city,
.story__scene[data-stage="enterprise"] .scene__city {
  opacity: 1;
  transform: none;
}
.story__scene[data-stage="broker"] .scene__tower,
.story__scene[data-stage="agency"] .scene__tower { transform: scale(0.82); }
.story__scene[data-stage="enterprise"] .scene__tower { transform: scale(0.7); }
/* The operations board covers the frame, so the tower drops back behind it. */
.story__scene[data-stage="operations"] .scene__tower { transform: scale(0.72); opacity: 0.5; }
.story__scene[data-stage="operations"] .scene__city { opacity: 0.35; }

/* ---- scene typography --------------------------------------------------- */
.scene text { font-family: var(--font-sans); }
.scene__cap {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  fill: rgba(185, 196, 221, 0.72);
}
.scene__chip-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.13em;
  fill: rgba(143, 176, 255, 0.9);
}
.scene__chip-value { font-size: 18px; font-weight: 650; fill: #fff; }
.scene__chip-big {
  font-size: 26px;
  font-weight: 700;
  fill: #fff;
  font-family: var(--font-mono);
  letter-spacing: -0.02em;
}
.scene__chip-row { font-size: 14px; font-weight: 600; fill: rgba(226, 233, 248, 0.92); }

/* ---- scene motion ------------------------------------------------------- */
.scene__beacon { animation: sc-beacon 2.6s ease-in-out infinite; }
.scene__ping circle:first-child { animation: sc-ping 2.2s ease-out infinite; }
.scene__occupancy rect { animation: sc-lamp 620ms var(--ease) both; }
.scene__sheet { animation: sc-rise 620ms var(--ease) both; }
.scene__sheet[data-sheet="1"] { animation-delay: 90ms; }
.scene__sheet[data-sheet="2"] { animation-delay: 180ms; }
.scene__sheet[data-sheet="3"] { animation-delay: 270ms; }
.scene__node, .scene__badge { animation: sc-pop 520ms var(--ease) both; }
.scene__flow path { animation: sc-dash 1.6s linear infinite; }
.scene__ring circle:first-child { animation: sc-spin 46s linear infinite; }

@keyframes sc-beacon {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
@keyframes sc-ping {
  0% { opacity: 0.85; transform: scale(0.55); }
  70%, 100% { opacity: 0; transform: scale(1.4); }
}
@keyframes sc-lamp { from { opacity: 0; } to { opacity: 1; } }
@keyframes sc-rise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
@keyframes sc-pop {
  from { opacity: 0; transform: scale(0.72); }
  to { opacity: 1; transform: none; }
}
@keyframes sc-dash { to { stroke-dashoffset: -28; } }
@keyframes sc-spin { to { transform: rotate(360deg); } }

/* ---- caption + progress ticks ------------------------------------------- */
.story__scene-caption {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: 0;
  font-size: var(--step--1);
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(185, 196, 221, 0.8);
}
.story__scene-step {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--orange-400);
  letter-spacing: 0;
}

.story__ticks {
  display: flex;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.story__ticks li {
  margin: 0;
  height: 3px;
  flex: 1;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.14);
  transition: background-color var(--dur) var(--ease);
}
.story__ticks li[data-active="true"] { background: var(--orange-500); }

/* ---- the steps ---------------------------------------------------------- */
/* 34vh per step across ten steps meant four screens of mostly empty scrolling.
   Each step is now sized by its own copy with a modest floor, which brings the
   section to roughly two viewports. */
.story__steps { padding-block: var(--sp-5); margin: 0; }
.story__step {
  min-height: 17vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--sp-5);
  border-left: 2px solid rgba(255, 255, 255, 0.09);
  padding-left: var(--sp-6);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease);
}
.story__step[data-active="true"] { border-left-color: var(--orange-500); }
.story__step-label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(185, 196, 221, 0.7);
  margin-bottom: var(--sp-2);
  transition: color var(--dur) var(--ease);
}
.story__step[data-active="true"] .story__step-label { color: var(--orange-400); }
.story__step h3 {
  font-size: var(--step-2);
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: var(--sp-2);
  transition: color var(--dur) var(--ease);
}
.story__step[data-active="true"] h3 { color: #fff; }
.story__step p {
  color: rgba(185, 196, 221, 0.7);
  max-width: 48ch;
  margin: 0;
  transition: color var(--dur) var(--ease);
}
.story__step[data-active="true"] p { color: rgba(226, 233, 248, 0.9); }

@media (prefers-reduced-motion: reduce) {
  .scene__beacon,
  .scene__ping circle:first-child,
  .scene__occupancy rect,
  .scene__sheet,
  .scene__node,
  .scene__badge,
  .scene__flow path,
  .scene__ring circle:first-child { animation: none; }
}

/* --------------------------------------------------------------------------
   6. Split feature blocks
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-7);
  align-items: center;
}
.split--reverse .split__media { order: -1; }
.split__media {
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface-alt);
}

.check-list { list-style: none; padding: 0; margin: 0; }
.check-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding-block: var(--sp-2);
  color: var(--ink-700);
}
.check-list svg {
  width: 1.15rem; height: 1.15rem;
  flex: none;
  margin-top: 0.15rem;
  color: var(--green-600);
}
.section--navy .check-list li { color: rgba(226, 233, 248, 0.88); }
.section--navy .check-list svg { color: var(--green-500); }

/* --------------------------------------------------------------------------
   7. Console preview strip
   -------------------------------------------------------------------------- */
.console-preview {
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}
.console-preview__bar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--navy-850);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.console-preview__dots { display: flex; gap: 6px; }
.console-preview__dots i {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
}
.console-preview__path {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: rgba(185, 196, 221, 0.75);
  padding: 2px 10px;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.06);
}
/* The artwork is the point of this section, so it gets the full width of the
   frame and the padding only wraps the chrome around it. */
.console-preview__body { background: var(--surface-alt); }

.console-tabs {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  padding: var(--sp-4) var(--sp-5);
  margin: 0;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.console-tab {
  padding: 0.62rem 1.05rem;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink-600);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
}
.console-tab:hover { border-color: var(--navy-400); color: var(--navy-700); }
.console-tab[aria-selected="true"] {
  background: var(--navy-700);
  border-color: var(--navy-700);
  color: #fff;
}
.console-panel[hidden] { display: none; }

/* Full-bleed inside the browser frame: at 1440 this renders the 1120px-wide
   drawing at roughly 1.2x, so its smallest label lands above 12px instead of
   the ~6px it reached at half scale. */
.console-shot {
  margin: 0;
  background: var(--surface-alt);
  border-bottom: 1px solid var(--line);
}
.console-shot img {
  display: block;
  width: 100%;
  height: auto;
}

/* Supporting copy sits under the dashboard rather than stealing half the row
   from it. */
.console-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: var(--sp-5) clamp(var(--sp-6), 4vw, var(--sp-8));
  align-items: start;
  padding: clamp(var(--sp-5), 2vw, var(--sp-6)) clamp(var(--sp-5), 2vw, var(--sp-6));
}
.console-detail__intro h3 { font-size: var(--step-2); margin-bottom: var(--sp-2); }
.console-detail__intro p { color: var(--ink-600); margin-bottom: var(--sp-3); }
.console-detail .check-list { margin: 0; }

@media (max-width: 860px) {
  .console-detail { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   8. Number counters
   -------------------------------------------------------------------------- */
.counter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--sp-5);
}
.counter {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
}
.counter__icon {
  display: grid; place-items: center;
  width: 3rem; height: 3rem;
  border-radius: var(--r-pill);
  background: var(--orange-050);
  color: var(--orange-600);
  flex: none;
}
.counter__icon svg { width: 1.4rem; height: 1.4rem; }
.counter__value {
  font-size: var(--step-3);
  font-weight: 700;
  color: var(--navy-800);
  letter-spacing: -0.03em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.counter__label { font-size: var(--step--1); color: var(--ink-500); }

/* --------------------------------------------------------------------------
   9. CTA band
   -------------------------------------------------------------------------- */
/* The closing band is the conversion moment, so it is sized like one: a little
   over half a screen rather than the 419px strip it used to be. */
.cta-band {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: clamp(32.5rem, 52vh, 40.5rem);
  border-radius: var(--r-xl);
  /* Fixed block padding: a vw-based value kept adding height on ultrawide and
     pushed the band past the 650px ceiling. */
  padding: var(--sp-8) var(--sp-7);
  background:
    radial-gradient(90% 120% at 88% 8%, rgba(244, 88, 28, 0.3) 0%, transparent 60%),
    radial-gradient(70% 90% at 6% 96%, rgba(42, 67, 146, 0.55) 0%, transparent 62%),
    linear-gradient(140deg, var(--navy-800) 0%, var(--navy-900) 100%);
  color: #fff;
  overflow: hidden;
  text-align: center;
  isolation: isolate;
}
/* Two architectural passes behind the copy: a drawing grid, and a skyline
   drawn in the same blueprint blue as the hero. Both stay well under the text
   contrast threshold. */
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(rgba(120, 160, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120, 160, 255, 0.07) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(78% 80% at 50% 40%, #000 15%, transparent 100%);
}
.cta-band::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: -1;
  height: clamp(7rem, 16vh, 11rem);
  opacity: 0.5;
  background-repeat: repeat-x;
  background-position: bottom center;
  background-size: auto 100%;
  /* Elevation strip: towers of varying height with a lit window grid. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='180' viewBox='0 0 640 180'%3E%3Cg fill='%232a4392' fill-opacity='.55'%3E%3Crect x='0' y='74' width='58' height='106'/%3E%3Crect x='68' y='38' width='44' height='142'/%3E%3Crect x='122' y='96' width='66' height='84'/%3E%3Crect x='198' y='18' width='52' height='162'/%3E%3Crect x='260' y='68' width='38' height='112'/%3E%3Crect x='308' y='104' width='72' height='76'/%3E%3Crect x='390' y='46' width='48' height='134'/%3E%3Crect x='448' y='88' width='58' height='92'/%3E%3Crect x='516' y='30' width='42' height='150'/%3E%3Crect x='568' y='80' width='72' height='100'/%3E%3C/g%3E%3Cg fill='%238fb0ff' fill-opacity='.4'%3E%3Crect x='10' y='86' width='7' height='9'/%3E%3Crect x='24' y='86' width='7' height='9'/%3E%3Crect x='38' y='86' width='7' height='9'/%3E%3Crect x='10' y='106' width='7' height='9'/%3E%3Crect x='38' y='106' width='7' height='9'/%3E%3Crect x='78' y='50' width='7' height='9'/%3E%3Crect x='92' y='50' width='7' height='9'/%3E%3Crect x='78' y='70' width='7' height='9'/%3E%3Crect x='92' y='70' width='7' height='9'/%3E%3Crect x='78' y='90' width='7' height='9'/%3E%3Crect x='208' y='30' width='7' height='9'/%3E%3Crect x='222' y='30' width='7' height='9'/%3E%3Crect x='208' y='50' width='7' height='9'/%3E%3Crect x='236' y='50' width='7' height='9'/%3E%3Crect x='208' y='70' width='7' height='9'/%3E%3Crect x='222' y='70' width='7' height='9'/%3E%3Crect x='400' y='58' width='7' height='9'/%3E%3Crect x='414' y='58' width='7' height='9'/%3E%3Crect x='400' y='78' width='7' height='9'/%3E%3Crect x='428' y='78' width='7' height='9'/%3E%3Crect x='526' y='42' width='7' height='9'/%3E%3Crect x='540' y='42' width='7' height='9'/%3E%3Crect x='526' y='62' width='7' height='9'/%3E%3Crect x='540' y='62' width='7' height='9'/%3E%3Crect x='526' y='82' width='7' height='9'/%3E%3C/g%3E%3C/svg%3E");
}
.cta-band > * { position: relative; }
.cta-band .eyebrow { justify-content: center; }
.cta-band h2 {
  color: #fff;
  font-size: var(--step-4);
  line-height: 1.05;
  letter-spacing: -0.03em;
  max-width: 20ch;
  margin-inline: auto;
  text-wrap: balance;
}
.cta-band p {
  color: rgba(226, 233, 248, 0.82);
  max-width: 54ch;
  margin-inline: auto;
}
.cta-band__actions {
  display: flex; flex-wrap: wrap; gap: var(--sp-4);
  justify-content: center; margin-top: var(--sp-7);
}
.cta-band__note {
  margin: var(--sp-6) 0 0;
  font-size: var(--step--1);
  color: rgba(185, 196, 221, 0.72);
}

/* --------------------------------------------------------------------------
   10. Audience / solution pages
   -------------------------------------------------------------------------- */
.page-hero {
  padding-block: var(--sp-8) var(--sp-7);
  background:
    radial-gradient(80% 120% at 92% 0%, rgba(42, 67, 146, 0.4) 0%, transparent 58%),
    linear-gradient(160deg, var(--navy-850) 0%, var(--navy-900) 100%);
  color: #fff;
}
.page-hero h1 { color: #fff; max-width: 20ch; }
.page-hero .lede { color: rgba(226, 233, 248, 0.84); }
.page-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: var(--sp-7);
  align-items: center;
}
.page-hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  list-style: none;
  padding: 0;
  margin: 0 0 var(--sp-4);
  font-size: var(--step--1);
  color: var(--ink-500);
}
.breadcrumb li { margin: 0; display: flex; align-items: center; gap: var(--sp-2); }
.breadcrumb li + li::before { content: "/"; color: var(--ink-300); }
.breadcrumb a { color: inherit; text-decoration: none; }
.breadcrumb a:hover { color: var(--orange-600); }
.page-hero .breadcrumb { color: rgba(185, 196, 221, 0.75); }
.page-hero .breadcrumb a:hover { color: #fff; }

/* Positioning panel (what TrustBrick is / is not) ------------------------- */
.positioning {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5);
}
.positioning__col {
  padding: var(--sp-5);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--surface);
}
.positioning__col h3 {
  display: flex; align-items: center; gap: var(--sp-3);
  font-size: var(--step-0);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--sp-4);
}
.positioning__col ul { list-style: none; padding: 0; margin: 0; }
.positioning__col li {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding-block: var(--sp-2);
  font-size: 0.93rem;
}
.positioning__col svg { width: 1.05rem; height: 1.05rem; flex: none; margin-top: 0.18rem; }
.positioning--is { border-top: 3px solid var(--green-500); }
.positioning--is svg { color: var(--green-600); }
.positioning--is h3 { color: var(--green-700); }
.positioning--isnt { border-top: 3px solid var(--ink-400); }
.positioning--isnt svg { color: var(--ink-400); }
.positioning--isnt h3 { color: var(--ink-600); }
.positioning--isnt li { color: var(--ink-500); }

/* --------------------------------------------------------------------------
   11. Onboarding timeline (enterprise)
   -------------------------------------------------------------------------- */
.phases {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  counter-reset: phase;
}
.phase {
  position: relative;
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-right-width: 0;
  background: var(--surface);
  cursor: pointer;
  text-align: left;
  transition: background-color var(--dur) var(--ease);
}
.phase:first-child { border-radius: var(--r-lg) 0 0 var(--r-lg); }
.phase:last-child { border-right-width: 1px; border-radius: 0 var(--r-lg) var(--r-lg) 0; }
.phase::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--orange-500);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.phase[aria-selected="true"] { background: var(--navy-050); }
.phase[aria-selected="true"]::after { transform: scaleX(1); }
.phase__num {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--orange-600);
}
.phase h3 { font-size: var(--step-1); margin: var(--sp-2) 0; }
.phase p { font-size: 0.88rem; color: var(--ink-500); margin: 0; }

.phase-detail {
  margin-top: var(--sp-5);
  padding: var(--sp-6);
  border-radius: var(--r-lg);
  background: var(--surface-alt);
  border: 1px solid var(--line);
}
.phase-detail[hidden] { display: none; }

/* --------------------------------------------------------------------------
   12. Pipeline diagram (broker)
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   13. Lifecycle ribbon (operations)
   -------------------------------------------------------------------------- */
.ribbon {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  list-style: none;
  padding: 0;
  margin: 0;
}
.ribbon li {
  flex: 1 1 120px;
  margin: 0;
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: var(--step--1);
}
.ribbon strong { display: block; color: var(--navy-700); margin-bottom: 2px; }
.ribbon span { color: var(--ink-500); font-size: 0.8rem; line-height: 1.4; }
/* ==========================================================================
   Product detail
   ========================================================================== */
.product-hero {
  padding-block: var(--sp-7) var(--sp-6);
  background:
    linear-gradient(180deg, var(--navy-050) 0%, var(--surface) 100%);
  border-bottom: 1px solid var(--line);
}
.product-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: var(--sp-7);
  align-items: start;
}
.product-hero__num {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--orange-600);
  margin-bottom: var(--sp-2);
}
.product-hero h1 { font-size: var(--step-4); line-height: 1.1; margin-bottom: var(--sp-3); }
@media (max-width: 980px) {
  .product-hero__grid { grid-template-columns: minmax(0, 1fr); }
}

/* Buy box ------------------------------------------------------------------ */
.buy-box {
  position: sticky;
  top: calc(var(--header-h) + var(--sp-5));
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}
.buy-box__price {
  font-size: var(--step-3);
  font-weight: 700;
  color: var(--navy-800);
  line-height: 1.1;
}
.buy-box .btn { width: 100%; justify-content: center; margin-top: var(--sp-4); }
.buy-box__facts { margin: var(--sp-5) 0 0; display: grid; gap: var(--sp-3); }
.buy-box__facts > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line-soft);
  font-size: 0.9rem;
}
.buy-box__facts > div:last-child { border-bottom: 0; padding-bottom: 0; }
.buy-box__facts dt {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--ink-500);
  flex: none;
}
.buy-box__facts dt svg { width: 0.9rem; height: 0.9rem; color: var(--ink-400); }
.buy-box__facts dd {
  margin: 0;
  color: var(--ink-800);
  font-weight: 650;
  text-align: right;
}
.buy-box__note {
  margin-top: var(--sp-4);
  padding: var(--sp-3);
  border-radius: var(--r-md);
  background: var(--surface-alt);
  font-size: var(--step--1);
  color: var(--ink-600);
  line-height: 1.55;
}
.buy-box__owned {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border-radius: var(--r-md);
  background: var(--green-050);
  border: 1px solid var(--green-100);
  color: var(--green-700);
  font-weight: 650;
  font-size: 0.92rem;
}
.buy-box__owned svg { width: 1.1rem; height: 1.1rem; flex: none; }
@media (max-width: 980px) { .buy-box { position: static; } }

/* Feature list ------------------------------------------------------------- */
.feature-group__title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin-bottom: var(--sp-3);
}
.feature-list { list-style: none; padding: 0; margin: 0 0 var(--sp-6); display: grid; gap: var(--sp-2); }
.feature-list li {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  padding: var(--sp-2) 0;
  color: var(--ink-700);
  font-size: 0.95rem;
  line-height: 1.5;
}
.feature-list__mark { flex: none; color: var(--green-600); margin-top: 2px; }
.feature-list__mark svg { width: 1rem; height: 1rem; }

/* Included resources ------------------------------------------------------- */
.resource-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-2); }
.resource-list li {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
.resource-list__format {
  flex: none;
  display: grid;
  place-items: center;
  min-width: 3.1rem;
  padding: 0.2rem 0.45rem;
  border-radius: var(--r-sm);
  background: var(--navy-050);
  color: var(--navy-600);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.resource-list__text { flex: 1; min-width: 0; }
.resource-list__text strong { display: block; font-weight: 650; color: var(--ink-800); font-size: 0.94rem; }
.resource-list__text span { display: block; font-size: var(--step--1); color: var(--ink-500); }
.resource-list__meta { flex: none; font-size: var(--step--1); color: var(--ink-400); }

/* Checklist preview -------------------------------------------------------- */
.checklist-preview {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface-alt);
  padding: var(--sp-5);
}
.checklist-preview__group + .checklist-preview__group { margin-top: var(--sp-5); }
.checklist-preview__group > h3 {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy-700);
  margin-bottom: var(--sp-3);
}
.checklist-preview__num {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--orange-600);
}
.checklist-preview__box {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 0.9rem;
  color: var(--ink-700);
}
.checklist-preview__box + .checklist-preview__box { margin-top: var(--sp-2); }
.checklist-preview__box::before {
  content: "";
  flex: none;
  width: 1rem; height: 1rem;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-xs);
  background: var(--surface);
}

/* ==========================================================================
   Property detail gallery
   ========================================================================== */
.gallery { display: grid; gap: var(--sp-3); }
.gallery__main {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--r-lg);
  background: var(--surface-sunk);
}
.gallery__thumbs {
  display: flex;
  gap: var(--sp-2);
  overflow-x: auto;
  padding-bottom: var(--sp-2);
  scrollbar-width: thin;
}
.gallery__thumb {
  flex: none;
  width: 92px;
  aspect-ratio: 4 / 3;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--r-md);
  overflow: hidden;
  background: none;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease);
}
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery__thumb:hover { border-color: var(--navy-400); }
.gallery__thumb[aria-current="true"] { border-color: var(--orange-500); }

/* ==========================================================================
   Catalogue layout
   ========================================================================== */
.catalogue-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: start;
}
.catalogue-filters {
  position: sticky;
  top: calc(var(--header-h) + var(--sp-5));
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.filter-group { margin-bottom: var(--sp-5); }
.filter-group:last-child { margin-bottom: 0; }
.filter-group > legend, .filter-group > .field__label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin-bottom: var(--sp-3);
  padding: 0;
}
@media (max-width: 980px) {
  .catalogue-layout { grid-template-columns: minmax(0, 1fr); }
  .catalogue-filters { position: static; }
}

/* ==========================================================================
   Solutions — lifecycle stages
   ========================================================================== */
.stage-list { display: grid; gap: var(--sp-3); }
.stage-row {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  gap: var(--sp-4);
  align-items: center;
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.stage-row:hover {
  border-color: var(--navy-400);
  transform: translateX(3px);
  box-shadow: var(--shadow-md);
}
.stage-row__num {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink-400);
}
.stage-row__icon {
  display: grid;
  place-items: center;
  width: 2.6rem; height: 2.6rem;
  border-radius: var(--r-md);
  background: var(--navy-050);
  color: var(--navy-600);
}
.stage-row__icon svg { width: 1.2rem; height: 1.2rem; }
.stage-row__body h3 { font-size: 1.02rem; margin: 0 0 2px; }
.stage-row__body h3 a { color: var(--ink-900); text-decoration: none; }
.stage-row__body h3 a:hover { color: var(--orange-600); }
.stage-row__body > p { color: var(--ink-500); font-size: 0.92rem; margin: 0; }
.stage-row__body .check-list { margin-top: var(--sp-2); }
.stage-row__products {
  font-size: var(--step--1);
  color: var(--ink-400);
  white-space: nowrap;
}
.stage-row__mark { color: var(--ink-300); flex: none; }
.stage-row:hover .stage-row__mark { color: var(--orange-500); }
@media (max-width: 720px) {
  .stage-row { grid-template-columns: auto minmax(0, 1fr); }
  .stage-row__products, .stage-row__mark { display: none; }
}

.stage-nav { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.stage-nav__num { font-family: var(--font-mono); font-size: 0.72rem; color: var(--orange-600); }

.stage-pager {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-7);
}
.stage-pager__link {
  display: block;
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  text-decoration: none;
  background: var(--surface);
  transition: border-color var(--dur-fast) var(--ease);
}
.stage-pager__link:hover { border-color: var(--navy-400); }
.stage-pager__link span { display: block; font-size: var(--step--1); color: var(--ink-500); }
.stage-pager__link strong { display: block; color: var(--navy-800); font-weight: 650; margin-top: 2px; }
.stage-pager__link--next { text-align: right; }

.feature--link { text-decoration: none; display: block; }
.feature--link:hover { border-color: var(--navy-400); }

/* Enterprise control cards ------------------------------------------------- */
.control-card {
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  border-top: 3px solid var(--navy-500);
}
.control-card h3 { font-size: var(--step-1); margin-bottom: var(--sp-2); }
.control-card > p { color: var(--ink-600); font-size: 0.94rem; }

.field-list { list-style: none; padding: 0; margin: var(--sp-4) 0 0; display: grid; gap: var(--sp-1); }
.field-list li {
  display: flex;
  gap: var(--sp-2);
  align-items: baseline;
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 0.88rem;
  color: var(--ink-600);
}
.field-list li:last-child { border-bottom: 0; }
.field-list li::before {
  content: "";
  flex: none;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--orange-400);
}

.page-hero--enterprise {
  background: linear-gradient(160deg, var(--navy-900) 0%, var(--navy-700) 100%);
  color: #fff;
}
.page-hero--enterprise h1, .page-hero--enterprise h2 { color: #fff; }
.page-hero--enterprise p { color: var(--navy-200); }
.page-hero--enterprise .eyebrow { color: var(--orange-400); }

/* Light pipeline variant --------------------------------------------------- */
/* ==========================================================================
   Enterprise onboarding timeline
   ========================================================================== */
.onboarding-timeline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}
.onboarding-phase {
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.onboarding-phase:hover { border-color: var(--navy-400); }
.onboarding-phase[aria-selected="true"], .onboarding-phase.is-active {
  border-color: var(--navy-600);
  box-shadow: inset 0 0 0 1px var(--navy-600);
}
.onboarding-phase__num {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--orange-600);
}
.onboarding-phase__label {
  display: block;
  font-size: var(--step-1);
  font-weight: 700;
  color: var(--navy-800);
  letter-spacing: 0.02em;
  margin: var(--sp-1) 0 var(--sp-2);
}
.onboarding-phase__meta { display: block; font-size: var(--step--1); color: var(--ink-500); }
.onboarding-phase__track {
  height: 3px;
  border-radius: var(--r-pill);
  background: var(--line);
  overflow: hidden;
  margin-top: var(--sp-3);
}
.onboarding-phase__fill {
  height: 100%;
  width: 0;
  background: var(--orange-500);
  border-radius: inherit;
  transition: width var(--dur-slow) var(--ease);
}

.step-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-2); }
.step-list__item {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
.step-list__check { flex: none; color: var(--ink-300); margin-top: 2px; }
.step-list__check svg { width: 1.05rem; height: 1.05rem; }
.step-list__item[data-complete="true"] .step-list__check { color: var(--green-600); }
.step-list__text { flex: 1; min-width: 0; }
.step-list__text strong { display: block; font-weight: 650; color: var(--ink-800); font-size: 0.94rem; }
.step-list__text span { display: block; font-size: var(--step--1); color: var(--ink-500); }
.step-list__meta { flex: none; font-size: var(--step--1); color: var(--ink-400); }

/* ==========================================================================
   Property visit tool
   ========================================================================== */
.visit-items { display: grid; gap: var(--sp-2); }
.visit-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-3) var(--sp-4);
  align-items: center;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
.visit-item__label { font-size: 0.94rem; color: var(--ink-800); font-weight: 600; }
.visit-item__note { grid-column: 1 / -1; }
.visit-item__scale { display: flex; gap: var(--sp-1); }
.visit-dot {
  width: 2rem; height: 2rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink-500);
  font-size: 0.82rem;
  font-weight: 650;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
}
.visit-dot:hover { border-color: var(--navy-400); color: var(--navy-700); }
.visit-dot[aria-pressed="true"] {
  background: var(--navy-600);
  border-color: var(--navy-600);
  color: #fff;
}
.visit-dot[aria-pressed="true"][data-scale="1"],
.visit-dot[aria-pressed="true"][data-scale="2"] {
  background: var(--critical); border-color: var(--critical);
}
.visit-dot[aria-pressed="true"][data-scale="3"] {
  background: var(--warning); border-color: var(--warning);
}
.visit-dot[aria-pressed="true"][data-scale="4"],
.visit-dot[aria-pressed="true"][data-scale="5"] {
  background: var(--green-600); border-color: var(--green-600);
}

.visit-score {
  position: sticky;
  top: calc(var(--header-h) + var(--sp-5));
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.visit-score__total {
  font-size: var(--step-4);
  font-weight: 700;
  line-height: 1;
  color: var(--navy-800);
  font-variant-numeric: tabular-nums;
}
.visit-score__verdict {
  display: inline-block;
  margin-top: var(--sp-2);
  font-weight: 650;
  color: var(--ink-600);
}
.visit-score__breakdown { list-style: none; padding: 0; margin: var(--sp-5) 0 0; display: grid; gap: var(--sp-3); }
.section-score {
  display: inline-block;
  min-width: 3.2rem;
  padding: 0.15rem 0.5rem;
  border-radius: var(--r-sm);
  background: var(--surface-alt);
  color: var(--ink-500);
  font-size: 0.85rem;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.section-score[data-tone="positive"] { background: var(--green-050); color: var(--green-700); }
.section-score[data-tone="warning"] { background: var(--warning-bg); color: var(--warning); }
.section-score[data-tone="critical"] { background: var(--critical-bg); color: var(--critical); }

.visit-slots { display: grid; gap: var(--sp-2); }
.visit-slot {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
.visit-slot__key {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.8rem; height: 1.8rem;
  border-radius: var(--r-sm);
  background: var(--navy-050);
  color: var(--navy-600);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
}
.visit-slot__text { flex: 1; min-width: 0; }
.visit-slot__text strong { display: block; font-size: 0.92rem; color: var(--ink-800); }
.visit-slot__text span { display: block; font-size: var(--step--1); color: var(--ink-500); }
@media (max-width: 980px) { .visit-score { position: static; } }

/* ==========================================================================
   Platform phases - the four-stage summary of the property lifecycle
   ========================================================================== */
.phases {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(var(--sp-4), 1.6vw, var(--sp-6));
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: none;
}

.phase-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(var(--sp-5), 2vw, var(--sp-7));
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
/* The accent rail fills on hover, tying the four cards into one sequence. */
.phase-card::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--orange-500), var(--orange-400));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease);
}
.phase-card:hover {
  border-color: var(--navy-400);
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.phase-card:hover::before { transform: scaleX(1); }

.phase-card__num {
  position: absolute;
  top: clamp(var(--sp-4), 1.6vw, var(--sp-5));
  right: clamp(var(--sp-4), 1.6vw, var(--sp-5));
  font-family: var(--font-mono);
  font-size: clamp(2.4rem, 3.4vw, 3.6rem);
  font-weight: 700;
  line-height: 1;
  color: var(--navy-050);
  pointer-events: none;
}
.phase-card__icon {
  display: grid;
  place-items: center;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: var(--r-lg);
  background: var(--navy-050);
  color: var(--navy-600);
  margin-bottom: var(--sp-5);
}
.phase-card__icon svg { width: 1.6rem; height: 1.6rem; }
.phase-card:hover .phase-card__icon { background: var(--orange-050); color: var(--orange-600); }

.phase-card__label {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange-600);
  margin-bottom: var(--sp-2);
}
.phase-card__title {
  font-size: var(--step-2);
  margin-bottom: var(--sp-3);
  color: var(--navy-800);
}
.phase-card__body {
  color: var(--ink-600);
  line-height: 1.6;
  margin-bottom: var(--sp-5);
}

.phase-card__stages {
  list-style: none;
  margin: 0 0 var(--sp-5);
  padding: var(--sp-4) 0 0;
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.phase-card__stages a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.34rem 0.7rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--surface-alt);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-600);
  text-decoration: none;
  transition: all var(--dur-fast) var(--ease);
}
.phase-card__stages a:hover {
  border-color: var(--navy-400);
  background: var(--navy-050);
  color: var(--navy-800);
}
.phase-card__stage-num {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--orange-600);
}

.phase-card__cta { margin-top: auto; font-size: 0.95rem; }

@media (max-width: 1280px) {
  .phases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .phases { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Solutions band - five groups on a deep navy field
   ========================================================================== */
.solutions-band {
  padding-block: var(--section-y);
  background:
    radial-gradient(90% 120% at 15% 0%, rgba(42, 67, 146, 0.5) 0%, transparent 58%),
    radial-gradient(70% 90% at 92% 100%, rgba(244, 88, 28, 0.14) 0%, transparent 60%),
    linear-gradient(170deg, var(--navy-900) 0%, var(--navy-850) 55%, #0c1837 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
/* Architectural rule lines, echoing the hero blueprint. */
.solutions-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(90deg, rgba(120, 160, 255, 0.06) 1px, transparent 1px);
  background-size: 96px 100%;
  mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent);
  z-index: -1;
}
.solutions-band h2 { color: #fff; }
.solutions-band .eyebrow { color: var(--orange-400); }

/* Six shelves, one per marketplace category, so every card's CTA is the same
   kind of link (/products?category=...) instead of a mix of category filters
   and one-off landing pages. 3 x 2 divides evenly; 5 left an orphan. */
.solution-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(var(--sp-3), 1.2vw, var(--sp-5));
  list-style: none;
  margin: 0;
  padding: 0;
}

.solution-card {
  display: flex;
  flex-direction: column;
  padding: clamp(var(--sp-5), 1.8vw, var(--sp-6));
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(2px);
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.solution-card:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.28);
  transform: translateY(-4px);
}

.solution-card__icon {
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.08);
  margin-bottom: var(--sp-4);
}
.solution-card__icon svg { width: 1.35rem; height: 1.35rem; }
.solution-card[data-accent="orange"] .solution-card__icon { color: var(--orange-400); }
.solution-card[data-accent="green"] .solution-card__icon { color: #3ddc84; }
.solution-card[data-accent="navy"] .solution-card__icon { color: #8fb0ff; }

.solution-card__title {
  font-size: var(--step-1);
  color: #fff;
  margin-bottom: var(--sp-2);
}
.solution-card[data-accent="orange"] .solution-card__title { color: var(--orange-400); }
.solution-card[data-accent="green"] .solution-card__title { color: #3ddc84; }
.solution-card[data-accent="navy"] .solution-card__title { color: #8fb0ff; }

.solution-card__summary {
  font-size: 0.9rem;
  line-height: 1.55;
  color: rgba(226, 233, 248, 0.78);
  margin-bottom: var(--sp-4);
}

.solution-card__list {
  list-style: none;
  margin: 0 0 var(--sp-5);
  padding: 0;
  display: grid;
  gap: var(--sp-2);
}
.solution-card__list li { position: relative; padding-left: var(--sp-4); }
.solution-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
}
.solution-card__list a {
  color: rgba(226, 233, 248, 0.92);
  font-size: 0.86rem;
  line-height: 1.45;
  text-decoration: none;
}
.solution-card__list a:hover { color: #fff; text-decoration: underline; }

.solution-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: auto;
  padding-top: var(--sp-4);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.solution-card__price { font-size: 1.15rem; font-weight: 700; color: #fff; }
.solution-card__price small {
  display: block;
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(185, 196, 221, 0.75);
}
.solution-card__cta {
  display: grid;
  place-items: center;
  width: 2.3rem; height: 2.3rem;
  flex: none;
  border-radius: 50%;
  background: var(--orange-500);
  color: #fff;
  transition: transform var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.solution-card__cta svg { width: 1.05rem; height: 1.05rem; }
.solution-card:hover .solution-card__cta { transform: translateX(3px); background: var(--orange-400); }

@media (max-width: 900px) {
  .solution-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .solution-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Toolkit finder - one question, three matched resources
   ========================================================================== */
.finder { background: var(--surface-alt); }

.finder__form { margin-bottom: clamp(var(--sp-6), 3vw, var(--sp-8)); }
.finder__form fieldset { border: 0; margin: 0; padding: 0; }

.finder__question {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: var(--sp-5);
  text-align: center;
  font-size: var(--step-1);
  font-weight: 700;
  color: var(--navy-800);
  letter-spacing: -0.01em;
}

.finder__options {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(var(--sp-3), 1vw, var(--sp-4));
}
@media (max-width: 1180px) {
  .finder__options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .finder__options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .finder__option { min-height: 11.5rem; }
}

/* 211x150 tiles read as chips rather than choices. More height, a bigger icon
   and room for the blurb make the question feel worth answering. */
.finder__option {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--sp-3);
  min-height: 13.5rem;
  padding: clamp(var(--sp-5), 2vw, var(--sp-6)) var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  text-align: center;
  cursor: pointer;
  font: inherit;
  transition: border-color var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.finder__option:hover {
  border-color: var(--navy-400);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.finder__option:focus-visible {
  outline: 2px solid var(--navy-500);
  outline-offset: 3px;
}

.finder__option-icon {
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  border-radius: var(--r-lg);
  background: var(--navy-050);
  color: var(--navy-600);
  transition: background-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.finder__option-icon svg { width: 1.95rem; height: 1.95rem; }

.finder__option-label {
  font-size: var(--step-1);
  font-weight: 700;
  color: var(--navy-800);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.finder__option-blurb {
  font-size: 0.86rem;
  color: var(--ink-500);
  line-height: 1.45;
}

/* Selected state - the orange rail matches the rest of the page. */
.finder__option[aria-checked="true"] {
  border-color: var(--orange-500);
  background: var(--orange-050);
  box-shadow: inset 0 0 0 1px var(--orange-500);
}
.finder__option[aria-checked="true"] .finder__option-icon {
  background: var(--orange-500);
  color: #fff;
}
.finder__option[aria-checked="true"] .finder__option-blurb { color: var(--orange-700); }

.finder__result-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3) var(--sp-5);
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--line);
}
.finder__reason {
  margin: 0;
  font-size: var(--step-1);
  font-weight: 600;
  color: var(--navy-800);
  max-width: 62ch;
}

.finder__result [data-finder-products] {
  transition: opacity var(--dur) var(--ease);
}
.finder__note { margin-top: var(--sp-5); }

@media (max-width: 1180px) {
  .finder__options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .finder__options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .finder__option { padding: var(--sp-4) var(--sp-2); }
  .finder__option-icon { width: 2.5rem; height: 2.5rem; }
}