/* ============================================================
   OPTION 3: Option 8, re-sequenced and rewritten for a regulated buyer.

   WHAT IT INHERITS AND DOES NOT TOUCH: Option 8's hero ground, its three
   lights, the grain, the background flow, the scroll behaviour, the type
   scale, the colour tokens and the spacing scale. Option 3 changes what the
   page SAYS and the order it says it in; none of that needs a new visual
   system, and giving it one would only make the two impossible to compare.

   So this file is small on purpose. Everything in it is either gated on
   html[data-lp-option="3"] or named o3-, and the only things it styles are
   the four pieces Option 3 adds: the new hero fold, the composed answer, the
   reasoning trace, the trust band and the four column footer.

   ORANGE IS FOR CALLS TO ACTION AND LINKS. Nothing in here paints a section
   ground, a heading or a figure with it.
   ============================================================ */

/* THE LIGHT THEME TOGGLE STAYS. It used to be hidden beside the option
   switcher, which was scaffolding for comparing directions; the switcher has
   since been removed from the page entirely, and light against dark is a
   choice the page actually offers, so the toggle is simply part of the
   family-7 header now with nothing gating it. */

/* ---- which fold is which -------------------------------------------------
   Option 3's hero is its own section sitting beside the shared one. Exactly
   one of the two is ever in the document flow. */
.lp-hero--o3{display:none}
html[data-lp-option="3"] .lp-hero--2{display:none}
html[data-lp-option="3"] .lp-hero--o3{display:flex}

/* THE CAPABILITY ROW. Three labels, one line, separated by the same dot the
   product uses between facts. Deliberately not cards: they name the three
   things that follow from one connection, and a row of boxes under a headline
   would compete with it and turn the fold into a feature list. */
.o3-caps{display:flex;flex-wrap:wrap;align-items:center;
  justify-content:center;gap:8px 20px;
  margin:clamp(20px,2.6vh,28px) 0 0;padding:0;list-style:none}
.o3-caps li{position:relative;font-size:14px;font-weight:500;
  letter-spacing:-.004em;color:rgba(255,255,255,.66)}
.o3-caps li + li::before{content:"";position:absolute;inset-inline-start:-12px;
  top:50%;width:3px;height:3px;border-radius:50%;transform:translateY(-50%);
  background:rgba(255,255,255,.28)}

/* THE LINE UNDER THE BUTTONS. Read only, region and the audit trail are the
   decision for the buyer this page is written for, so they are in the fold
   rather than eight screens down. Small and muted: it is a reassurance, not a
   claim competing with the headline. */
.o3-assure{margin:clamp(20px,2.4vh,26px) 0 0;
  font-size:13px;line-height:1.5;letter-spacing:-.002em;
  color:rgba(255,255,255,.44);text-wrap:pretty}

/* ---- THE COMPOSED ANSWER -------------------------------------------------
   The one thing the page had never shown: what an answer looks like. Four
   things in one frame, because one card would have said the opposite of the
   point.

   THE SURFACE TOKENS ARE THE PRODUCT'S OWN, resolved where the landing page
   can reach them. css/molecules.css declares --box and --box-stroke on a root
   level selector the app satisfies and a landing section cannot, so the same
   values are re-resolved here for this one composition rather than invented.
   Same pattern css/bg-trace.css already uses for --bg. */
html[data-lp-option="3"] .o3-ans{
  --box:#212121; --box-stroke:rgba(110,110,110,.2);
  display:flex;flex-direction:column;gap:16px}

/* the sentence first: it IS the answer, and everything under it supports it */
.o3-ans__say{margin:0;font-size:clamp(15px,1.25vw,17px);line-height:1.5;
  font-weight:450;letter-spacing:-.01em;color:rgba(255,255,255,.9);
  text-wrap:pretty}
.o3-ans__say b{font-weight:600;color:#fff}

/* two columns, four blocks: figure over chart on the left, list over the
   reasoning on the right, so the eye reads figure, evidence, working */
.o3-ans__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px}
.o3-card{background:var(--box);border-radius:14px;
  box-shadow:inset 0 0 0 1px var(--box-stroke),
             inset 0 1px 0 rgba(255,255,255,.05)}
.o3-card.cblock{padding:14px 16px;gap:8px;height:auto;border:0}
.o3-card .cblock__t{font-size:12px;font-weight:600;color:rgba(255,255,255,.62)}
.o3-card .cblock__ic{color:rgba(255,255,255,.26)}
.o3-card .cblock__ic>svg{width:15px;height:15px}
.o3-card .dkpi__v{font-size:30px;gap:8px;letter-spacing:-.026em}
.o3-card .dkpi__delta{display:inline-flex;align-items:center;gap:2px;font-size:12px}
.o3-card .dkpi__delta svg{width:12px;height:12px}
.o3-card .dkpi__s{font-size:11.5px;margin-top:2px}

/* the chart. Six months of it, and nothing else on the card. */
.o3-spark{display:block;width:100%;height:56px;overflow:visible}
.o3-spark polyline{fill:none;stroke:var(--accent);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.o3-spark__f{fill:url(#o3g);stroke:none}

/* the accounts behind it */
.o3-rank{display:flex;flex-direction:column;gap:9px;margin-top:2px}
.o3-rank span{display:flex;align-items:center;gap:10px;font-size:12px;
  letter-spacing:-.002em;color:rgba(255,255,255,.76)}
.o3-rank b{flex:none;width:13px;font-family:var(--font-mono);font-size:10px;
  font-weight:500;color:rgba(255,255,255,.32);font-variant-numeric:tabular-nums}
.o3-rank em{flex:1;min-width:0;font-style:normal;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.o3-rank u{flex:none;text-decoration:none;font-weight:600;color:#fff;
  font-variant-numeric:tabular-nums}

/* and the working, BESIDE the answer rather than behind a toggle, because the
   claim of the whole page is that you can check it */
.o3-card--why{display:flex;flex-direction:column;gap:10px;padding:14px 16px}
.o3-why__hd{display:flex;align-items:center;gap:6px;
  font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent)}
.o3-why__hd svg{width:13px;height:13px}
html[data-lp-option="3"] .o3-why__l{gap:9px}
html[data-lp-option="3"] .o3-why__l .ll-t{font-size:11.5px;line-height:17px;
  color:rgba(255,255,255,.66)}
html[data-lp-option="3"] .o3-why__l .ll-mark{width:15px;height:15px}
html[data-lp-option="3"] .o3-why__l .ll-mark svg{width:15px;height:15px;
  color:rgba(255,255,255,.34)}
html[data-lp-option="3"] .o3-why__l code{font-family:var(--font-mono);
  font-size:11px;color:rgba(255,255,255,.82)}

/* ---- THE REASONING CHAPTER ----------------------------------------------
   The app's own trace, at the size a page reads it. Its copy column carries
   only the three points: the chapter heading above has already said the whole
   of it, and a paragraph repeated beside it would be the same words twice. */
.o3-why{display:flex;flex-direction:column;align-items:center;
  gap:clamp(28px,3.6vh,44px)}
/* the trace at the measure it reads best, not at the width of the column */
.o3-why .o3-trace{width:100%;max-width:760px}
/* and the three points across under it, on the same rule the other chapters
   use for their lists */
.o3-why__pts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(12px,1.6vw,24px);max-width:1000px;width:100%;text-align:start}
.o3-trace{
  --box:#212121; --box-stroke:rgba(110,110,110,.2);
  display:flex;flex-direction:column;gap:16px;
  padding:20px 24px 24px;border-radius:16px;background:var(--box);
  box-shadow:inset 0 0 0 1px var(--box-stroke),
             inset 0 1px 0 rgba(255,255,255,.05)}
.o3-trace__hd{display:flex;align-items:center;gap:8px;
  font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent)}
.o3-trace__hd svg{width:14px;height:14px}
.o3-trace__hd b{margin-inline-start:auto;font-weight:500;letter-spacing:0;
  text-transform:none;font-size:12px;color:rgba(255,255,255,.4)}
/* OPTION 9 SHOWS THE SAME TRACE, inside a feature row rather than a chapter of
   its own, so these reach both. One component, one set of type sizes: if the
   trace is going to appear on two options it must not be two things. */
html[data-lp-option="3"] .o3-trace .ll-t,
html[data-lp-option="9"] .o3-trace .ll-t{font-size:13px;line-height:20px;
  color:rgba(255,255,255,.78)}
html[data-lp-option="3"] .o3-trace .ll-sub,
html[data-lp-option="9"] .o3-trace .ll-sub{font-size:12px;line-height:18px;
  color:rgba(255,255,255,.44)}
html[data-lp-option="3"] .o3-trace .ll-mark svg,
html[data-lp-option="9"] .o3-trace .ll-mark svg{color:rgba(255,255,255,.32)}
html[data-lp-option="3"] .o3-trace code,
html[data-lp-option="9"] .o3-trace code{font-family:var(--font-mono);
  font-size:12px;color:rgba(255,255,255,.86)}

/* ---- DATA INTELLIGENCE, given its room ----------------------------------
   The chapter was a third the size of Investigation and its three steps were
   a caption. Each one carries a line now, and the band above them has the
   height to be looked at rather than skimmed past. */
/* THE CHAPTER IS SIZED AGAINST BUILD DASHBOARD, not against what it used to
   be. It was a third of Investigation, which read as an afterthought rather
   than as one of three capabilities; the band and the steps both get room. */
html[data-lp-option="3"] .l7-chapter--di{padding-block:clamp(72px,9.4vh,132px)}
html[data-lp-option="3"] .l7-chapter--di .l7-head{padding-bottom:clamp(44px,5.6vh,74px)}
html[data-lp-option="3"] .di7{gap:clamp(16px,2.2vw,38px)}
html[data-lp-option="3"] .di7-fan{height:clamp(196px,17vw,244px)}
html[data-lp-option="3"] .di7-doc{width:clamp(96px,8.2vw,120px)}
html[data-lp-option="3"] .di7-core{width:clamp(128px,12vw,168px)}
html[data-lp-option="3"] .di7-beat--out{gap:16px}
.di7-steps--o3{align-items:start;gap:clamp(16px,2.4vw,32px);
  margin-top:clamp(48px,6vh,76px)}
.di7-steps--o3 li{flex-direction:column;align-items:flex-start;gap:8px;
  padding-top:24px}
.di7-steps--o3 .di7-steps__n{order:-1}
.di7-steps--o3 .di7-steps__t{font-size:15px}
.di7-steps__p{font-size:13.5px;line-height:1.55;letter-spacing:-.002em;
  color:rgba(255,255,255,.52);text-wrap:pretty}

/* THE QUESTION IS NOT TRUNCATED ON OPTION 3. The shared band ellipsises it at
   "our requirem...", which is fine as a texture and wrong on a page written
   for a buyer who is reading every word: a question you cannot finish reading
   is not a question. It wraps to two lines here instead, and the pill stops
   being a fixed height pill to hold them. Option 8's band is untouched. */
html[data-lp-option="3"] .di7-ask{align-items:flex-start;
  border-radius:18px;font-size:13.5px}
html[data-lp-option="3"] .di7-ask b{white-space:normal;overflow:visible;
  text-overflow:clip;line-height:1.45}
html[data-lp-option="3"] .di7-ask i{margin-top:2px}

/* ---- BUILD DASHBOARD: three points under the heading ---------------------
   One row, centred with the heading above it, so the chapter keeps its
   single column composition and the points read as part of the claim. */
.o3-dblist{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(12px,1.6vw,24px);max-width:1000px;
  margin:0 auto clamp(32px,4vh,48px);text-align:start}

/* THE TRUST SEPARATOR. Neutral glass like the founder's, because trust is not
   one of the three capabilities and painting its disc in a brand colour would
   say it is. But it takes a real mark rather than the founder's quote glyph. */
.l7-sep--quiet .l7-sep__disc{background:var(--glass-2);
  color:rgba(255,255,255,.86);
  box-shadow:0 0 0 1px color-mix(in srgb, #fff 14%, transparent),
             0 0 0 10px color-mix(in srgb, #fff 3%, transparent),
             0 18px 50px -14px rgba(0,0,0,.9)}

/* ---- THE TRUST BAND ------------------------------------------------------
   Four points in one row, and four different marks. A shield on all of them
   would say security four times and none of them specifically. */
.o3-trust{position:relative;background:#141519;
  padding-block:clamp(52px,7vh,92px)}
.o3-trust__row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(16px,2vw,32px);max-width:1180px;margin-inline:auto}
.o3-trust__i{display:flex;flex-direction:column;gap:10px;
  padding-top:20px;border-top:1px solid color-mix(in srgb, #fff 11%, transparent)}
.o3-trust__ic{display:flex;color:rgba(255,255,255,.7)}
.o3-trust__t{margin:0;font-size:15.5px;font-weight:600;letter-spacing:-.01em;
  color:#fff}
.o3-trust__p{margin:0;font-size:13.5px;line-height:1.6;letter-spacing:-.002em;
  color:rgba(255,255,255,.54);text-wrap:pretty}

/* ---- THE FOOTER: four columns -------------------------------------------
   Security, residency, compliance, docs and contact, which is what an
   enterprise buyer opens a footer to find. */
.o3-foot{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(20px,3vw,56px)}
.o3-foot__c{display:flex;flex-direction:column;gap:10px;min-width:0}
.o3-foot__k{font-size:11px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:rgba(255,255,255,.36);margin-bottom:2px}
.o3-foot__c a{font-size:13.5px;letter-spacing:-.002em;
  color:rgba(255,255,255,.6);text-decoration:none;
  transition:color .2s var(--ease)}
.o3-foot__c a:hover{color:#fff}
html[data-lp-option="3"] .l7-foot__in{align-items:flex-start;
  gap:clamp(28px,4vw,72px)}
html[data-lp-option="3"] .l7-foot__right{flex:1;min-width:0}

/* ---- NARROWER WINDOWS ---------------------------------------------------- */
@media (max-width:980px){
  .o3-why__pts{grid-template-columns:1fr;max-width:420px}
  .o3-ans__grid{grid-template-columns:1fr}
  .o3-trust__row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .o3-foot{grid-template-columns:repeat(2,minmax(0,1fr))}
  .o3-dblist{grid-template-columns:1fr;max-width:420px}
}
@media (max-width:900px){
  .di7-steps--o3{grid-template-columns:1fr;max-width:460px}
}
@media (max-width:640px){
  .o3-trust__row{grid-template-columns:1fr}
  .o3-foot{grid-template-columns:1fr}
}