/* ============================================================
   landing-build.css, OPTION 6's FOURTH FOLD: Build Dashboard.

   The third product section, and the third module colour. It is the same fold
   language as the two above it, so the page reads as one thing: the same grid,
   the same type ramp, the same CTA, the same measure for the copy.

   THE COLOUR IS ONE DECISION. The section carries `data-module="dashboard"`,
   so --accent resolves to Cyan and --glow to the dashboard's ambient, exactly
   as the Build Dashboard module resolves them in the app. Every colour below is
   mixed from those tokens rather than written down, which is why the heading's
   emphasis and the CTA come out in the module's own colour without a single
   component being restyled.

   THE RIGHT HALF IS RESERVED AND EMPTY. The column is held at the same measure
   the folds above give their product areas and nothing is painted into it: no
   box, no placeholder, no animation. The dashboard interaction goes there.
   ============================================================ */

.lp-build{display:none}
/* OPAQUE, like every fold below the hero, and for the same reason: .lp-flow
   and .lp-bg are both position:fixed and keep painting behind every section as
   you scroll, so only a ground laid over them removes the hero's animation.

   THE RAMP STARTS AND ENDS ON #141519. That is the ground both folds above it
   sit on, and it is the last colour the purple fold fades back to, so this
   section joins it with no edge, carries the deep sea through its middle, and
   returns to the same colour before the page ends. The two radial washes are
   the module's own accent, mixed rather than written, and they sit on opposite
   diagonals so the field has a direction instead of a centre.

   The deep sea itself is the dashboard module's own background colour, the
   navy at rgb(18,28,47) that bg-trace.css paints under the app's dashboard. */
html[data-lp-option="6"] .lp-build{display:flex;position:relative;z-index:1;
  overflow:clip;
  min-height:100dvh;align-items:center;
  padding-block:clamp(56px,8vh,104px);
  background:
    radial-gradient(ellipse 66% 44% at 84% 34%,
      color-mix(in srgb, var(--accent) 16%, transparent) 0%, transparent 66%),
    radial-gradient(ellipse 58% 38% at 12% 72%,
      color-mix(in srgb, var(--accent) 10%, transparent) 0%, transparent 66%),
    linear-gradient(180deg, #141519 0%, #141519 6%, #121d2e 42%, #101f2e 68%,
                    #141519 96%, #141519 100%)}
html[data-lp-option="6"] .lp-build > .lp-wrap{flex:1}

/* ---- the two halves ----------------------------------------------------
   The same split the fold above uses, so the three product sections line up
   down the page rather than each finding its own edge. */
.lp-build__in{display:grid;align-items:center;
  grid-template-columns:minmax(0,1fr) clamp(560px,60%,860px);
  column-gap:clamp(36px,4.4vw,80px)}

.lp-build__copy{position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:flex-start;
  gap:clamp(16px,1.8vh,24px);max-width:450px}
/* ONE TYPE SYSTEM ACROSS THE WHOLE OPTION. Identical to .lp-film3__h and
   .lp-intel__h: 500 weight, eased tracking, 1.06 leading. The emphasis is the
   only weight change in the ramp, at 600, and it takes the module accent,
   which here is Cyan because this fold is the Dashboard module. */
.lp-build__h{font-size:clamp(33px,3.5vw,54px);line-height:1.06;font-weight:500;
  letter-spacing:-.028em;color:#fff;text-wrap:balance}
.lp-build__h em{font-style:normal;font-weight:600;color:var(--accent)}
.lp-build__sub{font-size:clamp(15px,1.15vw,17.5px);line-height:1.62;font-weight:400;
  color:rgba(255,255,255,.7);max-width:46ch}
.lp-build__cta{margin-top:6px}

@keyframes lpbRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.lp-build__copy{animation:lpbRise .7s var(--ease) both}

/* THE RESERVED HALF. It holds the column open at the height the product areas
   above it occupy, so the fold has the same proportions as its neighbours
   while it waits, and it paints nothing at all. */
.lp-build__stage{min-height:clamp(540px,74dvh,740px)}

/* ---- narrower windows -------------------------------------------------- */
@media (max-width:1240px){
  html[data-lp-option="6"] .lp-build{min-height:0;display:block;
    padding-block:clamp(60px,9vh,110px)}
  .lp-build__in{grid-template-columns:1fr;row-gap:clamp(32px,4vh,48px)}
  .lp-build__copy{max-width:none}
  /* stacked, an empty reserved column would be a long blank scroll, so it
     holds only enough height to read as a space that is waiting for something */
  .lp-build__stage{min-height:min(320px,42vh)}
}
@media (max-width:620px){
  .lp-build__h{font-size:clamp(28px,8vw,36px)}
  .lp-build__stage{min-height:220px}
}
@media (prefers-reduced-motion:reduce){
  .lp-build__copy{animation:none}
}