/* ── IBM Plex Sans Arabic, self-hosted (SIL OFL 1.1) ──
   These used to come from fonts.googleapis.com. That put a render-blocking
   stylesheet on a second origin in front of font files on a THIRD origin, so
   nothing could even be discovered until two DNS+TLS handshakes had finished
   — paid by every visitor, and this page sells to Egypt and the Gulf where
   that round trip is not cheap. Same bytes, same origin, discoverable from
   the stylesheet the page is already parsing.

   Filenames carry a content hash, which is what makes the immutable cache
   header in firebase.json honest. cyrillic-ext is deliberately not shipped:
   no English or Arabic copy on this page can reach that range. To add a
   weight, re-pull from
   https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@200;400;500;600;700
   with a real browser UA (a bare curl is served legacy TTF), then rehash. */
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:200;font-display:swap;src:url('/fonts/plex-latin-200-74205e58.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/plex-latin-400-9ed8dcb0.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/plex-latin-500-be6a3b2e.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/plex-latin-600-63f47572.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/plex-latin-700-ae2d59f9.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:200;font-display:swap;src:url('/fonts/plex-latin-ext-200-eddc75d8.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/plex-latin-ext-400-1935fa1a.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/plex-latin-ext-500-ae5c1a58.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/plex-latin-ext-600-0f7c03bb.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/plex-latin-ext-700-ab0b9584.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:200;font-display:swap;src:url('/fonts/plex-arabic-200-2578ef8f.woff2') format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/plex-arabic-400-6010e7fd.woff2') format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/plex-arabic-500-90aef64f.woff2') format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/plex-arabic-600-16734a5a.woff2') format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/plex-arabic-700-04c730b4.woff2') format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}

/* landing/landing.css — evenclo.com
   Brand core: Ink #14101B, Aubergine #2A1B3D, Purple #6B3FA0, Ember #E8722C,
   Bone #F1EDF3. Deep purple pushed almost to black, ember used where it means
   something, and neutrals that always carry a trace of the brand hue — never a
   pure grey, never a pure white. The light canvas tints are the marketing
   scroll stages, so no two sections sit on the same white. */

:root{
  /* brand core */
  --ink-900:#14101B;          /* Ink — near-black aubergine */
  --aubergine:#2A1B3D;        /* Aubergine */
  --violet:#6B3FA0;           /* Purple */
  --amber:#E8722C;            /* Ember — the live thing */
  --bone:#F1EDF3;             /* Bone — violet-cast white */

  --violet-deep:#4A2F66; --violet-dim:#2A1B3D; --violet-lift:#9A6BD0; --violet-pale:#F1ECF5;
  /* Ember darkened until it works from both sides: read AS text on any light
     stage (4.8:1 at worst) and read WHITE text placed on it (5.9:1) —
     .ex-booth.pkg-g and .badge-band.speaker are fills, not type. It was
     #B8541B, which cleared neither: 4.2:1 under the ember chips, 4.9:1 for the
     white booth labels. Same hue as --amber, lower lightness only. */
  --amber-deep:#A54A17;
  --amber-lift:#F4995A;       /* ember hover on dark */
  --green:#1E7E3A; --green-lift:#22C55E;

  /* violet-tinted neutrals. Every --ink step is a TEXT colour and every one of
     them clears 4.5:1 on every ground this page puts it on — including
     --tint-peach, the darkest. --ink-3 used to be #9B93A8, which reads at 2.4:1
     on the peach stage and 2.9:1 on paper: it was carrying the meta lines, the
     form's "(optional)" markers and the inactive half of the language toggle,
     all of them below AA. That value now lives in the --line ramp, where a
     value that light belongs. A boundary is not text; if it needs to be read,
     it takes an --ink. */
  --ink:#1A1523; --ink-2:#5C5470; --ink-3:#6B637C;
  --paper:#FFFFFF; --paper-2:#F8F7FA; --paper-3:#F1EDF3;
  --line:#E3E0EA; --line-2:#D6CFE2; --line-3:#9B93A8;
  --night:#14101B; --night-2:#2A1B3D; --night-3:#3A2A52;
  --night-line:rgba(241,237,243,.14); --night-line-strong:rgba(241,237,243,.24);

  /* the marketing scroll stages. --tint-peach is the deepest of them on purpose:
     it is the last light ground before the ink footer, it has to lift a white
     form card off it, and it is the only warm stage that must not be mistaken
     for --tint-cream two sections above. --tint-blush is not a stage — it is the
     ground under ember-deep text (.hero-marks, .sol-status, .gx-sync), which is
     why it sits lighter. */
  --tint-paper:#F6F2EB; --tint-lilac:#F1ECF5; --tint-cream:#FBF4ED; --tint-blush:#FBEEE4;
  --tint-mint:#EBF3EF; --tint-orchid:#F3EEF6; --tint-peach:#F9E6D6;

  --r-sm:8px; --r:14px; --r-lg:22px;
  /* shadows are purple-cast, never neutral black */
  --sh-1:0 1px 2px rgba(0,0,0,.05),0 4px 12px rgba(107,63,160,.08);
  --sh-2:0 8px 24px rgba(107,63,160,.12);
  --sh-3:0 16px 40px rgba(107,63,160,.16);
  /* One family for both scripts. Archivo could not set Arabic, so the page
     used to swap to Cairo at [dir=rtl] and the two never matched in weight or
     rhythm. IBM Plex Sans Arabic covers Latin and Arabic in one design. */
  --sans:'IBM Plex Sans Arabic',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);   /* calm and confident, no bounce */
  --wrap:1200px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
/* ── display type is lowercase ──
   The design system sets display in lowercase: it is what makes the voice read
   as an instrument rather than an announcement, and it is what the product's
   own screens already do ("attendees", "doors are open", "the lead book").
   Applied to display only — headlines, card titles and buttons. Body copy keeps
   its capitals, because a paragraph without them is a pose, not a system. */
h1,h2,.sol-title,.sol-dlg h3,.btn,.hero-a{text-transform:lowercase}

body{font-family:var(--sans);background:var(--paper);color:var(--ink);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;font-synthesis-weight:none;overflow-x:hidden}
img,svg,canvas{max-width:100%}
/* The UA's [hidden] is display:none at zero specificity, so ANY class that sets
   display beats it — .btn{display:inline-flex} shipped a "hidden" button that
   was fully visible. This has now bitten twice; one rule ends the family. */
[hidden]{display:none!important}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:24px}

h1,h2,h3,h4{letter-spacing:-.035em;line-height:1.06;text-wrap:balance;font-weight:700}
h1{font-size:clamp(2.4rem,1.3rem + 4.1vw,4.4rem)}
h2{font-size:clamp(1.8rem,1.15rem + 2.3vw,2.85rem)}
h3{font-size:clamp(1.15rem,1rem + .6vw,1.5rem);letter-spacing:-.025em}
p{text-wrap:pretty}
em{font-style:normal;color:var(--violet)}
html[dir=rtl] h1,html[dir=rtl] h2,html[dir=rtl] h3,html[dir=rtl] h4{letter-spacing:0;line-height:1.28}
html[dir=rtl] body{line-height:1.85}
.sec-lede{margin-top:16px;max-width:62ch;color:var(--ink-2);font-size:1.05rem}

/* Same reason as .hp — parked by clipping so it costs no scroll width, and
   unclipped on focus so a keyboard user still gets it. */
.skip{position:absolute;inset-inline-start:12px;top:8px;z-index:200;background:var(--ink);color:#fff;
  padding:10px 16px;border-radius:var(--r-sm);width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.skip:focus{width:auto;height:auto;clip-path:none}
:where(a,button,input,textarea,select,[tabindex]):focus-visible{outline:2.5px solid var(--violet);outline-offset:3px;border-radius:4px}
[data-anim]{opacity:1}

/* The hero settle is CSS, not GSAP. It used to be a gsap.fromTo() fired once
   the library came back from a CDN — so the largest text on the page painted,
   blinked to opacity 0 the moment GSAP arrived, and faded in again. Here it
   starts on the first frame the browser draws, costs no JavaScript, and still
   runs when the CDN is blocked. `backwards` is what holds the from-state
   through the delay; without it the staggered items flash at full opacity
   first. The reduced-motion rule at the top of this file neutralises it. */
@keyframes heroIn{from{opacity:0;transform:translateY(20px)}}
[data-hero]{animation:heroIn .9s var(--ease) backwards}
[data-hero]:nth-child(2){animation-delay:.09s}
[data-hero]:nth-child(3){animation-delay:.18s}

/* ═══ buttons ═══ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-weight:600;
  font-size:.95rem;letter-spacing:-.01em;padding:11px 20px;border-radius:999px;border:1px solid transparent;
  cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),box-shadow .25s var(--ease),transform .2s var(--ease)}
.btn-solid{background:var(--violet);color:#fff;box-shadow:0 1px 2px rgba(59,36,86,.2),0 6px 16px rgba(59,36,86,.22)}
.btn-solid:hover{background:var(--violet-deep);box-shadow:0 2px 4px rgba(59,36,86,.22),0 12px 28px rgba(59,36,86,.28);transform:translateY(-1px)}
.btn-solid:active{transform:translateY(0)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn-ghost:hover{background:var(--paper-2);border-color:var(--line-3)}
.btn-lg{padding:15px 28px;font-size:1.02rem}
.btn-block{width:100%}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}

/* ═══ nav ═══ */
/* --k is the bar's scale. At the very top the header is the page's opening
   statement and everything in it is oversized; the moment the page moves it
   shrinks to a working toolbar. One multiplier drives every size in here, so
   the two states cannot drift apart — and every scaled property carries the
   same transition, so it is one movement rather than six.
   --k is capped below 1200px: 2.5x of a full nav does not fit a laptop.

   The shrink really does animate layout — gap, padding and font-size across
   seven elements — and it fires on the first scroll, while Lenis is driving a
   rAF loop. Transform cannot express it: --k has to change the bar's HEIGHT,
   because content flows under a sticky header, and scaling a row of text
   blurs it mid-flight and moves the hit targets away from what is drawn. So
   the cost is contained instead of removed: `contain:layout` scopes the
   reflow to this subtree, so the rest of the document is not re-laid-out for
   a header that changed its own padding. It is one 380ms burst, once per
   page, not a per-frame cost. */
.nav{--k:1.25;
  /* Gaps get a gentler ramp than type, so the whitespace does not grow faster
     than the words it separates. */
  --kg:calc(1 + (var(--k) - 1) * .28);
  contain:layout;
  position:sticky;top:0;z-index:100;display:flex;align-items:center;
  gap:calc(28px * var(--kg));padding:calc(14px * var(--k)) clamp(24px,5vw,72px);
  background:rgba(255,255,255,.88);backdrop-filter:blur(14px);border-bottom:1px solid transparent;
  transition:border-color .3s,box-shadow .3s,gap .38s var(--ease),padding .38s var(--ease)}
.nav.stuck{--k:1;border-bottom-color:var(--line);box-shadow:0 1px 20px rgba(23,19,32,.05)}
/* 1.25 fits at every desktop width, so the only override left is the burger
   breakpoint — a stacked menu has nothing to scale. */
@media (max-width:1040px){.nav{--k:1}}
.wordmark{font-size:calc(1.32rem * var(--k));font-weight:700;letter-spacing:-.05em;color:var(--ink);
  text-decoration:none;transition:font-size .38s var(--ease)}
.wordmark i{color:var(--amber);font-style:normal}
.nav-links{display:flex;align-items:center;gap:calc(24px * var(--kg));
  margin-inline-start:calc(14px * var(--kg));flex:1;transition:gap .38s var(--ease)}
.nav-links a,.nav-drop{font-size:calc(.93rem * var(--k));font-weight:500;color:var(--ink-2);
  text-decoration:none;white-space:nowrap;transition:color .18s,font-size .38s var(--ease)}
.nav-links a:hover,.nav-drop:hover{color:var(--amber-deep)}
.nav-actions{display:flex;align-items:center;gap:calc(10px * var(--kg));transition:gap .38s var(--ease)}
.nav .btn{font-size:calc(.95rem * var(--k));padding:calc(11px * var(--k)) calc(20px * var(--k));
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),
    box-shadow .2s var(--ease),transform .2s var(--ease),
    font-size .38s var(--ease),padding .38s var(--ease)}
.lang{display:inline-flex;align-items:center;gap:calc(7px * var(--k));font:inherit;
  font-size:calc(.82rem * var(--k));font-weight:700;
  background:var(--paper-2);border:1px solid var(--line);border-radius:999px;
  padding:calc(7px * var(--k)) calc(13px * var(--k));cursor:pointer;
  color:var(--ink-3);transition:border-color .2s,color .2s,font-size .38s var(--ease),
    padding .38s var(--ease),gap .38s var(--ease)}
.lang:hover{border-color:var(--line-2);color:var(--ink)}
.lang-on{color:var(--violet)}
.lang[aria-pressed=true] .lang-on{color:var(--ink-3)}
.lang[aria-pressed=true] .lang-off{color:var(--violet)}
/* Scaled, not resized: a 1px divider animating its height is a layout pass per
   frame for something the compositor can do for free, and it looks identical. */
.lang-sep{width:1px;height:12px;background:var(--line-2);
  transform:scaleY(var(--k));transition:transform .38s var(--ease)}

/* ── the Event Solutions mega panel ──
   Anchored to the header rather than the trigger, so it spans the viewport
   whatever the bar is doing at that scroll position — and because the header
   is sticky (therefore positioned), top:100% is the bar's own bottom edge,
   which moves correctly as the bar shrinks. */
.nav-drop{display:inline-flex;align-items:center;gap:.45em;background:none;border:0;
  font-family:inherit;padding:0;cursor:pointer}
.nav-chev{width:1em;height:1em;transition:transform .28s var(--ease)}
.nav-drop[aria-expanded=true]{color:var(--amber-deep)}
.nav-drop[aria-expanded=true] .nav-chev{transform:rotate(180deg)}

.mega{position:absolute;top:100%;inset-inline:0;height:70vh;z-index:99;overflow:auto;
  background:var(--paper);border-block:1px solid var(--line);
  box-shadow:0 26px 60px rgba(23,19,32,.13)}
.mega[hidden]{display:none}
.mega-in{max-width:var(--wrap);margin-inline:auto;height:100%;
  display:grid;grid-template-columns:1.55fr 1fr;gap:clamp(28px,4vw,72px);
  padding:clamp(28px,3.5vw,52px) clamp(24px,5vw,72px)}
.mega-h{display:block;font-size:.72rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:22px}
.mega-groups{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,40px)}
.mega-group{display:flex;flex-direction:column;gap:2px}
.mega-group>b{font-size:1.06rem;font-weight:700;color:var(--ink)}
.mega-gp{font-size:.85rem;color:var(--ink-3);margin-bottom:12px}
.mega-group a{font-size:.92rem;color:var(--ink-2);text-decoration:none;padding:7px 0;
  border-bottom:1px solid transparent;transition:color .16s}
.mega-group a:hover{color:var(--amber-deep)}
.mega-foot{display:flex;gap:24px;margin-top:26px;padding-top:18px;border-top:1px solid var(--line)}
.mega-foot a{font-size:.9rem;font-weight:600;color:var(--violet);text-decoration:none}
.mega-foot a:hover{color:var(--amber-deep)}

/* Industries is one column of cards, so it overrides the two-column split. */
.mega-in-ind{grid-template-columns:1fr}
.ind-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.ind-card{display:flex;flex-direction:column;gap:6px;padding:18px 20px;text-decoration:none;
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);
  transition:border-color .18s,transform .18s var(--ease)}
.ind-card:hover{border-color:var(--violet);transform:translateY(-2px)}
.ind-card b{font-size:1.02rem;color:var(--ink)}
.ind-card span{font-size:.88rem;color:var(--ink-2);line-height:1.5}

.mega-featured{border-inline-start:1px solid var(--line);padding-inline-start:clamp(24px,3vw,52px)}
.mega-cards{display:grid;gap:16px}
.mega-card{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);padding:14px}
.mc-art{height:104px;border-radius:calc(var(--r) - 5px);margin-bottom:12px;
  background:linear-gradient(135deg,var(--violet-pale),var(--paper-2))}
.mc-l{display:block;height:10px;border-radius:5px;background:var(--violet-pale);margin-top:8px}
.mc-l.w45{width:45%}.mc-l.w60{width:60%}.mc-l.w70{width:70%}.mc-l.w85{width:85%}

@media (max-width:1040px){
  /* In the burger panel the mega is just the next thing in the list — and it
     literally is: initNav() moves each panel next to its own trigger, so this
     is an accordion inside the menu rather than a 70vh sheet anchored to a bar
     the menu is already covering. Desktop is unaffected: .nav-links is not
     positioned there, so top:100% still resolves against the header. */
  .mega{position:static;height:auto;width:100%;box-shadow:none;
    border-block:1px solid var(--line);border-inline:0}
  .mega-in{grid-template-columns:1fr;padding:14px 0}
  .mega-groups{grid-template-columns:1fr}
  /* Industries becomes four plain links. The descriptions are the only reason
     it was a card grid, and on a phone they turn a four-item menu into a wall
     of text to scroll past — so the card chrome goes with them, and what is
     left matches the Products links in the same panel. */
  .ind-grid{grid-template-columns:1fr;gap:0}
  .ind-card{padding:12px 0;background:none;border:0;border-bottom:1px solid var(--line)}
  .ind-card:last-child{border-bottom:0}
  .ind-card:hover{transform:none}
  .ind-card b{font-size:.92rem;font-weight:500;color:var(--ink-2)}
  .ind-card span{display:none}
  /* The trigger above it already says Industries. */
  #megaInd .mega-h{display:none}
  /* Two placeholder cards are not worth a screen of scrolling on a phone. */
  .mega-featured{display:none}
}
.burger{display:none;background:none;border:0;color:var(--ink);cursor:pointer;padding:6px}
@media (max-width:1040px){
  /* Absolute against the (sticky, therefore positioned) header rather than a
     hardcoded 60px, so the panel tracks the bar's own height as it shrinks. */
  .nav-links{position:absolute;inset-block-start:100%;inset-inline:0;flex-direction:column;
    align-items:stretch;gap:0;background:var(--paper);
    border-bottom:1px solid var(--line);padding:8px 24px 18px;display:none;
    max-height:80dvh;overflow:auto;overscroll-behavior:contain}
  .nav-links.open{display:flex}
  /* The menu is a scrolling flex column, so its children must not shrink to
     fit it — an open mega panel would be squeezed and then clipped by its own
     overflow:auto, losing everything below the first group. */
  .nav-links>*{flex:0 0 auto}
  /* Direct children only: the mega's own links keep their own styling. */
  .nav-links>a,.nav-links>.nav-drop{padding:12px 0;border-bottom:1px solid var(--line);
    justify-content:space-between;text-align:start}
  .burger{display:block;order:3}
  /* .nav-links is out of flow here, so nothing else pushes the actions over. */
  .nav-actions{margin-inline-start:auto}
  .nav-actions .btn-ghost{display:none}
}
@media (max-width:560px){.nav{gap:12px;padding:12px 16px}.nav-actions .btn-solid{display:none}}

/* ═══ hero ═══ */
.hero h1 em{display:block}
.lede{margin-top:22px;font-size:clamp(1.04rem,.97rem + .35vw,1.24rem);color:var(--ink-2);max-width:52ch}
.hero-cta{margin-top:32px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.hero-a{font-size:.93rem;color:var(--amber-deep);font-weight:600;text-decoration:none}
.hero-a:hover{text-decoration:underline}
.hero-marks{list-style:none;display:flex;gap:8px;flex-wrap:wrap;margin-top:30px}
.hero-marks li{font-size:.8rem;font-weight:600;color:var(--amber-deep);background:var(--tint-blush);
  border:1px solid #F2D8C2;padding:6px 12px;border-radius:999px}
/* ═══ pillars ═══ */
.pillars{padding-block:clamp(52px,6vw,92px);background:var(--tint-cream);border-block:1px solid var(--line)}
/* Three columns, not three stacked rows: each pillar is one claim, and they
   are meant to be read against each other rather than one after the other. */
.pillar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2vw,28px);
  margin-top:clamp(34px,4vw,58px)}
.pillar{background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:clamp(22px,2.2vw,32px)}
.pillar-copy h3{margin-bottom:12px}
/* 56ch was a measure for a full-width row; in a third of one it does nothing. */
.pillar-copy p{color:var(--ink-2);font-size:.95rem}
.pillar-note{margin-top:10px;font-size:.88rem!important;color:var(--ink-3)!important}
.pillar-copy .btn{margin-top:20px}
@media (max-width:860px){.pillar-grid{grid-template-columns:1fr}}

/* phone shell, shared by WhatsApp and the apps */
.phone{background:var(--night);border-radius:26px;padding:10px;box-shadow:var(--sh-3);border:1px solid var(--night-3)}
.phone-top{color:#fff;font-size:.82rem;font-weight:600;padding:8px 10px 10px;text-align:center;opacity:.85}
.wa-thread{background:#ECE5DD;border-radius:16px;min-height:290px;max-height:290px;overflow-y:auto;
  padding:12px;display:flex;flex-direction:column;gap:8px}
html[dir=rtl] .wa-thread{direction:rtl}
.wa-msg{background:#fff;border-radius:12px;border-start-start-radius:3px;padding:9px 12px;max-width:86%;
  font-size:.87rem;box-shadow:0 1px 1px rgba(0,0,0,.07);align-self:flex-start}
.wa-msg.wa-out{align-self:flex-end;background:#DCF8C6;border-start-start-radius:12px;border-start-end-radius:3px}
.wa-msg span{display:block;font-size:.65rem;color:#667;margin-top:3px;text-align:end;font-variant-numeric:tabular-nums}

/* offline */
.off-box{background:var(--night);border-radius:var(--r-lg);padding:26px;text-align:center;position:relative;
  overflow:hidden;transition:background .4s var(--ease)}
.off-box.is-off{background:#241A1A}
.off-head{display:inline-flex;align-items:center;gap:8px;font-size:.85rem;font-weight:600;color:rgba(255,255,255,.72)}
.off-dot{width:8px;height:8px;border-radius:50%;background:var(--green-lift);transition:background .3s}
.is-off .off-dot{background:#F0714F}
.off-queue{margin:18px 0 20px}
.off-queue b{display:block;font-size:2.6rem;font-weight:700;letter-spacing:-.05em;color:#fff;
  font-variant-numeric:tabular-nums;line-height:1}
.off-queue span{font-size:.8rem;color:rgba(255,255,255,.55)}
.off-scan{font:inherit;font-size:.88rem;font-weight:600;background:rgba(255,255,255,.11);color:#fff;
  border:1px solid var(--night-line);border-radius:999px;padding:10px 20px;cursor:pointer;transition:.18s}
.off-scan:hover{background:rgba(255,255,255,.18)}
.off-pip{position:absolute;inset-inline-start:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;
  border-radius:50%;border:2px solid var(--amber);pointer-events:none}

/* ═══ exhibitors ═══ */
.exh{padding-block:clamp(52px,6vw,92px)}
.exh-box{margin-top:30px;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--paper)}
.ex-steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);background:var(--paper-2);border-bottom:1px solid var(--line)}
.ex-step{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;font:inherit;font-size:.85rem;
  font-weight:600;padding:14px 8px;background:transparent;border:0;color:var(--ink-3);cursor:pointer;transition:.2s}
.ex-step b{width:21px;height:21px;border-radius:50%;background:var(--line-2);color:#fff;font-size:.72rem;
  display:grid;place-items:center;flex-shrink:0;transition:.2s}
.ex-step.on{color:var(--violet);background:var(--paper)}
.ex-step.on b{background:var(--violet)}
.ex-step.past b{background:var(--green)}
.ex-body{display:grid;grid-template-columns:320px 1fr;gap:24px;padding:24px}
.ex-pane p{font-size:.95rem;color:var(--ink-2);margin-bottom:18px}
.ex-pane[hidden]{display:none}
.ex-left p{font-size:.95rem;color:var(--ink-2);margin-bottom:18px}
.ex-stat{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:20px}
.ex-stat div{background:var(--paper-2);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.ex-stat b{display:block;font-size:1.3rem;font-weight:700;color:var(--amber-deep);font-variant-numeric:tabular-nums;line-height:1.1}
.ex-stat span{font-size:.72rem;color:var(--ink-3)}
.ex-key{display:flex;gap:14px;margin-top:16px;flex-wrap:wrap}
.ex-key>span{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;color:var(--ink-3)}
.ex-key i{width:11px;height:11px;border-radius:3px}
.pkg-p{background:var(--violet)}.pkg-g{background:var(--amber)}.pkg-s{background:#8FA0B8}
.ex-right{min-width:0}
.ex-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;min-height:150px;background:var(--paper-2);
  border:1.5px dashed var(--line-2);border-radius:var(--r);padding:12px;position:relative}
.ex-booth{aspect-ratio:1;border-radius:5px;background:var(--paper-3);border:1px solid var(--line);
  display:grid;place-items:center;font-size:.5rem;font-weight:700;text-align:center;overflow:hidden;
  color:transparent;transition:background .3s,border-color .3s}
.ex-booth.aisle{background:transparent;border:0}
.ex-booth.taken{color:#fff;padding:2px}
.ex-booth.taken span{font-size:.44rem;line-height:1.15;word-break:break-word}
.ex-booth.pkg-p{background:var(--violet);border-color:var(--violet)}
.ex-booth.pkg-g{background:var(--amber-deep);border-color:var(--amber-deep)}
.ex-booth.pkg-s{background:#8FA0B8;border-color:#8FA0B8}
.ex-booth.invited{box-shadow:inset 0 0 0 2px var(--green-lift)}
.ex-fly{position:absolute;width:16px;height:12px;border-radius:2px;background:var(--green);pointer-events:none}
.ex-reqs{margin-top:14px;display:flex;flex-direction:column;gap:6px}
.ex-req{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:.85rem;
  background:var(--paper-2);border:1px solid var(--line);border-radius:9px;padding:8px 12px}
.ex-req.complete{border-color:#BFE6D3;background:#F1FAF5}
.ex-req.chasing{border-color:#F3D9A8;background:#FEF8EE}
.ex-dots{display:flex;gap:5px}
.ex-dots i{width:11px;height:11px;border-radius:50%;background:var(--line-2);transition:background .25s}
.ex-dots i.ok{background:var(--green)}
.ex-dots i.late{background:var(--amber)}
@media (max-width:900px){
  .ex-body{grid-template-columns:1fr}
  .ex-steps{grid-template-columns:repeat(2,1fr)}
  .ex-grid{grid-template-columns:repeat(6,1fr)}
  .ex-step span{display:none}
}

/* ═══ the day ═══ */
.day{padding-block:clamp(52px,6vw,92px);background:var(--night);color:#fff}
.day h2{color:#fff}
.day .sec-lede{color:rgba(255,255,255,.66)}
.day .flow{margin-top:32px;max-width:520px;margin-inline:auto;background:var(--paper);color:var(--ink);
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-3)}
.flow-rail{display:grid;grid-template-columns:repeat(4,1fr);list-style:none;background:var(--paper-2);border-bottom:1px solid var(--line)}
.flow-rail li{display:flex;align-items:center;justify-content:center;gap:7px;padding:13px 6px;font-size:.78rem;
  font-weight:600;color:var(--ink-3);transition:color .3s,background .3s}
.flow-rail li.on{color:var(--violet);background:var(--paper)}
.flow-rail li.done{color:var(--green)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--line-2);transition:background .3s,transform .3s var(--ease)}
.flow-rail li.on .dot{background:var(--violet);transform:scale(1.35)}
.flow-rail li.done .dot{background:var(--green)}
.flow-stages{padding:26px;min-height:440px;display:flex;flex-direction:column;justify-content:center}
.stage{display:flex;flex-direction:column;gap:16px;animation:rise .5s var(--ease) both}
.stage[hidden]{display:none}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.stage-lead{font-size:.9rem;color:var(--ink-3)}
.stage-foot{font-size:.78rem;color:var(--ink-3);text-align:center}
.fld{display:flex;flex-direction:column;gap:7px}
.fld>span,.fld legend{font-size:.83rem;font-weight:600;color:var(--ink-2)}
.fld i{font-style:normal;font-weight:400;color:var(--ink-3)}
/* 1rem, not .96rem, and it is not a taste call: iOS Safari force-zooms the
   whole viewport when a field under 16px takes focus. The demo form is the
   page's conversion surface, so every iPhone tapping Name got the layout
   jerked and had to pinch back out to read what it had typed. */
.fld input,.fld textarea{font:inherit;font-size:1rem;padding:11px 14px;border:1px solid var(--line-2);
  border-radius:10px;background:var(--paper);color:var(--ink);width:100%;transition:border-color .18s,box-shadow .18s}
.fld input::placeholder,.fld textarea::placeholder{color:#9A90A8}
.fld input:focus,.fld textarea:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 3.5px rgba(107,63,160,.13)}
.fld textarea{resize:vertical;min-height:78px}
.types{border:0}
.type-row{display:flex;gap:8px;flex-wrap:wrap}
.type-row label{display:inline-flex;align-items:center;gap:7px;font-size:.88rem;font-weight:500;padding:8px 13px;
  border:1px solid var(--line-2);border-radius:999px;cursor:pointer;transition:.18s var(--ease)}
.type-row input{accent-color:var(--violet);margin:0}
.type-row label:has(input:checked){border-color:var(--violet);background:var(--violet-pale);color:var(--violet);font-weight:600}
.err{font-size:.85rem;color:#B3261E;font-weight:500}
.badge{align-self:center;width:min(272px,100%);background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;box-shadow:var(--sh-2);animation:badgeIn .62s var(--ease) both}
@keyframes badgeIn{from{opacity:0;transform:translateY(14px) rotate(-1.6deg) scale(.95)}to{opacity:1;transform:none}}
.badge-band{background:var(--violet);color:#fff;padding:9px 16px;font-size:.7rem;font-weight:700;letter-spacing:.14em}
.badge-band.speaker{background:var(--amber-deep)}
.badge-band.exhibitor{background:var(--green)}
.badge-body{padding:18px 16px 16px;text-align:center}
.badge-name{font-size:1.24rem;font-weight:700;letter-spacing:-.03em;line-height:1.15}
.badge-org{font-size:.76rem;color:var(--ink-3);margin-top:5px}
.badge-qr{width:126px;height:126px;margin:15px auto 9px}
.badge-qr svg{display:block;width:100%;height:100%}
.badge-code{font-size:.7rem;letter-spacing:.1em;color:var(--ink-3);font-weight:600;font-variant-numeric:tabular-nums}
.scanner{background:var(--night);border-radius:var(--r);padding:24px;text-align:center}
.scan-frame{position:relative;width:150px;height:150px;margin:0 auto;border-radius:10px;background:#fff;padding:11px;overflow:hidden}
.scan-qr svg{display:block;width:100%;height:100%}
.scan-beam{position:absolute;inset-inline:0;top:0;height:34%;pointer-events:none;opacity:0;
  background:linear-gradient(180deg,rgba(18,136,90,0),rgba(18,136,90,.42));border-bottom:2px solid var(--green)}
.scanning .scan-beam{opacity:1;animation:sweep 1.15s var(--ease) 2}
@keyframes sweep{to{transform:translateY(300%)}}
.scan-frame.ok{box-shadow:0 0 0 3px var(--green)}
.scan-status{margin-top:16px;font-size:.9rem;font-weight:600;color:rgba(255,255,255,.6)}
.scan-status.ok{color:var(--green-lift)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.stat{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);padding:16px 12px;text-align:center}
.stat b{display:block;font-size:1.8rem;font-weight:700;letter-spacing:-.045em;color:var(--amber-deep);
  font-variant-numeric:tabular-nums;line-height:1.1}
.stat span{font-size:.72rem;color:var(--ink-3);font-weight:500}
.bars{display:flex;align-items:flex-end;gap:5px;height:74px;padding:0 2px}
.bars i{flex:1;height:100%;background:var(--line);border-radius:3px 3px 0 0;transform:scaleY(0);
  transform-origin:bottom;transition:transform .8s var(--ease),background .8s var(--ease)}
.bars i.hot{background:var(--amber)}

/* ═══ estate — the real explorer ═══ */
.estate{padding-block:clamp(52px,6vw,92px);background:var(--night);color:#fff}
.estate h2{color:#fff}
.sec-lede-dark{color:rgba(255,255,255,.66)}
.es3d{display:grid;grid-template-columns:1fr;gap:22px;margin-top:34px;align-items:start}
.es-side{display:flex;flex-direction:column;gap:14px}
.es-stages{list-style:none;display:flex;flex-direction:column;gap:8px}
.es-stage{display:flex;align-items:center;gap:10px;font-size:.86rem;color:rgba(255,255,255,.36);transition:color .3s}
.es-stage::before{content:'';width:9px;height:9px;border-radius:50%;border:1.5px solid rgba(255,255,255,.26);transition:.3s;flex-shrink:0}
.es-stage.on{color:#fff}
.es-stage.on::before{background:var(--amber);border-color:var(--amber)}
.es-stage.past{color:rgba(255,255,255,.58)}
.es-stage.past::before{background:var(--green-lift);border-color:var(--green-lift)}
.es-src{font-size:.76rem;color:rgba(255,255,255,.4);line-height:1.55}
.es-units{display:flex;flex-direction:column;gap:6px;max-height:340px;overflow-y:auto;padding-inline-end:2px}
.es-unit{display:flex;align-items:center;justify-content:space-between;gap:10px;background:rgba(255,255,255,.05);
  border:1px solid var(--night-line);border-radius:11px;padding:10px 12px;transition:border-color .2s,background .2s}
.es-unit.on{border-color:var(--amber);background:rgba(232,114,44,.10)}
.es-unit.is-res{opacity:.5}
.es-u-main b{display:block;font-size:.88rem;font-weight:700}
.es-u-main span{font-size:.7rem;color:rgba(255,255,255,.5)}
.es-u-side{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex-shrink:0}
.es-u-side u{text-decoration:none;font-size:.78rem;font-weight:700;color:var(--amber);font-variant-numeric:tabular-nums}
.es-go,.es-reserve{font:inherit;font-size:.7rem;font-weight:600;border-radius:999px;padding:4px 10px;cursor:pointer;
  border:1px solid var(--night-line);background:rgba(255,255,255,.08);color:#fff;transition:.18s}
.es-go:hover{background:rgba(255,255,255,.16)}
.es-reserve{background:var(--violet);border-color:var(--violet)}
.es-reserve:hover{background:var(--violet-lift)}
.es-res{font-style:normal;font-size:.68rem;color:rgba(255,255,255,.45)}
.es-main{min-width:0;display:flex;flex-direction:column;gap:10px}
.es-crumb{display:flex;align-items:center;gap:8px;font-size:.82rem;color:rgba(255,255,255,.55);min-height:22px}
.es-crumb button{font:inherit;background:none;border:0;color:var(--amber);cursor:pointer;padding:0}
.es-crumb i{font-style:normal;opacity:.4}
.es-view{position:relative;aspect-ratio:16/11;background:#0D0A12;border:1px solid var(--night-line);
  border-radius:var(--r-lg);overflow:hidden}
.es-view canvas{width:100%;height:100%;display:block;touch-action:none;cursor:grab}
.es-view canvas:active{cursor:grabbing}
.es-hint{position:absolute;inset-inline:0;bottom:12px;text-align:center;font-size:.76rem;
  color:rgba(255,255,255,.55);pointer-events:none}
.es-stops{display:flex;gap:6px;flex-wrap:wrap}
.es-stops[hidden]{display:none}
.es-stops button{font:inherit;font-size:.76rem;font-weight:600;padding:7px 13px;border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.07);border:1px solid var(--night-line);color:rgba(255,255,255,.72);transition:.18s}
.es-stops button.on{background:var(--amber);border-color:var(--amber);color:#231703}
.es-stops button:not(.on):hover{background:rgba(255,255,255,.14);color:#fff}
.es-cutwrap{display:flex;align-items:center;gap:12px;font-size:.78rem;color:rgba(255,255,255,.55)}
.es-cutwrap[hidden]{display:none}
.es-cutwrap input{flex:1;accent-color:var(--amber)}
.es-failed .es-view{display:grid;place-items:center}
@media (max-width:940px){.es3d{grid-template-columns:1fr}.es-units{max-height:260px}}

/* reserve == register */
.es-reg{margin-top:24px;background:rgba(255,255,255,.05);border:1px solid var(--night-line);
  border-radius:var(--r-lg);padding:clamp(20px,2.6vw,30px);display:grid;grid-template-columns:1fr 340px;
  gap:24px;align-items:start}
.es-reg[hidden]{display:none}
.es-reg-head{grid-column:1/-1;display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.es-reg h3{color:#fff}
.es-reg>p{color:rgba(255,255,255,.64);font-size:.94rem;max-width:56ch;grid-column:1}
.es-reg code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.86em;
  background:rgba(255,255,255,.1);padding:1px 6px;border-radius:5px;color:var(--amber)}
.es-reg-x{background:none;border:0;color:rgba(255,255,255,.5);font-size:24px;line-height:1;cursor:pointer;padding:0 4px}
.es-reg-x:hover{color:#fff}
.es-reg-form{grid-column:2;grid-row:2/4;display:flex;flex-direction:column;gap:12px}
.es-reg-form .fld>span{color:rgba(255,255,255,.7)}
.es-reg-form input{background:rgba(255,255,255,.07);border-color:var(--night-line);color:#fff}
.es-reg-form input::placeholder{color:rgba(255,255,255,.35)}
.es-reg-form .locked input{background:rgba(232,114,44,.13);border-color:rgba(232,114,44,.45);
  color:var(--amber);font-weight:700;letter-spacing:.04em}
.es-reg-url{font-size:.74rem;color:rgba(255,255,255,.45);text-align:center;word-break:break-all}
.es-reg-done{grid-column:2;display:flex;flex-direction:column;gap:6px;background:rgba(18,136,90,.14);
  border:1px solid rgba(74,222,153,.3);border-radius:var(--r);padding:20px;text-align:center}
.es-reg-done[hidden]{display:none}
.es-reg-done b{color:var(--green-lift);font-size:1.05rem}
.es-reg-done span{font-size:.85rem;color:rgba(255,255,255,.65)}
@media (max-width:860px){
  .es-reg{grid-template-columns:1fr}
  .es-reg>p,.es-reg-form,.es-reg-done{grid-column:1}
  .es-reg-form{grid-row:auto}
}

/* ═══ apps ═══ */
.apps{padding-block:clamp(52px,6vw,92px);background:var(--tint-mint)}
.app-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(24px,3vw,44px);margin-top:38px}
/* The copy reads as a caption for the handset above it, so it is centred on
   the phone rather than ranged left against the column edge. */
.app-card{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.app-card h3{margin-top:4px}
.app-card>p{color:var(--ink-2);font-size:.97rem;max-width:46ch}
.phone-app{width:min(268px,100%);margin-inline:auto}
.app-screen{background:var(--paper);border-radius:16px;padding:14px;min-height:326px;display:flex;flex-direction:column;gap:8px}
.phone-dark .app-screen{background:var(--night-2);color:#fff}
.app-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.app-hd b{font-size:.98rem;letter-spacing:-.02em}
.off-tag{font-style:normal;font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  background:rgba(232,114,44,.18);color:var(--amber);padding:3px 7px;border-radius:5px}
.app-row{display:flex;align-items:center;gap:10px;font-size:.78rem;padding:9px 10px;border-radius:9px;
  background:var(--paper-2);color:var(--ink-2)}
.app-row.on{background:var(--violet-pale);color:var(--violet);font-weight:600}
.app-row.dark{background:rgba(255,255,255,.07);color:rgba(255,255,255,.8)}
.tm{font-style:normal;font-weight:700;color:var(--violet);font-variant-numeric:tabular-nums;flex-shrink:0}
.app-badge{margin-top:auto;display:flex;align-items:center;gap:10px;background:var(--violet);color:#fff;
  border-radius:11px;padding:12px}
.app-badge i{width:34px;height:34px;border-radius:5px;background:#fff;flex-shrink:0;
  background-image:repeating-linear-gradient(0deg,#14101B 0 3px,#fff 3px 6px),repeating-linear-gradient(90deg,#14101B 0 3px,#fff 3px 6px);
  background-blend-mode:difference}
.app-badge span{font-size:.72rem;font-weight:700;letter-spacing:.08em}
.app-scan{height:104px;border-radius:11px;border:2px dashed rgba(255,255,255,.22);display:grid;place-items:center;margin-bottom:4px}
.app-scan i{width:44px;height:44px;border:2px solid var(--amber);border-radius:7px}
.app-q{margin-top:auto;background:rgba(232,114,44,.14);border-radius:11px;padding:12px;text-align:center}
.app-q b{display:block;font-size:1.5rem;font-weight:700;color:var(--amber);line-height:1.1}
.app-q span{font-size:.7rem;color:rgba(255,255,255,.6)}
.app-feats{list-style:none;display:flex;gap:7px;flex-wrap:wrap;justify-content:center}
.app-feats li{font-size:.78rem;font-weight:600;color:var(--ink-2);background:var(--paper-2);
  border:1px solid var(--line);padding:6px 11px;border-radius:999px}
@media (max-width:760px){.app-grid{grid-template-columns:1fr}}

/* ═══ demo ═══ */
.demo{padding-block:clamp(56px,7vw,104px);background:var(--tint-peach);border-top:1px solid var(--line)}
.demo-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,68px);align-items:start}
.demo-copy h2{max-width:14ch}
.demo-copy p{margin-top:18px;color:var(--ink-2);font-size:1.04rem;max-width:44ch}
.demo-meta{font-size:.9rem!important;color:var(--ink-3)!important}
.demo-form{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(24px,2.8vw,34px);display:flex;flex-direction:column;gap:16px;box-shadow:var(--sh-2)}
.demo-form .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.demo-fine{font-size:.79rem;color:var(--ink-3);text-align:center}
/* Parked with a clip, NOT at left:-9999px. In RTL an element 9,999px to the
   left of the origin is 9,999px of scrollable canvas: documentElement.scrollWidth
   went to 11,468 against a 1,469 viewport, and because RTL scrolls from the
   right, the Arabic page opened on ten thousand pixels of blank. Clipping takes
   it out of layout entirely, in both directions. */
.hp{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.demo-done{grid-column:2;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(34px,4vw,54px) 30px;text-align:center;box-shadow:var(--sh-2);display:flex;flex-direction:column;
  align-items:center;gap:10px}
/* [hidden] is a UA rule at the very bottom of the cascade, so any author
   `display` on this panel beats it — which is why the confirmation was on
   screen before the form had been sent. */
.done-ic{width:46px;height:46px;color:var(--green)}
.demo-done p{color:var(--ink-2)}
@media (max-width:860px){
  .demo-grid{grid-template-columns:1fr}
  .demo-done{grid-column:auto}
  .demo-form .row{grid-template-columns:1fr}
}

/* ═══ footer ═══ */
.foot{background:var(--ink-900);color:var(--bone);padding-block:48px}
.foot-grid{display:flex;justify-content:space-between;gap:28px;flex-wrap:wrap;align-items:flex-start}
.foot-note{margin-top:10px;font-size:.88rem;color:rgba(241,237,243,.6);max-width:44ch}
.foot nav{display:flex;gap:24px;flex-wrap:wrap}
.foot nav a{font-size:.9rem;color:rgba(241,237,243,.75);text-decoration:none;font-weight:500}
.foot nav a:hover{color:var(--amber)}
/* The wordmark inherits --ink, which is the footer's own background — it was
   black on black and simply absent. */
.foot .wordmark{color:var(--bone)}
.foot-grid{align-items:flex-start}
.foot-brand{max-width:44ch}
.foot-nav,.foot-contact{display:flex;flex-direction:column;gap:9px}
.foot-nav b,.foot-contact b{font-size:.72rem;letter-spacing:.12em;text-transform:lowercase;
  color:rgba(241,237,243,.45);font-weight:700;margin-bottom:2px}
.foot-contact a{font-size:.9rem;color:rgba(241,237,243,.75);text-decoration:none;font-weight:500}
.foot-contact a:hover{color:var(--amber)}
.foot-social{list-style:none;display:flex;gap:10px;margin-top:18px;padding:0}
.fs-ic{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:rgba(241,237,243,.08);color:rgba(241,237,243,.7);
  border:1px solid rgba(241,237,243,.12);transition:.2s var(--ease)}
.fs-ic svg{width:16px;height:16px}
.fs-ic:hover{background:rgba(241,237,243,.14);color:var(--bone)}

/* ═══ lead capture ═══ */
/* parked for the dialog rather than laid out as a section */
#mount-leads.leads{padding:0;background:none}
.ld-box{display:grid;grid-template-columns:1fr 300px;gap:clamp(20px,3vw,36px);align-items:start;
  background:var(--night);color:#fff;border-radius:var(--r-lg);padding:clamp(18px,2.2vw,26px)}
.ld-left{display:flex;flex-direction:column;gap:14px}
.ld-net{display:flex;align-items:center;gap:10px;font-size:.86rem;color:rgba(255,255,255,.7)}
.ld-dot{width:8px;height:8px;border-radius:50%;background:var(--green-lift);transition:background .3s}
.leads.is-off .ld-dot{background:#F0714F}
.ld-net button{margin-inline-start:auto;font:inherit;font-size:.78rem;font-weight:600;padding:6px 13px;
  border-radius:999px;background:rgba(255,255,255,.09);border:1px solid var(--night-line);color:#fff;cursor:pointer}
.ld-net button:hover{background:rgba(255,255,255,.17)}
.ld-stat{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ld-stat div{background:rgba(255,255,255,.05);border:1px solid var(--night-line);border-radius:11px;padding:12px}
.ld-stat div.warn{border-color:rgba(232,114,44,.5);background:rgba(232,114,44,.10)}
.ld-stat b{display:block;font-size:1.5rem;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.ld-stat span{font-size:.72rem;color:rgba(255,255,255,.55)}
.ld-list{display:flex;flex-direction:column;gap:6px;max-height:210px;overflow-y:auto}
.ld-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;
  background:rgba(255,255,255,.05);border:1px solid var(--night-line);border-radius:10px}
.ld-row.pending{border-color:rgba(232,114,44,.45);background:rgba(232,114,44,.09)}
.ld-row b{display:block;font-size:.85rem}
.ld-row span{font-size:.72rem;color:rgba(255,255,255,.5)}
.ld-row em{font-style:normal;font-size:.68rem;color:rgba(255,255,255,.45);flex-shrink:0}
.ld-row.pending em{color:var(--amber)}
.ld-phone{width:100%;max-width:300px;margin-inline:auto}
.ld-stage{background:var(--night-2);border-radius:16px;min-height:360px;padding:16px;display:flex;flex-direction:column}
.ld-idle{margin:auto;font-size:.85rem;color:rgba(255,255,255,.4);text-align:center}
.ld-card{display:flex;flex-direction:column;gap:13px}
.ld-id{padding-bottom:11px;border-bottom:1px solid var(--night-line)}
.ld-id b{display:block;font-size:1.02rem;letter-spacing:-.02em}
.ld-id span{font-size:.76rem;color:rgba(255,255,255,.6)}
.ld-from{display:block;margin-top:5px;font-style:normal;font-size:.66rem;color:var(--green-lift)}
.ld-q>span{display:block;font-size:.72rem;font-weight:600;color:rgba(255,255,255,.6);margin-bottom:6px}
.ld-opts{display:flex;gap:5px;flex-wrap:wrap}
.ld-opts button{font:inherit;font-size:.7rem;font-weight:600;padding:6px 10px;border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.07);border:1px solid var(--night-line);color:rgba(255,255,255,.75);transition:.16s}
.ld-opts button.on{background:var(--violet);border-color:var(--violet-lift);color:#fff}
.ld-save{margin-top:auto;font:inherit;font-size:.88rem;font-weight:600;background:var(--violet);color:#fff;
  border:0;border-radius:999px;padding:11px;cursor:pointer}
.ld-save:hover{background:var(--violet-lift)}
@media (max-width:820px){.ld-box{grid-template-columns:1fr}}

/* ═══ solutions bento ═══
   Built on the reference modular-solutions layout, measured from its own
   stylesheet rather than eyeballed. What was taken:

   · flex-wrap with per-card aspect ratios and flex-basis, not a grid — a card
     is a fixed shape (816/676 wide, 400/676 tall) and the row does the rest;
   · the title top-LEFT with padding-right clearing the open button, 21ch;
   · a 38px open button top-right whose two strokes pull apart on hover;
   · the intriguing part: a radial gradient blob living inside the 1px border
     that tracks the pointer. The border layer is inset:-1px and the opaque
     inner sits on top at z-index 2, so the blob is only ever visible through
     the rim — a lit edge that follows your hand;
   · 800ms and cubic-bezier(0.165,0.84,0.44,1): slow and confident. Nothing here
     snaps.
   Everything inside the cards is evenclo's own. */

.sol{padding-block:clamp(52px,6vw,92px);background:var(--tint-lilac);border-block:1px solid var(--line)}
.sol-grid{display:flex;flex-wrap:wrap;gap:16px;width:100%;margin-top:clamp(30px,3.5vw,50px)}

.sol-card{
  --card-ease:cubic-bezier(0.165,0.84,0.44,1);
  --card-duration:800ms;
  --card-scale:1;
  --card-radius:22px;
  --card-mouse-x:0px; --card-mouse-y:0px;
  position:relative;display:flex;flex:1;flex-basis:100%;max-height:576px;
  aspect-ratio:344/504;contain:layout style;cursor:pointer;
  border:none;background:none;padding:0;text-align:inherit;color:inherit;font:inherit;
  border-radius:var(--card-radius);-webkit-appearance:none}
@media (min-width:640px){
  .sol-card{flex-basis:calc(50% - 16px);max-height:100%}
}
@media (min-width:940px){
  .sol-card{max-height:676px}
  .sol-lead   {aspect-ratio:816/676;max-width:816px;flex-basis:calc(66.666% - 8px)}
  .sol-tall   {aspect-ratio:400/676;max-width:400px;flex-basis:calc(33.333% - 8px)}
  .sol-third  {aspect-ratio:400/676;max-width:400px;flex-basis:calc(33.333% - 12px)}
  .sol-banner {aspect-ratio:816/450;max-width:816px;flex-basis:calc(66.666% - 8px)}
  /* wide and short: its own row, no partner to pair with */
  .sol-strip  {aspect-ratio:1232/300;max-width:none;flex-basis:100%}
  .sol-stub   {aspect-ratio:400/450;max-width:400px;flex-basis:calc(33.333% - 8px)}
}

/* ── the lit border ── */
.sol-border{position:absolute;inset:-1px;z-index:1;border-radius:var(--card-radius);
  background:var(--line);overflow:hidden;pointer-events:none}
.sol-glow{position:absolute;top:50%;left:50%;height:80%;aspect-ratio:1;opacity:0;
  transform:translate(-50%,-50%);display:none;transition:opacity .25s linear}
.sol-glow::before{content:'';position:absolute;inset:0;opacity:.85;
  background:radial-gradient(circle,var(--amber),var(--violet) 34%,var(--line) 66%);
  transform:translate3d(var(--card-mouse-x),var(--card-mouse-y),0);
  transition:transform 1s cubic-bezier(.16,1,.3,1);will-change:transform}
@media (min-width:940px){
  .sol-glow{display:block}
  .sol-card:hover .sol-glow{opacity:1}
  .sol-lead .sol-glow,.sol-banner .sol-glow,.sol-strip .sol-glow{width:130%;height:auto}
  .sol-lead .sol-glow::before{inset:15%}
}

/* ── the card body ── */
.sol-inner{position:absolute;inset:0;z-index:2;border-radius:calc(var(--card-radius) - 1px);
  overflow:hidden;background:var(--paper);pointer-events:none}
.sol-graphic{position:absolute;z-index:1;inset:0;
  transform:scale(var(--card-scale));transition:transform var(--card-duration) var(--card-ease)}
.sol-card:hover{--card-scale:1.045}
.sol-graphic>*{width:100%;height:100%}

/* title, top-left, clearing the open button */
.sol-title{position:absolute;z-index:3;top:24px;inset-inline-start:24px;
  max-width:21ch;padding-inline-end:60px;pointer-events:none;
  font-size:clamp(1.05rem,1.9vw,1.55rem);font-weight:700;letter-spacing:-.03em;
  line-height:1.2;text-wrap:balance;
  transition:transform var(--card-duration) var(--card-ease)}
.sol-lead .sol-title{max-width:32ch}
/* The strip is the full grid width and only ~300px tall, so a title wrapping to
   a second line costs it a third of its height. 21ch was a measure for the
   narrow cards; here there is room for the whole line in either language. */
.sol-strip .sol-title{max-width:44ch}
.sol-card:hover .sol-title{transform:translateY(-2px)}

/* the open button: two strokes that pull apart */
.sol-open{position:absolute;inset-inline-end:16px;top:16px;width:38px;height:38px;z-index:3;
  display:grid;place-items:center;border-radius:9px;pointer-events:none;
  background:var(--paper-3);transition:background .6s cubic-bezier(.16,1,.3,1)}
.sol-card:hover .sol-open{background:var(--violet)}
.sol-open svg{width:15px;height:15px}
.sol-open path{fill:var(--violet);transition:transform .6s cubic-bezier(.16,1,.3,1),fill .6s}
.sol-card:hover .sol-open path{fill:#fff}
.sol-card:hover .sol-open path:first-child{transform:translate(2px,-2px)}
.sol-card:hover .sol-open path:nth-child(2){transform:translate(-2px,2px)}
.sol-card:focus-visible{outline:none}
.sol-card:focus-visible .sol-open{outline:2.5px solid var(--violet);outline-offset:3px}

/* ── colour: no card is white ── */
.sol-inner{background:var(--card-bg,var(--paper))}
.gx{position:relative;display:flex;flex-direction:column;height:100%;
  padding:88px 24px 24px}
.sol-lead .gx,.sol-banner .gx{padding:96px 32px 32px}
.sol-strip .gx{padding:84px 32px 26px}
.gx::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:var(--card-wash,none)}

/* ── 1 · the operation: two screens per surface, swapped a slot at a time ──
   The reference grid:auto/.64fr .36fr with a 2px gap. Left is AttendeesScreen →
   ReportsScreen from "evenclo. — backend"; right is LeadsScreen → PulseScreen
   from "exhibitor & admin — redesign". Every slot carries both screens'
   version of itself stacked, phase-shifted by --i so the second screen builds
   a piece at a time. Four flavours — rise, slide, scale-blur, wipe — on
   the reference 0.165,0.84,0.44,1 curve, so nine slots don't read as one effect
   nine times. The event bar is not a slot; it is the anchor. */
.gx-ops{position:relative;padding:78px 16px 16px;display:grid;grid:auto/.64fr .36fr;column-gap:2px}
.gx-ops-bg{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 60% at 16% 10%,rgba(107,63,160,.15),transparent 62%),
             radial-gradient(60% 70% at 94% 90%,rgba(232,114,44,.14),transparent 60%)}

/* ── the swap ──
   Name and delay live in the SAME rule as the shorthand on purpose. Splitting
   them — animation: on one selector, animation-name: on a less specific one —
   silently killed this once: the shorthand resets the name to none and the
   more specific rule won, so nothing ran and nothing failed. */
.gx-sw{position:relative;--sd:16s;--se:cubic-bezier(.165,.84,.44,1);--dir:1}
[dir="rtl"] .gx-sw{--dir:-1}
.gx-sw>div{position:absolute;inset:0}
.gx-sw>.gx-b{opacity:0}
.f-rise>.gx-a {animation:riseA  var(--sd) var(--se) infinite;animation-delay:calc(var(--i) * .5s)}
.f-rise>.gx-b {animation:riseB  var(--sd) var(--se) infinite;animation-delay:calc(var(--i) * .5s)}
.f-slide>.gx-a{animation:slideA var(--sd) var(--se) infinite;animation-delay:calc(var(--i) * .5s)}
.f-slide>.gx-b{animation:slideB var(--sd) var(--se) infinite;animation-delay:calc(var(--i) * .5s)}
.f-scale>.gx-a{animation:scaleA var(--sd) var(--se) infinite;animation-delay:calc(var(--i) * .5s)}
.f-scale>.gx-b{animation:scaleB var(--sd) var(--se) infinite;animation-delay:calc(var(--i) * .5s)}
.f-wipe>.gx-a {animation:wipeA  var(--sd) var(--se) infinite;animation-delay:calc(var(--i) * .5s)}
.f-wipe>.gx-b {animation:wipeB  var(--sd) var(--se) infinite;animation-delay:calc(var(--i) * .5s)}

@keyframes riseA{0%,20%{opacity:1;transform:none}
  26%,72%{opacity:0;transform:translateY(-10px)}78%,100%{opacity:1;transform:none}}
@keyframes riseB{0%,20%{opacity:0;transform:translateY(10px)}
  26%,72%{opacity:1;transform:none}78%,100%{opacity:0;transform:translateY(10px)}}
@keyframes slideA{0%,20%{opacity:1;transform:none}
  26%,72%{opacity:0;transform:translateX(calc(-16px * var(--dir)))}78%,100%{opacity:1;transform:none}}
@keyframes slideB{0%,20%{opacity:0;transform:translateX(calc(16px * var(--dir)))}
  26%,72%{opacity:1;transform:none}78%,100%{opacity:0;transform:translateX(calc(16px * var(--dir)))}}
@keyframes scaleA{0%,20%{opacity:1;transform:none;filter:blur(0)}
  26%,72%{opacity:0;transform:scale(.94);filter:blur(6px)}78%,100%{opacity:1;transform:none;filter:blur(0)}}
@keyframes scaleB{0%,20%{opacity:0;transform:scale(1.06);filter:blur(6px)}
  26%,72%{opacity:1;transform:none;filter:blur(0)}78%,100%{opacity:0;transform:scale(1.06);filter:blur(6px)}}
@keyframes wipeA{0%,20%{opacity:1;clip-path:inset(0 0 0 0)}
  26%,72%{opacity:0;clip-path:inset(0 0 0 100%)}78%,100%{opacity:1;clip-path:inset(0 0 0 0)}}
@keyframes wipeB{0%,20%{opacity:0;clip-path:inset(0 100% 0 0)}
  26%,72%{opacity:1;clip-path:inset(0 0 0 0)}78%,100%{opacity:0;clip-path:inset(0 100% 0 0)}}

.gx-lab{display:block;font-size:.52rem;letter-spacing:.12em;text-transform:lowercase;color:var(--ink-3)}
.gx-lab em{font-style:normal;opacity:.72}
.gx-sub{display:block;font-size:.55rem;color:var(--ink-3)}

/* ── backend ── */
.gx-desk{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:11px;
  overflow:hidden;box-shadow:var(--sh-1);display:flex;flex-direction:column;min-width:0;padding:12px;gap:9px}
.gx-s-head{flex:none;height:56px}
.gx-s-head .gx-lab{display:flex;align-items:center;gap:5px}
.gx-live{width:6px;height:6px;border-radius:50%;background:var(--green-lift);flex:none;
  animation:idlePulse 1.6s ease-in-out infinite}
.sol-card:hover .gx-live{background:var(--amber);animation:none}
.gx-desk h4{font-size:1.05rem;font-weight:700;letter-spacing:-.035em;margin:3px 0 2px;
  text-transform:lowercase;font-variant-numeric:tabular-nums}
.gx-head-b{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.gx-tabs{display:flex;gap:7px}
.gx-tabs i{font-style:normal;font-size:.5rem;color:var(--ink-3);padding-bottom:2px}
.gx-tabs i.on{color:var(--violet-deep);font-weight:700;border-bottom:1.5px solid var(--violet)}
.gx-btns{display:flex;gap:4px;flex:none}
.gx-btns b{font-size:.52rem;font-weight:600;padding:4px 7px;border-radius:6px;white-space:nowrap;
  border:1px solid var(--line);background:var(--paper-2);color:var(--ink-2)}
.gx-btns b.on{background:var(--violet);border-color:var(--violet);color:#fff}

.gx-s-strip{flex:none;height:104px}
.gx-tools{display:flex;flex-direction:column;gap:6px}
.gx-views{display:flex;gap:4px}
.gx-views b{display:flex;align-items:center;gap:4px;font-size:.55rem;font-weight:600;
  padding:5px 8px;border-radius:7px;border:1px solid var(--line);background:var(--paper-2);color:var(--ink-2)}
.gx-views b.on{background:var(--violet-pale);border-color:var(--violet-lift);color:var(--violet-deep)}
.gx-views u{text-decoration:none;font-size:.5rem;color:var(--ink-3);font-variant-numeric:tabular-nums}
.gx-search{display:block;font-size:.55rem;color:var(--ink-3);padding:6px 9px;border-radius:7px;
  border:1px solid var(--line);background:var(--paper-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gx-card{height:100%;display:flex;flex-direction:column;gap:5px;background:var(--paper-2);
  border:1px solid var(--line);border-radius:9px;padding:8px 10px}
.gx-chart{flex:1;min-height:0;display:flex;align-items:flex-end;gap:2px}
.gx-chart>span{flex:1;border-radius:2px 2px 0 0;background:var(--violet-lift);
  display:flex;align-items:flex-end;min-width:0}
.gx-chart i{display:block;width:100%;border-radius:2px 2px 0 0;background:var(--amber)}
.gx-legend{display:flex;align-items:center;gap:5px;font-size:.46rem;color:var(--ink-3)}
.gx-legend i{width:6px;height:6px;border-radius:2px;flex:none}
.gx-legend i.l1{background:var(--violet-lift)}
.gx-legend i.l2{background:var(--amber);margin-inline-start:6px}

.gx-s-body{flex:1.05 1 76px}
.gx-s-body .gx-b{display:flex;flex-direction:column;gap:4px}
.gx-bulk{display:flex;align-items:center;gap:7px;background:var(--violet-pale);
  border:1px solid var(--violet-lift);border-radius:8px;padding:6px 8px}
.gx-sel{font-size:.52rem;font-weight:700;color:var(--violet-deep);white-space:nowrap}
.gx-bulk-a{display:flex;gap:4px;min-width:0;overflow:hidden}
.gx-bulk-a b{font-size:.52rem;font-weight:600;padding:3px 6px;border-radius:5px;white-space:nowrap;
  background:var(--paper);border:1px solid var(--line);color:var(--ink-2)}
.gx-thead{display:grid;grid-template-columns:1fr auto auto;gap:8px;margin-top:auto;padding:0 7px 5px;
  border-bottom:1px solid var(--line)}
.gx-thead span{font-size:.48rem;letter-spacing:.1em;color:var(--ink-3)}

.gx-bars{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:space-around}
.gx-brow{display:flex;align-items:center;gap:7px}
.gx-brow i{font-style:normal;font-size:.5rem;color:var(--ink-2);width:34%;flex:none;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gx-btrack{flex:1;height:5px;border-radius:3px;background:var(--paper-3);overflow:hidden}
.gx-btrack b{display:block;height:100%;border-radius:3px;background:var(--violet)}
.gx-brow u{text-decoration:none;font-size:.5rem;color:var(--ink-3);flex:none;
  font-variant-numeric:tabular-nums;min-width:30px;text-align:end}

.gx-s-list{flex:1.25 1 84px}
.gx-s-list>div{display:flex;flex-direction:column}
.gx-s-list .gx-trow{flex:1}
.gx-s-list .gx-bars{margin-top:3px}
.gx-trow,.gx-lrow{display:flex;align-items:center;gap:7px;padding:6px 7px;min-width:0;
  border-bottom:1px solid var(--line)}
.gx-lrow-t{min-width:0;flex:1}
.gx-lrow-t b{display:block;font-size:.58rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gx-lrow-t em{display:block;font-style:normal;font-size:.46rem;color:var(--ink-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gx-tag{font-size:.46rem;font-weight:600;padding:2px 5px;border-radius:4px;flex:none;
  background:var(--paper-3);color:var(--ink-2)}
.gx-trow u{margin-inline-start:auto;text-decoration:none;font-size:.54rem;color:var(--ink-3);
  font-variant-numeric:tabular-nums;flex:none}
.gx-desk-sync{margin-top:auto;font-size:.52rem;color:var(--ink-3);
  opacity:0;transition:opacity .4s var(--ease)}
.sol-card:hover .gx-desk-sync{opacity:1;color:var(--amber-deep);font-weight:700}

/* ── mobile · a real handset, 9:19.5 ── */
/* ── the handset ──
   The screen is the design artifact's own markup and its own stylesheet, which
   is appended below scoped under .gx-screen and re-expressed in --u — one
   design pixel measured against the handset's real width. Nothing in this block
   restates a size from that design; it only gives the screen a box to live in.

   The handset holds 19.5:9 whatever shape the card is in. height:100% plus
   max-width:100% cannot: when the column is the tighter constraint the width
   clamps and the height does not, so the ratio stretches. Sizing from the
   column's own box takes whichever axis runs out first — the pair below is the
   fallback for where cq units are missing. */
.gx-dev{position:relative;display:flex;align-items:center;justify-content:center;min-width:0;
  container-type:size}
.gx-dev-body{position:relative;height:100%;aspect-ratio:9/19.5;width:auto;max-width:100%;
  container-type:size;transition:transform .6s var(--ease)}
/* Below the fallback, not above it: @supports adds no specificity, so an
   equal-specificity rule after it would simply win. */
@supports (height:1cqh){
  .gx-dev-body{height:min(100cqh,calc(100cqw * 19.5 / 9));max-width:none}
}
.sol-card:hover .gx-dev-body{transform:translateY(-4px)}
/* The shell rounds and shadows in design units too, so a small handset does not
   end up with a huge corner. More specific than phone.css's own .gx-screen. */
.gx-dev-body>.gx-screen{border-radius:calc(46 * var(--u));overflow:hidden;
  box-shadow:0 calc(14 * var(--u)) calc(32 * var(--u)) rgba(20,16,27,.34)}
/* Slots inside the screen overlap in one grid cell instead of stacking
   absolutely, so each sizes itself to the taller of its two screens and no slot
   height has to be guessed. */
.gx-screen .gx-sw{display:grid}
.gx-screen .gx-sw>div{position:relative;grid-area:1/1}
/* There is no tab bar in a card, so the gutter the app reserves for one is not
   reserved here, and the screen does not offer its own scrollbar. */
.gx-screen .scroll{padding-bottom:calc(16 * var(--u));overflow:hidden}
/* The sync pill carries the offline story — the design's own two states. */
.gx-synk{display:grid}
.gx-synk>.synk{grid-area:1/1;transition:opacity .35s var(--ease)}
.gx-synk>.synk.off{opacity:0}
.sol-card:hover .gx-synk>.synk{opacity:0}
.sol-card:hover .gx-synk>.synk.off{opacity:1}

@media (prefers-reduced-motion:reduce){
  .gx-live,.gx-ebdot,.gx-tag.live i,.gx-sw>.gx-a,.gx-sw>.gx-b{animation:none}
  .gx-sw>.gx-b{display:none}
}
@media (max-width:640px){
  /* The desk is unreadable here — a three-column table and a sixteen-bar chart
     inside ~180px. Drop it and give the whole card to the handset, which is the
     half that still reads at this size. The backend slot overrides went with
     it; they styled nothing once .gx-desk stopped rendering. */
  .gx-ops{grid:auto/1fr;padding-top:70px}
  .gx-desk{display:none}
  .gx-s-panel{height:100px}
}
/* ==== BEGIN design stylesheet — the mobile artifact's own CSS,
   scoped and rescaled by build-phone.mjs. Do not hand-edit. ==== */
.gx-screen{--sans:'IBM Plex Sans Arabic',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;--mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;--ease:cubic-bezier(0.22,1,0.36,1);--pad:calc(22 * var(--u));--rowpad:calc(14 * var(--u));--cardgap:calc(9 * var(--u));--paper:#F6F2EB;--surface:#FFFFFF;--raised:#FAF8FB;--sunken:#F0ECF3;--border:#E1DDE8;--hair:#ECE8F1;--ink:#171021;--text2:#57506B;--muted:#8E86A0;--purple:#6B3FA0;--purple-soft:rgba(107,63,160,.10);--purple-lift:#9A6BD0;--ember:#E8722C;--ember-ink:#AE4E13;--ember-soft:rgba(232,114,44,.14);--ok:#137A4B;--ok-soft:rgba(19,122,75,.11);--danger:#BE1E3C;--danger-soft:rgba(190,30,60,.09);--sh:0 calc(6 * var(--u)) calc(18 * var(--u)) rgba(98,65,133,.10);--sh-lg:0 calc(18 * var(--u)) calc(44 * var(--u)) rgba(98,65,133,.18);
  /* one design pixel, measured against the handset's real width */
  --u:calc(100cqw / 390);
  position:absolute;inset:0;font-family:var(--sans);color:var(--ink);
  background:var(--paper);overflow:hidden;text-align:start}
.gx-screen [data-theme=dark]{--paper:#0D0916;--surface:#1B1429;--raised:#241B36;--sunken:#171122;--border:rgba(241,237,243,.14);--hair:rgba(241,237,243,.09);--ink:#F6F3F8;--text2:rgba(246,243,248,.68);--muted:rgba(246,243,248,.44);--purple:#9A6BD0;--purple-soft:rgba(154,107,208,.16);--purple-lift:#B994E8;--ember:#F79154;--ember-ink:#F79154;--ember-soft:rgba(247,145,84,.16);--ok:#43D69B;--ok-soft:rgba(67,214,155,.15);--danger:#FF6B85;--danger-soft:rgba(255,107,133,.14);--sh:0 calc(6 * var(--u)) calc(18 * var(--u)) rgba(0,0,0,.4);--sh-lg:0 calc(18 * var(--u)) calc(44 * var(--u)) rgba(0,0,0,.55)}.gx-screen [data-dense=on]{--pad:calc(18 * var(--u));--rowpad:calc(11 * var(--u));--cardgap:calc(7 * var(--u))}.gx-screen *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}.gx-screen html,.gx-screen body{margin:0;height:100%}.gx-screen button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;padding:0}.gx-screen input{font-family:inherit;border:none;background:none;color:inherit;outline:none;font-size:calc(15 * var(--u));min-width:0;flex:1}.gx-screen a{color:var(--purple)}.gx-screen a:hover{color:var(--purple-lift)}.gx-screen .wordmark{font-weight:200;letter-spacing:-.045em;line-height:1;display:inline-flex;align-items:flex-end;white-space:nowrap}.gx-screen .wm-dot{width:.13em;height:.13em;min-width:calc(4 * var(--u));min-height:calc(4 * var(--u));border-radius:50%;background:var(--ember,#E8722C);display:inline-block;margin-left:.12em;margin-bottom:.15em;box-shadow:0 0 calc(10 * var(--u)) calc(1 * var(--u)) rgba(232,114,44,.7)}.gx-screen .dot{position:relative;display:inline-block;border-radius:50%;flex:none}.gx-screen .dot-pulse>i{position:absolute;inset:0;border-radius:50%;border:calc(1.5 * var(--u)) solid;animation:ph-pulse 1.9s var(--ease) infinite}
@keyframes ph-pulse{0%{transform:scale(1);opacity:.7}80%,100%{transform:scale(3.6);opacity:0}}.gx-screen .mark{display:grid;place-items:center;font-family:var(--mono);font-weight:600;color:#fff;text-transform:uppercase;flex:none;letter-spacing:-.02em}.gx-screen .const{position:absolute;inset:0;width:100%;height:100%}.gx-screen .stage{position:fixed;inset:0;display:flex;flex-direction:column;align-items:stretch;background:radial-gradient(130% 90% at 50% -10%,#2A1B3D 0%,#14101B 58%)}.gx-screen .stage-canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.65}.gx-screen .stage-head{position:relative;z-index:3;width:100%;display:flex;align-items:center;justify-content:space-between;padding:calc(16 * var(--u)) calc(28 * var(--u))}.gx-screen .cap{font-family:var(--mono);font-size:calc(10 * var(--u));font-weight:500;letter-spacing:.16em;text-transform:uppercase}.gx-screen .stage-head .cap{color:rgba(241,237,243,.4)}.gx-screen .device-wrap{position:relative;z-index:2;flex:1;display:flex;align-items:center;justify-content:center;min-height:0;overflow:hidden}.gx-screen .controls{position:relative;z-index:3;display:flex;gap:calc(5 * var(--u)) calc(13 * var(--u));flex-wrap:wrap;justify-content:center;align-items:center;padding:calc(10 * var(--u)) calc(18 * var(--u)) calc(14 * var(--u));max-width:calc(1120 * var(--u));margin:0 auto}.gx-screen .cgroup{display:flex;align-items:center;gap:calc(5 * var(--u))}.gx-screen .cgroup>.cap{color:rgba(241,237,243,.32);margin-right:calc(2 * var(--u))}.gx-screen .ctrl{padding:calc(6 * var(--u)) calc(10 * var(--u));border-radius:calc(99 * var(--u));font-family:var(--mono);font-size:calc(10 * var(--u));letter-spacing:.05em;color:rgba(241,237,243,.68);background:rgba(241,237,243,.06);border:calc(1 * var(--u)) solid rgba(241,237,243,.12);transition:all .15s}.gx-screen .ctrl:hover{background:rgba(241,237,243,.14)}.gx-screen .ctrl.on{background:#F1EDF3;color:#14101B;border-color:#F1EDF3;font-weight:600}.gx-screen .phone{position:relative;width:calc(392 * var(--u));height:calc(812 * var(--u));flex:none;transform-origin:center;border-radius:calc(56 * var(--u));background:linear-gradient(160deg,#0b0812,#241a33);padding:calc(11 * var(--u));box-shadow:0 calc(30 * var(--u)) calc(70 * var(--u)) rgba(20,16,27,.6)}.gx-screen .phone::after{content:"";position:absolute;inset:calc(-2 * var(--u));border-radius:calc(58 * var(--u));pointer-events:none;box-shadow:inset 0 0 0 calc(1.5 * var(--u)) rgba(241,237,243,.09)}.gx-screen .screenbox{position:relative;width:100%;height:100%;border-radius:calc(46 * var(--u));overflow:hidden;background:var(--paper);color:var(--ink);display:flex;flex-direction:column;transition:background .35s var(--ease)}.gx-screen [data-theme=dark].screenbox{background:radial-gradient(120% 70% at 50% -8%,#1A1229 0%,#0D0916 55%)}.gx-screen .statusbar{position:relative;z-index:6;height:calc(50 * var(--u));display:flex;align-items:center;justify-content:space-between;padding:0 calc(28 * var(--u));flex:none;color:var(--ink)}.gx-screen .sb-time{font-size:calc(14 * var(--u));font-weight:600;letter-spacing:.02em}.gx-screen .sb-island{position:absolute;left:50%;top:calc(10 * var(--u));transform:translateX(-50%);width:calc(100 * var(--u));height:calc(29 * var(--u));border-radius:calc(16 * var(--u));background:#0b0812}.gx-screen .sb-r{display:flex;align-items:center;gap:calc(6 * var(--u));opacity:.8}.gx-screen .sb-batt{width:calc(22 * var(--u));height:calc(11 * var(--u));border-radius:calc(3 * var(--u));border:calc(1 * var(--u)) solid currentColor;padding:calc(1.4 * var(--u));opacity:.55}.gx-screen .sb-batt>span{display:block;width:72%;height:100%;border-radius:calc(1.4 * var(--u));background:currentColor}.gx-screen .body{position:relative;flex:1;min-height:0;display:flex;flex-direction:column}.gx-screen .screen{position:absolute;inset:0;display:flex;flex-direction:column;animation:ph-screen-in .38s var(--ease)}
@keyframes ph-screen-in{from{opacity:0;transform:translateY(calc(10 * var(--u)))}}.gx-screen .screen.pop{animation:ph-pop-in .32s var(--ease)}
@keyframes ph-pop-in{from{opacity:0;transform:scale(.965)}}.gx-screen .dark-screen{background:radial-gradient(120% 80% at 50% 0%,#231738,#0A0713);color:#F1EDF3}.gx-screen .scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 var(--pad) calc(168 * var(--u));scrollbar-width:none}.gx-screen .scroll::-webkit-scrollbar{width:0}.gx-screen .dk-scroll{color:#F1EDF3;position:relative;z-index:2}.gx-screen .nav{flex:none;display:flex;align-items:center;gap:calc(8 * var(--u));padding:0 calc(16 * var(--u)) calc(6 * var(--u));min-height:calc(40 * var(--u))}.gx-screen .nav-btn{width:calc(38 * var(--u));height:calc(38 * var(--u));border-radius:calc(12 * var(--u));display:grid;place-items:center;color:var(--ink);transition:.15s;flex:none}.gx-screen .nav-btn:hover{background:var(--purple-soft)}.gx-screen .nav-title{font-size:calc(13.5 * var(--u));font-weight:500;color:var(--text2);flex:1;font-family:var(--mono);letter-spacing:.04em}.gx-screen [dir=rtl] .nav-btn svg,.gx-screen [dir=rtl] .chev svg{transform:scaleX(-1)}.gx-screen .eyebrow{font-family:var(--mono);font-size:calc(10 * var(--u));font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--purple-lift)}.gx-screen .h1{font-weight:200;font-size:calc(32 * var(--u));letter-spacing:-.03em;line-height:1.06;margin:calc(6 * var(--u)) 0 0;color:var(--ink);text-wrap:balance}.gx-screen .h2{font-weight:200;font-size:calc(21 * var(--u));letter-spacing:-.02em;margin:0;color:var(--ink)}.gx-screen .h3{font-weight:500;font-size:calc(15 * var(--u));margin:0;color:var(--ink);letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gx-screen .p{font-weight:200;font-size:calc(14 * var(--u));line-height:1.6;color:var(--text2);margin:0;text-wrap:pretty}.gx-screen .meta{font-size:calc(12.5 * var(--u));color:var(--muted);margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gx-screen .mono{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em}.gx-screen .lab{font-family:var(--mono);font-size:calc(9.5 * var(--u));font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}.gx-screen .bi-sub{font-size:calc(12.5 * var(--u));font-weight:200;color:var(--muted);letter-spacing:0}.gx-screen .bi-sub.ar{font-size:calc(14 * var(--u));opacity:.75}.gx-screen .ar{font-weight:200;direction:rtl}.gx-screen .rowb{display:flex;align-items:center;justify-content:space-between;gap:calc(12 * var(--u))}.gx-screen .rowb>.stack{min-width:0;flex:1}.gx-screen .rowb>.stack .meta{white-space:normal;line-height:1.45}.gx-screen .stack{display:flex;flex-direction:column}.gx-screen .sec{margin-top:calc(24 * var(--u))}.gx-screen .sec-head{display:flex;align-items:center;justify-content:space-between;gap:calc(10 * var(--u));margin-bottom:calc(11 * var(--u))}.gx-screen .reveal{animation:ph-rise .5s var(--ease) backwards}
@keyframes ph-rise{from{opacity:0;transform:translateY(calc(12 * var(--u)))}}.gx-screen .link{color:var(--purple);font-weight:500;font-size:calc(13.5 * var(--u))}.gx-screen .link.center{display:block;width:100%;text-align:center}.gx-screen .count{font-family:var(--mono);font-size:calc(11 * var(--u));font-weight:600;min-width:calc(22 * var(--u));height:calc(22 * var(--u));padding:0 calc(6 * var(--u));border-radius:calc(99 * var(--u));background:var(--ember);color:#20120A;display:grid;place-items:center;flex:none}.gx-screen .icon-btn{width:calc(40 * var(--u));height:calc(40 * var(--u));border-radius:calc(13 * var(--u));background:var(--surface);border:calc(1 * var(--u)) solid var(--border);display:grid;place-items:center;color:var(--ink);box-shadow:var(--sh);flex:none}.gx-screen .icon-btn:active{transform:scale(.94)}.gx-screen .btn{display:inline-flex;align-items:center;justify-content:center;gap:calc(8 * var(--u));height:calc(50 * var(--u));padding:0 calc(20 * var(--u));border-radius:calc(99 * var(--u));font-size:calc(15 * var(--u));font-weight:500;letter-spacing:-.01em;transition:transform .15s var(--ease),background .15s,box-shadow .2s}.gx-screen .btn:active{transform:scale(.97)}.gx-screen .btn:disabled{opacity:.45;pointer-events:none}.gx-screen .btn-block{display:flex;width:100%}.gx-screen .btn-p{background:var(--purple);color:#fff;box-shadow:0 calc(8 * var(--u)) calc(20 * var(--u)) color-mix(in oklab,var(--purple) 32%,transparent)}.gx-screen .btn-e{background:var(--ember);color:#25130A;font-weight:600;box-shadow:0 calc(8 * var(--u)) calc(22 * var(--u)) color-mix(in oklab,var(--ember) 34%,transparent)}.gx-screen .btn-g{background:var(--surface);color:var(--ink);border:calc(1 * var(--u)) solid var(--border);box-shadow:var(--sh)}.gx-screen .btn-q{background:var(--sunken);color:var(--ink);border:calc(1 * var(--u)) solid var(--hair)}.gx-screen .btn-d{background:var(--danger-soft);color:var(--danger)}.gx-screen .chips{display:flex;gap:calc(7 * var(--u));flex-wrap:wrap}.gx-screen .chip{padding:calc(8 * var(--u)) calc(13 * var(--u));border-radius:calc(99 * var(--u));border:calc(1 * var(--u)) solid var(--border);background:var(--surface);font-family:var(--mono);font-size:calc(10.5 * var(--u));letter-spacing:.04em;color:var(--text2);transition:.15s;white-space:nowrap;min-height:calc(34 * var(--u))}.gx-screen .chip.on{border-color:var(--purple);background:var(--purple-soft);color:var(--ink);font-weight:600}.gx-screen .seg{position:relative;display:flex;background:var(--sunken);border-radius:calc(13 * var(--u));padding:calc(4 * var(--u))}.gx-screen .seg-b{position:relative;z-index:2;flex:1;height:calc(38 * var(--u));border-radius:calc(10 * var(--u));font-family:var(--mono);font-size:calc(10.5 * var(--u));letter-spacing:.05em;color:var(--text2);transition:color .2s;text-transform:uppercase}.gx-screen .seg-b.on{color:#fff}.gx-screen .seg-t{position:absolute;z-index:1;top:calc(4 * var(--u));left:calc(4 * var(--u));height:calc(38 * var(--u));border-radius:calc(10 * var(--u));background:var(--purple);box-shadow:0 calc(4 * var(--u)) calc(12 * var(--u)) color-mix(in oklab,var(--purple) 36%,transparent);transition:transform .34s var(--ease),width .34s var(--ease)}.gx-screen [dir=rtl] .seg-t{left:auto;right:calc(4 * var(--u))}.gx-screen .switch{width:calc(48 * var(--u));height:calc(28 * var(--u));border-radius:calc(99 * var(--u));background:var(--sunken);border:calc(1 * var(--u)) solid var(--border);position:relative;transition:.24s var(--ease);flex:none}.gx-screen .switch>i{position:absolute;top:calc(2 * var(--u));left:calc(2 * var(--u));width:calc(22 * var(--u));height:calc(22 * var(--u));border-radius:50%;background:var(--muted);transition:.24s var(--ease)}.gx-screen .switch.on{background:var(--purple-soft);border-color:var(--purple)}.gx-screen .switch.on>i{transform:translateX(calc(20 * var(--u)));background:var(--purple)}.gx-screen [dir=rtl] .switch.on>i{transform:translateX(calc(-20 * var(--u)))}.gx-screen .fieldset{margin-top:calc(16 * var(--u));display:flex;flex-direction:column;gap:calc(8 * var(--u))}.gx-screen .field{background:var(--surface);border:calc(1 * var(--u)) solid var(--border);border-radius:calc(13 * var(--u));padding:calc(14 * var(--u)) calc(15 * var(--u));box-shadow:var(--sh);font-size:calc(15 * var(--u));color:var(--ink);display:flex;align-items:center;gap:calc(10 * var(--u));min-height:calc(50 * var(--u))}.gx-screen .field.dk{background:rgba(241,237,243,.06);border-color:rgba(241,237,243,.14);box-shadow:none;color:#F1EDF3}.gx-screen .field.ta{flex-direction:column;align-items:stretch;gap:calc(12 * var(--u));min-height:calc(110 * var(--u))}.gx-screen .field input::placeholder{color:var(--muted)}.gx-screen .search{margin:0}.gx-screen .mic{display:inline-flex;align-items:center;gap:calc(6 * var(--u));align-self:flex-end;font-family:var(--mono);font-size:calc(10.5 * var(--u));letter-spacing:.08em;text-transform:uppercase;color:var(--purple)}.gx-screen .card{background:var(--surface);border:calc(1 * var(--u)) solid var(--border);border-radius:calc(18 * var(--u));box-shadow:var(--sh);transition:transform .18s var(--ease),box-shadow .18s,border-color .18s}.gx-screen button.card:active{transform:scale(.985)}.gx-screen .card.pad{padding:var(--pad)}.gx-screen .dashed{border-style:dashed;box-shadow:none;background:transparent;color:var(--purple)}.gx-screen .tag{display:inline-flex;align-items:center;gap:calc(5 * var(--u));padding:calc(5 * var(--u)) calc(9 * var(--u));border-radius:calc(7 * var(--u));font-family:var(--mono);font-size:calc(9.5 * var(--u));font-weight:600;letter-spacing:.08em;text-transform:uppercase;flex:none}.gx-screen .tag-live{background:var(--ember-soft);color:var(--ember-ink)}.gx-screen .tag-ok{background:var(--ok-soft);color:var(--ok)}.gx-screen .tag-n{background:var(--sunken);color:var(--muted)}.gx-screen .tag-role{background:var(--purple-soft);color:var(--purple-lift)}.gx-screen .empty{text-align:center;padding:calc(56 * var(--u)) calc(20 * var(--u));display:flex;flex-direction:column;align-items:center;gap:calc(6 * var(--u));color:var(--muted)}.gx-screen .empty .h3{white-space:normal}.gx-screen .note{display:flex;gap:calc(8 * var(--u));align-items:flex-start;font-size:calc(12.5 * var(--u));line-height:1.55;color:var(--muted);margin:0 0 calc(14 * var(--u));font-weight:200}.gx-screen .note svg{flex:none;margin-top:calc(2 * var(--u))}.gx-screen .warn{display:flex;gap:calc(7 * var(--u));align-items:center;font-size:calc(12 * var(--u));line-height:1.45;color:var(--ember-ink);background:var(--ember-soft);padding:calc(9 * var(--u)) calc(11 * var(--u));border-radius:calc(10 * var(--u));margin:calc(10 * var(--u)) 0 0;font-weight:400}.gx-screen .warn svg{flex:none}.gx-screen .warn.big{font-size:calc(13.5 * var(--u));padding:calc(12 * var(--u)) calc(13 * var(--u));margin-top:calc(14 * var(--u))}.gx-screen .ok-line{display:flex;gap:calc(7 * var(--u));align-items:center;font-size:calc(13.5 * var(--u));color:var(--ok);margin:calc(14 * var(--u)) 0 0}.gx-screen .kv{display:flex;align-items:center;justify-content:space-between;gap:calc(14 * var(--u));padding:calc(13 * var(--u)) 0;border-bottom:calc(1 * var(--u)) solid var(--hair)}.gx-screen .kv-v{font-size:calc(13.5 * var(--u));color:var(--ink);text-align:end}.gx-screen .rowlink{display:flex;align-items:center;gap:calc(12 * var(--u));padding:var(--rowpad) calc(15 * var(--u));width:100%;min-height:calc(60 * var(--u))}.gx-screen .rl-ico{width:calc(34 * var(--u));height:calc(34 * var(--u));border-radius:calc(11 * var(--u));background:var(--sunken);display:grid;place-items:center;flex:none;color:var(--text2)}.gx-screen .chev{color:var(--muted);display:flex;flex:none}.gx-screen .prow{display:flex;align-items:center;gap:calc(12 * var(--u));padding:var(--rowpad) calc(14 * var(--u));width:100%;margin-bottom:var(--cardgap);min-height:calc(62 * var(--u))}.gx-screen .prow.off{opacity:.5}.gx-screen .you{font-family:var(--mono);font-size:calc(9 * var(--u));letter-spacing:.1em;text-transform:uppercase;color:var(--purple-lift);margin-inline-start:calc(7 * var(--u));font-style:normal}.gx-screen .sheet-wrap{position:absolute;inset:0;z-index:60;background:rgba(10,7,19,.6);backdrop-filter:blur(calc(6 * var(--u)));display:flex;align-items:flex-end;animation:ph-fade .24s var(--ease)}
@keyframes ph-fade{from{opacity:0}}.gx-screen .sheet{width:100%;background:var(--surface);border-radius:calc(26 * var(--u)) calc(26 * var(--u)) 0 0;padding:calc(14 * var(--u)) calc(22 * var(--u)) calc(30 * var(--u));box-shadow:0 calc(-14 * var(--u)) calc(40 * var(--u)) rgba(10,7,19,.5);animation:ph-sheet-up .34s var(--ease);color:var(--ink)}
@keyframes ph-sheet-up{from{transform:translateY(calc(60 * var(--u)))}}.gx-screen .sheet-grip{display:block;width:calc(40 * var(--u));height:calc(4 * var(--u));border-radius:calc(99 * var(--u));background:var(--border);margin:0 auto calc(16 * var(--u))}.gx-screen .toast{position:absolute;left:calc(16 * var(--u));right:calc(16 * var(--u));bottom:calc(120 * var(--u));z-index:70;display:flex;align-items:center;gap:calc(9 * var(--u));background:#1B1429;color:#F6F3F8;border:calc(1 * var(--u)) solid rgba(241,237,243,.14);border-radius:calc(14 * var(--u));padding:calc(13 * var(--u)) calc(16 * var(--u));font-size:calc(13.5 * var(--u));box-shadow:0 calc(14 * var(--u)) calc(34 * var(--u)) rgba(0,0,0,.5);animation:ph-toast-in .3s var(--ease)}
@keyframes ph-toast-in{from{opacity:0;transform:translateY(calc(10 * var(--u)))}}.gx-screen .ebar{flex:none;display:flex;align-items:center;justify-content:space-between;gap:calc(10 * var(--u));padding:0 var(--pad) calc(8 * var(--u))}.gx-screen .ebar-ev{display:flex;align-items:center;gap:calc(8 * var(--u));min-width:0;color:var(--ink)}.gx-screen .ebar-name{font-size:calc(13.5 * var(--u));font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gx-screen .synk{display:flex;align-items:center;gap:calc(6 * var(--u));padding:calc(6 * var(--u)) calc(11 * var(--u));border-radius:calc(99 * var(--u));background:var(--ok-soft);color:var(--ok);font-size:calc(10 * var(--u));letter-spacing:.08em;text-transform:uppercase;flex:none}.gx-screen .synk .mono{font-weight:600}.gx-screen .synk.off{background:var(--ember-soft);color:var(--ember-ink)}.gx-screen .dock-wrap{position:absolute;left:0;right:0;bottom:0;z-index:30;padding:0 calc(14 * var(--u)) calc(16 * var(--u));pointer-events:none}.gx-screen .dock{display:flex;pointer-events:auto;background:color-mix(in oklab,var(--surface) 88%,transparent);backdrop-filter:blur(calc(16 * var(--u)));border:calc(1 * var(--u)) solid var(--border);border-radius:calc(22 * var(--u));padding:calc(7 * var(--u)) calc(6 * var(--u));box-shadow:0 calc(12 * var(--u)) calc(30 * var(--u)) rgba(10,7,19,.3)}.gx-screen .tab{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;gap:calc(4 * var(--u));padding:calc(7 * var(--u)) 0 calc(8 * var(--u));color:var(--muted);border-radius:calc(16 * var(--u));transition:color .2s,background .2s;min-height:calc(56 * var(--u))}.gx-screen .tab.on{color:var(--purple);background:var(--purple-soft)}.gx-screen .tab-l{font-size:calc(9 * var(--u));letter-spacing:.1em;text-transform:uppercase;font-weight:600}.gx-screen .act{pointer-events:auto;position:absolute;inset-inline-end:calc(18 * var(--u));bottom:calc(86 * var(--u));width:calc(68 * var(--u));height:calc(68 * var(--u));border-radius:50%;background:radial-gradient(120% 120% at 30% 20%,var(--ember),#C4551C);color:#26130A;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(1 * var(--u));box-shadow:0 calc(14 * var(--u)) calc(34 * var(--u)) color-mix(in oklab,var(--ember) 42%,transparent),inset 0 calc(1 * var(--u)) 0 rgba(255,255,255,.35);transition:transform .16s var(--ease)}.gx-screen .act:active{transform:scale(.94)}.gx-screen .act-ring{position:absolute;inset:calc(-6 * var(--u));border-radius:50%;border:calc(1 * var(--u)) solid color-mix(in oklab,var(--ember) 46%,transparent);animation:ph-pulse 2.6s var(--ease) infinite}.gx-screen .act-l{font-size:calc(8.5 * var(--u));letter-spacing:.12em;text-transform:uppercase;font-weight:600}.gx-screen .launcher{position:absolute;inset:0;z-index:50;background:radial-gradient(120% 80% at 50% 0%,#26193C,#0A0713);animation:ph-fade .26s var(--ease);overflow:hidden}.gx-screen .launcher-in{position:relative;z-index:2;height:100%;overflow-y:auto;padding:calc(26 * var(--u)) calc(22 * var(--u)) calc(40 * var(--u));scrollbar-width:none}.gx-screen .launcher-in::-webkit-scrollbar{width:0}.gx-screen .lnc-x{color:rgba(241,237,243,.7)}.gx-screen .lnc-off{display:flex;align-items:center;gap:calc(9 * var(--u));margin-top:calc(18 * var(--u));padding:calc(11 * var(--u)) calc(13 * var(--u));border-radius:calc(12 * var(--u));background:rgba(247,145,84,.14);color:#F79154;font-size:calc(11 * var(--u))}.gx-screen .lnc-off .mono{letter-spacing:.02em}.gx-screen .orbit{margin-top:calc(26 * var(--u))}.gx-screen .orbit .lab{color:rgba(241,237,243,.4)}.gx-screen .orbit-grid{display:grid;grid-template-columns:1fr 1fr;gap:calc(9 * var(--u));margin-top:calc(11 * var(--u))}.gx-screen .lnode{position:relative;display:flex;align-items:center;gap:calc(10 * var(--u));padding:calc(15 * var(--u)) calc(13 * var(--u));border-radius:calc(16 * var(--u));background:rgba(241,237,243,.055);border:calc(1 * var(--u)) solid rgba(241,237,243,.11);color:rgba(241,237,243,.78);backdrop-filter:blur(calc(6 * var(--u)));animation:ph-rise .45s var(--ease) backwards;transition:.15s;min-height:calc(56 * var(--u));text-align:start}.gx-screen .lnode:hover{background:rgba(241,237,243,.11)}.gx-screen .lnode.hot{border-color:var(--ember);color:#F6F3F8}.gx-screen .lnode-d{width:calc(5 * var(--u));height:calc(5 * var(--u));border-radius:50%;background:var(--ember);flex:none;box-shadow:0 0 calc(8 * var(--u)) rgba(247,145,84,.8)}.gx-screen .lnode-l{font-size:calc(12.5 * var(--u));font-weight:400;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gx-screen .lnode-c{font-family:var(--mono);font-size:calc(10 * var(--u));font-weight:600;background:var(--ember);color:#25130A;border-radius:calc(99 * var(--u));padding:calc(2 * var(--u)) calc(6 * var(--u));flex:none}.gx-screen .ink-panel{position:relative;border-radius:calc(22 * var(--u));overflow:hidden;background:radial-gradient(120% 100% at 50% 0%,#2C1D42,#150F23);margin-bottom:calc(12 * var(--u));box-shadow:0 calc(14 * var(--u)) calc(34 * var(--u)) rgba(10,7,19,.35)}.gx-screen .ink-in{position:relative;z-index:2;padding:calc(16 * var(--u)) calc(18 * var(--u)) calc(18 * var(--u));color:#F1EDF3}.gx-screen .huge{font-size:calc(52 * var(--u));font-weight:400;line-height:.92;color:#F6F3F8}.gx-screen .huge-s{font-size:calc(34 * var(--u));font-weight:400;color:var(--ember)}.gx-screen .of{font-size:calc(12.5 * var(--u));color:rgba(241,237,243,.55);font-weight:200}.gx-screen .ink-foot{display:flex;gap:calc(18 * var(--u));margin-top:calc(14 * var(--u));padding-top:calc(13 * var(--u));border-top:calc(1 * var(--u)) solid rgba(241,237,243,.14)}.gx-screen .ink-foot>span{display:flex;flex-direction:column;gap:calc(3 * var(--u))}.gx-screen .ink-foot b{font-size:calc(16 * var(--u));font-weight:500;color:#F6F3F8}.gx-screen .ink-foot .lab{color:rgba(241,237,243,.45);font-style:normal}.gx-screen .ribbon{position:relative;margin-top:calc(14 * var(--u));width:100%}.gx-screen .ribbon svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.gx-screen .rb-area{animation:ph-fade .8s var(--ease)}.gx-screen .rb-line{stroke-dasharray:600;animation:ph-draw 1.4s var(--ease) forwards}
@keyframes ph-draw{from{stroke-dashoffset:600}.gx-screen to{stroke-dashoffset:0}}.gx-screen .rb-now{position:absolute;transform:translate(-50%,-50%)}.gx-screen .rb-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(241,237,243,.07) calc(1 * var(--u)),transparent calc(1 * var(--u)));background-size:100% 25%;pointer-events:none}.gx-screen .spark{display:flex;align-items:flex-end;gap:calc(3 * var(--u));margin-top:calc(8 * var(--u))}.gx-screen .spark>span{flex:1;background:var(--purple);border-radius:calc(2 * var(--u));opacity:.8;animation:ph-grow .55s var(--ease) backwards}.gx-screen .spark>span.on{background:var(--ember);opacity:1}
@keyframes ph-grow{from{height:calc(2 * var(--u))!important;opacity:0}}.gx-screen .heat{display:flex;flex-direction:column;gap:calc(5 * var(--u))}.gx-screen .heat-row{display:flex;gap:calc(5 * var(--u))}.gx-screen .heat-c{flex:1;aspect-ratio:1.5;border-radius:calc(6 * var(--u));position:relative;animation:ph-fade .6s var(--ease) backwards;display:grid;place-items:center}.gx-screen .heat-c b{font-family:var(--mono);font-size:calc(8.5 * var(--u));font-weight:600;color:#25130A;letter-spacing:.04em}.gx-screen .sp-row{display:flex;align-items:center;gap:calc(8 * var(--u))}.gx-screen .sp-k{font-size:calc(10 * var(--u));color:var(--muted);width:calc(20 * var(--u));flex:none}.gx-screen .sp-bar{flex:1;height:calc(7 * var(--u));border-radius:calc(99 * var(--u));background:var(--sunken);overflow:hidden}.gx-screen .sp-bar>i{display:block;height:100%;border-radius:calc(99 * var(--u));animation:ph-widen .7s var(--ease) backwards}
@keyframes ph-widen{from{width:0!important}}.gx-screen .sp-v{font-size:calc(10.5 * var(--u));color:var(--text2);width:calc(16 * var(--u));text-align:end;flex:none}.gx-screen .ring{position:relative;display:grid;place-items:center;flex:none}.gx-screen .ring svg{position:absolute;inset:0}.gx-screen .ring-arc{animation:ph-arc 1.2s var(--ease) backwards}
@keyframes ph-arc{from{stroke-dashoffset:400}}.gx-screen .ring-in{display:flex;flex-direction:column;align-items:center;gap:calc(2 * var(--u))}.gx-screen .ring-n{font-size:calc(22 * var(--u));font-weight:500;color:var(--ink)}.gx-screen .ring-n i{font-size:calc(11 * var(--u));font-style:normal;opacity:.6}.gx-screen .stars{display:inline-flex;gap:calc(3 * var(--u));align-items:center}.gx-screen .star{display:flex}.gx-screen .star:active{transform:scale(.88)}.gx-screen .queue-cta{display:flex;align-items:center;justify-content:space-between;gap:calc(12 * var(--u));padding:calc(16 * var(--u)) calc(18 * var(--u));width:100%}.gx-screen .qcta-r{display:flex;align-items:center;gap:calc(6 * var(--u));color:var(--muted)}.gx-screen .qdot{width:calc(26 * var(--u));height:calc(26 * var(--u));border-radius:calc(8 * var(--u));background:var(--sunken);display:grid;place-items:center;color:var(--text2)}.gx-screen .offline-note{display:flex;gap:calc(11 * var(--u));align-items:flex-start;padding:calc(14 * var(--u)) calc(16 * var(--u));border-radius:calc(16 * var(--u));background:var(--ember-soft);color:var(--ember-ink);margin-top:calc(12 * var(--u))}.gx-screen .offline-note .h3,.gx-screen .offline-note .meta{color:inherit;white-space:normal}.gx-screen .offline-note .meta{opacity:.8}.gx-screen .grid2{display:grid;grid-template-columns:1fr 1fr;gap:calc(10 * var(--u))}.gx-screen .stat{padding:calc(15 * var(--u)) calc(15 * var(--u)) calc(14 * var(--u));display:flex;flex-direction:column;gap:calc(7 * var(--u))}.gx-screen .stat-n{font-size:calc(26 * var(--u));font-weight:500;color:var(--ink);line-height:1;white-space:nowrap}.gx-screen .sess{display:flex;align-items:center;gap:calc(12 * var(--u));padding:var(--rowpad) calc(14 * var(--u));width:100%;color:var(--muted);margin-bottom:var(--cardgap)}.gx-screen .sess-t{font-size:calc(12.5 * var(--u));font-weight:600;color:var(--ember);flex:none}.gx-screen .qcard{padding:calc(14 * var(--u)) calc(16 * var(--u)) calc(16 * var(--u));margin-bottom:calc(11 * var(--u))}.gx-screen .qcard-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:calc(12 * var(--u))}.gx-screen .qkind{display:inline-flex;align-items:center;gap:calc(6 * var(--u));font-family:var(--mono);font-size:calc(9.5 * var(--u));font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--purple-lift)}.gx-screen .age{font-size:calc(10.5 * var(--u));color:var(--muted)}.gx-screen .qcard-b{display:flex;align-items:center;gap:calc(12 * var(--u));width:100%;color:var(--muted)}.gx-screen .matchbar{display:flex;align-items:center;gap:calc(10 * var(--u));margin-top:calc(13 * var(--u))}.gx-screen .mb-track{flex:1;height:calc(6 * var(--u));border-radius:calc(99 * var(--u));background:var(--sunken);overflow:hidden}.gx-screen .mb-track>i{display:block;height:100%;border-radius:calc(99 * var(--u));animation:ph-widen .8s var(--ease) backwards}.gx-screen .qmeta{margin-top:calc(11 * var(--u));white-space:normal;line-height:1.5}.gx-screen .qacts{display:flex;gap:calc(9 * var(--u));margin-top:calc(14 * var(--u))}.gx-screen .qact{flex:1;height:calc(48 * var(--u));font-size:calc(14 * var(--u))}.gx-screen .mrow{padding:calc(14 * var(--u)) calc(16 * var(--u)) calc(16 * var(--u));margin-bottom:calc(11 * var(--u))}.gx-screen .mrow-t{display:flex;align-items:center;gap:calc(12 * var(--u))}.gx-screen .mrow-time{font-size:calc(13 * var(--u));font-weight:600;color:var(--ember);flex:none}.gx-screen .qa{padding:calc(14 * var(--u)) calc(16 * var(--u)) calc(16 * var(--u));margin-bottom:calc(11 * var(--u))}.gx-screen .qa-t{font-size:calc(15 * var(--u));font-weight:400;line-height:1.45;margin:calc(11 * var(--u)) 0 calc(7 * var(--u));color:var(--ink);text-wrap:pretty}.gx-screen .votes{display:inline-flex;align-items:center;gap:calc(4 * var(--u));font-size:calc(12 * var(--u));font-weight:600;color:var(--purple-lift)}.gx-screen .drill{display:flex;align-items:center;justify-content:space-between;gap:calc(12 * var(--u));padding:calc(17 * var(--u));width:100%;margin-bottom:calc(10 * var(--u))}.gx-screen .drill-n{font-size:calc(28 * var(--u));font-weight:500;color:var(--ink);line-height:1}.gx-screen .snap .mono{font-size:calc(12.5 * var(--u));line-height:1.7;white-space:pre-wrap;color:var(--text2)}.gx-screen .vf{position:relative;flex:1;min-height:0;overflow:hidden;background:radial-gradient(90% 70% at 50% 36%,#241a33,#08060F)}.gx-screen .vf-grid{position:absolute;inset:0;opacity:.45;background-image:linear-gradient(rgba(154,107,208,.1) calc(1 * var(--u)),transparent calc(1 * var(--u))),linear-gradient(90deg,rgba(154,107,208,.1) calc(1 * var(--u)),transparent calc(1 * var(--u)));background-size:calc(34 * var(--u)) calc(34 * var(--u))}.gx-screen .vf-top{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:calc(10 * var(--u));padding:calc(8 * var(--u)) calc(18 * var(--u))}.gx-screen .vf-x{width:calc(40 * var(--u));height:calc(40 * var(--u));border-radius:calc(13 * var(--u));background:rgba(241,237,243,.08);border:calc(1 * var(--u)) solid rgba(241,237,243,.14);display:grid;place-items:center;color:#F1EDF3;flex:none}.gx-screen .vf-count{width:calc(40 * var(--u));text-align:center;font-size:calc(15 * var(--u));font-weight:600;color:var(--ember)}.gx-screen .reticle{position:absolute;top:40%;left:50%;transform:translate(-50%,-50%);width:calc(216 * var(--u));height:calc(216 * var(--u));z-index:2}.gx-screen .reticle .c,.gx-screen .kiosk-box .c{position:absolute;width:calc(36 * var(--u));height:calc(36 * var(--u));border:calc(3 * var(--u)) solid var(--ember);border-radius:calc(6 * var(--u))}.gx-screen .c.tl{top:0;left:0;border-right:none;border-bottom:none}.gx-screen .c.tr{top:0;right:0;border-left:none;border-bottom:none}.gx-screen .c.bl{bottom:0;left:0;border-right:none;border-top:none}.gx-screen .c.br{bottom:0;right:0;border-left:none;border-top:none}.gx-screen .laser{position:absolute;left:calc(6 * var(--u));right:calc(6 * var(--u));height:calc(2 * var(--u));border-radius:calc(2 * var(--u));background:linear-gradient(90deg,transparent,var(--ember),transparent);box-shadow:0 0 calc(14 * var(--u)) calc(2 * var(--u)) rgba(247,145,84,.7);animation:ph-scanline 2.6s var(--ease) infinite}
@keyframes ph-scanline{0%{top:8%}50%{top:92%}100%{top:8%}}.gx-screen .vf-sim{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(118 * var(--u));z-index:3;font-family:var(--mono);font-size:calc(10.5 * var(--u));letter-spacing:.1em;text-transform:uppercase;color:rgba(241,237,243,.6);padding:calc(11 * var(--u)) calc(18 * var(--u));border-radius:calc(99 * var(--u));border:calc(1 * var(--u)) dashed rgba(241,237,243,.24)}.gx-screen .vf-sim:hover{color:#F1EDF3;border-color:rgba(241,237,243,.45)}.gx-screen .tape{position:absolute;left:calc(18 * var(--u));right:calc(18 * var(--u));bottom:calc(22 * var(--u));z-index:3;display:flex;flex-direction:column;gap:calc(7 * var(--u))}.gx-screen .tape-i{display:flex;align-items:center;gap:calc(8 * var(--u));font-size:calc(12.5 * var(--u));color:rgba(241,237,243,.85);background:rgba(11,8,18,.5);backdrop-filter:blur(calc(8 * var(--u)));border:calc(1 * var(--u)) solid rgba(241,237,243,.1);border-radius:calc(11 * var(--u));padding:calc(9 * var(--u)) calc(12 * var(--u));animation:ph-rise .35s var(--ease)}.gx-screen .tape-i span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gx-screen .tape-i i{font-family:var(--mono);font-size:calc(11 * var(--u));opacity:.6;font-style:normal}.gx-screen .vf-flash{position:absolute;inset:0;z-index:4;background:radial-gradient(60% 50% at 50% 40%,rgba(67,214,155,.5),transparent 70%);animation:ph-flash .6s var(--ease) forwards;pointer-events:none}
@keyframes ph-flash{to{opacity:0}}.gx-screen .scan-sheet{position:relative;z-index:5;flex:none;background:var(--surface);color:var(--ink);border-radius:calc(26 * var(--u)) calc(26 * var(--u)) 0 0;padding:calc(14 * var(--u)) calc(20 * var(--u)) calc(26 * var(--u));box-shadow:0 calc(-14 * var(--u)) calc(40 * var(--u)) rgba(8,6,15,.55);animation:ph-sheet-up .34s var(--ease)}.gx-screen .admit{width:100%;height:calc(64 * var(--u));font-size:calc(18 * var(--u));margin-top:calc(16 * var(--u));letter-spacing:-.01em}.gx-screen .rate{display:flex;align-items:center;justify-content:space-between;gap:calc(12 * var(--u));margin:calc(18 * var(--u)) 0 calc(4 * var(--u))}.gx-screen .kiosk-in{position:relative;z-index:2;flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;padding:calc(24 * var(--u)) calc(24 * var(--u)) calc(34 * var(--u))}.gx-screen .kiosk-mid{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(14 * var(--u))}.gx-screen .kiosk-ar{font-family:var(--sans);font-weight:200;font-size:calc(22 * var(--u));color:rgba(241,237,243,.5);margin:0;direction:rtl}.gx-screen .kiosk-box{position:relative;width:calc(186 * var(--u));height:calc(186 * var(--u));display:grid;place-items:center;margin:calc(8 * var(--u)) 0}.gx-screen .kiosk-exit{display:inline-flex;align-items:center;gap:calc(7 * var(--u));font-family:var(--mono);font-size:calc(10 * var(--u));letter-spacing:.12em;text-transform:uppercase;color:rgba(241,237,243,.45);padding:calc(12 * var(--u)) calc(18 * var(--u));border-radius:calc(99 * var(--u));border:calc(1 * var(--u)) solid rgba(241,237,243,.14)}.gx-screen .kiosk-pin{width:100%;display:flex;flex-direction:column;align-items:center;gap:calc(14 * var(--u))}.gx-screen .pin-dots{display:flex;gap:calc(12 * var(--u))}.gx-screen .pin-dots>span{width:calc(11 * var(--u));height:calc(11 * var(--u));border-radius:50%;border:calc(1.5 * var(--u)) solid rgba(241,237,243,.3)}.gx-screen .pin-dots>span.on{background:var(--ember);border-color:var(--ember)}.gx-screen .keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(9 * var(--u));width:100%;max-width:calc(250 * var(--u))}.gx-screen .key{height:calc(52 * var(--u));border-radius:calc(14 * var(--u));background:rgba(241,237,243,.07);border:calc(1 * var(--u)) solid rgba(241,237,243,.12);color:#F1EDF3;font-family:var(--mono);font-size:calc(19 * var(--u));display:grid;place-items:center}.gx-screen .key.ghost{background:none;border:none;pointer-events:none}.gx-screen .ent{display:flex;flex-wrap:wrap;gap:calc(7 * var(--u));margin-top:calc(14 * var(--u))}.gx-screen .ent-i{display:inline-flex;align-items:center;gap:calc(6 * var(--u));padding:calc(7 * var(--u)) calc(11 * var(--u));border-radius:calc(99 * var(--u));background:rgba(241,237,243,.08);border:calc(1 * var(--u)) solid rgba(241,237,243,.12);font-size:calc(11.5 * var(--u));color:rgba(241,237,243,.85)}.gx-screen .pay{padding:var(--pad);margin-bottom:calc(12 * var(--u))}.gx-screen .sync-strip{display:flex;align-items:center;gap:calc(9 * var(--u));padding:calc(11 * var(--u)) calc(13 * var(--u));border-radius:calc(12 * var(--u));background:var(--ember-soft);color:var(--ember-ink);font-size:calc(11 * var(--u));letter-spacing:.04em;text-transform:uppercase}.gx-screen .sync-strip.up{background:var(--ok-soft);color:var(--ok)}.gx-screen .shot{width:100%;height:calc(150 * var(--u));border-radius:calc(18 * var(--u));border:calc(1 * var(--u)) dashed var(--border);background:var(--sunken);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(10 * var(--u));color:var(--muted);font-size:calc(11 * var(--u));letter-spacing:.1em;text-transform:uppercase;margin-bottom:calc(6 * var(--u))}.gx-screen .shot.on{border-style:solid;border-color:var(--ok);color:var(--ok);background:var(--ok-soft)}.gx-screen .handoff{padding:var(--pad);border-radius:calc(18 * var(--u));background:var(--sunken);border:calc(1 * var(--u)) solid var(--hair);display:flex;flex-direction:column;gap:calc(9 * var(--u));color:var(--text2)}.gx-screen .handoff .h3{white-space:normal}.gx-screen .splash{align-items:center;justify-content:center;overflow:hidden;cursor:pointer;position:absolute;inset:0;display:flex;flex-direction:column}.gx-screen .splash-bloom{position:absolute;left:50%;top:44%;width:calc(320 * var(--u));height:calc(320 * var(--u));transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(247,145,84,.36) 0%,rgba(247,145,84,.1) 34%,transparent 68%);animation:ph-bloom 2.6s var(--ease) infinite alternate;pointer-events:none}
@keyframes ph-bloom{from{opacity:.4;transform:translate(-50%,-50%) scale(.85)}.gx-screen to{opacity:.9;transform:translate(-50%,-50%) scale(1.1)}}.gx-screen .splash-mid{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(14 * var(--u));animation:ph-rise .9s var(--ease)}.gx-screen .splash-tag{color:rgba(241,237,243,.7);font-weight:200;font-size:calc(15 * var(--u));margin:0}.gx-screen .splash-foot{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:calc(8 * var(--u));padding-bottom:calc(44 * var(--u))}.gx-screen .splash-foot .ar{font-size:calc(20 * var(--u));color:rgba(241,237,243,.42)}.gx-screen .splash-foot .lab{color:rgba(241,237,243,.32)}.gx-screen .signin-in{position:relative;z-index:2;flex:1;min-height:0;overflow-y:auto;padding:calc(34 * var(--u)) calc(28 * var(--u)) calc(30 * var(--u));scrollbar-width:none;color:#F1EDF3}.gx-screen .signin-in::-webkit-scrollbar{width:0}.gx-screen .signin-in .lab{color:rgba(241,237,243,.45)}.gx-screen .signin-in .seg{background:rgba(241,237,243,.07)}.gx-screen .signin-sub{color:rgba(241,237,243,.6);font-weight:200;font-size:calc(15 * var(--u));margin:calc(12 * var(--u)) 0 0}.gx-screen .mono-note{font-family:var(--mono);font-size:calc(10.5 * var(--u));line-height:1.7;color:rgba(241,237,243,.45);margin:calc(16 * var(--u)) 0 0}.gx-screen .signin-foot{margin-top:calc(34 * var(--u));text-align:center}.gx-screen .signin-foot .ar{font-size:calc(20 * var(--u));color:rgba(241,237,243,.28)}.gx-screen .evcard{display:flex;align-items:center;gap:calc(13 * var(--u));width:100%;padding:calc(16 * var(--u));border-radius:calc(18 * var(--u));background:rgba(241,237,243,.055);border:calc(1 * var(--u)) solid rgba(241,237,243,.12);margin-bottom:calc(10 * var(--u));animation:ph-rise .5s var(--ease) backwards;transition:.15s}.gx-screen .evcard:hover{background:rgba(241,237,243,.1)}.gx-screen .evcard.on{border-color:var(--ember)}.gx-screen #__claude_design_branding{position:fixed;right:calc(16 * var(--u));bottom:calc(16 * var(--u));z-index:2147483646;display:flex;align-items:center;gap:calc(7 * var(--u));height:calc(30 * var(--u));padding:0 calc(5 * var(--u)) 0 calc(10 * var(--u));border-radius:calc(999 * var(--u));font-family:"Anthropic Sans",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;font-size:calc(12.5 * var(--u));font-weight:400;line-height:1;letter-spacing:normal;text-transform:none;color:#141413;background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(calc(24 * var(--u)));backdrop-filter:blur(calc(24 * var(--u)));box-shadow:0 0 0 calc(.5 * var(--u)) rgba(31,30,29,.14),0 calc(2 * var(--u)) calc(10 * var(--u)) rgba(0,0,0,.09)}.gx-screen #__claude_design_branding *{box-sizing:border-box;margin:0}.gx-screen #__claude_design_branding a{color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:calc(7 * var(--u));white-space:nowrap}.gx-screen #__claude_design_branding a:hover span{text-decoration:underline}.gx-screen #__claude_design_branding svg{flex:none}.gx-screen #__claude_design_branding a svg{color:#D97757}.gx-screen #__claude_design_branding button{width:calc(20 * var(--u));height:calc(20 * var(--u));padding:0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:currentColor;opacity:.55;border:0;background:none;cursor:pointer;flex:none;font:inherit;transition:opacity .14s}.gx-screen #__claude_design_branding button:hover{opacity:1;background:rgba(127,127,127,.22)}
/* ── 2 · reach: the composer becomes the message ──
   Two objects, one sentence. The composer is evenclo's; the thread is the app
   the recipient actually reads, drawn in its own idiom rather than ours because
   pretending a WhatsApp message looks like our UI would be the lie the card is
   arguing against. Sizes inside the handset are design pixels of a 390px phone
   (--u), the same unit the operations card uses, so the two handsets on this
   page are the same object at different sizes.

   Everything moves on transform and opacity. --reach-sent is set by
   landing/reach.js and is the only input: 0 while writing, 1 once sent. */
/* flex-direction is explicit: .gx is a column flex, so inheriting it stacked
   the composer above a phone of zero width. Padding clears a two-line title. */
/* The card is portrait, so the two halves stack: written at the top, arrived
   below. Side by side gave the composer ~110px and it wrapped one word per
   line. flex-direction is explicit because .gx is itself a column flex. */
.gx-reach{position:relative;padding:92px 16px 16px;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-start;gap:12px;--reach-sent:0}
.gx-reach::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 50% at 22% 18%,rgba(37,211,102,.14),transparent 62%),
             radial-gradient(60% 60% at 88% 84%,rgba(107,63,160,.16),transparent 60%)}

/* ── the composer ── */
.gx-compose{position:relative;z-index:2;flex:none;width:100%;min-width:0;
  display:flex;flex-direction:column;gap:8px;
  transition:transform .55s var(--ease),opacity .45s var(--ease)}
.gx-compose-lab{font-size:.56rem;letter-spacing:.1em;color:var(--ink-3);text-transform:lowercase}
.gx-compose-box{position:relative;min-height:58px;padding:10px 12px;border-radius:12px;
  background:var(--paper);border:1px solid var(--line);box-shadow:var(--sh-1);
  font-size:.72rem;line-height:1.5;color:var(--ink);text-align:start;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.is-typing .gx-compose-box{border-color:var(--violet-lift);box-shadow:0 0 0 3px var(--violet-pale)}
.gx-caret{display:inline-block;width:1.5px;height:.9em;vertical-align:-.12em;
  margin-inline-start:1px;background:var(--violet);
  animation:reachCaret 1s steps(1) infinite}
@keyframes reachCaret{0%,50%{opacity:1}51%,100%{opacity:0}}
.is-sent .gx-caret,.is-ticked .gx-caret,.is-replied .gx-caret{opacity:0;animation:none}
.gx-compose-send{align-self:flex-start;font-size:.6rem;font-weight:700;color:#fff;
  background:var(--violet);border-radius:999px;padding:6px 14px;
  transition:transform .3s var(--ease),background .3s var(--ease)}
.is-sent .gx-compose-send{transform:scale(.94);background:var(--green)}
/* Sent: the composer travels toward the thread and hands over to the bubble
   waiting there. It cannot cross into the device frame, so the handover is the
   move — same words, same instant. */
.gx-reach .gx-compose{transform:translate3d(calc(var(--reach-sent) * 26px),
  calc(var(--reach-sent) * -8px),0) scale(calc(1 - var(--reach-sent) * .06));
  opacity:calc(1 - var(--reach-sent) * .55)}

/* ── the handset ── */
/* .gx-dev carries container-type:size, so size containment stops its contents
   from giving it a width — as a flex item with no width of its own it
   collapsed to nothing. The ratio derives the width from the height. */
/* flex sizes the height (column main axis), the ratio derives the width from
   it. .gx-dev carries container-type:size, so its contents cannot give it a
   width — without a ratio here it collapsed to nothing. */
.gx-dev-wa{flex:1 1 0;min-height:0;aspect-ratio:9/19.5;z-index:2}
/* The device has to clip and round its own screen: card 1 does that on
   .gx-screen, which this card does not use. */
.gx-dev-wa .gx-dev-body{overflow:hidden;border-radius:calc(100cqw * .112);
  box-shadow:0 14px 30px rgba(20,16,27,.28)}
.gx-wa-screen{--u:calc(100cqw / 390);position:absolute;inset:0;overflow:hidden;
  display:flex;flex-direction:column;background:#ECE5DD;
  font-size:calc(15 * var(--u));color:#111B21;
  transform:translate3d(0,calc((1 - var(--reach-sent)) * 14px),0);
  transition:transform .6s var(--ease)}
.wa-top{flex:none;display:flex;align-items:center;gap:calc(9 * var(--u));
  padding:calc(13 * var(--u)) calc(12 * var(--u)) calc(10 * var(--u));background:#075E54;color:#fff}
.wa-back{font-size:calc(20 * var(--u));line-height:1;opacity:.9;flex:none}
.wa-ava{width:calc(30 * var(--u));height:calc(30 * var(--u));border-radius:50%;flex:none;
  display:grid;place-items:center;background:#128C7E;
  font-size:calc(11 * var(--u));font-weight:700;letter-spacing:.02em}
.wa-who{min-width:0;display:flex;flex-direction:column}
.wa-who b{font-size:calc(13 * var(--u));font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-who em{font-style:normal;font-size:calc(9.5 * var(--u));opacity:.75}

.wa-thread{flex:1;min-height:0;display:flex;flex-direction:column;gap:calc(7 * var(--u));
  padding:calc(10 * var(--u)) calc(9 * var(--u));overflow:hidden;
  /* The doodle field, drawn rather than fetched: a repeating wash is enough to
     read as the app's paper at this size, and it costs no request. */
  background-image:radial-gradient(circle at 20% 30%,rgba(17,27,33,.045) 1.5px,transparent 2px),
                   radial-gradient(circle at 70% 70%,rgba(17,27,33,.04) 1.5px,transparent 2px);
  background-size:calc(34 * var(--u)) calc(34 * var(--u))}
.wa-day{align-self:center;font-size:calc(9 * var(--u));letter-spacing:.08em;
  background:#FFFFFFB8;color:#54656F;border-radius:calc(7 * var(--u));
  padding:calc(3 * var(--u)) calc(9 * var(--u))}
.wa-bub{position:relative;max-width:86%;border-radius:calc(9 * var(--u));
  padding:calc(6 * var(--u)) calc(9 * var(--u)) calc(5 * var(--u));
  font-size:calc(12.5 * var(--u));line-height:1.4;
  box-shadow:0 calc(1 * var(--u)) calc(1 * var(--u)) rgba(11,20,26,.13);
  display:flex;flex-direction:column;gap:calc(1 * var(--u))}
.wa-out{align-self:flex-end;background:#D9FDD3;border-start-end-radius:calc(2 * var(--u));
  transform:scale(.9);opacity:0;transform-origin:100% 100%;
  transition:transform .42s var(--ease),opacity .3s var(--ease)}
.is-sent .wa-out,.is-ticked .wa-out,.is-replied .wa-out{transform:scale(1);opacity:1}
.wa-in{align-self:flex-start;background:#fff;border-start-start-radius:calc(2 * var(--u));
  transform:translate3d(0,calc(6 * var(--u)),0);opacity:0;
  transition:transform .4s var(--ease),opacity .3s var(--ease)}
.is-replied .wa-in{transform:none;opacity:1}
.wa-text{display:block}
.wa-meta{align-self:flex-end;display:flex;align-items:center;gap:calc(3 * var(--u));
  font-size:calc(9 * var(--u));color:#667781}
.wa-ticks{text-decoration:none;letter-spacing:calc(-3 * var(--u));color:#667781;
  transition:color .35s var(--ease)}
.is-replied .wa-ticks,.is-ticked .wa-ticks{color:#53BDEB}   /* read, the whole point */
.wa-input{flex:none;margin:calc(6 * var(--u)) calc(9 * var(--u)) calc(10 * var(--u));
  background:#fff;border-radius:calc(20 * var(--u));
  padding:calc(8 * var(--u)) calc(12 * var(--u));
  font-size:calc(11.5 * var(--u));color:#8696A0}

@media (prefers-reduced-motion:reduce){
  .gx-caret{animation:none;opacity:1}
  .gx-compose,.gx-wa-screen,.wa-out,.wa-in{transition:none}
}
@media (max-width:640px){
  /* Two scenes instead of two columns. There is no room to stand the composer
     beside the handset at this width, and dropping it lost the half that says
     the message was written here — so they share one cell and take turns, on
     the same --reach-sent the desktop layout already runs on. */
  /* three lines of title at this width, so the scenes start lower. */
  /* minmax(0,1fr): an auto column sizes to the composer's intrinsic width,
     which is one long line, and the box ran off the side of the card. */
  .gx-reach{padding:106px 14px 14px;display:grid;grid-template-columns:minmax(0,1fr);
    gap:0;align-items:center;justify-items:center}
  .gx-reach>.gx-compose,.gx-reach>.gx-dev-wa{grid-area:1/1}
  .gx-reach .gx-compose{display:flex;width:100%;align-self:center;
    transform:translate3d(0,calc(var(--reach-sent) * -10px),0);
    opacity:calc(1 - var(--reach-sent))}
  .gx-reach .gx-dev-wa{height:100%;aspect-ratio:9/19.5;flex:none;justify-self:center;
    transform:translate3d(0,calc((1 - var(--reach-sent)) * 12px),0);
    opacity:var(--reach-sent);
    transition:opacity .5s var(--ease),transform .5s var(--ease)}
  .gx-compose-box{min-height:96px;font-size:.82rem}
}

/* ── the day: three panels instead of a walkthrough ──
   The step-through it replaced asked the visitor to operate a demo before the
   page had earned it. These say the same thing and read at a glance. */
/* The day section is Ink; --ink-2 here was dark text on a dark ground. */
.day-lead{max-width:62ch;margin:14px 0 0;color:rgba(241,237,243,.72);font-size:1.02rem}
.day-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px}
.day-card{display:flex;flex-direction:column;gap:10px;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r);padding:18px;box-shadow:var(--sh-1)}
.day-card b{font-size:1.02rem;font-weight:700;letter-spacing:-.02em}
.day-card>span{font-size:.92rem;color:var(--ink-2);line-height:1.55}
.dv{height:132px;border-radius:11px;padding:12px;overflow:hidden;position:relative}

/* the badge */
.dv-badge{background:linear-gradient(150deg,var(--aubergine),var(--ink-900));
  display:flex;flex-direction:column;gap:7px}
.dvb-top{display:flex;align-items:center;justify-content:space-between}
.dvb-top i{width:34px;height:5px;border-radius:3px;background:rgba(241,237,243,.5)}
.dvb-top u{width:44px;height:14px;border-radius:4px;background:var(--amber)}
.dvb-name{width:66%;height:11px;border-radius:3px;background:rgba(241,237,243,.85)}
.dvb-sub{width:44%;height:7px;border-radius:3px;background:rgba(241,237,243,.4)}
.dvb-qr{margin-top:auto;width:38px;height:38px;border-radius:5px;
  background:repeating-conic-gradient(#F1EDF3 0 25%,transparent 0 50%) 0 0/8px 8px}

/* the door */
.dv-door{background:var(--tint-cream);border:1px solid var(--line);
  display:flex;flex-direction:column;gap:9px}
.dvd-n{display:flex;align-items:baseline;gap:7px}
.dvd-n b{font-size:1.5rem;font-weight:700;letter-spacing:-.04em;color:var(--amber-deep);
  font-variant-numeric:tabular-nums}
.dvd-n em{font-style:normal;font-size:.66rem;color:var(--ink-3)}
.dvd-bar{display:block;height:6px;border-radius:3px;background:var(--paper-3);overflow:hidden}
.dvd-bar i{display:block;height:100%;width:69%;border-radius:3px;background:var(--amber);
  transform-origin:left;animation:dvFill 5s var(--ease) infinite}
@keyframes dvFill{0%,8%{transform:scaleX(.2)}30%,80%{transform:scaleX(1)}94%,100%{transform:scaleX(.2)}}
.dvd-row{display:flex;gap:5px;margin-top:auto}
.dvd-row u{flex:1;height:22px;border-radius:5px;background:var(--paper);
  border:1px solid var(--line);text-decoration:none}

/* the floor */
.dv-floor{background:var(--tint-lilac);border:1px solid var(--line);
  display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.dvf-cell{border-radius:6px;background:var(--paper);border:1px solid var(--line)}
.dvf-cell.warm{background:var(--violet-pale);border-color:var(--violet-lift)}
.dvf-cell.hot{background:var(--violet);border-color:var(--violet-deep);
  animation:dvPulse 3.2s ease-in-out infinite}
@keyframes dvPulse{0%,100%{opacity:.75}50%{opacity:1}}

@media (prefers-reduced-motion:reduce){
  .dvd-bar i,.dvf-cell.hot{animation:none;transform:none}
}
@media (max-width:900px){ .day-grid{grid-template-columns:1fr} }


/* ── the apps section: two real screens ──
   Both phones are the same 9:19.5 shell the bento cards use, and each screen is
   its artifact's own markup under its artifact's own stylesheet — .gx-att for
   the attendee app, .gx-screen for the exhibitor and admin one. Nothing here
   restates a size from either. */
.app-dev{position:relative;width:100%;max-width:280px;margin-inline:auto;
  aspect-ratio:9/19.5;container-type:size}
.app-dev .gx-dev-body{position:absolute;inset:0;overflow:hidden;
  border-radius:calc(100cqw * .112);box-shadow:0 18px 40px rgba(20,16,27,.3)}
/* The artifact's own .badge-screen / .sc-screen rules are DESCENDANT selectors
   (`.gx-att .badge-screen`), so the screen is nested one level inside the scope
   rather than sharing its element — otherwise the scope's own `background:
   var(--paper)` paints over the screen's dark ground and nothing else applies.
   BadgeScreen brings its own box; ScanScreen got its from the artifact's phone
   frame, which is not part of the stylesheet — so that one box is restated. */
.gx-screen>.sc-screen{position:absolute;inset:0;display:flex;flex-direction:column}
.bs-mid{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:calc(24 * var(--u))}
.bs-type{font-size:calc(9.5 * var(--u));letter-spacing:.16em;text-transform:uppercase;opacity:.85}
.bs-name{color:#17121F;font-weight:200;font-size:calc(21 * var(--u))}
.bs-role{color:#6B6280;margin-top:calc(4 * var(--u))}
.bs-qr{display:block;width:100%;height:100%;
  background:repeating-conic-gradient(#17121F 0 25%,#fff 0 50%) 0 0/calc(9 * var(--u)) calc(9 * var(--u))}
.bs-facts{display:flex;justify-content:center;gap:calc(18 * var(--u));margin-top:calc(12 * var(--u))}
.bs-facts .mono{font-size:calc(11 * var(--u));color:#6B6280}
.bs-state{margin-top:calc(20 * var(--u));display:flex;align-items:center;gap:calc(8 * var(--u))}
.bs-state .dot{width:calc(7 * var(--u));height:calc(7 * var(--u));background:var(--ember)}
.bs-state .mono{font-size:calc(10.5 * var(--u));letter-spacing:.14em;text-transform:uppercase;
  color:rgba(241,237,243,.72)}
.bs-hint{color:rgba(241,237,243,.5);margin-top:calc(8 * var(--u));font-size:calc(13 * var(--u))}
.sc-mid{align-items:center;gap:calc(3 * var(--u))}
.sc-where{color:#F1EDF3;font-size:calc(14 * var(--u));font-weight:400}
.sc-id{align-items:flex-start;gap:calc(12 * var(--u));padding:0}
.sc-mark{width:calc(46 * var(--u));height:calc(46 * var(--u));border-radius:calc(13 * var(--u));
  font-size:calc(15 * var(--u));background:linear-gradient(150deg,#B994E8,#6B3FA0)}
.sc-txt{gap:calc(3 * var(--u));min-width:0}
.sc-name{font-size:calc(20 * var(--u))}

/* ── 2b · pay: form → ticket → payment → confirmed ──
   A wide short strip because the thing being shown is a sequence, and a
   sequence wants a line, not a column. The line travels once through the four
   stops and each lights as it arrives; --i is the stop's place in the run and
   drives both the line and the stop it feeds. */
.gx-pay{gap:0;justify-content:center}
.pay-flow{display:flex;align-items:center;gap:10px}
.pay-step{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px;
  opacity:.35;transform:translate3d(0,6px,0);
  animation:payArrive 10s var(--ease) infinite;
  animation-delay:calc(var(--i) * 1.1s)}
@keyframes payArrive{0%,2%{opacity:.35;transform:translate3d(0,6px,0)}
  10%,80%{opacity:1;transform:none}92%,100%{opacity:.35;transform:translate3d(0,6px,0)}}
.pay-lab{font-size:.6rem;letter-spacing:.11em;text-transform:lowercase;color:var(--ink-3)}
.pay-box{background:var(--paper);border:1px solid var(--line);border-radius:11px;
  padding:11px 13px;box-shadow:var(--sh-1);min-height:74px;
  display:flex;flex-direction:column;justify-content:center;gap:7px}
/* The line between two stops: it fills toward the next one. */
.pay-line{flex:none;width:34px;height:2px;border-radius:2px;background:var(--line-2);
  position:relative;overflow:hidden}
.pay-line::after{content:"";position:absolute;inset:0;background:var(--violet);
  transform:scaleX(0);transform-origin:left;
  animation:payRun 10s var(--ease) infinite;
  animation-delay:calc(.55s + var(--i) * 1.1s)}
[dir="rtl"] .pay-line::after{transform-origin:right}
@keyframes payRun{0%,3%{transform:scaleX(0)}9%,80%{transform:scaleX(1)}92%,100%{transform:scaleX(0)}}

.pay-form i{display:block;height:8px;border-radius:3px;background:var(--paper-3)}
.pay-form .w80{width:80%}.pay-form .w55{width:55%}.pay-form .w70{width:70%}
.pay-tix{gap:5px}
.pay-tix b{display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-size:.66rem;font-weight:600;padding:6px 9px;border-radius:8px;
  border:1px solid var(--line);background:var(--paper-2);color:var(--ink-2)}
.pay-tix b.on{border-color:var(--violet);background:var(--violet-pale);color:var(--violet-deep)}
.pay-tix u{text-decoration:none;font-variant-numeric:tabular-nums;font-size:.62rem}
.pay-card{flex-direction:row;align-items:center;gap:9px}
.pay-chip{width:26px;height:19px;border-radius:4px;flex:none;
  background:linear-gradient(140deg,var(--amber-lift),var(--amber-deep))}
.pay-card em{font-style:normal;font-size:.68rem;letter-spacing:.06em;color:var(--ink-2)}
.pay-ok{margin-inline-start:auto;font-size:.58rem;font-weight:700;color:var(--green);
  background:#EAF7F1;border-radius:999px;padding:4px 9px;white-space:nowrap}
.pay-done{flex-direction:row;align-items:center;gap:9px}
.pay-tick{width:24px;height:24px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--violet);color:#fff;font-size:.72rem;font-weight:700}
.pay-done em{font-style:normal;font-size:.66rem;color:var(--ink-2)}

@media (prefers-reduced-motion:reduce){
  .pay-step{animation:none;opacity:1;transform:none}
  .pay-line::after{animation:none;transform:none}
}
@media (max-width:860px){
  /* A sequence that no longer fits on one line is a list. */
  .pay-flow{flex-direction:column;align-items:stretch;gap:8px}
  .pay-line{width:2px;height:16px;align-self:center}
  .pay-line::after{transform-origin:top}
  @keyframes payRun{0%,3%{transform:scaleY(0)}9%,80%{transform:scaleY(1)}92%,100%{transform:scaleY(0)}}
  .pay-box{min-height:0}
}

/* ── 3 · door: the credential, rendered on a canvas ──
   The reference issuing card is a canvas its JS draws, so this is too — the CSS only
   has to give it a box. Everything visible comes from landing/credential.js. */
.gx-door{align-items:center;justify-content:center;padding-top:88px}
.gx-cred{flex:1;width:100%;min-height:0;display:block;touch-action:pan-y}
.gx-ok{margin-top:8px;font-size:.68rem;font-weight:700;color:var(--green);
  background:#EAF7F1;border-radius:999px;padding:6px 14px;opacity:0;transform:translateY(6px);
  transition:.4s var(--ease)}
.sol-card:hover .gx-ok{opacity:1;transform:none;transition-delay:1.5s}
@media (prefers-reduced-motion:reduce){.gx-ok{opacity:1;transform:none}}

/* ── 4 · exhibitors: the floor plan stands up into the hall ──
   Drawn by landing/hall.js on a canvas from booth-3d.js's real geometry. The
   CSS grid this replaced could only ever be a grid; the plan is now the same
   scene at pitch 90°, so plan and hall are one render, not two pictures. */
.gx-hall{gap:10px}
.gx-hall-c{flex:1;min-height:0;width:100%;display:block}
.gx-legend{display:flex;align-items:center;gap:6px;font-size:.68rem;color:var(--ink-3)}
.gx-legend span{width:9px;height:9px;border-radius:2px}
.gx-legend span.k-p{background:var(--violet)}
.gx-legend span.k-g{background:var(--amber-deep)}
.gx-legend span.k-s{background:#8FA0B8}
.gx-legend em{font-style:normal;margin-inline-start:auto;font-variant-numeric:tabular-nums}

/* ── 5 · leads: the stack deals out, the queue drains ──
   These were absolutely positioned and fanned by a fixed 52px step, which only
   works while every card is the same height. The first card carries the
   qualifier chips and is 104px tall, so it sat squarely on top of the second
   one and the deck read as a single card. Normal flow cannot overlap, so the
   deal is now opacity and translate per card, staggered by --i. */
.gx-leads{gap:10px;justify-content:center}
.gx-stack{display:flex;flex-direction:column;gap:9px}
.gx-lc{position:relative;background:var(--paper);border:1px solid var(--line);
  border-radius:10px;padding:10px 12px;box-shadow:var(--sh-1);
  opacity:0;transform:translate3d(0,12px,0) scale(.97);
  animation:dealIn 9s var(--ease) infinite;
  animation-delay:calc(var(--i) * .45s)}
@keyframes dealIn{
  0%,4%    {opacity:0;transform:translate3d(0,12px,0) scale(.97)}
  14%,76%  {opacity:1;transform:none}
  90%,100% {opacity:0;transform:translate3d(0,12px,0) scale(.97)}}
/* Name and delay in the same rule as the shorthand: split them and the
   shorthand resets the name to none and nothing runs. */
.sol-card:hover .gx-lc{animation:none;opacity:1;transform:none}
.gx-lc b{display:block;font-size:.85rem}
.gx-lc span{font-size:.68rem;color:var(--ink-3)}
.gx-q{display:flex;gap:5px;margin-top:7px}
.gx-q u{text-decoration:none;font-size:.64rem;font-weight:600;padding:4px 9px;border-radius:999px;
  border:1px solid var(--line-2);color:var(--ink-3)}
.gx-q u.on{background:var(--violet-pale);border-color:var(--violet);color:var(--violet)}
.gx-sync{display:flex;align-items:center;gap:7px;font-size:.68rem;font-weight:700;color:var(--amber-deep);
  background:var(--tint-blush);border-radius:999px;padding:6px 12px}
.gx-sync i{width:7px;height:7px;border-radius:50%;background:var(--amber);flex-shrink:0}
.gx-sync em{font-style:normal;margin-inline-start:auto;color:var(--green);opacity:0;
  animation:syncFlip 9s var(--ease) infinite}
.gx-sync span{animation:queueFade 9s var(--ease) infinite}
@keyframes syncFlip{0%,50%{opacity:0}62%,84%{opacity:1}92%,100%{opacity:0}}
@keyframes queueFade{0%,50%{opacity:1}62%,84%{opacity:.4}92%,100%{opacity:1}}
.sol-card:hover .gx-sync em{animation:none;opacity:1}
.sol-card:hover .gx-sync span{animation:none;opacity:.4}
@media (prefers-reduced-motion:reduce){
  .gx-lc{animation:none;opacity:1;transform:none}
  .gx-sync em{animation:none;opacity:1}
  .gx-sync span{animation:none;opacity:.4}
}

/* ── 6 · estate: the plan stands up into the apartment ──
   The CSS towers this replaced could only ever be bars. The card now renders
   the developer's actual model — the same one the explorer loads — and the
   card is dark, so the canvas keeps its alpha and lets the card show through
   rather than painting a floor of its own. */
.gx-estate{gap:10px;justify-content:flex-end;padding-top:74px}
.gx-estate-c{flex:1;min-height:0;width:100%;display:block}
.gx-unit{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-size:.72rem;
  background:rgba(241,237,243,.09);border:1px solid rgba(241,237,243,.16);border-radius:9px;
  padding:8px 11px;color:var(--bone);flex:none;
  opacity:0;transform:translateY(8px);transition:.5s var(--ease)}
.gx-unit b{font-weight:700}
.gx-unit span{color:var(--amber-lift);font-weight:700;font-variant-numeric:tabular-nums}
/* is-walked is set by the scene once the camera has arrived, so the price
   appears with the apartment rather than on a timer of its own. */
.card-estate.is-walked .gx-unit,.sol-card:hover .gx-unit{opacity:1;transform:none}

/* ── 7 · report: the numbers move, the shape of the run is the chart ──
   This card used .gx-chart and .gx-bars, which the operations card also
   defines — one a row of columns, the other a column of rows — so the two were
   overwriting each other. Everything here is namespaced rp- for that reason.

   Colour carries the meaning rather than decorating it: violet is the run of
   the event, ember is the peak day and the figures that changed. Numbers roll
   on the same mechanism the operations card uses, so the page has one way of
   showing a figure moving, not two. */
.gx-rep{gap:12px;justify-content:center;padding-top:104px}
.rp-lab{display:block;font-size:.56rem;letter-spacing:.11em;text-transform:lowercase;color:var(--ink-3)}

.rp-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.rp-tile{min-width:0;background:var(--paper);border:1px solid var(--line);border-radius:10px;
  padding:8px 9px;box-shadow:var(--sh-1)}
.rp-n{display:block;height:22px;overflow:hidden;margin:3px 0 1px;
  font-size:1.02rem;line-height:22px;font-weight:700;letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;color:var(--ink)}
/* The roll the operations card used to own. That card now runs the design
   artifact's screens and no longer needs it, and the keyframes went out with
   it — leaving this the only user, so they live here. steps(1) because a
   figure changes, it does not slide. */
.rp-roll{display:flex;flex-direction:column;animation:rollUp 6s steps(1) infinite}
@keyframes rollUp{0%,30%{transform:translateY(0)}33%,63%{transform:translateY(-100%)}
  66%,96%{transform:translateY(-200%)}100%{transform:translateY(0)}}
.rp-tile:first-child .rp-n{color:var(--amber-deep)}
.rp-tile em{font-style:normal;font-size:.56rem;color:var(--ink-3)}
.rp-tile em.up{color:var(--green);font-weight:700}

.rp-chart{display:flex;flex-direction:column;gap:6px;flex:none}
.rp-bars{height:92px;display:flex;align-items:flex-end;gap:3px}
.rp-bars i{flex:1;height:var(--h);border-radius:3px 3px 0 0;
  background:linear-gradient(180deg,var(--violet-lift),var(--violet));
  transform:scaleY(.04);transform-origin:bottom;
  animation:rpGrow 8s var(--ease) infinite;animation-delay:calc(var(--i) * .045s)}
.rp-bars i[style*="--peak"]{background:linear-gradient(180deg,var(--amber-lift),var(--amber))}
@keyframes rpGrow{0%,3%{transform:scaleY(.04)}17%,78%{transform:scaleY(1)}91%,100%{transform:scaleY(.04)}}

.rp-split{display:flex;flex-direction:column;gap:6px}
.rp-stack{display:flex;gap:3px;height:9px}
.rp-stack i{border-radius:3px;transform:scaleX(.02);transform-origin:left;
  animation:rpWipe 8s var(--ease) infinite;animation-delay:calc(.35s + var(--i) * .12s)}
[dir="rtl"] .rp-stack i{transform-origin:right}
@keyframes rpWipe{0%,6%{transform:scaleX(.02)}22%,78%{transform:scaleX(1)}91%,100%{transform:scaleX(.02)}}
.rp-stack .s1{flex:46;background:var(--violet)}
.rp-stack .s2{flex:33;background:var(--violet-lift)}
.rp-stack .s3{flex:21;background:var(--amber)}
.rp-legend{display:flex;align-items:center;gap:5px;font-size:.56rem;color:var(--ink-3)}
.rp-legend u{width:7px;height:7px;border-radius:2px;text-decoration:none;flex:none;
  margin-inline-start:7px}
.rp-legend u:first-child{margin-inline-start:0}
.rp-legend .s1{background:var(--violet)}
.rp-legend .s2{background:var(--violet-lift)}
.rp-legend .s3{background:var(--amber)}

@media (prefers-reduced-motion:reduce){
  .gx-ok,.gx-unit{opacity:1;transform:none}
  .rp-bars i{animation:none;transform:none}
  .rp-stack i{animation:none;transform:none}
  .rp-roll{animation:none}
  .gx-scan{display:none}
}
@media (max-width:1000px){
  .sol-grid{grid-template-columns:repeat(2,1fr)}
  .sol-lead{grid-column:span 2;grid-row:span 1;min-height:360px}
  .sol-wide{grid-column:span 2}
}
@media (max-width:620px){
  .sol-grid{grid-template-columns:1fr}
  .sol-card,.sol-lead,.sol-wide{grid-column:span 1;min-height:320px}
}

/* ═══ solutions dialog ═══ */
body.sol-locked{overflow:hidden}
.sol-dialog{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:20px;
  background:rgba(20,16,25,.55);backdrop-filter:blur(3px);overscroll-behavior:contain}
.sol-dialog[hidden]{display:none}
.sol-dlg{--dlg-pad:clamp(24px,3vw,38px);
  position:relative;width:min(620px,100%);max-height:min(86vh,860px);overflow-y:auto;
  background:var(--paper);border-radius:var(--r-lg);box-shadow:var(--sh-3);
  padding:0 var(--dlg-pad) var(--dlg-pad)}
/* The close button rides a sticky bar rather than sitting absolute, so it stays
   on the top edge for the whole scroll. The bar carries the panel's own paper
   colour and negative inline margins so it spans the full width and content
   passes cleanly underneath instead of showing through beside it. */
.sol-dlg-top{position:sticky;top:0;z-index:6;display:flex;justify-content:flex-end;
  background:var(--paper);padding:12px var(--dlg-pad) 8px;
  margin:0 calc(var(--dlg-pad) * -1) 4px}
.sol-dlg-x{width:34px;height:34px;border-radius:50%;flex:none;
  border:1px solid var(--line);background:var(--paper);color:var(--ink-3);font-size:20px;line-height:1;
  cursor:pointer;transition:.18s}
.sol-dlg-x:hover{background:var(--paper-2);color:var(--ink)}
/* Scrollbar: a thin violet-cast thumb inset by a transparent paper border, so
   it reads as part of the panel rather than the OS chrome. */
.sol-dlg{scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.sol-dlg::-webkit-scrollbar{width:12px}
.sol-dlg::-webkit-scrollbar-track{background:transparent}
.sol-dlg::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:20px;
  border:3.5px solid var(--paper);background-clip:padding-box}
.sol-dlg::-webkit-scrollbar-thumb:hover{background:var(--violet-lift);background-clip:padding-box}
.sol-dlg h3{font-size:clamp(1.3rem,1.1rem + .8vw,1.7rem)}
.sol-dlg-one{margin-top:7px;font-size:.95rem;color:var(--violet);font-weight:600}
.sol-dlg-text{margin-top:14px;font-size:.97rem;color:var(--ink-2);max-width:60ch}
.sol-dlg h4{margin-top:22px;font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;
  color:var(--ink-3)}
html[dir=rtl] .sol-dlg h4{letter-spacing:0}
.sol-covers{list-style:none;margin-top:11px;display:flex;flex-direction:column;gap:8px}
.sol-covers li{position:relative;padding-inline-start:22px;font-size:.9rem;color:var(--ink-2)}
.sol-covers li::before{content:'';position:absolute;inset-inline-start:0;top:.45em;width:11px;height:11px;
  border-radius:50%;background:var(--violet-pale);
  box-shadow:inset 0 0 0 2px var(--violet)}
.sol-status{margin-top:16px;font-size:.85rem;color:var(--amber-deep);background:var(--tint-blush);
  border-radius:var(--r-sm);padding:10px 13px}
.sol-note{margin-top:16px;font-size:.88rem;color:var(--ink-2);background:var(--violet-pale);
  border-radius:var(--r);padding:14px 16px}
.sol-note b{display:block;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;
  color:var(--violet);margin-bottom:5px}
html[dir=rtl] .sol-note b{letter-spacing:0}
.sol-dlg .btn{margin-top:20px;width:100%}

/* ═══ built for the hard parts ═══ */
.hard{padding-block:clamp(52px,6vw,92px);background:var(--night);color:#fff}
.hard h2{color:#fff}
.hard h2 em{color:var(--amber)}
.hard .sec-lede{color:rgba(255,255,255,.62)}
.hard-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,22px);
  margin-top:clamp(32px,4vw,54px)}
.hard-card{display:flex;flex-direction:column;gap:9px;padding:clamp(20px,2.2vw,28px);
  background:rgba(255,255,255,.05);border:1px solid var(--night-line);border-radius:var(--r-lg);
  transition:background .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease)}
.hard-card:hover{background:rgba(255,255,255,.09);border-color:rgba(232,114,44,.4);transform:translateY(-3px)}
.hard-n{font-size:.72rem;font-weight:700;letter-spacing:.1em;color:var(--amber);
  font-variant-numeric:tabular-nums}
.hard-card b{font-size:1.05rem;font-weight:700;letter-spacing:-.025em;line-height:1.25}
.hard-card>span:last-child{font-size:.9rem;color:rgba(255,255,255,.62);line-height:1.6}
@media (max-width:960px){.hard-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.hard-grid{grid-template-columns:1fr}}

/* ═══ a dialog that borrows a working demo ═══ */
.sol-dlg-demo{margin-top:28px;margin-bottom:22px}
.sol-dlg-demo .exh-box{margin-top:0}
.sol-dlg-demo .es3d{grid-template-columns:1fr;margin-top:0}
.sol-dlg-demo .es-units{max-height:200px}
.sol-dlg-demo .es-reg{grid-template-columns:1fr;margin-top:18px}
.sol-dlg-demo .es-reg>p,.sol-dlg-demo .es-reg-form,.sol-dlg-demo .es-reg-done{grid-column:1}
.sol-dlg-demo .es-reg-form{grid-row:auto}
.sol-dlg-demo .ex-body{grid-template-columns:1fr}
.sol-dlg-demo .ex-steps{grid-template-columns:repeat(2,1fr)}
/* The explorer and the exhibitor hall are authored on the dark venue ground;
   inside the light dialog they keep their own surface rather than inverting. */
.sol-dlg-demo .es3d,.sol-dlg-demo .es-reg{background:var(--night);color:#fff;
  border-radius:var(--r-lg);padding:clamp(16px,2vw,22px)}
.sol-dlg-demo .es-src,.sol-dlg-demo .es-stage{color:rgba(255,255,255,.55)}

/* ═══ hero — the dot field, with the copy overlaid ═══
   The visual is the hero, not a panel under it: it fills the section and the
   headline sits on top of it. Dots are placed clear of the copy column, and the
   copy carries a soft wash so a dot passing behind a descender never competes
   with it. */
/* ── the hero ──
   Full bleed: the stage is the whole screen, not a column with a field beside
   it. body already carries overflow-x:hidden, so escaping the page gutter with
   a viewport-width breakout cannot introduce a horizontal scrollbar.

   The wordmark is the subject. Everything else in this section is arranged
   around it: the orbits are centred on it, and the copy sits beneath rather
   than beside, so nothing competes with the thing the page is called. */
.hero{position:relative;isolation:isolate;
  width:100vw;margin-inline:calc(50% - 50vw);padding:0;
  min-height:min(92vh,880px);display:flex;flex-direction:column;
  align-items:center;justify-content:center;overflow:hidden;
  background:radial-gradient(58% 62% at 50% 34%,var(--tint-blush) 0%,var(--tint-paper) 44%,var(--tint-orchid) 100%)}

/* The stage the orbits live in. perspective is what makes a translate in z a
   change in size rather than nothing at all. */
.hero-viz{position:absolute;inset:0;z-index:0;
  perspective:900px;transform-style:preserve-3d}

/* z-index 100 is the wordmark's plane. The scene gives each dot round(scale
   * 100), so a dot nearer than the word (scale > 1) paints over it and one
   further away paints behind — which is the whole point of the depth. */
/* The stage is the flow: mark, then copy beneath it. They used to overlap
   because the mark was absolutely placed and the copy was centred in the same
   box — the headline ran straight through the middle of the word. */
.hero-stage{position:relative;z-index:60;display:flex;flex-direction:column;
  align-items:center;gap:clamp(14px,3.4vh,38px);width:100%}
.hero-mark{margin:0;pointer-events:none;white-space:nowrap;line-height:.9}
.hm-word{display:inline-flex;align-items:flex-end;
  font-size:clamp(3rem,10.5vw,9.5rem);font-weight:200;letter-spacing:-.055em;
  line-height:.9;color:var(--ink-900)}
/* The full stop is the mark. It carries the only ember in the composition. */
.hm-word i{width:.115em;height:.115em;border-radius:50%;background:var(--amber);
  margin-inline-start:.06em;margin-bottom:.1em;flex:none;
  box-shadow:0 0 0 .06em rgba(232,114,44,.16),0 0 2.2em .3em rgba(232,114,44,.34);
  animation:markPulse 2.6s var(--ease) infinite}

.hero-viz .dot-svc{position:absolute;left:0;top:0;margin:-7px 0 0 -7px;
  width:14px;height:14px;padding:0;border:0;background:none;cursor:pointer;
  will-change:transform,opacity}
.hero-viz .dot-svc .dot-core{display:block;width:100%;height:100%;border-radius:50%;
  background:radial-gradient(circle at 32% 30%,var(--violet-lift),var(--violet) 70%);
  box-shadow:0 2px 10px rgba(107,63,160,.34)}
.hero-viz .dot-svc .dot-label{position:absolute;inset-inline-start:50%;top:-2.1em;
  transform:translate(-50%,4px);opacity:0;pointer-events:none;white-space:nowrap;
  font-size:.72rem;font-weight:600;color:var(--violet-deep);
  background:var(--paper);border:1px solid var(--line);border-radius:999px;
  padding:4px 10px;box-shadow:var(--sh-1);transition:.2s var(--ease)}
.hero-viz .dot-svc:hover .dot-label,.hero-viz .dot-svc:focus-visible .dot-label{
  opacity:1;transform:translate(-50%,0)}
.hero-viz .dot-svc.is-open{z-index:200!important}
.hero-viz .dot-svc:hover .dot-core{background:radial-gradient(circle at 32% 30%,#fff,var(--amber) 70%)}

.hero-copy{position:relative;z-index:60;max-width:min(62ch,92vw);
  margin:0 auto;padding:0 24px;text-align:center}
.hero-copy h1{font-size:clamp(1.15rem,2.1vw,1.7rem);font-weight:500;
  letter-spacing:-.02em;line-height:1.3;color:var(--ink)}
.hero h1 em{display:inline;color:var(--violet);font-style:normal}
.hero .lede{margin-top:12px;font-size:clamp(.92rem,1.15vw,1.02rem);color:var(--ink-2);
  max-width:54ch;margin-inline:auto}
.hero-cta{margin-top:22px;justify-content:center}
.hero-marks{justify-content:center;margin-top:20px}


/* The previous hero's dot styles lived here: authored x/y positions and a
   dotDrift keyframe. They are gone because the scene now owns transform,
   opacity, filter and z-index every frame — and a CSS animation beats an
   inline style, so dotDrift silently discarded all eighteen per-frame
   transforms and left every dot stacked in one spot. */

/* ── the mark ── */
/* the mark pulses harder than the field, and radiates */
.dot-core-mark .dot-core{width:26px;height:26px;background:var(--amber);
  animation:markPulse 2.6s var(--ease) infinite}
@keyframes markPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.22)}}
.dot-core-mark::before{content:'';position:absolute;inset:50%;width:150px;height:150px;
  margin:-75px 0 0 -75px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(232,114,44,.32) 0%,rgba(232,114,44,0) 70%);
  animation:markField 2.6s var(--ease) infinite}
@keyframes markField{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.12)}}
/* three rings leaving the dot on a stagger — the radiating part */
.dot-ring{position:absolute;inset:50%;width:26px;height:26px;margin:-13px 0 0 -13px;
  border-radius:50%;border:1.5px solid var(--amber);pointer-events:none;opacity:0;
  animation:markRadiate 4.2s cubic-bezier(.22,.8,.3,1) infinite;animation-delay:var(--r,0s)}
@keyframes markRadiate{
  0%{opacity:.55;transform:scale(1)}
  70%{opacity:0;transform:scale(4.6)}
  100%{opacity:0;transform:scale(4.6)}
}
.dot-core-mark:hover .dot-core{background:var(--amber)}
.dot-core-mark:hover .dot-ring{animation-play-state:paused;opacity:0}
.dot-word{background:var(--ink);color:#fff;font-size:1.25rem;font-weight:700;letter-spacing:-.05em;
  padding:12px 24px;box-shadow:0 3px 10px rgba(23,19,32,.22),0 18px 44px rgba(23,19,32,.24)}
.dot-word i{color:var(--amber);font-style:normal}

@media (prefers-reduced-motion:reduce){
  .dot-core,.dot-svc,.dot-ring,.dot-core-mark::before{animation:none}
  .dot-ring{opacity:0}
  .dot-label{transition:opacity .01ms}
}
@media (max-width:1040px){
  .hero-copy{max-width:none;width:auto;margin-inline:0;padding-inline:24px}
    .dot-lg-only{display:none}
}
@media (max-width:620px){
  .hero{min-height:auto;padding-block:clamp(36px,9vw,64px)}
  .dot-core{width:10px;height:10px}
  .dot-core-mark .dot-core{width:20px;height:20px}
  .dot-word{font-size:1.05rem;padding:10px 18px}
  .dot-label{font-size:.78rem;padding:8px 13px}
}

/* ── idle: each card is already alive before you touch it ── */
@keyframes idleFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes idlePulse{0%,100%{opacity:.45}50%{opacity:1}}
@keyframes idleSway{0%,100%{transform:rotate(-1.4deg)}50%{transform:rotate(1.4deg)}}
@keyframes idleBlink{0%,45%{opacity:1}55%,100%{opacity:.25}}
@keyframes idleBar{0%,100%{transform:scaleY(.9)}50%{transform:scaleY(1)}}
@keyframes idleSweep{0%{transform:translateX(-120%)}100%{transform:translateX(320%)}}

/* the caret waiting in the form */
/* a typing indicator waiting in the thread */
.sol-card:hover /* one booth blinking as if just assigned */
/* the sync dot breathing */
.gx-sync i{animation:idlePulse 1.8s ease-in-out infinite}
/* one lit window in the tower */
/* the peak bar breathing, and a sheen crossing the chart */
.gx-bars i[style*="--peak"]{animation:idleBar 2.6s ease-in-out infinite;transform-origin:bottom}
.gx-chart::after{content:'';position:absolute;inset-block:0;width:40%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);
  animation:idleSweep 5.5s linear infinite}
/* the lead stack drifting */
.gx-stack{animation:idleFloat 6s ease-in-out infinite}
.sol-card:hover .gx-stack{animation:none}

/* the dark estate card inverts its type */
.card-estate .sol-title{color:var(--bone)}
.card-estate .gx-unit{background:rgba(241,237,243,.08);border-color:var(--night-line);color:var(--bone)}
.card-estate .gx-unit b{color:var(--bone)}
.card-estate .sol-open{background:rgba(241,237,243,.14)}
.card-estate .sol-open path{fill:var(--bone)}

@media (prefers-reduced-motion:reduce){
  .gx-sync i,.gx-bars i[style*="--peak"],.gx-chart::after,.gx-stack{animation:none}
}

/* ── the dialog fills three quarters of the screen and scrolls ── */
.sol-dlg{width:75vw;max-width:75vw;height:75vh;max-height:75vh;overflow-y:auto;
  overscroll-behavior:contain}
@media (max-width:860px){
  .sol-dlg{width:92vw;max-width:92vw;height:88vh;max-height:88vh}
}

/* ==== BEGIN design stylesheet — the mobile artifact's own CSS,
   scoped and rescaled by build-phone.mjs. Do not hand-edit. ==== */
.gx-att{
  --ink-page:#14101B; --aubergine:#2A1B3D;
  --sans:'IBM Plex Sans Arabic',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --ease:cubic-bezier(0.22,1,0.36,1);
  --org:#6B3FA0;
  /* one design pixel, measured against the handset's real width */
  --u:calc(100cqw / 390);
  position:absolute;inset:0;font-family:var(--sans);color:var(--ink);
  background:var(--paper);overflow:hidden;text-align:start}
.gx-att [data-theme=light]{
  --paper:#F6F2EB; --surface:#FFFFFF; --raised:#FAF8FB; --sunken:#F1EDF3;
  --border:#E3E0EA; --hair:#EDE9F2; --ink:#1A1523; --text2:#5C5470; --muted:#9B93A8;
  --purple:#6B3FA0; --purple-soft:rgba(107,63,160,.09); --purple-lift:#9A6BD0;
  --ember:#E8722C; --ember-ink:#B45309; --ember-soft:rgba(232,114,44,.13);
  --ok:#157F4F; --ok-soft:rgba(21,127,79,.11); --danger:#C0203F;
  --sh:0 calc(6 * var(--u)) calc(18 * var(--u)) rgba(98,65,133,.10); --sh-lg:0 calc(18 * var(--u)) calc(44 * var(--u)) rgba(98,65,133,.16);
  --stage:radial-gradient(120% 90% at 50% 0%,#2A1B3D,#14101B);
}.gx-att [data-theme=dark]{
  --paper:#0E0A16; --surface:#1A1428; --raised:#221A33; --sunken:#151022;
  --border:rgba(241,237,243,.11); --hair:rgba(241,237,243,.07); --ink:#F1EDF3;
  --text2:rgba(241,237,243,.64); --muted:rgba(241,237,243,.40);
  --purple:#9A6BD0; --purple-soft:rgba(154,107,208,.15); --purple-lift:#B994E8;
  --ember:#F4995A; --ember-ink:#F4995A; --ember-soft:rgba(244,153,90,.15);
  --ok:#3ECF8E; --ok-soft:rgba(62,207,142,.14); --danger:#FF5470;
  --sh:0 calc(6 * var(--u)) calc(18 * var(--u)) rgba(0,0,0,.34); --sh-lg:0 calc(18 * var(--u)) calc(44 * var(--u)) rgba(0,0,0,.5);
  --stage:radial-gradient(120% 90% at 50% 0%,#2A1B3D,#0B0812);
}.gx-att *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}.gx-att html,.gx-att body{margin:0;height:100%}.gx-att button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;padding:0}.gx-att a{color:var(--purple)}.gx-att a:hover{color:var(--purple-lift)}.gx-att .wordmark{font-weight:200;letter-spacing:-.045em;line-height:1;display:inline-flex;align-items:flex-end;white-space:nowrap}.gx-att .wm-dot{width:.13em;height:.13em;min-width:calc(4 * var(--u));min-height:calc(4 * var(--u));border-radius:50%;background:var(--ember);display:inline-block;margin-left:.12em;margin-bottom:.15em;box-shadow:0 0 calc(10 * var(--u)) calc(1 * var(--u)) rgba(232,114,44,.7)}.gx-att .dot{position:relative;display:inline-block;border-radius:50%;flex:none}.gx-att .dot-pulse>i{position:absolute;inset:0;border-radius:50%;border:calc(1.5 * var(--u)) solid;animation:gxatt-pulse 1.9s var(--ease) infinite}
@keyframes gxatt-pulse{0%{transform:scale(1);opacity:.7}80%,100%{transform:scale(3.6);opacity:0}}.gx-att .mark{display:grid;place-items:center;font-family:var(--mono);font-weight:600;color:#fff;text-transform:uppercase;flex:none;letter-spacing:-.02em}.gx-att .stage{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;background:radial-gradient(130% 90% at 50% -10%,#2A1B3D 0%,#14101B 58%)}.gx-att .stage-canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.7}.gx-att .stage-head{position:relative;z-index:3;width:100%;display:flex;align-items:center;justify-content:space-between;padding:calc(18 * var(--u)) calc(28 * var(--u))}.gx-att .cap{font-family:var(--mono);font-size:calc(10 * var(--u));font-weight:500;letter-spacing:.16em;text-transform:uppercase}.gx-att .stage-head .cap{color:rgba(241,237,243,.42)}.gx-att .device-wrap{position:relative;z-index:2;flex:1;display:flex;align-items:center;justify-content:center;min-height:0;overflow:hidden}.gx-att .controls{position:relative;z-index:3;display:flex;gap:calc(6 * var(--u)) calc(14 * var(--u));flex-wrap:wrap;justify-content:center;align-items:center;padding:calc(10 * var(--u)) calc(20 * var(--u)) calc(14 * var(--u));max-width:calc(1080 * var(--u));margin:0 auto}.gx-att .cgroup{display:flex;align-items:center;gap:calc(6 * var(--u))}.gx-att .cgroup>.cap{color:rgba(241,237,243,.35);margin-right:calc(2 * var(--u))}.gx-att .ctrl{padding:calc(6 * var(--u)) calc(11 * var(--u));border-radius:calc(99 * var(--u));font-family:var(--mono);font-size:calc(10.5 * var(--u));letter-spacing:.05em;color:rgba(241,237,243,.7);background:rgba(241,237,243,.06);border:calc(1 * var(--u)) solid rgba(241,237,243,.12);transition:all .15s}.gx-att .ctrl:hover{background:rgba(241,237,243,.13)}.gx-att .ctrl.on{background:#F1EDF3;color:#14101B;border-color:#F1EDF3;font-weight:600}.gx-att .swatch{width:calc(26 * var(--u));height:calc(26 * var(--u));border-radius:50%;border:calc(2 * var(--u)) solid transparent;transition:.15s}.gx-att .swatch.on{border-color:#F1EDF3;transform:scale(1.08)}.gx-att .phone{position:relative;width:calc(392 * var(--u));height:calc(812 * var(--u));flex:none;transform-origin:center;border-radius:calc(56 * var(--u));background:linear-gradient(160deg,#0b0812,#241a33);padding:calc(11 * var(--u));box-shadow:0 calc(30 * var(--u)) calc(70 * var(--u)) rgba(20,16,27,.6)}.gx-att .phone::after{content:"";position:absolute;inset:calc(-2 * var(--u));border-radius:calc(58 * var(--u));pointer-events:none;box-shadow:inset 0 0 0 calc(1.5 * var(--u)) rgba(241,237,243,.09)}.gx-att .screenbox{position:relative;width:100%;height:100%;border-radius:calc(46 * var(--u));overflow:hidden;background:var(--paper);color:var(--ink);display:flex;flex-direction:column;transition:background .35s var(--ease)}.gx-att [data-theme=dark] .screenbox{background:radial-gradient(120% 70% at 50% -10%,#1B1229 0%,#0E0A16 55%)}.gx-att .statusbar{position:relative;z-index:6;height:calc(50 * var(--u));display:flex;align-items:center;justify-content:space-between;padding:0 calc(28 * var(--u));flex:none;color:var(--ink)}.gx-att .sb-time{font-weight:600;font-size:calc(14.5 * var(--u));letter-spacing:.02em}.gx-att .sb-island{position:absolute;left:50%;top:calc(10 * var(--u));transform:translateX(-50%);width:calc(100 * var(--u));height:calc(29 * var(--u));border-radius:calc(16 * var(--u));background:#0b0812}.gx-att .sb-r{display:flex;align-items:center;gap:calc(6 * var(--u));opacity:.85}.gx-att .sb-batt{width:calc(22 * var(--u));height:calc(11 * var(--u));border-radius:calc(3 * var(--u));border:calc(1 * var(--u)) solid currentColor;padding:calc(1.4 * var(--u));opacity:.5}.gx-att .sb-batt>span{display:block;width:72%;height:100%;border-radius:calc(1.4 * var(--u));background:currentColor}.gx-att .body{position:relative;flex:1;min-height:0;display:flex;flex-direction:column}.gx-att .screen{position:absolute;inset:0;display:flex;flex-direction:column;animation:gxatt-screen-in .4s var(--ease)}
@keyframes gxatt-screen-in{from{opacity:0;transform:translateY(calc(10 * var(--u)))}}.gx-att .screen.pop{animation:gxatt-pop-in .34s var(--ease)}
@keyframes gxatt-pop-in{from{opacity:0;transform:scale(.96)}}.gx-att .scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 calc(22 * var(--u)) calc(118 * var(--u))}.gx-att .scroll::-webkit-scrollbar{width:0}.gx-att .scroll,.gx-att .launcher-in,.gx-att .dayrail{scrollbar-width:none}.gx-att .nav{flex:none;display:flex;align-items:center;gap:calc(10 * var(--u));padding:calc(2 * var(--u)) calc(18 * var(--u)) calc(8 * var(--u));min-height:calc(40 * var(--u))}.gx-att .nav-btn{width:calc(38 * var(--u));height:calc(38 * var(--u));border-radius:calc(12 * var(--u));display:grid;place-items:center;color:var(--ink);transition:.15s}.gx-att .nav-btn:hover{background:var(--purple-soft)}.gx-att .nav-title{font-size:calc(14 * var(--u));font-weight:500;color:var(--text2);flex:1}.gx-att [dir=rtl] .nav-btn svg{transform:scaleX(-1)}.gx-att .eyebrow{font-family:var(--mono);font-size:calc(10 * var(--u));font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--purple-lift)}.gx-att .h1{font-weight:200;font-size:calc(34 * var(--u));letter-spacing:-.03em;line-height:1.06;margin:calc(8 * var(--u)) 0 0;color:var(--ink);text-wrap:balance}.gx-att .h2{font-weight:200;font-size:calc(22 * var(--u));letter-spacing:-.02em;margin:0;color:var(--ink)}.gx-att .h3{font-weight:500;font-size:calc(15.5 * var(--u));margin:0;color:var(--ink);letter-spacing:-.01em}.gx-att .p{font-weight:200;font-size:calc(14.5 * var(--u));line-height:1.6;color:var(--text2);margin:0}.gx-att .meta{font-size:calc(12.5 * var(--u));color:var(--muted);margin:0}.gx-att .mono{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em}.gx-att .lab{font-family:var(--mono);font-size:calc(9.5 * var(--u));font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}.gx-att .rule{height:calc(1 * var(--u));background:var(--hair);margin:calc(18 * var(--u)) 0}.gx-att .rowb{display:flex;align-items:center;justify-content:space-between;gap:calc(12 * var(--u))}.gx-att .stack{display:flex;flex-direction:column}.gx-att .sec{margin-top:calc(26 * var(--u))}.gx-att .sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:calc(10 * var(--u));margin-bottom:calc(12 * var(--u))}.gx-att .reveal{animation:gxatt-rise .5s var(--ease) backwards}
@keyframes gxatt-rise{from{opacity:0;transform:translateY(calc(12 * var(--u)))}}.gx-att .btn{display:inline-flex;align-items:center;justify-content:center;gap:calc(8 * var(--u));height:calc(50 * var(--u));padding:0 calc(22 * var(--u));border-radius:calc(99 * var(--u));font-size:calc(15 * var(--u));font-weight:500;letter-spacing:-.01em;transition:transform .15s var(--ease),background .15s,box-shadow .2s}.gx-att .btn:active{transform:scale(.97)}.gx-att .btn-block{display:flex;width:100%}.gx-att .btn-p{background:var(--org);color:#fff;box-shadow:0 calc(8 * var(--u)) calc(20 * var(--u)) color-mix(in oklab,var(--org) 34%,transparent)}.gx-att .btn-e{background:var(--ember);color:#20120A;font-weight:600}.gx-att .btn-g{background:var(--surface);color:var(--ink);border:calc(1 * var(--u)) solid var(--border);box-shadow:var(--sh)}.gx-att .btn-q{background:var(--sunken);color:var(--ink)}.gx-att .chips{display:flex;gap:calc(7 * var(--u));flex-wrap:wrap}.gx-att .chip{padding:calc(7 * var(--u)) calc(13 * var(--u));border-radius:calc(99 * var(--u));border:calc(1 * var(--u)) solid var(--border);background:var(--surface);font-family:var(--mono);font-size:calc(10.5 * var(--u));letter-spacing:.04em;color:var(--text2);transition:.15s;white-space:nowrap}.gx-att .chip.on{border-color:var(--org);background:color-mix(in oklab,var(--org) 11%,transparent);color:var(--ink);font-weight:600}.gx-att .seg{position:relative;display:flex;background:var(--sunken);border-radius:calc(13 * var(--u));padding:calc(4 * var(--u))}.gx-att .seg-b{position:relative;z-index:2;flex:1;height:calc(36 * var(--u));border-radius:calc(10 * var(--u));font-family:var(--mono);font-size:calc(10.5 * var(--u));letter-spacing:.06em;color:var(--text2);transition:color .2s;text-transform:uppercase}.gx-att .seg-b.on{color:#fff}.gx-att .seg-t{position:absolute;z-index:1;top:calc(4 * var(--u));left:calc(4 * var(--u));height:calc(36 * var(--u));border-radius:calc(10 * var(--u));background:var(--org);box-shadow:0 calc(4 * var(--u)) calc(12 * var(--u)) color-mix(in oklab,var(--org) 36%,transparent);transition:transform .34s var(--ease),width .34s var(--ease)}.gx-att .field{background:var(--surface);border:calc(1 * var(--u)) solid var(--border);border-radius:calc(13 * var(--u));padding:calc(14 * var(--u)) calc(15 * var(--u));box-shadow:var(--sh);font-size:calc(15 * var(--u));color:var(--ink);display:flex;align-items:center;gap:calc(10 * var(--u))}.gx-att .field .ph{color:var(--muted)}.gx-att .card{background:var(--surface);border:calc(1 * var(--u)) solid var(--border);border-radius:calc(18 * var(--u));box-shadow:var(--sh);transition:transform .18s var(--ease),box-shadow .18s,border-color .18s}.gx-att button.card:active{transform:scale(.985)}.gx-att .tag{display:inline-flex;align-items:center;gap:calc(6 * var(--u));padding:calc(4 * var(--u)) calc(9 * var(--u));border-radius:calc(7 * var(--u));font-family:var(--mono);font-size:calc(9.5 * var(--u));font-weight:600;letter-spacing:.09em;text-transform:uppercase}.gx-att .tag-live{background:var(--ember-soft);color:var(--ember-ink)}.gx-att .tag-ok{background:var(--ok-soft);color:var(--ok)}.gx-att .tag-n{background:var(--sunken);color:var(--muted)}.gx-att .empty{text-align:center;padding:calc(52 * var(--u)) calc(20 * var(--u));display:flex;flex-direction:column;align-items:center;gap:calc(8 * var(--u))}.gx-att .spine{position:relative;padding-left:calc(26 * var(--u));margin-top:calc(6 * var(--u))}.gx-att [dir=rtl] .spine{padding-left:0;padding-right:calc(26 * var(--u))}.gx-att .spine::before{content:"";position:absolute;top:calc(8 * var(--u));bottom:calc(26 * var(--u));left:calc(5 * var(--u));width:calc(1 * var(--u));background:linear-gradient(180deg,var(--border),transparent)}.gx-att [dir=rtl] .spine::before{left:auto;right:calc(5 * var(--u))}.gx-att .node{position:relative;margin-bottom:calc(12 * var(--u))}.gx-att .node::before{content:"";position:absolute;left:calc(-24 * var(--u));top:calc(20 * var(--u));width:calc(11 * var(--u));height:calc(11 * var(--u));border-radius:50%;background:var(--paper);border:calc(1.5 * var(--u)) solid var(--border)}.gx-att [dir=rtl] .node::before{left:auto;right:calc(-24 * var(--u))}.gx-att [data-theme=dark] .node::before{background:var(--paper)}.gx-att .node.is-live::before{background:var(--ember);border-color:var(--ember);box-shadow:0 0 0 calc(3 * var(--u)) var(--ember-soft)}.gx-att .node.is-done::before{background:var(--border)}.gx-att .node .card{padding:calc(15 * var(--u)) calc(16 * var(--u));width:100%;text-align:inherit;display:block}.gx-att .node.is-done .card{opacity:.55}.gx-att .node-t{font-family:var(--mono);font-size:calc(11 * var(--u));font-weight:600;letter-spacing:.06em;color:var(--muted)}.gx-att .node.is-live .node-t{color:var(--ember-ink)}.gx-att .track{height:calc(2 * var(--u));border-radius:calc(2 * var(--u));background:var(--org);width:calc(28 * var(--u));margin-top:calc(11 * var(--u));opacity:.75}.gx-att .hero{position:relative;border-radius:calc(22 * var(--u));overflow:hidden;background:var(--stage);color:#F1EDF3;box-shadow:var(--sh-lg)}.gx-att .hero canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.85}.gx-att .hero-in{position:relative;padding:calc(18 * var(--u)) calc(19 * var(--u)) calc(19 * var(--u))}.gx-att .hero .lab{color:rgba(241,237,243,.5)}.gx-att .hero-title{font-weight:200;font-size:calc(25 * var(--u));letter-spacing:-.025em;line-height:1.12;margin:calc(12 * var(--u)) 0 0;color:#F1EDF3}.gx-att .hero-bar{margin-top:calc(16 * var(--u));height:calc(5 * var(--u));border-radius:calc(99 * var(--u));background:rgba(241,237,243,.14);overflow:hidden}.gx-att .hero-bar>span{display:block;height:100%;border-radius:calc(99 * var(--u));background:linear-gradient(90deg,var(--ember),#F4995A);box-shadow:0 0 calc(12 * var(--u)) rgba(232,114,44,.6);animation:gxatt-grow 1.1s var(--ease)}
@keyframes gxatt-grow{from{width:0!important}}.gx-att .badge-screen{position:absolute;inset:0;z-index:40;display:flex;flex-direction:column;background:radial-gradient(120% 80% at 50% 18%,#2A1B3D,#0B0812);color:#F1EDF3;animation:gxatt-badge-in .5s var(--ease)}
@keyframes gxatt-badge-in{from{opacity:0;transform:translateY(calc(22 * var(--u))) scale(.97)}}.gx-att .badge-screen canvas{position:absolute;inset:0;width:100%;height:100%}.gx-att .badge-bloom{position:absolute;left:50%;top:46%;width:calc(340 * var(--u));height:calc(340 * var(--u));transform:translate(-50%,-50%);background:radial-gradient(circle,color-mix(in oklab,var(--org) 42%,transparent) 0%,transparent 66%);animation:gxatt-bloom 3.4s var(--ease) infinite alternate;pointer-events:none}
@keyframes gxatt-bloom{from{opacity:.35;transform:translate(-50%,-50%) scale(.86)}.gx-att to{opacity:.8;transform:translate(-50%,-50%) scale(1.08)}}.gx-att .badge-card{position:relative;width:calc(262 * var(--u));border-radius:calc(22 * var(--u));background:#FBFAFC;color:#17121F;box-shadow:0 calc(30 * var(--u)) calc(70 * var(--u)) rgba(0,0,0,.55);overflow:hidden;transform-style:preserve-3d;transition:transform .12s linear}.gx-att .badge-band{background:var(--org);color:#fff;padding:calc(11 * var(--u)) calc(16 * var(--u));display:flex;align-items:center;justify-content:space-between}.gx-att .badge-body{padding:calc(18 * var(--u)) calc(18 * var(--u)) calc(16 * var(--u));text-align:center}.gx-att .badge-qr{width:calc(158 * var(--u));height:calc(158 * var(--u));margin:calc(2 * var(--u)) auto 0;border-radius:calc(10 * var(--u));background:#fff;padding:calc(9 * var(--u))}.gx-att .badge-sheen{position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 32%,rgba(255,255,255,.72) 48%,transparent 62%);mix-blend-mode:overlay}.gx-att .badge-lanyard{width:calc(2 * var(--u));height:calc(26 * var(--u));background:rgba(241,237,243,.25);margin:0 auto}.gx-att .dock{position:absolute;left:calc(14 * var(--u));right:calc(14 * var(--u));bottom:calc(14 * var(--u));z-index:30;border-radius:calc(22 * var(--u));background:color-mix(in oklab,var(--surface) 88%,transparent);backdrop-filter:blur(calc(18 * var(--u))) saturate(1.3);border:calc(1 * var(--u)) solid var(--border);box-shadow:var(--sh-lg);overflow:hidden;touch-action:none;transition:transform .34s var(--ease)}.gx-att .dock-grip{width:calc(34 * var(--u));height:calc(3.5 * var(--u));border-radius:calc(99 * var(--u));background:var(--border);margin:calc(7 * var(--u)) auto 0}.gx-att .dock-row{display:flex;align-items:center;gap:calc(12 * var(--u));padding:calc(9 * var(--u)) calc(14 * var(--u)) calc(13 * var(--u));cursor:grab}.gx-att .dock-main{flex:1;min-width:0;text-align:start}.gx-att .dock-name{font-size:calc(14 * var(--u));font-weight:500;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gx-att .dock-btn{height:calc(38 * var(--u));padding:0 calc(14 * var(--u));border-radius:calc(99 * var(--u));background:var(--org);color:#fff;font-family:var(--mono);font-size:calc(10 * var(--u));font-weight:600;letter-spacing:.1em;text-transform:uppercase;display:flex;align-items:center;gap:calc(7 * var(--u));flex:none}.gx-att .launcher{position:absolute;inset:0;z-index:35;background:radial-gradient(130% 90% at 50% 8%,#2A1B3D,#0B0812);color:#F1EDF3;display:flex;flex-direction:column;animation:gxatt-launch-in .38s var(--ease)}
@keyframes gxatt-launch-in{from{opacity:0;transform:translateY(calc(26 * var(--u)))}}.gx-att .launcher canvas{position:absolute;inset:0;width:100%;height:100%}.gx-att .launcher-in{position:relative;flex:1;min-height:0;overflow-y:auto;padding:calc(22 * var(--u)) calc(24 * var(--u)) calc(30 * var(--u))}.gx-att .launcher-in::-webkit-scrollbar{width:0}.gx-att .orbit{position:relative;margin-top:calc(22 * var(--u))}.gx-att .orbit .lab{color:rgba(241,237,243,.4)}.gx-att .orbit-grid{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:calc(6 * var(--u)) calc(4 * var(--u));margin-top:calc(12 * var(--u))}.gx-att .orbit svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}.gx-att .lnode{position:relative;display:flex;flex-direction:column;align-items:center;gap:calc(9 * var(--u));padding:calc(12 * var(--u)) calc(2 * var(--u)) calc(10 * var(--u));border-radius:calc(16 * var(--u));transition:background .15s;animation:gxatt-node-in .44s var(--ease) backwards}
@keyframes gxatt-node-in{from{opacity:0;transform:translateY(calc(10 * var(--u))) scale(.9)}}.gx-att .lnode:hover{background:rgba(241,237,243,.05)}.gx-att .lnode-d{width:calc(9 * var(--u));height:calc(9 * var(--u));border-radius:50%;background:rgba(241,237,243,.55);box-shadow:0 0 0 calc(5 * var(--u)) rgba(241,237,243,.05);transition:.2s}.gx-att .lnode:hover .lnode-d,.gx-att .lnode.hot .lnode-d{background:var(--ember);box-shadow:0 0 calc(14 * var(--u)) calc(2 * var(--u)) rgba(232,114,44,.6)}.gx-att .lnode-l{font-size:calc(11.5 * var(--u));font-weight:200;color:rgba(241,237,243,.78);text-align:center;line-height:1.25}.gx-att .lnode-c{position:absolute;top:calc(6 * var(--u));right:calc(14 * var(--u));font-family:var(--mono);font-size:calc(9 * var(--u));font-weight:600;color:var(--ember);letter-spacing:.04em}.gx-att .floor{position:relative;height:calc(330 * var(--u));border-radius:calc(18 * var(--u));overflow:hidden;background:var(--sunken);border:calc(1 * var(--u)) solid var(--border);touch-action:none;cursor:grab}.gx-att .floor-world{position:absolute;left:0;top:0;width:calc(520 * var(--u));height:calc(460 * var(--u));transform-origin:0 0}.gx-att .floor-grid{position:absolute;inset:0;background-image:linear-gradient(color-mix(in oklab,var(--purple) 12%,transparent) calc(1 * var(--u)),transparent calc(1 * var(--u))),linear-gradient(90deg,color-mix(in oklab,var(--purple) 12%,transparent) calc(1 * var(--u)),transparent calc(1 * var(--u)));background-size:calc(26 * var(--u)) calc(26 * var(--u))}.gx-att .stand{position:absolute;border-radius:calc(6 * var(--u));background:var(--surface);border:calc(1 * var(--u)) solid var(--border);display:grid;place-items:center;font-family:var(--mono);font-size:calc(9 * var(--u));font-weight:600;color:var(--text2);transition:.15s}.gx-att .stand.hot{background:var(--org);border-color:var(--org);color:#fff;box-shadow:0 0 0 calc(4 * var(--u)) color-mix(in oklab,var(--org) 22%,transparent)}.gx-att .stand.zone{background:transparent;border-style:dashed;color:var(--muted);font-size:calc(8.5 * var(--u));letter-spacing:.14em}.gx-att .you{position:absolute;width:calc(12 * var(--u));height:calc(12 * var(--u));border-radius:50%;background:var(--ember);box-shadow:0 0 0 calc(4 * var(--u)) var(--ember-soft),0 0 calc(16 * var(--u)) rgba(232,114,44,.7)}.gx-att .floor-hud{position:absolute;left:calc(12 * var(--u));bottom:calc(12 * var(--u));right:calc(12 * var(--u));display:flex;align-items:center;justify-content:space-between;gap:calc(8 * var(--u));pointer-events:none}.gx-att .hud-pill{background:color-mix(in oklab,var(--surface) 90%,transparent);backdrop-filter:blur(calc(10 * var(--u)));border:calc(1 * var(--u)) solid var(--border);border-radius:calc(99 * var(--u));padding:calc(6 * var(--u)) calc(12 * var(--u));display:flex;align-items:center;gap:calc(7 * var(--u))}.gx-att .marq{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}.gx-att .marq-t{display:flex;gap:calc(10 * var(--u));width:max-content;animation:gxatt-marq 34s linear infinite}.gx-att .marq:hover .marq-t{animation-play-state:paused}
@keyframes gxatt-marq{to{transform:translateX(-50%)}}.gx-att [dir=rtl] .marq-t{animation-direction:reverse}.gx-att .stars{display:flex;gap:calc(7 * var(--u))}.gx-att .star{transition:transform .12s var(--ease)}.gx-att .star:active{transform:scale(.85)}.gx-att .scale{display:flex;gap:calc(5 * var(--u))}.gx-att .scale-b{flex:1;height:calc(42 * var(--u));border-radius:calc(9 * var(--u));background:var(--sunken);font-family:var(--mono);font-size:calc(12 * var(--u));color:var(--text2);transition:.15s}.gx-att .scale-b.on{background:var(--org);color:#fff;font-weight:600}.gx-att .switch{width:calc(44 * var(--u));height:calc(26 * var(--u));border-radius:calc(99 * var(--u));background:var(--sunken);padding:calc(3 * var(--u));flex:none;transition:background .2s}.gx-att .switch.on{background:var(--ok)}.gx-att .switch>i{display:block;width:calc(20 * var(--u));height:calc(20 * var(--u));border-radius:50%;background:#fff;box-shadow:0 calc(1 * var(--u)) calc(3 * var(--u)) rgba(0,0,0,.25);transition:transform .24s var(--ease)}.gx-att .switch.on>i{transform:translateX(calc(18 * var(--u)))}.gx-att [dir=rtl] .switch.on>i{transform:translateX(calc(-18 * var(--u)))}.gx-att .kv{display:flex;align-items:baseline;justify-content:space-between;gap:calc(14 * var(--u));padding:calc(11 * var(--u)) 0;border-bottom:calc(1 * var(--u)) solid var(--hair)}.gx-att .kv:last-child{border-bottom:none}.gx-att .rowlink{display:flex;align-items:center;gap:calc(13 * var(--u));width:100%;padding:calc(14 * var(--u)) calc(15 * var(--u));text-align:start}.gx-att .rl-ico{width:calc(34 * var(--u));height:calc(34 * var(--u));border-radius:calc(11 * var(--u));background:var(--sunken);display:grid;place-items:center;flex:none;color:var(--ink)}.gx-att [dir=rtl] .rowlink .chev{transform:scaleX(-1)}.gx-att .sheet{position:absolute;left:0;right:0;bottom:0;z-index:45;background:var(--surface);border-radius:calc(26 * var(--u)) calc(26 * var(--u)) 0 0;padding:calc(12 * var(--u)) calc(22 * var(--u)) calc(26 * var(--u));box-shadow:0 calc(-14 * var(--u)) calc(44 * var(--u)) rgba(11,8,18,.36);animation:gxatt-sheet-up .38s var(--ease)}
@keyframes gxatt-sheet-up{from{transform:translateY(calc(60 * var(--u)));opacity:0}}.gx-att .scrim{position:absolute;inset:0;z-index:44;background:rgba(11,8,18,.5);backdrop-filter:blur(calc(2 * var(--u)));animation:gxatt-fade .3s var(--ease)}
@keyframes gxatt-fade{from{opacity:0}}.gx-att .dayrail{display:flex;gap:calc(8 * var(--u));overflow-x:auto;padding-bottom:calc(2 * var(--u))}.gx-att .dayrail::-webkit-scrollbar{height:0}.gx-att .day{flex:none;min-width:calc(56 * var(--u));padding:calc(9 * var(--u)) 0;border-radius:calc(13 * var(--u));border:calc(1 * var(--u)) solid var(--border);background:var(--surface);text-align:center;transition:.15s}.gx-att .day.on{background:var(--ink);border-color:var(--ink)}.gx-att .day.on .lab,.gx-att .day.on .day-n{color:var(--paper)}.gx-att .day-n{font-family:var(--mono);font-size:calc(16 * var(--u));font-weight:600;color:var(--ink);margin-top:calc(2 * var(--u))}.gx-att #__claude_design_branding{position:fixed;right:calc(16 * var(--u));bottom:calc(16 * var(--u));z-index:2147483646;display:flex;align-items:center;gap:calc(7 * var(--u));height:calc(30 * var(--u));padding:0 calc(5 * var(--u)) 0 calc(10 * var(--u));border-radius:calc(999 * var(--u));font-family:"Anthropic Sans",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;font-size:calc(12.5 * var(--u));font-weight:400;line-height:1;letter-spacing:normal;text-transform:none;color:#141413;background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(calc(24 * var(--u)));backdrop-filter:blur(calc(24 * var(--u)));box-shadow:0 0 0 calc(.5 * var(--u)) rgba(31,30,29,.14),0 calc(2 * var(--u)) calc(10 * var(--u)) rgba(0,0,0,.09)}.gx-att #__claude_design_branding *{box-sizing:border-box;margin:0}.gx-att #__claude_design_branding a{color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:calc(7 * var(--u));white-space:nowrap}.gx-att #__claude_design_branding a:hover span{text-decoration:underline}.gx-att #__claude_design_branding svg{flex:none}.gx-att #__claude_design_branding a svg{color:#D97757}.gx-att #__claude_design_branding button{width:calc(20 * var(--u));height:calc(20 * var(--u));padding:0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:currentColor;opacity:.55;border:0;background:none;cursor:pointer;flex:none;font:inherit;transition:opacity .14s}.gx-att #__claude_design_branding button:hover{opacity:1;background:rgba(127,127,127,.22)}

/* ═══ devices that cannot hover, and fingers that are not pointers ═══
   There was not one `hover:` or `pointer:` query in this file. Both problems
   below follow from that: the page was authored against a mouse, and the
   phone got whatever fell out. */

/* Six .sol-card:hover rules carry a card graphic to the state it exists to
   show. A touch device fires none of them, so the card sat one step short of
   its own argument — permanently. Only the genuinely stranded ones are here:
   .gx-lc and .gx-sync em already cycle through their visible state on an
   ambient 9s loop, and .gx-unit is driven by .is-walked from estate-card.js,
   not by hover. Additive by construction — a pointer never reads this block. */
@media (hover:none){
  .gx-desk-sync{opacity:1;color:var(--amber-deep);font-weight:700}
  .gx-ok{opacity:1;transform:none}
  /* "synced" ⇄ "3 queued". The hover flip IS the offline argument, so on a
     phone it alternates instead — the same 9s ambient idiom the two loops
     beside it already use, rather than a state picked arbitrarily. */
  .gx-synk>.synk{animation:synkOn 9s var(--ease) infinite}
  .gx-synk>.synk.off{animation:synkOff 9s var(--ease) infinite}
}
@keyframes synkOn {0%,46%{opacity:1}58%,88%{opacity:0}100%{opacity:1}}
@keyframes synkOff{0%,46%{opacity:0}58%,88%{opacity:1}100%{opacity:0}}

/* 44px targets, keyed to the POINTER rather than to a width: a touchscreen
   laptop at 1440px needs the same thumb room as a phone, and the burger
   breakpoint says nothing about how the visitor is touching the screen.
   min-height only, so nothing is re-laid-out for a mouse. */
@media (pointer:coarse){
  .burger{padding:11px}                 /* 22px icon + 11px = 44 */
  .lang{min-height:44px}                /* was ~30 */
  .sol-dlg-x{width:44px;height:44px}    /* was 34 */
  .btn{min-height:44px}                 /* 11px padding + .95rem = 40 */
}