#howNative{
  --lime:#F5FFAB; --lime-h:#eaff8a;
  --white:#fff; --navy:#17172B; --ink:#0b0b18;
  --mut:rgba(255,255,255,.56); --mut2:rgba(255,255,255,.34);
  --hair:rgba(255,255,255,.10); --hair-s:rgba(255,255,255,.06);
  --sans:'Satoshi',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --e:cubic-bezier(.16,1,.3,1);
  --max:1120px;
}#howNative *{box-sizing:border-box;margin:0;padding:0}#howNative{font-family:var(--sans);color:var(--white);font-weight:500;-webkit-font-smoothing:antialiased;
  overflow-x:clip;min-height:100vh;position:relative;
  background:radial-gradient(80% 50% at 50% -6%, rgba(245,255,171,.035), transparent 60%), #08080f}
/* ⛔ FLAT. The concept ground is one solid deep navy-black, no radial wash, no animated
   blobs. Every gradient layer here was compositor work for depth the design never asked
   for. #0b0b18 is the concept value verbatim. */
#auth #howNative,#howNative.rf-sec{background:#0b0b18}#howNative /* film-grain texture overlay (Linear/Vercel/Framer style) — fine fractal noise, #howNative GPU-cheap SVG, #howNative crisp at any DPI, #howNative sits above the bg but below content. Fixed so it feels like film over the whole view.
   soft-light + ~11% reads as real texture on the near-black ground (overlay was invisible on dark). */
#howNative .stage{position:relative}
#howNative .stage > *{position:relative;z-index:1}
/* Visible film grain over the WHOLE how-it-works section (12%, normal-blend fractal noise — reads on
   dark, unlike soft-light). Full-bleed via position:fixed so it's uniform edge-to-edge (no centre seam). */

/* ── hn-aurora: slow navy <-> lime wash UNDER the grain (z-index 0; the two grain layers are
   z-index 1, so texture is preserved and only the colour beneath it moves). Low amplitude on
   purpose: the lime CV card must stay the brightest thing on screen, and a colour cycle you
   consciously notice reads cheap. Two blobs at off-periods (34s / 47s) counter-drift so the
   surface never visibly resyncs. Keyframes start and end on the same value, so the loop is
   seamless by construction rather than by crossfade. */
/* hn-aurora-v2: the first version was invisible. mix-blend-mode:screen against a #0b0b18 ground
   produces almost no change, and stacked with blur(70px) plus .22 keyframe opacity it fell below
   the perceptual threshold entirely. Normal blending at a real alpha is what makes a wash read on
   near-black. Amplitude is still restrained so the lime CV card stays the brightest object. */
/* aurora-v3: TRANSFORM ONLY, LINEAR timing.
   v2 animated opacity on ease-in-out. That curve idles near its endpoints then races through the
   middle, and with two blobs at 34s/47s the fast phases landed at different moments, so compound
   brightness lurched: measured step deltas ranged 0.54 to 14.30, a 26x swing, which is exactly
   what reads as a cheap switch rather than a drift.
   Holding opacity constant and animating only translate/scale gives a GPU-composited, perfectly
   uniform rate of change, so the colour under a fixed blur moves at constant speed. */
/* aurora-v4: NO filter. blur(90px) on this parent forced a re-rasterise of a full-viewport
   surface on every frame the children moved. On 2 cores under load those frames drop, and dropped
   frames in slow continuous motion look exactly like blinking. The keyframe timing was already
   uniform (1.15-1.26x velocity ratio), which is why fixing the easing changed nothing: the problem
   was the rasteriser, not the maths.
   The gradients are already soft-edged (fading to fully transparent well inside the radius), so
   the blur was adding almost nothing visually while costing a repaint per frame. Without it this
   layer is a pure GPU-composited transform, which is effectively free. Blobs are enlarged and the
   gradient falloff softened to recover the diffusion the blur was providing. */
/* aurora-v5: blur restored, but PER-BLOB instead of on the parent.
   v3 blurred the parent: soft, but a filter on a parent re-rasterises that whole surface every
   frame its children move, which dropped frames and read as blinking.
   v4 removed the blur and raised opacity to .5 to compensate. Hard-edged gradients at that
   strength sat straight on the film grain and turned it into harsh mottled noise.
   Blurring each blob instead, with translateZ(0) to force its own compositor layer, means the
   blurred bitmap is rasterised ONCE and thereafter only transformed on the GPU. Opacity returns
   to the subtle range so the wash sits under the grain rather than fighting it. */
#howNative .hn-aurora{position:absolute;inset:-25% -20%;z-index:0;pointer-events:none;
  overflow:hidden}
#howNative .hn-aurora i{position:absolute;display:block;border-radius:50%;
  filter:blur(80px);will-change:transform;transform:translateZ(0);backface-visibility:hidden}
/* eased from .16: the CV card is lime and must be the brightest object in the section. A
   strong lime wash behind it flattened that contrast. */
#howNative .hn-aurora{display:none}
#howNative .hn-aurora i:nth-child(1){width:78%;height:74%;left:0%;top:-4%;opacity:.09;
  background:radial-gradient(circle,rgba(245,255,171,.7) 0%,rgba(245,255,171,.26) 40%,rgba(245,255,171,0) 72%);
  animation:hnAur1 70s ease-in-out infinite}
/* ⛔ THIS was the "cheap" background. A blue-violet blob at .13 over 72% of the section lifted
   #0b0b18 to a washed mid-navy, and the film grain then sat on an already-lifted surface so it
   read as noise rather than texture. Dropped to .05 and pulled toward the ground's own hue: the
   section keeps depth in the corner without the whole plate going blue. */
#howNative .hn-aurora i:nth-child(2){width:72%;height:70%;right:-2%;bottom:-2%;opacity:.05;
  background:radial-gradient(circle,rgba(96,106,190,.55) 0%,rgba(96,106,190,.2) 42%,rgba(96,106,190,0) 74%);
  animation:hnAur2 95s ease-in-out infinite}
/* aurora-still: NO translate. The blobs are ~78% of a full-viewport layer, so translating them
   even 10% slides a large blurred brightness edge across the screen, and on a dark ground the eye
   tracks that edge instead of reading a static wash: it looks like the section is shaking. Scale
   from the centre changes the colour without moving the edges, so the surface still breathes. */
@keyframes hnAur1{
  0%,100%{transform:scale(1)}
  50%    {transform:scale(1.06)}}
@keyframes hnAur2{
  0%,100%{transform:scale(1.04)}
  50%    {transform:scale(.98)}}
@media(prefers-reduced-motion:reduce){
  #howNative .hn-aurora i{animation:none}}
#howNative::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5;
  mix-blend-mode:overlay;
  background-image:url("/static/pix/premium_grain.webp");background-size:640px 640px;background-position:center}#howNative /* a second, #howNative larger, #howNative very faint lime-tinted grain for depth (the premium 'graded film' feel) */
/* ⛔ second grain layer DISABLED: an inline feTurbulence SVG composited with
   mix-blend-mode:screen over the full section, for a 5% effect. The webp grain below
   already carries the texture; this was pure GPU cost. */
#howNative::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;display:none;opacity:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.28' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");
  background-size:300px 300px;mix-blend-mode:screen}@media(prefers-reduced-motion:reduce){#howNative::before{opacity:.09}#howNative::after{opacity:.04}}#howNative img{max-width:100%;display:block}#howNative .wrap{max-width:var(--max);margin:0 auto;padding:clamp(40px,6vw,84px) clamp(20px,5vw,40px) clamp(44px,6vw,80px);position:relative;z-index:2}#howNative /* ── head: eyebrow + title, #howNative centered, #howNative tight ── */
.head{text-align:center;max-width:720px;margin:0 auto clamp(22px,3vw,34px)}#howNative .eyebrow{font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--lime);
  display:inline-flex;align-items:center;gap:9px;justify-content:center}#howNative .dot{width:6px;height:6px;border-radius:50%;background:var(--lime);animation:hnBlink 1.4s infinite}@keyframes hnBlink{0%,100%{opacity:1}50%{opacity:.3}}#howNative h1{font-weight:900;letter-spacing:-.03em;line-height:.94;font-size:clamp(32px,5vw,62px);margin:14px 0 0;text-transform:uppercase}#howNative h1 em{font-style:normal;color:var(--lime)}#howNative .lede{color:var(--mut);font-size:clamp(14px,1.4vw,16px);line-height:1.45;max-width:40ch;margin:14px auto 0}#howNative /* stat row: hairline seams, #howNative no boxes */
.stats{display:flex;justify-content:center;gap:0;margin:20px auto 0;width:fit-content;max-width:100%}#howNative .stats .s{padding:0 clamp(18px,3vw,34px);border-left:1px solid var(--hair);text-align:center}#howNative .stats .s:first-child{border-left:0}#howNative .stats .n{font-weight:900;font-size:clamp(20px,2.2vw,28px);letter-spacing:-.02em;font-variant-numeric:tabular-nums}#howNative .stats .l{font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--mut2);margin-top:5px;font-weight:700}#howNative /* ── the tailoring status line above the CV ── */
.now{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:clamp(24px,3.4vw,36px)}#howNative .now .k{font-size:10.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--mut2)}#howNative .posslot{text-align:center;width:100%;padding:4px 0}#howNative .pos{font-weight:900;letter-spacing:-.03em;line-height:1.15;font-size:clamp(24px,3.4vw,42px);text-transform:uppercase;
  color:var(--white);white-space:nowrap;display:inline-block;will-change:transform,opacity,filter}#howNative .pos em{font-style:normal;color:var(--lime)}#howNative /* ── ONE focal CV, #howNative centered ── */
/* 3D depth: the CV reads as a real object lifted off the navy. A subtle perspective tilt + a stacked
   "back card" (::before, offset down/back with a faint lime edge) give layered depth without any image
   render. Pure CSS → sharp, scales, mobile-safe. Flattens on small screens + reduced-motion. */
/* Clean flat CV card, centred. Fixed width so it never resizes as the role text changes each animation
   (.cvstage kept only as a fixed-width wrapper; no 3D depth / back-card). */
.cvwrap{display:flex;justify-content:center;position:relative}
/* the card is the fan's SOURCE now and fills the .fx-src column it sits in, so its width is
   set there rather than here. 560px stays as the standalone default. */
#howNative .cvstage{position:relative;width:560px;max-width:100%}
#howNative .cv{position:relative;width:100%;border-radius:18px;overflow:hidden;background:var(--lime);color:var(--navy);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.6),0 0 0 1px rgba(23,23,43,.06)}
@media(max-width:720px){#howNative .cvstage{width:100%}}
/* greyish-silver card + visible film grain (~18%) — modern startup textured-card look. Overlay clips
   to the rounded card (overflow:hidden); content sits above via .cv>*. BACKGROUND/TEXTURE ONLY. */
#howNative .cv::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.3;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='cg'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23cg)'/%3E%3C/svg%3E");
  background-size:180px 180px;mix-blend-mode:multiply}
#howNative .cv > *{position:relative;z-index:1}
@media(prefers-reduced-motion:reduce){#howNative .cv::before{opacity:.22}}#howNative .cv-head{display:flex;gap:20px;align-items:center;padding:26px 28px 20px}#howNative .cv-photo{width:104px;height:104px;border-radius:18px;overflow:hidden;flex:none;position:relative;
  box-shadow:0 6px 20px rgba(23,23,43,.14)}#howNative .cv-photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.72) contrast(1.12) sepia(.55) hue-rotate(200deg) saturate(1.7) opacity(.92);transition:opacity .4s ease,transform .4s ease}#howNative .cv-photo img.swap{opacity:0;transform:scale(1.06)}#howNative .cv-contact{font-size:10px;font-weight:600;color:rgba(23,23,43,.6);margin-top:7px;display:flex;
  gap:7px;align-items:center;flex-wrap:wrap;letter-spacing:.01em}#howNative .cv-contact .cv-dot{opacity:.4}#howNative .cv-id{min-width:0;flex:1}#howNative .cv-name{font-weight:800;letter-spacing:-.02em;font-size:22px;line-height:1;text-transform:uppercase;color:var(--navy)}/* fixed slot: this line wraps at some widths and not others, which moved the head 149<->150px */
#howNative .cv-tag{font-size:11px;font-weight:600;letter-spacing:.02em;color:rgba(23,23,43,.72);margin-top:7px;min-height:32px}#howNative .cv-hr{height:1px;background:rgba(23,23,43,.09);margin:0 28px}#howNative /* POSITION — the focal element of the CV: prominent, #howNative bold, #howNative lime-accented */
.cv-role-lbl{font-size:9.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:rgba(23,23,43,.58);padding:22px 28px 0}/* ⛔ RESERVE TWO LINES, ALWAYS. Measured over 26 cycles: this element renders 31px for most
   titles but 56px for "PERFORMANCE MARKETING MANAGER" and "PRODUCT MARKETING MANAGER",
   which wrap. min-height:26px reserved ONE line, so the card swung 606-633px and, since the
   fan block sizes to the card, the whole section jumped. A rotating slot must be sized for
   its LONGEST member, not its typical one. */
#howNative .cv-role{font-size:23px;font-weight:900;letter-spacing:-.02em;text-transform:uppercase;padding:7px 28px 0;line-height:1.06;min-height:56px;color:var(--navy);display:block}
  #howNative .cv-flash{animation:cvFlash .9s var(--e)}
  @keyframes cvFlash{0%{background:rgba(245,255,171,0)}22%{background:rgba(245,255,171,.55)}100%{background:rgba(245,255,171,0)}}#howNative .cv-role .hl{box-shadow:inset 0 -.42em 0 rgba(23,23,43,.16)}#howNative /* company band: secondary, #howNative quieter, #howNative beneath the position */
.cv-co{display:flex;align-items:center;gap:12px;padding:16px 28px 0}#howNative .cv-clogo{width:38px;height:38px;border-radius:10px;overflow:hidden;flex:none;background:var(--navy)}#howNative .cv-clogo img{width:100%;height:100%;object-fit:cover}#howNative .cv-cmeta{min-width:0;flex:1;display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}#howNative .cv-cmeta .at{font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(23,23,43,.35)}#howNative .cv-cco{font-weight:800;letter-spacing:-.01em;font-size:15px;line-height:1;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#howNative .cv-cloc{font-size:11px;font-weight:600;color:rgba(23,23,43,.62)}#howNative .cv-sum{font-size:12px;line-height:1.55;color:rgba(23,23,43,.78);font-weight:500;padding:16px 28px 0;min-height:52px}#howNative .cv-exp{padding:16px 28px 0;opacity:.5}#howNative .cv-exp-lbl{font-size:9.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:rgba(23,23,43,.58);margin-bottom:8px}#howNative .cv-exp-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:5px 0}#howNative .cv-exp-row+.cv-exp-row{border-top:1px solid rgba(23,23,43,.09)}#howNative .cv-exp-row .xr{font-size:12.5px;font-weight:700;color:var(--navy);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#howNative .cv-exp-row .xd{font-size:11px;font-weight:700;color:rgba(23,23,43,.66);font-variant-numeric:tabular-nums;white-space:nowrap;flex:none}#howNative .cv-sk{display:flex;flex-wrap:wrap;gap:6px;padding:14px 28px 0}#howNative .cv-sk i{font-style:normal;font-size:11px;font-weight:800;letter-spacing:.01em;padding:5px 11px;border-radius:8px;
  background:rgba(23,23,43,.9);color:var(--lime);border:1px solid rgba(23,23,43,.9);white-space:nowrap;
  opacity:0;transform:translateY(6px) scale(.96);animation:cvSkPop .5s var(--e) forwards;box-shadow:0 4px 12px -6px rgba(23,23,43,.5)}
  @keyframes cvSkPop{0%{opacity:0;transform:translateY(6px) scale(.96)}60%{box-shadow:0 0 0 3px rgba(245,255,171,.35)}100%{opacity:1;transform:none;box-shadow:0 4px 12px -6px rgba(23,23,43,.5)}}
  @media(prefers-reduced-motion:reduce){#howNative .cv-sk i{opacity:1;transform:none;animation:none}}#howNative .cv-foot{display:flex;align-items:flex-end;justify-content:space-between;margin:22px 28px 24px;padding-top:16px;border-top:1px solid rgba(23,23,43,.09)}#howNative .cv-foot .m{font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:rgba(23,23,43,.62)}#howNative .cv-foot .r{text-align:right}#howNative .cv-foot .rk{font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:rgba(23,23,43,.4);margin-bottom:2px}#howNative .cv-foot .pct{font-weight:900;font-size:30px;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1}#howNative .cv-foot .pct em{font-style:normal;font-size:15px;color:rgba(23,23,43,.45)}#howNative .w{display:inline-block;will-change:transform,opacity,filter}#howNative /* APPLIED stamp */
.cv-stamp{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-8deg) scale(.5);opacity:0;z-index:5;
  border:3px solid var(--navy);color:var(--navy);border-radius:10px;font-size:26px;font-weight:900;letter-spacing:.08em;padding:9px 18px;text-transform:uppercase}#howNative .cv.stamped .cv-stamp{animation:hnStamp .55s var(--e) forwards}@keyframes hnStamp{0%{opacity:0;transform:translate(-50%,-50%) rotate(-8deg) scale(1.5)}55%{opacity:1}100%{opacity:1;transform:translate(-50%,-50%) rotate(-8deg) scale(1)}}#howNative /* ── the LINE: one quiet horizontal filmstrip of companies (replaces rail + applied column) ── */
.line{margin-top:clamp(28px,4vw,44px)}#howNative .line-top{display:flex;align-items:center;justify-content:space-between;max-width:960px;margin:0 auto 14px;padding:0 4px}#howNative .line-top .t{font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--mut2)}#howNative .line-top .c{font-size:10px;font-weight:700;letter-spacing:.04em;color:var(--mut);font-variant-numeric:tabular-nums}#howNative .line-top .c b{color:var(--lime);font-weight:800}#howNative .strip{position:relative;max-width:960px;margin:0 auto;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}#howNative .strip-track{display:flex;gap:10px;padding:2px;transition:transform .7s var(--e);width:max-content}#howNative .chip{display:flex;align-items:center;gap:10px;padding:11px 15px 11px 12px;border-radius:12px;flex:none;
  background:rgba(255,255,255,.03);border:1px solid var(--hair-s);transition:background .4s var(--e),border-color .4s var(--e),opacity .4s var(--e)}#howNative .chip .logo{width:30px;height:30px;border-radius:8px;overflow:hidden;flex:none;background:#0b0b18}#howNative .chip .logo img{width:100%;height:100%;object-fit:cover}#howNative .chip .nm{font-weight:800;letter-spacing:-.01em;font-size:14px;white-space:nowrap;color:var(--mut)}#howNative .chip .tick{width:15px;height:15px;flex:none;opacity:0;transition:opacity .3s var(--e)}#howNative .chip .tick svg{width:100%;height:100%;color:var(--lime)}#howNative .chip.done{opacity:.5}#howNative .chip.done .tick{opacity:1}#howNative .chip.done .nm{color:var(--mut)}#howNative .chip.on{background:var(--lime);border-color:var(--lime)}#howNative .chip.on .nm{color:var(--navy)}#howNative .chip.on .logo{background:var(--navy)}#howNative .chip.on .tick{opacity:0}#howNative /* ── responsive ── */
@media(max-width:720px){#howNative h1{font-size:30px}#howNative .stats .s{padding:0 16px}#howNative .stats .n{font-size:19px}#howNative .cv-head{padding:22px 20px 16px}#howNative .cv-photo{width:84px;height:84px}#howNative .cv-name{font-size:22px}#howNative .cv-contact{font-size:10px}#howNative .cv-co, #howNative .cv-role-lbl, #howNative .cv-role, #howNative .cv-sum, #howNative .cv-exp, #howNative .cv-sk{padding-left:20px;padding-right:20px}#howNative .cv-hr{margin:0 20px}#howNative .cv-foot{margin:20px 20px 22px}#howNative /* let long position titles WRAP to 2 lines instead of shrinking tiny or overflowing */
  .posslot{padding:2px 14px}#howNative .pos{white-space:normal;line-height:1.06;font-size:clamp(22px,6.2vw,30px);max-width:100%;text-wrap:balance}}@media(prefers-reduced-motion:reduce){#howNative .dot{animation:none}#howNative .cv, #howNative .strip-track{transition:none}}

  /* ── auto-apply pipeline ── */
  /* ⛔ TWO BLOCKS. .cvwrap and .pipe-sec are siblings in .stage; making .stage a two-column
     grid is what puts the CV beside the fan. This is not cosmetic: the fan's whole geometry is
     left-to-right, so it is only correct once the source document actually sits beside its
     destinations. The `.now` status line spans both columns and keeps leading the section. */
  /* ONE wide block: the CV now lives INSIDE the fan as its source, so .stage is a single
     column again and the fan spans the full section width. */
  #howNative .pipe-sec{margin:0 auto;max-width:none;min-width:0}
  #howNative .pipe-lede{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 4px 16px;flex-wrap:wrap}
  #howNative .pipe-lede .k{font-size:10.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--mut2)}
  #howNative .pipe-lede .c{font-family:var(--mono,monospace);font-size:12px;color:var(--mut2);letter-spacing:.03em}
  #howNative .pipe-lede .c b{color:var(--lime);font-weight:800}
  #howNative .pipe-stage{position:relative}
  #howNative .pipe-svg{position:absolute;left:0;top:0;width:100%;height:100%;z-index:1;pointer-events:none;overflow:visible}
  #howNative /* brighter but FINER: precision, not thick tubes */
  .pipe-pipe{fill:none;stroke:rgba(255,255,255,.34);stroke-width:2;stroke-linecap:round}
  #howNative .pipe-pulse{fill:none;stroke:var(--lime);stroke-width:2.4;stroke-linecap:round;filter:drop-shadow(0 0 10px rgba(245,255,171,.9))}
  /* wider column gap than row gap: reads as two columns, not an undifferentiated grid. */
  /* pipe-pyramid: 8 cards as 2 / 3 / 3, widening downward, so the layout itself says "one CV in,
   many applications out". A 2x4 grid read as a list and gave the connectors nothing to express.
   Six columns lets each row centre by span instead of margin hacks. The SVG pipes are computed
   from each box's live rect, so they re-route to these positions with no JS change. */

  /* ── THE FAN. Replaces the dsp-board row list. A vertical list of eight near-identical rows
     states a SEQUENCE; the claim here is ONE CV becoming MANY applications, which is a
     one-to-many relationship a list cannot express however it is styled.

     ⛔ Geometry, bezier, easing and timing are ported 1:1 from the approved concept: SOURCE LEFT,
     DESTINATIONS RIGHT, curves sweeping the gap. An earlier attempt fanned DOWNWARD out of the
     full-width CV card and failed — measured, that card ends 54px ABOVE this block, so the curves
     had no horizontal room and collapsed into one band. The fix was the composition, not the maths.
     The CV card is scaled down (--cvs) so it shares the row instead of owning it. ────────────── */
  /* tall enough for the real CV card to sit inside it; the concept's 42vw was sized for a
     miniature. min-height (not height) so a long card can push the block rather than overflow. */
  /* ⛔ the source is position:absolute, so it cannot size this block. Measured, the card is
     609px against a 580px cap and its footer was clipped. The block therefore reserves the row
     via a grid track fed by a non-positioned clone-free spacer: .fx-src stays absolute for the
     concept's centring, and min-height tracks the card through --fx-h, set by JS from the real
     measured card. Fallback keeps the concept's own value for first paint. */
  #howNative .fanx{position:relative;min-height:var(--fx-h,clamp(430px,46vw,580px));
    margin-top:clamp(10px,1.6vw,20px)}
  #howNative .fanx .fx-cv{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;
    pointer-events:none}
  /* the miniature source document, vertically centred on the left edge */
  /* ⛔ the source is the REAL CV card, not the concept's 132px stub. It keeps its own width
     and is vertically centred on the left edge exactly as the concept's document was, so the
     anchor maths (which measures this element at runtime) needs no change at all. */
  #howNative .fanx .fx-src{position:absolute;left:0;top:50%;transform:translateY(-50%);z-index:2;
    width:clamp(300px,29vw,392px)}
  /* the concept's placeholder mini-document (.fx-doc/.fx-dh/.fx-dl/.fx-tag) is gone: the real
     CV card stands in its place. Its own .cv styles carry the paper look. */
  #howNative .fanx .cvwrap{display:block}
  #howNative .fanx .cvstage{width:100%}
  /* destinations, right-aligned so the pin is the terminus every curve is measured to */
  #howNative .fanx .fx-dst{position:absolute;right:0;top:0;bottom:0;z-index:2;list-style:none;
    margin:0;padding:clamp(6px,1.4vw,16px) 0;width:clamp(210px,27vw,320px);
    display:flex;flex-direction:column;justify-content:space-between}
  #howNative .fanx .fx-d{display:flex;align-items:center;gap:clamp(9px,1.3vw,13px);
    justify-content:flex-end;opacity:.34;transition:opacity .5s ease}
  #howNative .fanx .fx-d.lit{opacity:1}
  #howNative .fanx .fx-b{min-width:0;display:flex;flex-direction:column;gap:2px;text-align:right}
  #howNative .fanx .fx-b b{font-size:clamp(12px,1.35vw,15px);font-weight:800;letter-spacing:-.02em;
    color:#fff;line-height:1.16;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #howNative .fanx .fx-b i{font-style:normal;font-size:clamp(8.5px,.95vw,10px);
    color:rgba(255,255,255,.4);line-height:1.2;white-space:nowrap;overflow:hidden;
    text-overflow:ellipsis;transition:color .5s ease}
  #howNative .fanx .fx-d.lit .fx-b i{color:rgba(255,255,255,.6)}
  /* ⛔ NO LOGO TILES. The concept is name + hairline pin, full stop. Adding a 28px company
     tile to each row put a third lime-adjacent object beside the travelling sheet and the pin,
     and the eye had nowhere to rest. Restraint is the design here. */
  #howNative .fanx .fx-p{width:7px;height:7px;border-radius:50%;flex:none;
    border:1px solid rgba(255,255,255,.3);
    transition:background .45s ease,border-color .45s ease,box-shadow .45s ease}
  #howNative .fanx .fx-d.lit .fx-p{background:var(--lime);border-color:var(--lime);
    box-shadow:0 0 0 3px rgba(245,255,171,.14)}
  @media(max-width:900px){
    /* stacked: no horizontal room for a left-to-right sweep, so the curves are dropped (JS hides
       the canvas) and the source document sits above its destinations */
    #howNative .fanx{min-height:0;height:auto;display:grid;gap:clamp(16px,4vw,26px)}
    #howNative .fanx .fx-src{position:static;transform:none;width:100%}
    #howNative .fanx .cvstage{margin:0 auto}
    #howNative .fanx .fx-dst{position:static;width:auto;gap:11px;padding:0}
    #howNative .fanx .fx-d{justify-content:flex-start;flex-direction:row-reverse;
      padding:2px 0}
    #howNative .fanx .fx-p{order:-1}
    #howNative .fanx .fx-b{text-align:left;flex:1}
    #howNative .fanx .fx-b{text-align:left}}
  @media(prefers-reduced-motion:reduce){
    #howNative .fanx .fx-d,#howNative .fanx .fx-l,#howNative .fanx .fx-p{transition:none}}

  /* ── dsp-board: a dispatch board, not a diagram. Every earlier version was boxes joined by
     lines, which is the generic AI-landing-page shape and cannot be fixed by restyling the boxes.
     Here the structure itself changes: a list on the section ground, hairline-separated, with ONE
     lime rail whose travelling pulse ignites each row in turn. Lime appears exactly twice, on the
     rail and on SENT. Timing is CSS delay keyed to nth-child, so nothing drifts. ──────────── */
  #howNative .dsp-board{position:relative;padding:clamp(26px,4vw,44px) 0 clamp(8px,1.4vw,16px);
    padding-left:clamp(22px,3.4vw,44px)}
  #howNative .dsp-rail{position:absolute;left:0;top:clamp(26px,4vw,44px);bottom:clamp(8px,1.4vw,16px);
    width:1px;background:rgba(255,255,255,.13);overflow:visible}
  #howNative .dsp-pulse{position:absolute;left:-2px;width:5px;height:64px;border-radius:3px;
    background:linear-gradient(180deg,transparent,var(--lime),transparent);
    filter:drop-shadow(0 0 8px rgba(245,255,171,.55));
    animation:dspRun 9.2s cubic-bezier(.4,0,.2,1) infinite}
  @keyframes dspRun{0%{top:-64px;opacity:0}6%{opacity:1}88%{opacity:1}100%{top:100%;opacity:0}}
  #howNative .dsp-list{list-style:none;margin:0;padding:0}
  /* flap-board: rows resolve on SCROLL, not on a timer. The previous build used fixed CSS
     delays that had already finished before the section came into view on a phone, so every row
     showed SENT and the counter still read 0. An IntersectionObserver per row keeps what is on
     screen and what the counter says in agreement. */
  #howNative .dsp-r{display:grid;grid-template-columns:38px 1fr auto auto;
    gap:0 clamp(12px,2vw,26px);align-items:baseline;
    padding:clamp(13px,1.7vw,19px) 0;border-bottom:1px solid rgba(255,255,255,.07);
    opacity:.62;transition:opacity .5s ease}
  #howNative .dsp-r.in{opacity:1}
  /* name and meta assemble a beat behind the flap, so the row builds rather than pops */
  #howNative .dsp-r .dsp-c{transform:translateY(5px);opacity:.85;
    transition:transform .55s cubic-bezier(.22,1,.36,1) .12s,opacity .55s ease .12s}
  #howNative .dsp-r.in .dsp-c{transform:none;opacity:1}
  #howNative .dsp-r:last-child{border-bottom:0}
  @keyframes dspLand{to{opacity:1}}
  #howNative .dsp-i{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;
    font-weight:700;letter-spacing:.06em;color:rgba(255,255,255,.28)}
  #howNative .dsp-c b{display:block;font-size:clamp(14px,1.6vw,18px);font-weight:800;
    letter-spacing:-.024em;color:#fff;line-height:1.15}
  #howNative .dsp-c i{display:block;font-style:normal;font-family:ui-monospace,monospace;
    font-size:9px;letter-spacing:.11em;color:rgba(255,255,255,.3);margin-top:4px}
  #howNative .dsp-role{font-size:12.5px;color:rgba(255,255,255,.5);white-space:nowrap}
  /* status flips queued -> sent as the row lands; the swap is the payoff, so it is the only
     other place lime appears */
  /* split-flap: QUEUED and SENT stacked in a clipped box; the stack rotates on rotateX with a
     mid-flip darken, which is what reads as a mechanical flap instead of a crossfade. */
  #howNative .dsp-st{position:relative;display:block;width:52px;height:13px;overflow:hidden;
    perspective:120px}
  #howNative .dsp-st em,#howNative .dsp-st u{position:absolute;inset:0;display:block;
    font-style:normal;text-decoration:none;text-align:right;
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9.5px;font-weight:800;
    letter-spacing:.12em;text-transform:uppercase;line-height:13px;
    backface-visibility:hidden;transition:transform .5s cubic-bezier(.5,0,.2,1),
      filter .5s ease}
  #howNative .dsp-st em{color:rgba(255,255,255,.26);transform:rotateX(0deg)}
  #howNative .dsp-st u{color:var(--lime);transform:rotateX(-90deg)}
  #howNative .dsp-r.in .dsp-st em{transform:rotateX(90deg);filter:brightness(.4)}
  #howNative .dsp-r.in .dsp-st u{transform:rotateX(0deg)}
  @media(max-width:720px){
    #howNative .dsp-r{grid-template-columns:30px 1fr auto;gap:0 12px}
    #howNative .dsp-role{display:none}
    #howNative .dsp-c b{font-size:13.5px}}
  @media(prefers-reduced-motion:reduce){
    #howNative .dsp-st em,#howNative .dsp-st u,#howNative .dsp-r .dsp-c{transition:none}
    #howNative .dsp-pulse{animation:none;opacity:0}
    #howNative .dsp-r{opacity:1;animation:none}
    #howNative .dsp-st em{opacity:0}
    #howNative .dsp-st u{opacity:1;animation:none}}
  #howNative .pipe-cos{position:relative;z-index:2;display:grid;grid-template-columns:repeat(6,1fr);
    gap:34px 18px;padding-top:104px;align-items:start}
  /* row 1: two cards, centred */
  #howNative .pipe-cos .pco:nth-child(1){grid-column:2/4}
  #howNative .pipe-cos .pco:nth-child(2){grid-column:4/6}
  /* row 2: three cards */
  #howNative .pipe-cos .pco:nth-child(3){grid-column:1/3}
  #howNative .pipe-cos .pco:nth-child(4){grid-column:3/5}
  #howNative .pipe-cos .pco:nth-child(5){grid-column:5/7}
  /* row 3: three cards */
  #howNative .pipe-cos .pco:nth-child(6){grid-column:1/3}
  #howNative .pipe-cos .pco:nth-child(7){grid-column:3/5}
  #howNative .pipe-cos .pco:nth-child(8){grid-column:5/7}
  /* denser cards, since three now share a row */
  /* ~30% smaller so the connectors, not the boxes, carry the diagram */
  /* award-tier pass: hairline borders instead of filled cards, tighter radius, and a hover lift.
     A diagram reads high-end when the CONTAINERS recede and the structure carries the eye, so the
     surface drops to near-transparent and the border does the defining. */
  /* pipe-occlude: an OPAQUE fill. At rgba(255,255,255,.014) the pipes rendered straight
     through the cards, which is what made the diagram look cheap. #14142a sits close to the
     section ground so the container still recedes, but it fully occludes what passes behind
     it, so the pipes terminate AT the card like a real diagram. */
  /* pco-varied: eight identical rectangles read as generated. Cards dim, take their own film
     grain, and each draws a different hue from the brand range so no two neighbours match. The
     tint is low-alpha over an OPAQUE base, so the pipes stay occluded (see pipe-occlude). */
  #howNative .pipe-cos .pco{gap:9px;padding:10px 12px;border-radius:7px;position:relative;
    background:#101024;border:1px solid rgba(255,255,255,.07);
    box-shadow:none;transition:border-color .5s var(--e),background .5s var(--e),
      transform .5s var(--e),opacity .6s var(--e)}
  #howNative .pipe-cos .pco.lit{background:#181832;
    border-color:hsla(var(--hue,75),90%,70%,.5);box-shadow:0 0 0 1px hsla(var(--hue,75),90%,70%,.10)}
  #howNative .pipe-cos .pco .emb{width:32px;height:32px;border-radius:6px}
  /* per-card film grain: matches the section's own texture so the boxes sit IN the surface
     rather than on it. Inline turbulence, no image request. */
  #howNative .pipe-cos .pco::before{content:"";position:absolute;inset:0;border-radius:inherit;
    pointer-events:none;opacity:.16;mix-blend-mode:overlay;background-size:180px 180px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.6'/%3E%3C/svg%3E")}
  /* per-card hue from the brand range: navy -> periwinkle -> lime, low alpha over the base */
  /* lit cards pick up a faint lime cast rather than all sharing one highlight */

  /* pco-hue-range: the previous pass used hexes 1-2 digits apart, which is below the perceptual
     threshold on a dark ground, so all eight cards still read identical. Each card now sets its
     own --h (hue) and --s (saturation), consumed by one rule set: an opaque base fill, a gradient
     wash so the surface is not flat, a border tinted from the SAME hue, and per-card grain
     opacity. Fills stay dark enough for white type to hold contrast, and opaque so the pipes
     remain occluded. */
  #howNative .pipe-cos .pco{
    background:
      linear-gradient(152deg,
        hsl(var(--h) var(--s) 13%) 0%,
        hsl(var(--h) calc(var(--s) - 6%) 9%) 62%,
        hsl(var(--h) calc(var(--s) - 10%) 7%) 100%);
    border:1px solid hsl(var(--h) var(--s) 62% / .28)}
  #howNative .pipe-cos .pco:nth-child(1){--h:238;--s:34%}
  #howNative .pipe-cos .pco:nth-child(2){--h:224;--s:40%}
  #howNative .pipe-cos .pco:nth-child(3){--h:250;--s:30%}
  #howNative .pipe-cos .pco:nth-child(4){--h:196;--s:32%}
  #howNative .pipe-cos .pco:nth-child(5){--h:262;--s:28%}
  #howNative .pipe-cos .pco:nth-child(6){--h:172;--s:26%}
  #howNative .pipe-cos .pco:nth-child(7){--h:212;--s:38%}
  #howNative .pipe-cos .pco:nth-child(8){--h:66;--s:24%}
  /* grain varies too, so the texture is not uniform across the row */
  #howNative .pipe-cos .pco:nth-child(2n)::before{opacity:.22}
  #howNative .pipe-cos .pco:nth-child(3n)::before{opacity:.13}
  /* applied state: the card's own hue lifts rather than every card sharing one highlight */
  /* applied state: only a slight lift, not a glare. The previous +8% saturation at 17% lightness
     read as a bright block against its dim neighbours; a diagram should show state through the
     border and the check, not by lighting the whole card. Grain INCREASES when lit so the surface
     stays textured rather than turning into flat colour. */
  #howNative .pipe-cos .pco.lit{
    background:
      linear-gradient(152deg,
        hsl(var(--h) calc(var(--s) + 2%) 14%) 0%,
        hsl(var(--h) var(--s) 10%) 62%,
        hsl(var(--h) calc(var(--s) - 6%) 8%) 100%);
    border-color:hsl(75 90% 70% / .38)}
  #howNative .pipe-cos .pco.lit::before{opacity:.30}
  #howNative .pipe-cos .pco.lit:nth-child(2n)::before{opacity:.34}
  #howNative .pipe-cos .pco.lit:nth-child(3n)::before{opacity:.27}
    #howNative .pipe-cos .pco .nm,#howNative .pipe-cos .pco .sub,
  #howNative .pipe-cos .pco .pst,#howNative .pipe-cos .pco .emb{position:relative;z-index:1}

  #howNative .pipe-cos .pco .nm{font-size:12.5px;letter-spacing:-.02em}
  #howNative .pipe-cos .pco .sub{font-size:8.5px;letter-spacing:.09em}
  #howNative .pipe-cos .pco .pst{margin-top:5px;font-size:9.5px}
  #howNative .pipe-cos .pco .pst svg.pchk{width:11px;height:11px}
  /* pipeline-flat: neurobird surface language. The old cards read generic because heavy blurred
     shadows did the separation, 16px pill corners read consumer-app, and inactive cards were
     dimmed with saturate/brightness which muddies them to grey. Here structure comes from
     hairline rules, radius drops to 9px, and dimming is OPACITY only so colour stays true. */
  #howNative .pco{position:relative;display:flex;align-items:center;gap:16px;padding:16px 18px;border-radius:9px;overflow:hidden;
    background:#14142a;border:1px solid rgba(255,255,255,.14);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.045);
    opacity:.52;
    transition:opacity .6s var(--e),border-color .6s var(--e),box-shadow .6s var(--e),transform .6s var(--e)}
  #howNative .pco.lit{opacity:1;transform:translateY(-1px);
    border-color:hsla(var(--hue,75),90%,70%,.42);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 0 0 1px hsla(var(--hue,75),90%,70%,.12)}
  /* the emblem supports the state: dimmed while pending, full strength once applied. */
  #howNative .pco .emb{width:56px;height:56px;border-radius:8px;overflow:hidden;flex:none;background:#0b0b16;border:1px solid rgba(255,255,255,.1);opacity:.55;transition:opacity .6s var(--e)}
  #howNative .pco.lit .emb{opacity:1}
  #howNative .pco .emb img{width:100%;height:100%;object-fit:cover;display:block}
  #howNative .pco .body{min-width:0;flex:1;display:flex;flex-direction:column;gap:3px}
  /* pipeline-refined: the name leads. Larger, tighter tracking, full white. */
  #howNative .pco .nm{font-weight:800;font-size:16.5px;letter-spacing:-.028em;color:#fff;line-height:1.02;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* demoted to a caption: smaller, wider tracking, lower contrast, so it stops competing. */
  #howNative .pco .sub{font-size:10px;color:rgba(255,255,255,.34);font-family:var(--mono,monospace);letter-spacing:.09em;text-transform:uppercase;margin-top:3px}
  #howNative .pco .pfill{display:none}
  #howNative .pco>*{position:relative;z-index:1}
  #howNative .pco .plogo{width:44px;height:44px;border-radius:11px;overflow:hidden;flex:none;background:#0e0e1c;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
  #howNative .pco .plogo img{width:100%;height:100%;object-fit:cover;display:block}
  #howNative .pco .pmeta{min-width:0;flex:1}
  #howNative .pco .pnm{font-weight:800;font-size:15px;letter-spacing:-.02em;color:#fff;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* a quiet confirmation: lighter weight, more air above, colour carries the state. */
  #howNative .pco .pst{margin-top:9px;display:flex;align-items:center;gap:7px;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.005em;color:rgba(255,255,255,.42);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .5s}
  #howNative .pco.lit .pst{color:var(--lime)}
  #howNative .pco .pst .pdot{width:6px;height:6px;border-radius:50%;background:var(--mut2);flex:none}
  #howNative .pco .pst .pdot{width:6px;height:6px;border-radius:50%;background:var(--mut2);flex:none;transition:background .45s,box-shadow .45s}
  #howNative .pco .pst .pchk{width:13px;height:13px;flex:none;color:var(--navy);background:var(--lime);border-radius:50%;padding:2px;box-sizing:border-box}
  
  #howNative .pco.lit .pfill{width:3px;opacity:.9}
  #howNative .pco.lit .pst{color:rgba(245,255,171,.92)}
  #howNative .pco.lit .pst .pdot{background:var(--lime);box-shadow:0 0 0 4px rgba(245,255,171,.16)}
  @media(max-width:900px){#howNative .pipe-cos{grid-template-columns:1fr;gap:9px}
    #howNative .pipe-cos .pco:nth-child(n){grid-column:1/-1}}
  /* ⛔⛔ HIDE THE FAN-OUT, NEVER THE CV. #pipeSec contains BOTH the company list (#fanDst) and
     Alex Moreno's tailored CV (.fx-src) — the single most important asset on the page. An earlier
     pass put display:none on #pipeSec to suppress the one-column company list and deleted the CV
     with it. Enumerate what a container HOLDS before styling the container away.
     Below 720px only the destinations and their connectors go: the column-spine pulse needs
     columns to fan across, and at one column it reads as an unexplained list of company names.
     #stats carries the same "many distinct companies" claim mobile-natively.
     ⛔ Restore with a purpose-built mobile treatment, never by re-showing the desktop grid. */
  @media(max-width:720px){
  #howNative #fanDst,#howNative #fanCanvas,#howNative #pipeSvg{display:none}
  #howNative .pipe-lede{display:none}
  #howNative .fanx{display:block;padding-bottom:0}
  #howNative .fx-src{width:100%;margin:0 auto}
  #howNative .pipe-cos{gap:8px;padding-top:70px}#howNative .pco{flex-direction:column;align-items:flex-start;gap:9px;padding:12px 12px}#howNative .pco .emb{width:42px;height:42px;border-radius:7px}#howNative .pco .nm{font-size:13px;white-space:normal;line-height:1.1}#howNative .pco .sub{font-size:10px}#howNative .pco .pst{font-size:10px}#howNative .pco .pst svg.pchk{width:12px;height:12px}}
  @media(prefers-reduced-motion:reduce){    #howNative .pco{transition:none} #howNative .pco.lit .pst{color:var(--lime)}}