/* ============================================================
   OPTIONS 1 AND 9: the Data Intelligence band, redrawn.

   Option 1 is Option 8 with this one section changed, and Option 9 now
   carries the same band, so every rule in this file is gated on those two
   options and nothing here can reach any other variant of the page. The section's placement, its grid, its heading, its subheading,
   its CTA and the three numbered steps under it are all Option 8's and are not
   touched: what changes is the picture between them.

   WHY IT WAS REDRAWN. The old band was three identical rectangles, a blob and
   a truncated question (Ameer, 27 Aug: "the current documents all look almost
   identical... the execution needs to be much more refined"). Three copies of
   one page cannot say "bring your documents in"; it says "here is a page,
   three times".

   WHAT IT IS NOW. Five different KINDS of file, each a different proportion
   with a different inside and one hint of colour, going one at a time into a
   core that brightens by exactly as much as it has been given. Then a question
   types itself and one reading comes back. js/landing-di1.js owns every move;
   the only motion in this file is the caret and the send ring, which are
   controls answering a state.

   The purple is the module's own token, because this band is in the Data
   Intelligence module and takes its colour from it like everything else.
   ============================================================ */

/* ---- WHICH FOLD IS ON SCREEN -------------------------------------------
   THIS GATE HAS TO BE LATE. css/landing.css turns the shared fold on for the
   whole family-7 page, and css/landing-full.css turns it on again at the same
   weight after it; a hide written in either loses or ties, and the page then
   renders BOTH folds stacked. This file loads after both, so the hide sticks.
   Options 1 and 9 share the alternate fold: same heading and the same type,
   and the subheading is the only thing that differs. */
html:is([data-lp-option="1"],[data-lp-option="9"]) .lp-hero--2{display:none}
html:is([data-lp-option="1"],[data-lp-option="9"]) .lp-hero--alt{display:flex}
/* TWO LINES, NOT THREE. The sentence is twice the length of the one it
   replaces, so at the shared 52ch it broke to three. A wider measure and a
   greedy wrap put it on two, with the first line the longer of them: balance
   would even them out, which is not what a subhead under a heading this size
   wants. */
html:is([data-lp-option="1"],[data-lp-option="9"]) .lp-hero--alt .lp-sub{
  max-width:66ch;text-wrap:normal}

html:is([data-lp-option="1"],[data-lp-option="9"]) .di7{
  grid-template-columns:minmax(0,1.12fr) auto minmax(0,.62fr) auto minmax(0,1.16fr);
  gap:clamp(10px,1.4vw,26px)}

/* ---- 1. THE DOCUMENTS ----------------------------------------------------
   FIVE KINDS, NOT FIVE COPIES. The whole point of the beat is that what you
   can bring in is various, so the shapes are various: two landscape, three
   portrait, none of them the same size, and each one carrying the inside its
   kind would have. Nobody has to read a label to know a spreadsheet from a
   deck when one is a grid and the other is a slide. */
html:is([data-lp-option="1"],[data-lp-option="9"]) .di1-beat--docs{display:flex;align-items:center;
  justify-content:center;min-width:0}
.di1-fan{position:relative;display:flex;align-items:center;justify-content:center;
  height:clamp(160px,13.5vw,196px);width:100%}
.di1-doc{position:absolute;display:flex;flex-direction:column;gap:5px;
  width:var(--w);height:var(--h);padding:9px 10px;border-radius:8px;
  opacity:0;will-change:transform,opacity;
  transform-origin:50% 50%;
  /* one material for all five: a light along the top edge falling away, a
     hairline, and the ground showing through. They are pages, not chips. */
  background:
    linear-gradient(160deg,
      rgba(255,255,255,.16) 0%, rgba(255,255,255,.085) 50%,
      rgba(255,255,255,.06) 100%),
    linear-gradient(180deg, rgba(22,16,32,.2), rgba(22,16,32,.12));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26),
             inset 0 0 0 1px rgba(255,255,255,.12),
             0 16px 30px -20px rgba(0,0,0,.5)}
/* THE INK IS A HINT, AND NEVER A STATUS. The first pass filed the report
   under red, which on this page means one thing and one thing only: something
   is wrong. A file type is not a state, so nothing here uses a semantic
   colour. What tells a spreadsheet from a deck is its SHAPE and its INSIDE,
   which is what the eye reads first anyway; the ink is only there so the row
   is not monochrome. */
.di1-doc--sheet{--w:104px;--h:78px;  --ink:rgba(167,243,208,.72)}
.di1-doc--doc  {--w:82px; --h:106px; --ink:rgba(226,232,240,.66)}
.di1-doc--pdf  {--w:86px; --h:112px; --ink:color-mix(in srgb, var(--accent-bright) 78%, #fff)}
.di1-doc--deck {--w:106px;--h:74px;  --ink:rgba(253,224,171,.72)}
.di1-doc--note {--w:74px; --h:92px;  --ink:rgba(226,232,240,.5)}
/* THE FOLDED CORNER, and it is the one thing every one of them shares: it is
   what makes a rectangle read as a page at this size. */
/* THE READING LIGHT. One pass across the page, once, driven by --s from the
   script on the same clock as everything else. It is clipped to the page, so
   it reads as light moving over the paper rather than as a shape on top of it. */
.di1-doc{overflow:hidden}
.di1-doc::after{content:"";position:absolute;inset:0;pointer-events:none;
  opacity:calc(1 - abs(var(--s,0) * 2 - 1));
  background:linear-gradient(104deg,
    transparent 38%,
    color-mix(in srgb, var(--accent-bright) 30%, transparent) 50%,
    transparent 62%);
  transform:translateX(calc(var(--s,0) * 260% - 130%))}
.di1-doc__fold{position:absolute;top:0;inset-inline-end:0;width:16px;height:16px;
  border-start-end-radius:8px;
  background:linear-gradient(225deg,
    rgba(255,255,255,.16) 0%, rgba(255,255,255,.16) 50%, transparent 50%)}
.di1-doc__fold::after{content:"";position:absolute;inset-inline-end:0;top:0;
  width:100%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22))}
/* the one hint of colour each kind carries: a rule at the top of the page in
   the ink that kind is filed under. No word is written anywhere. */
.di1-doc__bar{flex:none;width:38%;height:3px;border-radius:2px;
  background:var(--ink);opacity:.72}

/* the insides, and each is three or four elements at most */
.di1-lines{display:flex;flex-direction:column;gap:4px;flex:none}
.di1-lines i{display:block;height:2px;border-radius:1px;width:var(--w,90%);
  background:rgba(255,255,255,.26)}
.di1-doc--doc .di1-lines i:first-child,
.di1-doc--note .di1-lines i:first-child{background:var(--ink);opacity:.66;height:3px}
/* a spreadsheet: a grid, and the eye needs no more than that */
.di1-grid{flex:1;display:grid;grid-template-columns:repeat(4,1fr);
  grid-auto-rows:1fr;gap:3px;min-height:0}
.di1-grid i{border-radius:1.5px;background:rgba(255,255,255,.14)}
.di1-grid i:nth-child(4n+1){background:rgba(255,255,255,.24)}
.di1-grid i:nth-child(1),.di1-grid i:nth-child(2),
.di1-grid i:nth-child(3),.di1-grid i:nth-child(4){
  background:color-mix(in srgb, var(--ink) 40%, transparent)}
/* a report: a small chart under its heading */
.di1-bars{flex:1;display:flex;align-items:flex-end;gap:4px;min-height:0;
  margin-top:2px}
/* THE CHART IS NEUTRAL, and only its tallest bar carries the page's ink. A
   four bar chart in a saturated red reads as an alert, not as a report, and
   the cue was supposed to be a hint. */
.di1-bars i{flex:1;height:var(--h);border-radius:2px 2px 0 0;
  background:rgba(255,255,255,.24)}
.di1-bars i:last-child{background:color-mix(in srgb, var(--ink) 62%, transparent)}
/* a deck: a slide, which is a title and a body block and nothing else */
.di1-slide{flex:1;display:flex;flex-direction:column;gap:5px;min-height:0;
  padding:4px;border-radius:4px;background:rgba(255,255,255,.05);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.di1-slide i{flex:none;height:3px;width:52%;border-radius:2px;background:var(--ink);opacity:.72}
.di1-slide b{flex:1;border-radius:3px;min-height:0;
  background:linear-gradient(160deg,rgba(255,255,255,.13),rgba(255,255,255,.05))}

/* ---- the hairlines between the beats ---------------------------------
   They DRAW rather than appear: the eye is being told which way to read, and
   a line that arrives already finished cannot tell it anything. */
html:is([data-lp-option="1"],[data-lp-option="9"]) .di1-link{position:relative;
  width:clamp(26px,3.6vw,58px);height:1px;justify-self:center;
  background:linear-gradient(90deg,
    color-mix(in srgb, var(--accent) 8%, transparent),
    color-mix(in srgb, var(--accent) 52%, transparent));
  transform:scaleX(var(--d,0));transform-origin:left center}
[dir="rtl"] html:is([data-lp-option="1"],[data-lp-option="9"]) .di1-link{transform-origin:right center}
html:is([data-lp-option="1"],[data-lp-option="9"]) .di1-link i{position:absolute;inset-inline-end:-3px;
  top:-2.5px;width:6px;height:6px;border-radius:50%;
  background:var(--accent-bright);
  box-shadow:0 0 10px 2px color-mix(in srgb, var(--accent) 40%, transparent)}

/* ---- 2. THE CORE -------------------------------------------------------
   WHAT SPARK HOLDS, and nothing about how it holds it. No schema, no entity
   graph, no particles: one soft body of light that gets brighter by exactly as
   much as it has been given, one ring for each document it takes, and a count
   under it. --lit is written by the script, from nothing to one. */
html:is([data-lp-option="1"],[data-lp-option="9"]) .di1-beat--core{display:flex;align-items:center;
  justify-content:center;min-width:0}
.di1-core{position:relative;display:grid;place-items:center;
  width:clamp(116px,10.5vw,150px);aspect-ratio:1;
  opacity:var(--a,1)}
/* the body: dim and cool before it has read anything, warm and present after */
.di1-core__glow{position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,
    color-mix(in srgb, var(--accent-bright) calc(34% + var(--lit,0) * 46%), transparent) 0%,
    color-mix(in srgb, var(--accent) calc(12% + var(--lit,0) * 20%), transparent) 34%,
    transparent 70%);
  transform:scale(calc(.82 + var(--lit,0) * .18));
  transition:transform .9s cubic-bezier(.22,1,.28,1)}
/* the centre, which is the only hard edge in the beat */
.di1-core__eye{position:absolute;width:26%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 38% 34%,
    #fff 0%,
    color-mix(in srgb, var(--accent-bright) 92%, #fff) 42%,
    var(--accent) 100%);
  opacity:calc(.42 + var(--lit,0) * .58);
  transform:scale(calc(.7 + var(--lit,0) * .3));
  box-shadow:0 0 24px 4px color-mix(in srgb, var(--accent) calc(18% + var(--lit,0) * 34%), transparent);
  transition:opacity .9s var(--ease),transform .9s cubic-bezier(.22,1,.28,1)}
/* one ring per document taken, and it is the only motion the core makes */
.di1-core__ring{position:absolute;inset:0;border-radius:50%;opacity:0;
  border:1px solid color-mix(in srgb, var(--accent-bright) 38%, transparent);
  will-change:transform,opacity}
/* what it has read, counted. The one number in the band, and it leaves before
   the question arrives so the right hand beat is never competing with it. */
.di1-core__count{position:absolute;top:calc(100% - 2px);
  font-style:normal;text-decoration:none;white-space:nowrap;
  font-size:11.5px;font-weight:500;letter-spacing:-.002em;
  color:rgba(255,255,255,.5);font-variant-numeric:tabular-nums}

/* ---- 3. THE QUESTION, AND THE READING ----------------------------------
   The composer is the product's own shape at this scale, and the question is
   TYPED rather than shown, which is the one thing that says a person asked it.
   It is sized so the whole sentence fits on one line: the old band cut it at
   "our requirem...", and a question you cannot finish reading is not a
   question. */
html:is([data-lp-option="1"],[data-lp-option="9"]) .di1-beat--out{display:flex;flex-direction:column;
  align-items:stretch;justify-content:center;gap:12px;min-width:0}
.di1-ask{position:relative;display:flex;align-items:center;gap:10px;
  min-height:44px;padding:0 6px 0 15px;border-radius:12px;opacity:0;
  will-change:transform,opacity;
  background:linear-gradient(180deg,
    rgba(255,255,255,.07) 0%, rgba(255,255,255,.035) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.13),
             inset 0 0 0 1px rgba(255,255,255,.07);
  transition:box-shadow .45s var(--ease)}
.di1-ask.is-armed{box-shadow:inset 0 1px 0 rgba(255,255,255,.2),
                             inset 0 0 0 1px rgba(255,255,255,.12)}
.di1-ask__q{flex:1;min-width:0;font-size:12.5px;line-height:1.45;font-weight:450;
  letter-spacing:-.004em;color:rgba(255,255,255,.92)}
.di1-ask__q i{font-style:normal;white-space:pre}
.di1-w{white-space:nowrap}
.di1-ask__caret{display:inline-block;width:1px;height:12px;
  vertical-align:-1px;margin-inline-start:2px;
  border-radius:1px;background:var(--accent-bright);opacity:0;
  transition:opacity .1s linear;
  animation:di1Blink 1.05s steps(1,end) infinite}
@keyframes di1Blink{0%,49%{visibility:visible}50%,100%{visibility:hidden}}
/* NEUTRAL UNTIL THERE IS SOMETHING TO SEND, which is the rule the real
   composer follows and the reason the moment it lights is worth seeing */
.di1-ask__go{position:relative;flex:none;width:32px;height:32px;border-radius:50%;
  background:rgba(255,255,255,.1);
  transition:background .34s var(--ease),transform .22s var(--ease)}
/* the send arrow. The .aq scenes carry this glyph as their own --aq-arrow,
   which is declared on .aq and so cannot be reached from here; it is the same
   lucide arrow-up at the same weight, named locally. */
.di1-beat--out{--di1-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7'/%3E%3C/svg%3E")}
.di1-ask__go::before{content:"";position:absolute;inset:0;margin:auto;
  width:38%;height:38%;background:rgba(255,255,255,.55);
  -webkit-mask:var(--di1-arrow) center/contain no-repeat;
          mask:var(--di1-arrow) center/contain no-repeat;
  transition:background .34s var(--ease)}
.di1-ask.is-armed .di1-ask__go,
.di1-ask.is-firing .di1-ask__go{background:var(--accent)}
.di1-ask.is-armed .di1-ask__go::before,
.di1-ask.is-firing .di1-ask__go::before{background:var(--on-accent)}
.di1-ask.is-firing .di1-ask__go{transform:scale(.9)}
.di1-ask__go::after{content:"";position:absolute;inset:-1px;border-radius:50%;
  border:1.5px solid var(--accent);opacity:0;pointer-events:none}
.di1-ask.is-firing .di1-ask__go::after{animation:di1Ring .68s var(--ease) forwards}
@keyframes di1Ring{0%{opacity:.85;transform:scale(1)}100%{opacity:0;transform:scale(2.4)}}

/* the reading. One figure, one meter, one line of provenance: the answer is
   short because the question was. */
.di1-kpi{display:flex;flex-direction:column;gap:7px;opacity:0;
  padding:15px 17px 16px;border-radius:14px;will-change:transform,opacity;
  background:linear-gradient(160deg,
    color-mix(in srgb, var(--accent) 15%, transparent) 0%,
    rgba(255,255,255,.03) 62%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),
             inset 0 0 0 1px color-mix(in srgb, var(--accent) 26%, transparent)}
.di1-kpi__k{font-size:12px;font-weight:500;letter-spacing:-.002em;
  color:rgba(255,255,255,.6)}
.di1-kpi__v{font-size:clamp(23px,1.9vw,28px);line-height:1.06;font-weight:600;
  letter-spacing:-.026em;color:#fff}
.di1-kpi__bar{position:relative;height:4px;border-radius:2px;margin-top:3px;
  background:rgba(255,255,255,.1);overflow:hidden}
.di1-kpi__bar i{position:absolute;inset:0;border-radius:2px;
  transform:scaleX(0);transform-origin:left center;
  /* nine of eleven, drawn as nine of eleven: the meter stops where the
     sentence under it says it stops */
  background:linear-gradient(90deg,
    color-mix(in srgb, var(--accent) 70%, transparent), var(--accent-bright));
  width:81.8%}
[dir="rtl"] .di1-kpi__bar i{transform-origin:right center}
.di1-kpi__s{font-size:11.5px;letter-spacing:-.002em;color:rgba(255,255,255,.5);
  font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:reduce){
  html:is([data-lp-option="1"],[data-lp-option="9"]) .di1-ask__caret{animation:none}
  html:is([data-lp-option="1"],[data-lp-option="9"]) .di1-ask.is-firing .di1-ask__go::after{animation:none}
}

/* ---- NARROWER WINDOWS --------------------------------------------------
   The band becomes a column and the hairlines turn with it, which is exactly
   what Option 8's own version of this section already does at this width. */
@media (max-width:900px){
  html:is([data-lp-option="1"],[data-lp-option="9"]) .di7{grid-template-columns:1fr;justify-items:center;
    gap:clamp(14px,2.4vh,24px);max-width:460px}
  html:is([data-lp-option="1"],[data-lp-option="9"]) .di1-link{width:1px;height:clamp(26px,3.4vh,40px);
    background:linear-gradient(180deg,
      color-mix(in srgb, var(--accent) 10%, transparent),
      color-mix(in srgb, var(--accent) 55%, transparent));
    transform:scaleY(var(--d,0));transform-origin:top center}
  html:is([data-lp-option="1"],[data-lp-option="9"]) .di1-link i{inset-inline-end:auto;
    inset-inline-start:-2.5px;top:auto;bottom:-3px}
  html:is([data-lp-option="1"],[data-lp-option="9"]) .di1-beat--out{width:100%}
}