/* ==========================================================================
   LUMEN design system
   One stylesheet for every page of the site, all three languages.
   Dark clinical editorial: ink ground, teal signal, paper type, hairlines.
   Logical properties throughout so Arabic (RTL) needs no mirrored rules.
   No external resources. No web fonts. No frameworks.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root{
  /* ground */
  --ink:#06080b;
  --ink-2:#0a0e13;
  --ink-3:#0d1219;

  /* signal */
  --teal:#5ad6c6;
  --teal-deep:#2aa896;
  --teal-glow:rgba(90,214,198,.55);
  --teal-wash:rgba(90,214,198,.10);

  /* type */
  --paper:#f4f1ea;
  --paper-2:rgba(244,241,234,.60);
  --paper-3:rgba(244,241,234,.48);   /* .34 measured 2.77:1 on --ink, below our own 4.5:1 floor; .48 measures 4.53:1 */

  /* lines */
  --hair:rgba(244,241,234,.12);
  --hair-strong:rgba(244,241,234,.22);

  /* families */
  --serif:"Bodoni 72","Didot","Iowan Old Style",ui-serif,Georgia,serif;
  --sans:"Avenir Next","Avenir",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"SF Mono","Menlo",ui-monospace,monospace;

  /* typographic scale, clamp-driven, one source of truth */
  --t-display:clamp(52px,10vw,140px);   /* the wordmark and page-opening statements */
  --t-h1:clamp(34px,5.2vw,72px);        /* page hero headline */
  --t-h2:clamp(26px,3.6vw,50px);        /* act beats, section heads */
  --t-h3:clamp(19px,2.2vw,28px);        /* sub-section heads */
  --t-lede:clamp(16px,1.7vw,21px);      /* standfirst under a hero */
  --t-body:clamp(14px,1.15vw,16px);     /* running text */
  --t-small:clamp(11px,1.05vw,13.5px);  /* dense supporting text */
  --t-micro:10px;                       /* mono micro-labels */
  --t-figure:clamp(44px,7vw,96px);      /* evidence-register single numbers */

  /* rhythm */
  --gut:clamp(20px,5vw,80px);           /* page gutter */
  --sect:clamp(72px,14vh,160px);        /* vertical space between sections */
  --rail-w:56px;

  /* motion */
  --ease-out:cubic-bezier(.22,.61,.2,1);
  --dur:.7s;
}

/* --------------------------------------------------------------------------
   2. Reset and base
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:clip;scroll-behavior:smooth}
body{
  background:var(--ink);
  color:var(--paper);
  font-family:var(--sans);
  font-size:var(--t-body);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
  min-height:100svh;
}
img,canvas,svg,video{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--teal-deep);color:var(--ink)}

/* film grain over everything, pointer-transparent */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:90;opacity:.14;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.5'/></svg>");
  mix-blend-mode:overlay;
}

/* --------------------------------------------------------------------------
   3. Typography classes
   -------------------------------------------------------------------------- */
.display{font:300 var(--t-display)/0.95 var(--serif);letter-spacing:.16em;text-indent:.16em}
.h1{font:300 var(--t-h1)/1.05 var(--serif);letter-spacing:-.005em}
.h2{font:300 var(--t-h2)/1.1 var(--serif);letter-spacing:-.005em}
.h3{font:400 var(--t-h3)/1.25 var(--serif)}
.lede{font:300 var(--t-lede)/1.55 var(--serif);color:var(--paper-2);max-width:56ch}
.body-2{color:var(--paper-2)}
.small{font-size:var(--t-small)}

/* mono micro-label grammar: the site's captions, kickers and wayfinding */
.kicker{
  font:500 var(--t-micro)/1.6 var(--mono);
  letter-spacing:.30em;color:var(--teal-deep);text-transform:uppercase;
}
.micro{
  font:400 var(--t-micro)/1.7 var(--mono);
  letter-spacing:.14em;color:var(--paper-3);text-transform:uppercase;
}
.num{font-variant-numeric:tabular-nums}

/* the gradient hairline used under heroes and between chapters */
.rule{
  height:1px;inline-size:min(380px,55vw);margin-block:30px 0;margin-inline:auto;
  background:linear-gradient(90deg,transparent,var(--teal),transparent);
  box-shadow:0 0 18px rgba(90,214,198,.5);border:0;
}
.rule--start{margin-inline:0 auto;background:linear-gradient(90deg,var(--teal),transparent)}

/* Arabic surfaces: tracked uppercase mono grammar does not apply to the script */
:lang(ar){letter-spacing:0}
:lang(ar) .display{letter-spacing:0;text-indent:0}
:lang(ar) .kicker,:lang(ar) .micro{letter-spacing:.04em}
[dir="rtl"] body,[dir="rtl"]{font-family:var(--sans)}

/* --------------------------------------------------------------------------
   4. Layout primitives
   -------------------------------------------------------------------------- */
.wrap{max-inline-size:1240px;margin-inline:auto;padding-inline:var(--gut)}
.wrap--narrow{max-inline-size:820px}
.section{padding-block:var(--sect);position:relative}
.section--hair{border-block-start:1px solid var(--hair)}

/* 12-column grid; collapses on small screens */
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(16px,2.4vw,32px)}
.col-4{grid-column:span 4}
.col-5{grid-column:span 5}
.col-6{grid-column:span 6}
.col-7{grid-column:span 7}
.col-8{grid-column:span 8}
.col-12{grid-column:1 / -1}
@media(max-width:900px){
  .col-4,.col-5,.col-6,.col-7,.col-8{grid-column:1 / -1}
}

/* any wide element scrolls inside its own container, never the body */
.scroll-x{overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.scroll-x > *{min-inline-size:640px}

/* --------------------------------------------------------------------------
   5. Header, shared by every page
   -------------------------------------------------------------------------- */
.site-head{
  position:fixed;inset-block-start:0;inset-inline:0;z-index:70;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-block:calc(14px + env(safe-area-inset-top)) 14px;
  padding-inline:calc(var(--gut) + env(safe-area-inset-left)) calc(var(--gut) + env(safe-area-inset-right));
  /* the gradient reached full transparency by 30 percent of the header's own
     height, so scrolled content ran straight under the nav and read as a
     collision: on the hardware page the word HARDWARE sat on top of a spec row.
     The mask now stays solid across the nav's own line box and only then falls
     away, with a blur behind it so anything passing underneath is soft rather
     than legible. */
  background:linear-gradient(var(--ink) 62%,rgba(6,8,11,.82) 82%,rgba(6,8,11,0));
  -webkit-backdrop-filter:blur(10px) saturate(120%);
  backdrop-filter:blur(10px) saturate(120%);
  -webkit-mask-image:linear-gradient(#000 78%,rgba(0,0,0,0));
  mask-image:linear-gradient(#000 78%,rgba(0,0,0,0));
}
.site-head .brand{
  font:400 15px/1 var(--serif);letter-spacing:.32em;text-transform:uppercase;
  text-decoration:none;color:var(--paper);padding-inline-end:.32em;
}
.site-nav{display:flex;gap:clamp(14px,2vw,28px)}
.site-nav a{
  font:400 var(--t-micro)/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--paper-3);text-decoration:none;padding-block:6px;
  border-block-end:1px solid transparent;transition:color .3s,border-color .3s;
}
.site-nav a:hover{color:var(--paper)}
.site-nav a[aria-current="page"]{color:var(--teal);border-color:var(--teal-deep)}
.lang-switch{display:flex;gap:2px;align-items:center;font:400 var(--t-micro)/1 var(--mono)}
.lang-switch a{
  color:var(--paper-3);text-decoration:none;padding:5px 8px;letter-spacing:.08em;
  border:1px solid transparent;transition:color .3s;
}
.lang-switch a:hover{color:var(--paper)}
.lang-switch a.on{color:var(--teal);border-color:var(--hair)}
@media(max-width:900px){.site-nav{display:none}}

/* --------------------------------------------------------------------------
   6. Footer, shared by every page
   -------------------------------------------------------------------------- */
.site-foot{
  border-block-start:1px solid var(--hair);
  padding-block:clamp(48px,8vh,90px) calc(28px + env(safe-area-inset-bottom));
  padding-inline:var(--gut);
}
.site-foot__grid{
  max-inline-size:1240px;margin-inline:auto;
  display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:clamp(24px,4vw,56px);
}
.site-foot .brand{font:400 18px/1 var(--serif);letter-spacing:.32em;text-transform:uppercase}
.site-foot__tag{margin-block-start:16px;color:var(--paper-3);font-size:var(--t-small);max-inline-size:34ch}
.site-foot h4{
  font:400 var(--t-micro)/1 var(--mono);letter-spacing:.26em;text-transform:uppercase;
  color:var(--teal-deep);margin-block-end:16px;
}
.site-foot__col a{
  display:block;color:var(--paper-2);text-decoration:none;
  font-size:var(--t-small);padding-block:5px;transition:color .3s;
}
.site-foot__col a:hover{color:var(--paper)}
.site-foot__legal{
  max-inline-size:1240px;margin-inline:auto;margin-block-start:clamp(36px,6vh,64px);
  padding-block-start:22px;border-block-start:1px solid var(--hair);
  display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:space-between;
  font:400 9px/1.8 var(--mono);letter-spacing:.14em;color:var(--paper-3);text-transform:uppercase;
}
@media(max-width:900px){.site-foot__grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.site-foot__grid{grid-template-columns:1fr}}

/* --------------------------------------------------------------------------
   7. Progress rail, desktop only, hidden from assistive tech
   -------------------------------------------------------------------------- */
.rail{position:fixed;inset-inline-start:0;inset-block:0;inline-size:var(--rail-w);z-index:60;pointer-events:none}
.rail__line{position:absolute;inset-inline-start:24px;inset-block:8vh;inline-size:1px;background:var(--hair)}
.rail__fill{
  position:absolute;inset-inline-start:24px;inset-block-start:8vh;inline-size:1px;block-size:0;
  background:var(--teal);box-shadow:0 0 10px var(--teal-glow);
}
.rail__ticks{
  position:absolute;inset-inline-start:18px;inset-block:8vh;inline-size:12px;
  background:repeating-linear-gradient(to bottom,var(--hair) 0 1px,transparent 1px 8.4vh);
}
.rail__n{position:absolute;inset-inline-start:34px;font:400 9px/1 var(--mono);letter-spacing:.12em;color:var(--paper-3)}
@media(max-width:900px){.rail{display:none}}

/* --------------------------------------------------------------------------
   8. Acts: scroll-scrub film sections
   Default markup (no JS, reduced motion, load failure) renders as a static
   editorial chapter: poster still visible, beats in flow. lumen.js upgrades
   an act to the sticky scrubbed film by adding .act--live.
   -------------------------------------------------------------------------- */
.act{position:relative;background:var(--ink)}
.act__pin{position:relative}
.act__media{position:relative;overflow:hidden;background:var(--ink-2)}
.act__poster{inline-size:100%;block-size:auto}
.act__canvas{display:none}
.act__vig{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 85% at 50% 45%,transparent 30%,rgba(6,8,11,.6) 78%,var(--ink) 100%);
}
/* the act labels sit inside a section that pins to the TOP of the viewport, so
   their offset is measured from under the sticky site header, not from the top of
   the page. At clamp(22px,4vh,44px) they landed behind it: the left tag collided
   with the LUMEN wordmark and the right note collided with the language switcher,
   both visible on the hardware page. The header is 14px padding, a 15px wordmark
   line and 14px padding, so 74px is the first line clear of it. */
.act__tag{
  position:absolute;inset-inline-start:var(--gut);inset-block-start:clamp(74px,9vh,104px);z-index:5;
  font:400 var(--t-micro)/1.6 var(--mono);letter-spacing:.26em;color:var(--paper-3);text-transform:uppercase;
}
.act__tag b{display:block;font-weight:400;color:var(--teal-deep)}
.act__note{
  position:absolute;inset-inline-end:var(--gut);inset-block-start:clamp(74px,9vh,104px);z-index:5;
  text-align:end;font:400 9px/1.7 var(--mono);letter-spacing:.2em;color:var(--paper-3);text-transform:uppercase;
}
.act__load{
  display:none;position:absolute;inset-inline-start:50%;inset-block-start:50%;
  transform:translate(-50%,-50%);z-index:6;text-align:center;
  font:400 var(--t-micro)/1.8 var(--mono);letter-spacing:.22em;color:var(--paper-2);text-transform:uppercase;
}
.act__load .bar{inline-size:180px;block-size:1px;background:var(--hair);margin-block-start:10px;margin-inline:auto;position:relative}
.act__load .bar i{position:absolute;inset-inline-start:0;inset-block:0;inline-size:0;background:var(--teal);display:block}
.beat{padding-block:clamp(28px,5vh,48px);padding-inline:var(--gut);max-inline-size:820px}
.beat h3{font:300 var(--t-h2)/1.1 var(--serif);letter-spacing:-.005em}
.beat p{font:400 var(--t-body)/1.7 var(--sans);color:var(--paper-2);margin-block-start:14px;max-inline-size:46ch}
.beat .bn{
  font:400 9px/1 var(--mono);letter-spacing:.3em;color:var(--teal-deep);text-transform:uppercase;
  display:block;margin-block-end:16px;
}

/* upgraded state, applied by lumen.js only */
.act--live{block-size:360svh}
.act--live .act__pin{position:sticky;inset-block-start:0;block-size:100svh;overflow:hidden}
.act--live .act__media{position:absolute;inset:0;background:var(--ink)}
.act--live .act__poster{display:none}
.act--live .act__canvas{display:block;position:absolute;inset:0;inline-size:100%;block-size:100%}
.act--live .act__load{display:block}
.act--live .act__load.done{display:none}
.act--live .beat{
  position:absolute;z-index:5;inset-inline-start:0;inset-block-end:clamp(60px,11vh,120px);
  max-inline-size:min(620px + 2*var(--gut),92vw);padding-block:0;
  opacity:0;will-change:opacity,transform;
}

/* --------------------------------------------------------------------------
   9. Render figures and the mandatory caption
   Every render on the site sits in .render-fig and carries .render-caption.
   -------------------------------------------------------------------------- */
.render-fig{position:relative;border:1px solid var(--hair);background:var(--ink-2)}
.render-fig img{inline-size:100%}
.render-caption{
  padding:12px 16px;border-block-start:1px solid var(--hair);
  font:400 9px/1.8 var(--mono);letter-spacing:.18em;color:var(--paper-3);text-transform:uppercase;
}
.render-caption .lang-line{display:block}

/* --------------------------------------------------------------------------
   10. Evidence register
   The published-study grammar: a figure, its method line, its source line.
   Sources print as English projections (a published study found, measured,
   derived, reported). Citation brackets never appear on the site.
   -------------------------------------------------------------------------- */
.evidence{
  border:1px solid var(--hair);background:var(--ink-2);
  padding:clamp(24px,3.4vw,44px);position:relative;
}
.evidence::before{
  content:"";position:absolute;inset-inline-start:0;inset-block:0;inline-size:2px;
  background:linear-gradient(var(--teal),transparent);
}
.ev-figure{font:300 var(--t-figure)/1 var(--serif);color:var(--paper);font-variant-numeric:tabular-nums}
.ev-figure em{font-style:normal;color:var(--teal)}
.ev-method{margin-block-start:14px;color:var(--paper-2);font-size:var(--t-small);max-inline-size:52ch}
.ev-source{
  margin-block-start:18px;font:400 9px/1.7 var(--mono);letter-spacing:.16em;
  color:var(--paper-3);text-transform:uppercase;
}
.ev-source a{color:var(--paper-3);text-decoration-color:var(--hair-strong)}
.ev-source a:hover{color:var(--paper-2)}
.evidence-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:clamp(16px,2vw,28px)}

/* status ledger: the exists / does-not-exist two-column honesty block */
.ledger{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--hair)}
.ledger__col{padding:clamp(22px,3vw,40px)}
.ledger__col + .ledger__col{border-inline-start:1px solid var(--hair)}
.ledger__col h4{
  font:400 var(--t-micro)/1 var(--mono);letter-spacing:.26em;text-transform:uppercase;
  color:var(--teal-deep);margin-block-end:18px;
}
.ledger__col li{list-style:none;padding-block:9px;border-block-start:1px solid var(--hair);
  color:var(--paper-2);font-size:var(--t-small)}
@media(max-width:700px){
  .ledger{grid-template-columns:1fr}
  .ledger__col + .ledger__col{border-inline-start:0;border-block-start:1px solid var(--hair)}
}

/* --------------------------------------------------------------------------
   11. Reveal on scroll
   Elements carrying data-reveal fade and rise when they enter the viewport.
   Without JS, or under reduced motion, they are simply visible.
   -------------------------------------------------------------------------- */
html.js [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity var(--dur) var(--ease-out),transform var(--dur) var(--ease-out)}
html.js [data-reveal].is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html.js [data-reveal]{opacity:1;transform:none;transition:none}
}

/* --------------------------------------------------------------------------
   12. Links and actions: hairline grammar, never pill buttons
   -------------------------------------------------------------------------- */
.btn-line{
  display:inline-block;text-decoration:none;color:var(--paper);
  font:400 var(--t-micro)/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;
  padding:14px 26px;border:1px solid var(--hair-strong);
  transition:border-color .3s,color .3s,background .3s;
}
.btn-line:hover{border-color:var(--teal-deep);color:var(--teal)}
.btn-line--solid{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn-line--solid:hover{background:var(--teal);border-color:var(--teal);color:var(--ink)}
.link-arrow{color:var(--paper-2);text-decoration:none;border-block-end:1px solid var(--hair-strong);transition:color .3s,border-color .3s}
.link-arrow:hover{color:var(--teal);border-color:var(--teal-deep)}

/* --------------------------------------------------------------------------
   13. Tables
   -------------------------------------------------------------------------- */
table{border-collapse:collapse;inline-size:100%;font-size:var(--t-small)}
th{
  font:400 var(--t-micro)/1.6 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--paper-3);text-align:start;padding:12px 16px;border-block-end:1px solid var(--hair-strong);
}
td{padding:12px 16px;border-block-end:1px solid var(--hair);color:var(--paper-2);vertical-align:top}
td:first-child{color:var(--paper)}

/* --------------------------------------------------------------------------
   14. Page intro (the typographic opening every page shares)
   -------------------------------------------------------------------------- */
.intro{
  min-block-size:100svh;display:grid;place-items:center;position:relative;
  padding-block:calc(80px + env(safe-area-inset-top)) 60px;padding-inline:var(--gut);text-align:center;
}
.intro--short{min-block-size:72svh}
.cue{
  font:400 9px/1 var(--mono);letter-spacing:.3em;color:var(--paper-3);text-transform:uppercase;
}
.intro .cue,.hero-inv .cue,.hero-letter .cue,.hero-plat .cue,.ph .cue,.dh .cue,.sh .cue{
  position:absolute;inset-block-end:4.5vh;inset-inline-start:50%;transform:translateX(-50%);
}
.cue::after{
  content:"";display:block;inline-size:1px;block-size:30px;margin-block-start:10px;margin-inline:auto;
  background:linear-gradient(var(--paper-3),transparent);
}
[dir="rtl"] .intro .cue,[dir="rtl"] .hero-inv .cue,[dir="rtl"] .hero-letter .cue,
[dir="rtl"] .hero-plat .cue,[dir="rtl"] .ph .cue,[dir="rtl"] .dh .cue,[dir="rtl"] .sh .cue{transform:translateX(50%)}

/* --------------------------------------------------------------------------
   15. Reduced motion, globally
   -------------------------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* --------------------------------------------------------------------------
   16. Numbered step flow (additive, 2026-08-10)
   Shared by the platform and clinical pages: an editorial, typographic
   sequence. No icons, no cards; hairlines and type only.
   -------------------------------------------------------------------------- */
.steps{list-style:none;border-block-start:1px solid var(--hair)}
.steps>li{display:grid;grid-template-columns:72px 1fr;gap:clamp(14px,2.4vw,32px);padding-block:clamp(22px,3.4vh,36px);border-block-end:1px solid var(--hair)}
.steps .sn{font:400 var(--t-micro)/2 var(--mono);letter-spacing:.3em;color:var(--teal-deep)}
.steps h3{font:400 var(--t-h3)/1.25 var(--serif);margin-block-end:8px}
.steps p{color:var(--paper-2);font-size:var(--t-small);max-inline-size:62ch}
@media(max-width:700px){.steps>li{grid-template-columns:1fr;gap:8px}}

/* --------------------------------------------------------------------------
   17. Demo disclosure and button rows (additive, 2026-08-10)
   Every demo entry point carries the disclosure beside the link, in the
   same visual weight as the surrounding copy. A truth surface, never a
   footnote.
   -------------------------------------------------------------------------- */
.demo-note{margin-block-start:18px;font-size:var(--t-body);line-height:1.65;color:var(--paper-2);max-inline-size:56ch}
.demo-note--center{margin-inline:auto;text-align:center}
.btn-row{display:flex;gap:14px;flex-wrap:wrap;margin-block-start:26px}
.btn-row--center{justify-content:center}

/* --------------------------------------------------------------------------
   18. Property blocks (additive, 2026-08-10)
   The one-clinician-one-clone property columns shared by the home,
   platform, and hardware pages: hairline-topped typographic columns.
   -------------------------------------------------------------------------- */
.prop-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:clamp(18px,2.6vw,36px)}
.prop{border-block-start:1px solid var(--hair);padding-block-start:16px}
.prop h3{font:400 var(--t-h3)/1.3 var(--serif);margin-block-end:8px}
.prop p{color:var(--paper-2);font-size:var(--t-small);max-inline-size:46ch}

/* --------------------------------------------------------------------------
   19. Arabic script pairing (additive, 2026-08-10)
   The Latin display serif carries no Arabic glyphs, so on Arabic content the
   two family variables resolve to the platform's dignified Naskh serifs and
   Arabic sans. :root tokens are untouched; the override is scoped to the
   script. Arabic sets slightly taller line heights (ascender and descender
   depth), and figures inside Arabic text stay left-to-right so 9.84x and
   1188 of 1188 read identically in all three languages. Western digits
   everywhere, per the trilingual rules.
   -------------------------------------------------------------------------- */
:lang(ar){
  --serif:"Noto Naskh Arabic","Geeza Pro","Al Bayan","Amiri","Times New Roman",serif;
  --sans:"SF Arabic","Geeza Pro","Noto Sans Arabic","Segoe UI",-apple-system,sans-serif;
}
body:lang(ar){line-height:1.85}
:lang(ar) .display{line-height:1.15}
:lang(ar) .h1{line-height:1.25}
:lang(ar) .h2{line-height:1.32}
:lang(ar) .h3,:lang(ar) .beat h3,:lang(ar) .steps h3{line-height:1.45}
:lang(ar) .lede{line-height:1.85}
:lang(ar) .ev-figure{direction:ltr;unicode-bidi:isolate}
:lang(ar) .ev-figure em{letter-spacing:0}

/* --------------------------------------------------------------------------
   20. Unified footer (additive, 2026-08-10, wave 2)
   One footer for every page per the art direction: wordmark, nav, language
   switcher, one company line. No status disclaimers here. The previous
   .site-foot grid rules remain untouched above; this variant overrides
   layout only when the --unified class is present.
   -------------------------------------------------------------------------- */
.site-foot--unified{
  display:flex;flex-direction:column;gap:clamp(26px,4vh,40px);
  padding-block:clamp(44px,7vh,72px) calc(26px + env(safe-area-inset-bottom));
}
.foot-u__top{
  max-inline-size:1240px;inline-size:100%;margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
}
.foot-u__top .brand{text-decoration:none;color:var(--paper)}
.foot-u__nav{
  max-inline-size:1240px;inline-size:100%;margin-inline:auto;
  display:flex;flex-wrap:wrap;gap:6px clamp(14px,2vw,26px);
  padding-block:16px;border-block:1px solid var(--hair);
}
.foot-u__nav a{
  font:400 var(--t-micro)/1.8 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--paper-3);text-decoration:none;transition:color .3s;
}
.foot-u__nav a:hover{color:var(--paper)}
.foot-u__line{
  max-inline-size:1240px;inline-size:100%;margin-inline:auto;
  font:400 9px/1.9 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--paper-3);
}

/* --------------------------------------------------------------------------
   12. The v3 grammar, added 2026-08-11
   The site had one tone, ink, for every section of every page, and two of
   fourteen pages carried any motion at all. The reference the owner set is a
   site that alternates: a bright product stage, then a full-bleed saturated
   moment, then a dark data grid. That alternation is the energy. These are the
   pieces that were missing, added to the system so any page can use them.
   Logical properties only, so Arabic needs no mirrored rules.
   -------------------------------------------------------------------------- */

/* 12.1 The light stage. A product is read by its silhouette, and a dark object
   on a dark ground has none. The reference puts its machine on a bright seamless
   sweep. Our machine is graphite, so this is the single highest-contrast frame
   the site can offer, and it is the reason to have it. */
.act--light .act__media{background:linear-gradient(180deg,#eceae5 0%,#e2dfd8 62%,#cfccc4 100%)}
.act--light .act__vig{
  background:radial-gradient(130% 95% at 50% 42%,transparent 42%,rgba(140,136,128,.20) 100%);
}
.act--light .act__tag,
.act--light .act__note,
.act--light .act__telem{color:rgba(12,16,20,.46)}
.act--light .act__tag b{color:var(--teal-deep)}

/* 12.2 The ghost word. A display word at a scale that cannot fit, cropped by
   the viewport, sitting behind the product. It gives the stage a horizon and a
   subject before a single line of body copy is read. */
.act__ghost{
  position:absolute;inset-block-start:50%;inset-inline-start:50%;
  transform:translate(-50%,-50%);
  font:300 clamp(120px,26vw,420px)/0.82 var(--serif);
  letter-spacing:-.03em;text-transform:uppercase;white-space:nowrap;
  pointer-events:none;user-select:none;
  /* rides ABOVE the canvas, not behind it: the canvas is opaque and cover-fit, so a
     ghost at a lower stacking order is simply never visible. Kept to a whisper so it
     reads as a watermark in the frame rather than as a label on top of the machine. */
  z-index:3;mix-blend-mode:overlay;
}
.act--light .act__ghost{color:rgba(12,16,20,.055)}
.act__ghost{color:rgba(244,241,234,.16)}
.act__media > .act__canvas,
.act__media > .act__poster{position:relative;z-index:2}

/* 12.3 Telemetry. A small mono readout pinned to the stage. The reference uses
   a speed; ours uses the thing the machine is actually doing. It is what makes
   a scrub read as an instrument rather than a slideshow. */
.act__telem{
  /* the act tag already owns the top-inline-start corner and is two lines tall, so the
     telemetry sits under it, not on it */
  position:absolute;inset-block-start:calc(clamp(74px,9vh,104px) + 58px);inset-inline-start:var(--gut);
  z-index:5;font:400 var(--t-micro)/1.9 var(--mono);letter-spacing:.2em;
  text-transform:uppercase;color:var(--paper-3);
}
.act__telem b{display:block;font-weight:400;color:var(--teal);font-size:15px;letter-spacing:.06em}

/* 12.4 The plate. A full-bleed saturated moment, edge to edge, no chrome, used
   as punctuation between stages. Text sits directly on it and enters on scroll. */
.plate{position:relative;min-block-size:100svh;overflow:hidden;display:flex;
  align-items:flex-end;background:var(--ink)}
.plate__media{position:absolute;inset:0;z-index:0}
.plate__media img,.plate__media video{inline-size:100%;block-size:100%;object-fit:cover;display:block}
.plate__scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(6,8,11,.62) 0%,rgba(6,8,11,.18) 38%,rgba(6,8,11,.86) 100%)}
.plate__body{position:relative;z-index:2;padding:var(--gut);padding-block-end:clamp(56px,10vh,120px);
  inline-size:100%}
.plate__lede{font:300 var(--t-h1)/1.04 var(--serif);letter-spacing:-.01em;max-inline-size:18ch}
.plate__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:clamp(18px,3vw,48px);margin-block-start:clamp(26px,5vh,56px);max-inline-size:1180px}
.plate__col h4{font:500 12px/1.5 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--paper)}
.plate__col p{font:400 var(--t-body)/1.65 var(--sans);color:var(--paper-2);margin-block-start:9px;max-inline-size:34ch}

/* 12.5 Display type at reference scale, and the kinetic entrance the reference
   uses: the line arrives from below its own baseline, clipped, never faded from
   nothing, so it reads as typeset rather than as a tooltip. */
.mega{font:300 var(--t-display)/0.94 var(--serif);letter-spacing:-.025em;text-transform:uppercase}
.rise{display:block;overflow:hidden}
/* hardened 2026-08-12: the offset is applied ONLY when the reveal engine is
   running. Before this, .rise > span sat at translateY(102%) unconditionally,
   so any headline whose element never received .is-in stayed pushed out of its
   own clip box and was invisible on the page. Twelve pages shipped that way.
   With no JS, with reduced motion, or if the observer never fires, the words
   are simply there. */
html.js .rise > span{transform:translateY(102%)}
.rise > span{display:block;transition:transform .92s cubic-bezier(.16,.84,.24,1)}
[data-reveal].is-in .rise > span,
.is-in .rise > span{transform:translateY(0)}
.rise:nth-of-type(2) > span{transition-delay:.08s}
.rise:nth-of-type(3) > span{transition-delay:.16s}
@media (prefers-reduced-motion:reduce){
  .rise > span{transform:none;transition:none}
}

/* 12.6 The marquee. The reference runs one enormous word across the seam
   between two stages. It is the cheapest possible way to make a scroll feel
   authored, and it costs no asset. */
.seam{overflow:hidden;border-block:1px solid var(--hair);background:var(--ink-2);
  padding-block:clamp(10px,1.6vh,18px)}
.seam__track{display:flex;gap:clamp(28px,5vw,80px);inline-size:max-content;
  animation:seam 38s linear infinite}
.seam__track span{font:300 clamp(30px,5.4vw,74px)/1 var(--serif);letter-spacing:-.02em;
  text-transform:uppercase;color:rgba(244,241,234,.10);white-space:nowrap}
.seam__track span em{font-style:normal;color:var(--teal-deep)}
@keyframes seam{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.seam__track{animation:none}}

/* --------------------------------------------------------------------------
   21. The paper band, added 2026-08-12
   The audit that produced this: all fifteen pages were captured at one
   viewport and placed on a single contact sheet. Thirteen of them were the
   same picture. Dark ink ground, a teal kicker, a serif headline, a
   paragraph, sometimes a small bordered box. No image, no motion, no change
   of tone anywhere in a full page scroll. A reader cannot tell the
   sovereignty page from the trust page from the press page.

   The fix is not twenty new components. Every component on this site already
   draws its colour from six variables. Redefining those six inside one scope
   inverts the whole component library at once: .evidence, .ledger, .prop,
   .steps, table, .btn-line and .kicker all follow with no rule of their own.
   That is the entire mechanism, and it is why this section is short.

   A page alternates dark, paper, dark. The paper band is the page's one
   bright room, and it is where the subject of the page belongs.
   -------------------------------------------------------------------------- */
.section--paper{
  --paper:#0b0e12;                      /* type goes near-black on the light ground */
  --paper-2:rgba(11,14,18,.66);
  --paper-3:rgba(11,14,18,.59);      /* .42 measured 2.71:1 on the paper band; .59 measures 4.52:1 */
  --hair:rgba(11,14,18,.14);
  --hair-strong:rgba(11,14,18,.26);
  --ink-2:rgba(255,255,255,.55);        /* card grounds lift off the band, not sink */
  --ink-3:rgba(255,255,255,.34);
  --teal-deep:#176b5e;                  /* #1c7d6f measured 3.86:1 on the paper band, large-text only; this measures 4.92:1 */
  background:linear-gradient(180deg,#efece6 0%,#e6e2da 58%,#dcd8cf 100%);
  color:var(--paper);
  border-block:1px solid rgba(11,14,18,.16);
}
/* the grain is tuned for an ink ground and reads as dirt on paper */
.section--paper::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(120% 80% at 50% 0%,rgba(255,255,255,.6),transparent 60%);
}
.section--paper > *{position:relative;z-index:2}
.section--paper .rule{background:linear-gradient(90deg,transparent,#1c7d6f,transparent);box-shadow:none}
.section--paper .btn-line--solid{background:var(--paper);color:#efece6;border-color:var(--paper)}
.section--paper .btn-line--solid:hover{background:#1c7d6f;border-color:#1c7d6f;color:#fff}

/* --------------------------------------------------------------------------
   22. The page ghost, added 2026-08-12
   A display word cropped by the viewport behind the page opening, taken from
   the page's own kicker so it invents no language. It gives a page a subject
   before a line of body copy is read, which is the thing every page except
   hardware and home was missing.
   -------------------------------------------------------------------------- */
.intro,.hero-inv,.hero-letter,.hero-plat,.ph,.dh,.sh{position:relative;overflow:hidden}
.intro__ghost{
  /* anchored to the BOTTOM edge, not the middle. Centred, it landed directly
     behind the headline on any page whose hero content is also centred: on the
     press page the word PRESS sat inside the words "The facts, stated once."
     and both went muddy. Against the bottom edge it crops like a masthead
     watermark and can never collide with the text block. */
  /* inline-size:max-content is load bearing. The word is nowrap and far wider
     than the viewport, so a shrink-to-fit box collapses to (container - left)
     and the text spills out of its right edge: translateX(-50%) then shifts by
     half the BOX, not half the WORD, and the watermark crops only on the right.
     Sizing the box to the text makes the translate exact, so the crop is
     symmetric on both edges and reads as a masthead. PHYSICAL left, not
     inset-inline-start: under RTL the logical property anchors from the right
     while the translate still pulls left, and the Arabic word slid off screen. */
  position:absolute;inset-block-end:-.16em;left:50%;inline-size:max-content;
  transform:translateX(-50%);z-index:0;
  font:300 clamp(150px,30vw,460px)/0.8 var(--serif);
  letter-spacing:-.04em;text-transform:uppercase;white-space:nowrap;
  color:rgba(244,241,234,.062);pointer-events:none;user-select:none;
}
.section--paper .intro__ghost{color:rgba(11,14,18,.05)}
/* The ghost is EXCLUDED here. `.intro > *` and `.intro__ghost` carry the same
   specificity, so this rule, being later in the file, used to overwrite the
   watermark's position:absolute with position:relative. The ghost then became a
   grid item, its nowrap max-content stretched the auto column far past the
   viewport, and every centred hero was centred inside that oversized track
   instead of the page, drifting right on LTR and left on RTL. */
.intro > *:not(.intro__ghost){position:relative;z-index:1}
/* Arabic sits lower in the em box than Latin caps, so the shared -.16em bottom
   offset cropped roughly sixty percent of the word instead of a masthead sliver.
   The offset is raised for Arabic only, measured on the rendered page, not
   guessed from the Latin metric. */
:lang(ar) .intro__ghost{letter-spacing:0;font-size:clamp(90px,18vw,300px);inset-block-end:.07em}

/* --------------------------------------------------------------------------
   23. Figure band, added 2026-08-12
   The evidence numbers were set at body size inside paragraphs on most
   pages, so a page carrying a 15 percent versus 8 percent mortality finding
   looked identical to a page carrying a mailing address. A number that
   carries the argument is set at figure scale.
   -------------------------------------------------------------------------- */
.fband{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));
  border-block-start:1px solid var(--hair)}
.fband__c{padding:clamp(24px,3.6vw,52px) clamp(18px,2.6vw,40px);border-block-end:1px solid var(--hair)}
.fband__c + .fband__c{border-inline-start:1px solid var(--hair)}
.fband__f{font:300 var(--t-figure)/1 var(--serif);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.fband__f em{font-style:normal;color:var(--teal-deep)}
.fband__l{margin-block-start:12px;color:var(--paper-2);font-size:var(--t-small);max-inline-size:40ch}
.fband__s{margin-block-start:14px;font:400 9px/1.7 var(--mono);letter-spacing:.16em;
  color:var(--paper-3);text-transform:uppercase}
@media(max-width:760px){.fband__c + .fband__c{border-inline-start:0}}

/* --------------------------------------------------------------------------
   24. Accessibility floors, made real (2026-08-12)
   Our own binding standard in 11_PERFORMANCE_AND_ACCESSIBILITY.md requires a
   visible focus indicator on every focusable element and a way to bypass the
   navigation. Neither existed on the public site: :focus-visible was defined
   only in the demo bridge, so a keyboard user on the marketing pages could not
   see where they were, and no page carried a skip link.
   -------------------------------------------------------------------------- */
:focus-visible{
  outline:2px solid var(--teal);
  outline-offset:3px;
  border-radius:0;
}
.skip{
  position:absolute;inset-inline-start:-9999px;inset-block-start:0;z-index:200;
  background:var(--paper);color:#06080b;text-decoration:none;
  font:400 var(--t-micro)/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
  padding:14px 20px;
}
.skip:focus{inset-inline-start:0}

/* prefers-contrast: our floors require `more` and `custom` to be respected.
   The palette is deliberately low-contrast editorial, so rather than repaint it
   we lift the two supporting type tones and both hairlines to the AAA end when
   the reader has asked their system for more contrast. Measured on --ink:
   paper-2 goes 6.61:1 to 10.4:1, paper-3 goes 4.53:1 to 7.12:1. */
@media (prefers-contrast: more){
  :root{
    --paper-2:rgba(244,241,234,.82);
    --paper-3:rgba(244,241,234,.625);
    --hair:rgba(244,241,234,.26);
    --hair-strong:rgba(244,241,234,.42);
  }
  .section--paper{
    --paper-2:rgba(11,14,18,.86);
    --paper-3:rgba(11,14,18,.72);
    --hair:rgba(11,14,18,.30);
    --hair-strong:rgba(11,14,18,.52);
    --teal-deep:#125a4f;
  }
  .act__ghost,.intro__ghost{color:rgba(244,241,234,.12)}
}

/* --------------------------------------------------------------------------
   22. The plate register, added 2026-08-13
   Eighteen cards were generated as social images and were reaching nobody,
   because a social card is only ever seen in someone else's feed. The page
   itself still opened the way section 21 describes: ink ground, teal kicker,
   serif headline, paragraph. The cards belong ON the pages.

   The mechanism rests on one measured fact. Every card's ground is #06080B,
   which is exactly --ink. The image and the page are the same black. So the
   image does not need a frame, a border or a container: masked at its edges
   it DISSOLVES into the page, and the reader sees light appearing in the
   page rather than a picture placed on it. Every rule below follows from
   that one coincidence, which is why there is no .card__frame anywhere.

   The second measured fact is that each card carries a LUMEN wordmark baked
   in at a different position, located per card by grouping letterspaced
   glyphs on a shared baseline (analysis at PRODUCTION, 18 of 18 found). The
   site draws its own wordmark in the header, so the baked one is a duplicate
   brand mark and must go. It is removed two ways, chosen per card by the
   measured luminance of the ground beneath it:

     16 cards  ground under the mark is L<34, so a soft ellipse of --ink at
               the measured coordinates swallows it invisibly. --wm-x/--wm-y.
      2 cards  press L=34 and sovereignty L=36, the mark sits on a lit
               surface where an ink patch would read as a blotch, so those
               are framed to crop the mark out of view instead.

   Three registers, one component, because the pages are not all the same
   kind of page:
     .plate-b   THRESHOLD, a wide band the argument pages breathe through
     .plate-b--tall APERTURE, a portrait slice for document pages
     .plate-b--low  HORIZON, a low band at a seam for narrative pages
   -------------------------------------------------------------------------- */
.plate-b{
  position:relative;
  /* the band is sized by ASPECT, never by viewport height, so the crop window
     is deterministic and the wordmark arithmetic above holds at every size */
  aspect-ratio:2.9 / 1;
  inline-size:100%;
  background:var(--ink);
  overflow:hidden;
  isolation:isolate;
}
.plate-b--tall{
  /* an aperture, not a wall. At full page width a 3:4 box rendered 1400 by 1867
     and dominated the page it was supposed to punctuate, so it is capped and
     centred: it reads as a window cut into the page. */
  aspect-ratio:3 / 4;max-block-size:76svh;
  max-inline-size:min(760px,86vw);margin-inline:auto;
}
.plate-b--low{aspect-ratio:4.4 / 1}

.plate-b__img{
  position:absolute;inset:0;inline-size:100%;block-size:100%;
  object-fit:cover;
  /* per card, from the measured focal point */
  object-position:var(--fx,50%) var(--fy,50%);
  display:block;
  /* the dissolve. Edges go to nothing so the frame has no boundary; the page
     ground shows through because it is the identical colour. */
  -webkit-mask-image:
    linear-gradient(to right,transparent 0,#000 11%,#000 89%,transparent 100%),
    linear-gradient(to bottom,transparent 0,#000 13%,#000 84%,transparent 100%);
          mask-image:
    linear-gradient(to right,transparent 0,#000 11%,#000 89%,transparent 100%),
    linear-gradient(to bottom,transparent 0,#000 13%,#000 84%,transparent 100%);
  -webkit-mask-composite:source-in;
          mask-composite:intersect;
}
.plate-b--tall .plate-b__img{
  /* a portrait slice bleeds off the page edge, so only the inner edge fades */
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 9%,#000 91%,transparent 100%);
          mask-image:linear-gradient(to bottom,transparent 0,#000 9%,#000 91%,transparent 100%);
  -webkit-mask-composite:source-over;
          mask-composite:add;
}

/* the erase. An ellipse of the page's own ground, centred on the measured
   wordmark box, feathered so it has no edge of its own. Present only on the
   cards where the ground beneath the mark was measured dark enough to hide it. */
.plate-b__erase{
  position:absolute;z-index:1;pointer-events:none;
  left:var(--wm-x,50%);top:var(--wm-y,50%);
  inline-size:var(--wm-w,26%);block-size:var(--wm-h,22%);
  transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,
    var(--ink) 0%,var(--ink) 52%,rgba(6,8,11,.85) 72%,rgba(6,8,11,0) 100%);
}

/* the page's own quiet mark, in the third the luminance analysis found empty */
.plate-b__note{
  position:absolute;z-index:2;inset-block-end:clamp(14px,2.4vw,26px);
  inset-inline-start:clamp(16px,3vw,38px);
  font:400 var(--t-micro)/1.9 var(--mono);letter-spacing:.26em;text-transform:uppercase;
  color:var(--paper-3);
}
.plate-b__note--end{inset-inline-start:auto;inset-inline-end:clamp(16px,3vw,38px)}
.plate-b__note::before{
  content:"";display:inline-block;inline-size:26px;block-size:1px;
  background:var(--teal-deep);vertical-align:middle;margin-inline-end:11px;
}

/* the band sits full-bleed between sections and carries its own air */
.plate-band{margin-block:clamp(30px,6vh,72px) 0;padding:0}
.plate-band--tight{margin-block-start:0}

@media (max-width:760px){
  .plate-b{aspect-ratio:1.85 / 1}
  .plate-b--tall{aspect-ratio:1.3 / 1}
  .plate-b--low{aspect-ratio:2.4 / 1}
}
@media (prefers-reduced-motion:no-preference){
  .plate-b__img{transition:transform 1.1s var(--ease-out)}
  .plate-b.is-in .plate-b__img{transform:scale(1.0)}
  .plate-b .plate-b__img{transform:scale(1.045)}
}

/* --------------------------------------------------------------------------
   23. The nav on a phone, added 2026-08-14
   From the device: the bar does not finish, and page text is legible in the
   gap while scrolling.

   The soft degraded edge is the intended look and it stays. The defect is that
   on a phone the degradation runs THROUGH the nav instead of below it, so the
   bar has a blank stretch where its own contents sit.

   Why the desktop rule cannot hold here. Its stops are percentages of the
   header box, and on a phone that box is short and its height moves with the
   safe-area inset, so the same percentage lands in a different place on every
   device. Measured at 390px with an iPhone inset of 47px:

     header box            90px
     background solid to   55.8px   (62%)
     mask starts deleting  70.2px   (78%)
     the wordmark line box 61px to 76px

   The nav is drawn inside its own fade, which is the blank.

   The fix gives the fade its own room and anchors every stop to an absolute
   length measured from the inset, so it lands identically at inset 0, 34, 47
   or 59:

     nav row      inset+14  to inset+29
     solid ink    0         to inset+36     (past the nav, with 7px of margin)
     degrade      inset+36  to inset+63     (27px, below the nav, where it belongs)

   The mask is dropped because the background gradient now performs the
   degradation, and two stacked fades made it vanish twice as fast. The
   backdrop blur is kept and now covers the whole box, so anything travelling
   under the soft part is blurred rather than readable.
   -------------------------------------------------------------------------- */
@media (max-width:760px){
  .site-head{
    padding-block-end:34px;
    background:linear-gradient(to bottom,
      var(--ink) 0,
      var(--ink) calc(env(safe-area-inset-top) + 36px),
      rgba(6,8,11,.90) calc(env(safe-area-inset-top) + 46px),
      rgba(6,8,11,.55) calc(env(safe-area-inset-top) + 54px),
      rgba(6,8,11,0)   calc(env(safe-area-inset-top) + 63px));
    -webkit-mask-image:none;
            mask-image:none;
  }
}

/* --------------------------------------------------------------------------
   24. The strip beside the notch, added 2026-08-14
   Second report from the device, with a screen recording. Measured off the
   frames at 3x, the leak is a band 11 CSS pixels tall:

     0 to 46px    dark
     48 to 59px   LIGHT, mean luminance 199, page text visible inside it
     59px onward  dark, the nav's own ink

   59px is this device's safe-area inset. So the leak is not in the nav at all.
   It is the strip beside the notch, and iOS Safari was tinting it with whatever
   the page happened to be rendering at the top of the viewport. Scroll the
   cream paper band up there and the strip turns cream.

   The real cause is that no page declared a theme-color. The manifest declares
   one, but Safari reads the META TAG for a normal browser tab and ignores the
   manifest unless the site is installed. That meta is now on all 54 pages.

   This rule is the guard behind it: the nav paints the inset strip itself, so
   the strip is ink even if a browser ignores theme-color, and the height
   collapses to zero on any device that has no inset.
   -------------------------------------------------------------------------- */
.site-head::before{
  content:"";
  position:fixed;inset-block-start:0;inset-inline:0;
  block-size:env(safe-area-inset-top,0px);
  background:var(--ink);
  pointer-events:none;
}