/* ============================================================
   landing-intel.css, OPTION 2's THIRD FOLD: Data Intelligence.

   NO PRODUCT BOX. The fold above this one puts the product in a panel and shows
   it working, component for component. This one is the concept instead: the
   section itself is the environment, the purple gradient is the room, and the
   animation floats in it with no container, no border and no ground of its own.
   What is drawn is six sheets of paper, a core, one question and one answer.
   Everything else is light and depth.

   THE COLOUR IS ONE DECISION. The section carries `data-module="chat"`, so
   --accent resolves to the brand's secondary (Purple/50) and --glow to its
   ambient, exactly as the Chat with Data module already resolves them in the
   app. Every purple below is mixed from those tokens rather than written down
   again.

   THE SEPARATION IS A GRADIENT, NOT A LINE. The fold above is flat #141519 edge
   to edge; this one starts and ends on that same ground and only its middle is
   purple, so the section is unmistakably its own place with no seam at either
   boundary. Both edges were checked by reading the rendered pixels.
   ============================================================ */

/* Same visibility gate as the rest of Option 2. */
.lp-intel{display:none}
/* OPAQUE, like the folds either side of it, 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 actually removes the hero's
   animation here.
   overflow:clip because the scene runs past the 1440 column to the right edge
   of the viewport. Clipping HERE rather than on .lp-main keeps it off every
   other section, and clip (unlike hidden) creates no scroll container. */
/* OPTION 2's THIRD FOLD, AND OPTION 6's. One section, gated twice, never
   copied: a duplicate would be a second thing to keep in step, and the fold is
   meant to be identical in both. The gradient below already starts and ends on
   #141519, which is the ground both of the folds above it sit on, so the join
   is seamless at the top edge and at the bottom in either option. */
html[data-lp-option="2"] .lp-intel,
html[data-lp-option="6"] .lp-intel{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 70% 46% at 16% 36%,
      color-mix(in srgb, var(--accent) 27%, transparent) 0%, transparent 66%),
    radial-gradient(ellipse 56% 36% at 92% 68%,
      color-mix(in srgb, var(--accent) 18%, transparent) 0%, transparent 66%),
    linear-gradient(180deg, #141519 0%, #141519 6%, #1c1730 42%, #1d1832 68%,
                    #141519 96%, #141519 100%)}
html[data-lp-option="2"] .lp-intel > .lp-wrap,
html[data-lp-option="6"] .lp-intel > .lp-wrap{flex:1}

/* ---- the two halves of the fold ----------------------------------------
   The copy keeps its own measure; the scene takes everything else and then
   some, because it has no box to sit inside. */
.lp-intel__in{display:grid;align-items:center;
  grid-template-columns:minmax(0,44fr) minmax(0,56fr);
  column-gap:clamp(32px,4vw,72px)}

.lp-intel__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 (Ameer: "use Option 6 as the
   typography reference"). Identical to .lp-film3__h and to the fold above:
   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
   Brand Secondary because this fold is the Chat module. */
.lp-intel__h{font-size:clamp(33px,3.5vw,54px);line-height:1.06;font-weight:500;
  letter-spacing:-.028em;color:#fff;text-wrap:balance}
.lp-intel__h em{font-style:normal;font-weight:600;color:var(--accent)}
.lp-intel__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-intel__cta{margin-top:6px}

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

/* ============================================================
   THE SCENE
   ============================================================
   The grid item reserves the space; the stage inside it is absolutely placed so
   it can bleed past that space on three sides without the layout knowing, and
   it dissolves at its own edges instead of ending on a line. There is no panel,
   no fill and no stroke: what you see is what is IN the space. */
.lp-intel__stage{position:relative;min-width:0;min-height:min(76vh,780px)}
.di-stage{position:absolute;inset-block:-16%;inset-inline-start:-20%;
  inset-inline-end:calc(-1 * (40px + max(0px, (100vw - 1440px) / 2)));
  pointer-events:none;
  --di-feather:linear-gradient(to right,transparent 0,#000 21%),
               linear-gradient(to bottom,transparent 0,#000 13%,#000 88%,transparent 100%);
  -webkit-mask-image:var(--di-feather);mask-image:var(--di-feather);
  -webkit-mask-composite:source-in;mask-composite:intersect}
[dir="rtl"] .di-stage{
  --di-feather:linear-gradient(to left,transparent 0,#000 21%),
               linear-gradient(to bottom,transparent 0,#000 13%,#000 88%,transparent 100%)}

/* .di-vp carries the perspective, .di-world carries the camera, and every
   object carries its own place in the world. js/landing-intel.js projects the
   canvas through the SAME numbers, which is what lets a particle leave the face
   of a page and land in the centre of the core. */
.di-vp{position:absolute;inset:0;text-align:start;
  perspective:1400px;perspective-origin:50% 50%}
.di-atmos{position:absolute;inset:0;width:100%;height:100%}
.di-world{position:absolute;inset:0;transform-style:preserve-3d;transform-origin:50% 50%}
/* transform-origin:0 0 with left/top at the centre puts the object's own
   coordinate system at the world origin, so the transform js writes reads as
   "put this at (x,y,z), turn it, then centre it on that point". */
.di-obj{position:absolute;left:50%;top:50%;transform-origin:0 0;
  visibility:hidden;will-change:transform,opacity;backface-visibility:hidden}
.di-obj__i{display:block}
/* the key light on the subject of the beat, in front of the world and blended
   as light rather than painted as a fill */
.di-glow{position:absolute;left:0;top:0;z-index:2;pointer-events:none;opacity:0;
  mix-blend-mode:screen;
  background:radial-gradient(closest-side, var(--glow), transparent 72%)}

/* ---- a document -------------------------------------------------------
   A page, and nothing more: a title block, a few lines of body and a folded
   corner. No file name, no size, no status. At any depth and any angle it reads
   as a document, which is the only thing it has to say. */
.di-doc{position:relative;width:140px;height:182px;padding:15px 14px 13px;
  display:flex;flex-direction:column;gap:8px;
  border-radius:var(--r-md);
  background:linear-gradient(158deg,
    color-mix(in srgb, #1a1526 88%, transparent) 0%,
    color-mix(in srgb, #1a1526 80%, transparent) 52%,
    color-mix(in srgb, var(--accent) 30%, transparent) 100%);
  border:1px solid color-mix(in srgb, #fff 15%, transparent);
  box-shadow:0 22px 44px -26px rgba(0,0,0,.9),
             inset 0 1px 0 color-mix(in srgb, #fff 11%, transparent);
  /* the corner is cut out of the page itself, and .di-doc__fold draws the
     turned-over flap in the hole it leaves */
  clip-path:polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%)}
.di-doc__fold{position:absolute;top:0;inset-inline-end:0;width:24px;height:24px;
  background:linear-gradient(225deg,
    color-mix(in srgb, #fff 17%, transparent) 0 52%, transparent 52%)}
[dir="rtl"] .di-doc__fold{background:linear-gradient(135deg,
    color-mix(in srgb, #fff 17%, transparent) 0 52%, transparent 52%)}
/* the title block is the one thing on a page that carries the accent, so a page
   reads as belonging to this section before anything happens to it */
.di-doc__hd{flex:none;height:8px;width:58%;border-radius:3px;margin-bottom:3px;
  background:color-mix(in srgb, var(--accent-bright) 62%, transparent)}
.di-doc__l{flex:none;height:5px;border-radius:3px;
  background:color-mix(in srgb, #fff 17%, transparent)}
/* THE CUT, AND IT IS WHERE THE READING HAPPENS. js/landing-intel.js clips the
   page from the bottom up by exactly how much of it is under the surface, and
   sets --eat to that same share. This band sits ON that line, just inside the
   clip, so the edge burns for as long as the page is being taken and goes out
   the moment there is nothing left of it. Nothing about it is a keyframe; it is
   a readout of where the page is. */
.di-doc__scan{position:absolute;left:0;right:0;height:21px;pointer-events:none;
  bottom:calc(var(--eat,0) * 100%);
  opacity:var(--eatA,0);
  background:linear-gradient(to top,
    color-mix(in srgb, var(--accent-bright) 62%, transparent) 0,
    color-mix(in srgb, var(--accent-bright) 18%, transparent) 38%,
    transparent 100%)}
/* the line of the cut itself, hotter and one pixel thick */
.di-doc__scan::after{content:"";position:absolute;inset:auto 0 0 0;height:1.5px;
  background:var(--accent-bright);
  box-shadow:0 0 12px 1px color-mix(in srgb, var(--accent-bright) 70%, transparent)}

/* ---- the question -----------------------------------------------------
   One line of plain language on a glass rule, a caret while it is being
   written, and a dot that lights when it is sent. There is no composer here on
   purpose: the fold above already shows the real one, and this fold is about
   what asking MEANS rather than what it looks like. */
.di-ask{display:flex;align-items:center;gap:12px;width:512px;padding:15px 18px 15px 22px;
  border-radius:var(--r-full);
  background:color-mix(in srgb, #16121f 64%, transparent);
  border:1px solid color-mix(in srgb, #fff 11%, transparent);
  box-shadow:0 26px 54px -30px rgba(0,0,0,.9);
  font-size:17px;line-height:1.3;font-weight:500;color:var(--ink);
  transition:border-color .4s var(--ease)}
.di-ask.is-typing{border-color:color-mix(in srgb, #fff 18%, transparent)}
.di-ask__t{white-space:nowrap;min-width:0}
.di-ask__caret{flex:none;width:2px;height:19px;border-radius:1px;
  background:var(--accent-bright);opacity:0}
.di-ask.is-typing .di-ask__caret{opacity:1;animation:diCaret 1.05s steps(1,end) infinite}
@keyframes diCaret{0%,49%{opacity:1}50%,100%{opacity:0}}
.di-ask__go{flex:none;margin-inline-start:auto;width:26px;height:26px;border-radius:50%;
  background:color-mix(in srgb, #fff 9%, transparent);
  transition:background .35s var(--ease),box-shadow .35s var(--ease)}
.di-ask.is-armed .di-ask__go{background:var(--accent);
  box-shadow:0 0 22px -2px var(--accent)}
.di-ask.is-sent .di-ask__go{background:var(--accent-bright);
  box-shadow:0 0 34px 2px var(--accent)}

/* ---- the output -------------------------------------------------------
   Two readings, and nothing a reading does not need: what it is, what it says,
   how much of the whole that is. Same glass the question is made of, so the
   asking and the answering are visibly the same material.

   THE WINNER TAKES THE ACCENT AND THE RUNNER UP DOES NOT. That is the entire
   hierarchy between the two cards, and it follows the standing colour rule:
   Brand for the one thing being emphasised, neutral for everything beside it. */
.di-kpi{position:relative;width:238px;padding:20px 22px 21px;
  display:flex;flex-direction:column;gap:9px;
  border-radius:18px;
  background:linear-gradient(150deg,
    color-mix(in srgb, #16121f 76%, transparent) 0%,
    color-mix(in srgb, #16121f 62%, transparent) 100%);
  border:1px solid color-mix(in srgb, #fff 12%, transparent);
  box-shadow:0 34px 70px -34px rgba(0,0,0,.95),
             inset 0 1px 0 color-mix(in srgb, #fff 10%, transparent)}
/* the one being emphasised is lifted by its own light, not by a second colour */
.di-kpi.is-lead{
  background:linear-gradient(150deg,
    color-mix(in srgb, #16121f 76%, transparent) 0%,
    color-mix(in srgb, var(--accent) 26%, transparent) 100%);
  border-color:color-mix(in srgb, #fff 17%, transparent)}
.di-kpi__k{font-size:12.5px;line-height:1.2;font-weight:500;
  color:rgba(255,255,255,.56)}
.di-kpi__v{font-size:31px;line-height:1.05;font-weight:600;letter-spacing:-.022em;
  color:#fff}
/* the meter: the reading, as a shape. Nothing on it is labelled, because the
   line under it already says what it counts. */
.di-kpi__bar{position:relative;height:4px;border-radius:2px;margin-top:2px;
  background:color-mix(in srgb, #fff 10%, transparent);overflow:hidden}
.di-kpi__bar i{position:absolute;inset:0 auto 0 0;width:0;border-radius:2px;
  background:color-mix(in srgb, #fff 34%, transparent)}
.di-kpi.is-lead .di-kpi__bar i{background:var(--accent-bright)}
[dir="rtl"] .di-kpi__bar i{inset:0 0 0 auto}
.di-kpi__s{font-size:12px;line-height:1.2;color:rgba(255,255,255,.48)}

/* ---- narrower windows -------------------------------------------------- */
@media (max-width:1180px){
  html[data-lp-option="2"] .lp-intel,
  html[data-lp-option="6"] .lp-intel{min-height:0;display:block;
    padding-block:clamp(60px,9vh,110px)}
  .lp-intel__in{grid-template-columns:1fr;row-gap:clamp(24px,3vh,40px)}
  .lp-intel__copy{max-width:none}
  .lp-intel__stage{min-height:min(62vh,560px)}
  /* stacked, the scene takes the full width and bleeds both edges */
  .di-stage{inset-block:-8%;
    inset-inline-start:calc(-1 * (40px + max(0px, (100vw - 1440px) / 2)));
    --di-feather:linear-gradient(to bottom,transparent 0,#000 11%,#000 90%,transparent 100%)}
  [dir="rtl"] .di-stage{
    --di-feather:linear-gradient(to bottom,transparent 0,#000 11%,#000 90%,transparent 100%)}
}
@media (max-width:620px){
  .lp-intel__h{font-size:clamp(28px,8vw,36px)}
  .lp-intel__stage{min-height:min(56vh,460px)}
}
@media (prefers-reduced-motion:reduce){
  .lp-intel__copy{animation:none}
  .di-ask,.di-ask__go{transition:none}
  .di-ask.is-typing .di-ask__caret{animation:none}
  .di-kpi__bar i{transition:none}
  /* the scene is positioned by js, which holds one finished frame still under
     this query rather than easing to it: see start() in landing-intel.js */
}

/* ============================================================
   OPTION 6 ONLY: THE FOLD IS MIRRORED
   ============================================================
   Copy on the right, the scene on the left (Ameer, 26 Aug: "text on the right
   lane and the animation on the left, let's see"). An experiment, so it is a
   scoped override rather than an edit to the fold itself: option 2 keeps the
   original arrangement and this is one block to delete if it does not hold up.

   THE DOM ORDER IS UNCHANGED. The copy still comes first in the markup, which
   is the order it should be read in; only the grid places it second. That also
   means the stacked layout below needs no reordering, just the column
   assignments cleared.

   THE SCENE HAS TO BE MIRRORED TOO, not just moved. It bleeds past its column
   on the outer side and is feathered on the INNER side, so that the light
   fades out where it meets the copy rather than stopping at an edge. Moved to
   the left, all three of those have to swap sides: the bleed now runs to the
   viewport's left edge, the -20% overhang goes to the right, and the feather
   moves from the left edge to the right one. Those are exactly the values the
   [dir="rtl"] rule above already uses, for exactly the same reason. */
html[data-lp-option="6"] .lp-intel__in{
  grid-template-columns:minmax(0,56fr) minmax(0,44fr)}
html[data-lp-option="6"] .lp-intel__copy{grid-column:2;grid-row:1;justify-self:end}
html[data-lp-option="6"] .lp-intel__stage{grid-column:1;grid-row:1}
html[data-lp-option="6"] .di-stage{
  inset-inline-start:calc(-1 * (40px + max(0px, (100vw - 1440px) / 2)));
  inset-inline-end:-20%;
  --di-feather:linear-gradient(to left,transparent 0,#000 21%),
               linear-gradient(to bottom,transparent 0,#000 13%,#000 88%,transparent 100%)}

@media (max-width:1180px){
  /* stacked, there are no columns to sit in and the scene bleeds both edges
     again, so the mirror is simply switched off.

     THE GRID HAS TO BE RESET AT THIS SPECIFICITY. A media query adds none of
     its own, so the two-column rule above (0,2,1) was beating the single-column
     rule inside this block (0,1,0) and the fold never stacked at any width. */
  html[data-lp-option="6"] .lp-intel__in{grid-template-columns:1fr}
  html[data-lp-option="6"] .lp-intel__copy{max-width:none}
  html[data-lp-option="6"] .lp-intel__copy,
  html[data-lp-option="6"] .lp-intel__stage{grid-column:auto;grid-row:auto;justify-self:stretch}
  html[data-lp-option="6"] .di-stage{inset-inline-end:calc(-1 * (40px + max(0px, (100vw - 1440px) / 2)));
    --di-feather:linear-gradient(to bottom,transparent 0,#000 11%,#000 90%,transparent 100%)}
}