/* ═══════════════════════════════════════════════════════════════════════════
   aftaris.com

   A dark room with one green light in it.

   The ground is never flat black — it is a deep green-black with emerald
   light bleeding in from off-frame, and a fine grain over the whole thing so
   the gradients have a surface instead of banding. Cards are glass: a barely
   lit panel floating on that ground, generous corner radius, one hairline
   edge catching the light. The accent is emerald and it glows, because in
   this world it is a light source rather than a swatch.

   Type is geometric and set light. Headlines are not heavy — the drama comes
   from scale, space and the glow, so the letterforms stay calm.

   Dark only, and deliberately: this look has no daylight equivalent. A light
   theme would not be this design with different tokens, it would be a
   different design. The old aftaris.com was dark-only too.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face{font-family:Spartan;src:url(/assets/spartan-latin.woff2) format('woff2');
  font-weight:100 900;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Spartan;src:url(/assets/spartan-latin-ext.woff2) format('woff2');
  font-weight:100 900;font-display:swap;unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Jakarta;src:url(/assets/jakarta-latin.woff2) format('woff2');
  font-weight:200 800;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Jakarta;src:url(/assets/jakarta-latin-ext.woff2) format('woff2');
  font-weight:200 800;font-display:swap;unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  /* the grounds */
  --bg:#0C0C0C; --bg-deep:#080808; --card:#161616; --card-2:#1C1C1C;
  --stage:#0A0A0A;
  /* the one colour */
  --acc:#F7D501; --acc-hi:#FFE44D; --acc-deep:#B89E00;
  --glow:rgba(247,213,1,.5); --glow-soft:rgba(247,213,1,.14);
  /* on the lime panel */
  --on-acc:#0A0A0A;
  /* the type */
  --ink:#FFFFFF; --mid:#A8A8A8; --faint:#8F8F8F;
  /* the edges */
  --glass:rgba(255,255,255,.03); --glass-2:rgba(255,255,255,.05);
  --line:rgba(255,255,255,.09); --line-hi:rgba(255,255,255,.18);
  --edge:rgba(247,213,1,.3);

  --display:Spartan,system-ui,sans-serif;
  --read:Jakarta,system-ui,sans-serif;
  --maxw:1200px; --gut:clamp(20px,5vw,34px);
  --sec-y:clamp(64px,9vw,124px);
  --r:14px; --r-lg:20px; --r-xl:26px; --r-pill:999px;
  --e:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:120px;
  overflow-x:clip;
  /* The ground lives here, on the root, and not on a fixed layer inside body.
     body carries overflow-x:clip, which per the overflow shorthand rules makes
     the other axis clip too — and that clips a fixed child to body's own box.
     The ground then stopped at the bottom of the content and the canvas below
     it showed through in a different black: the edge visible under the
     copyright line. A root background always paints the whole canvas, so it
     cannot be clipped by anything. */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E"),
    radial-gradient(70% 50% at 0% 0%,   rgba(247,213,1,.055) 0%, transparent 58%),
    radial-gradient(60% 46% at 100% 100%, rgba(247,213,1,.04) 0%, transparent 60%),
    #0A0A0A;
  background-attachment:fixed,fixed,fixed,fixed;
  background-repeat:repeat,no-repeat,no-repeat,no-repeat;
}
body{
  margin:0;color:var(--ink);font-family:var(--read);
  font-size:16.5px;line-height:1.65;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:clip;position:relative;background:transparent;
}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:500;line-height:1.12;
  letter-spacing:-.022em;text-wrap:balance}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:8px}
::selection{background:var(--acc);color:#0A0A0A}
.ic{flex:none}
.skip{position:fixed;left:16px;top:-90px;z-index:9999;padding:13px 22px;
  border-radius:var(--r-pill);font-weight:700;background:var(--acc);color:#0A0A0A;
  transition:top .2s var(--e)}
.skip:focus{top:16px}

.wrap{width:min(var(--maxw),calc(100% - (var(--gut) * 2)));margin-inline:auto}
.sec{padding-block:var(--sec-y);position:relative}
.sec--flush{padding-top:clamp(30px,4vw,52px)}

/* the eyebrow: a lit dot and a word */
.reg{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--read);font-size:11.5px;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--acc);
}
.reg::before{
  content:'';width:6px;height:6px;border-radius:50%;background:var(--acc);
  box-shadow:0 0 10px var(--glow), 0 0 22px var(--glow-soft);
}
.lede{font-size:clamp(16.5px,1.5vw,19.5px);line-height:1.68;color:var(--mid);max-width:60ch;
  font-weight:400}
.sec-h{max-width:780px;margin-bottom:clamp(38px,4.6vw,64px)}
.sec-h h2{font-size:clamp(2rem,4vw,3.3rem);margin:16px 0 0;font-weight:500}
.sec-h .lede{margin-top:20px}

/* a hairline of light that separates one part of the room from the next */
.sec + .sec::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(247,213,1,.24) 22%,rgba(255,255,255,.10) 50%,rgba(247,213,1,.24) 78%,transparent);
}

/* ── buttons: outlined pills that hold light ───────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:0 26px;border-radius:var(--r-pill);
  font-family:var(--read);font-size:13.5px;font-weight:600;letter-spacing:.02em;
  color:var(--ink);background:rgba(255,255,255,.04);
  border:1px solid var(--line-hi);
  transition:border-color .22s,background .22s,box-shadow .22s,transform .2s var(--e);
}
.btn:hover{transform:translateY(-1px);border-color:var(--edge);background:rgba(247,213,1,.07)}
.btn .ic{color:var(--acc)}
.btn.primary{
  border-color:var(--acc);color:var(--acc);
  background:linear-gradient(180deg, rgba(247,213,1,.14), rgba(247,213,1,.05));
  box-shadow:0 0 0 1px rgba(247,213,1,.14), 0 8px 30px rgba(247,213,1,.16);
}
.btn.primary:hover{
  color:#0A0A0A;background:var(--acc);
  box-shadow:0 0 34px rgba(247,213,1,.42), 0 10px 40px rgba(247,213,1,.25);
}
.btn.primary:hover .ic{color:#0A0A0A}
.acts{display:flex;flex-wrap:wrap;gap:13px;margin-top:36px}

/* ── the header: one glass capsule ─────────────────────────────────────── */
.top{position:sticky;top:0;z-index:70;padding-top:16px}
.top-in{
  display:flex;align-items:center;gap:18px;min-height:68px;
  padding:0 12px 0 22px;border-radius:var(--r-pill);
  background:rgba(6,20,15,.72);border:1px solid var(--line);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 18px 50px rgba(0,0,0,.5);
}
.brand{display:inline-flex;align-items:center;flex:none;padding:6px 0}
.brand img{height:32px;width:auto}
.nav{display:flex;align-items:center;gap:2px;margin-inline:auto}
.navlink{
  display:inline-flex;align-items:center;gap:7px;min-height:42px;padding:0 16px;
  border-radius:var(--r-pill);font-family:var(--read);font-size:14px;font-weight:500;
  color:var(--mid);background:none;border:0;cursor:pointer;
  transition:color .18s,background .18s;
}
.navlink:hover,.navlink.on{color:var(--ink);background:rgba(255,255,255,.06)}
.navlink .ic{transition:transform .22s var(--e)}
.navtrig[aria-expanded="true"] .ic{transform:rotate(180deg)}
/* the page that is only a page reads as its own light */
.navsolo{
  color:var(--acc);border:1px solid var(--edge);
  background:linear-gradient(180deg, rgba(247,213,1,.12), rgba(247,213,1,.04));
}
.navsolo:hover,.navsolo.on{color:#0A0A0A;background:var(--acc);border-color:var(--acc);
  box-shadow:0 0 26px rgba(247,213,1,.4)}
.navwrap{position:relative}
.navdrop{
  position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%);
  min-width:300px;max-width:min(350px,90vw);padding:9px;
  border-radius:var(--r-lg);background:rgba(8,23,17,.94);border:1px solid var(--line);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 26px 60px rgba(0,0,0,.6);
}
.navdrop a{display:flex;gap:13px;align-items:flex-start;padding:12px;border-radius:14px}
.navdrop a:hover{background:rgba(247,213,1,.08)}
.navdrop b{display:block;font-size:14.5px;font-weight:600;color:var(--ink);font-family:var(--read)}
.navdrop small{display:block;font-size:12.5px;line-height:1.5;color:var(--faint);white-space:normal;margin-top:2px}
.ndrop-i{
  display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:11px;
  background:rgba(247,213,1,.12);color:var(--acc);border:1px solid rgba(247,213,1,.18);
}
.top-r{display:flex;align-items:center;gap:9px;flex:none}
.navcta{
  display:inline-flex;align-items:center;gap:9px;min-height:46px;padding:0 22px;
  border-radius:var(--r-pill);font-family:var(--read);font-size:13.5px;font-weight:600;
  color:var(--acc);border:1px solid var(--edge);
  background:linear-gradient(180deg, rgba(247,213,1,.1), rgba(247,213,1,.03));
}
.navcta:hover{color:#0A0A0A;background:var(--acc);box-shadow:0 0 30px rgba(247,213,1,.4)}
.hx-cta--on{box-shadow:0 0 0 2px rgba(247,213,1,.35),0 0 30px rgba(247,213,1,.3)}
.burger{
  display:none;align-items:center;gap:10px;min-height:46px;padding:0 18px;
  border-radius:var(--r-pill);background:rgba(255,255,255,.05);
  border:1px solid var(--line-hi);color:var(--ink);font-family:var(--read);
  font-size:13.5px;font-weight:600;cursor:pointer;
}
.burger .bl{display:block;width:16px;height:1.6px;background:currentColor;border-radius:2px;
  transition:transform .22s var(--e)}
.burger[aria-expanded="true"] .bl:first-child{transform:translateY(3px) rotate(45deg)}
.burger[aria-expanded="true"] .bl:nth-child(2){transform:translateY(-3px) rotate(-45deg)}

.mpanel{position:absolute;left:0;right:0;top:calc(100% + 10px);z-index:69}
.mpanel-card{
  padding:11px;border-radius:var(--r-lg);background:rgba(8,23,17,.95);
  border:1px solid var(--line);backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 26px 60px rgba(0,0,0,.6);
}
.mrow + .mrow, .mrow + .mrow-a, .mrow-a + .mrow{border-top:1px solid var(--line)}
.mrow-a,.mrow-b{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  min-height:52px;padding:0 14px;background:none;border:0;cursor:pointer;
  font-family:var(--display);font-size:16px;font-weight:500;color:var(--ink);
  border-radius:14px;
}
.mrow-solo{color:var(--acc);border:1px solid var(--edge);margin:8px 0;
  background:linear-gradient(180deg, rgba(247,213,1,.12), rgba(247,213,1,.04))}
.mrow-b .ic{transition:transform .22s var(--e);color:var(--faint)}
.mrow[data-open] .mrow-b .ic{transform:rotate(180deg)}
.mrow-k{display:grid;gap:2px;padding:2px 0 9px}
.mrow-k[hidden]{display:none}
.mrow-k a{display:flex;align-items:center;gap:11px;min-height:44px;padding:0 14px 0 16px;
  border-radius:12px;font-size:14.5px;color:var(--mid)}
.mrow-k a:hover{background:rgba(247,213,1,.08);color:var(--ink)}
.mrow-k a .ic{color:var(--acc)}
.mcta{
  display:flex;align-items:center;justify-content:center;gap:9px;min-height:52px;
  margin-top:9px;border-radius:14px;background:var(--acc);color:#0A0A0A;
  font-size:14px;font-weight:700;box-shadow:0 0 28px rgba(247,213,1,.32);
}
@media (max-width:1040px){
  .nav,.navcta{display:none}
  .burger{display:inline-flex}
  .brand img{height:28px}
  .top-in{min-height:62px;padding-left:18px}
}

/* ── glass: the one card recipe everything else is built from ──────────── */
.glass{
  position:relative;border-radius:var(--r-lg);
  background:linear-gradient(168deg, var(--glass-2), var(--glass) 46%, rgba(255,255,255,.02));
  border:1px solid var(--line);
  backdrop-filter:blur(14px) saturate(130%);
  -webkit-backdrop-filter:blur(14px) saturate(130%);
  box-shadow:0 1px 0 rgba(255,255,255,.07) inset, 0 22px 60px rgba(0,0,0,.42);
  transition:border-color .26s,transform .26s var(--e),box-shadow .26s;
}
.glass:hover{
  transform:translateY(-3px);border-color:var(--edge);
  box-shadow:0 1px 0 rgba(255,255,255,.1) inset, 0 26px 70px rgba(0,0,0,.5),
             0 0 44px rgba(247,213,1,.09);
}
/* the light catching the top-left corner of a panel */
.glass::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(150deg, rgba(247,213,1,.10), transparent 42%);
  opacity:.9;
}

/* ── the hero ──────────────────────────────────────────────────────────── */
.hero{padding-block:clamp(46px,7vw,104px) clamp(60px,8vw,120px);position:relative}
.hero .wrap{position:relative;z-index:1}
.hero::before{
  content:'';position:absolute;inset:-8% -20% auto -30%;height:96%;pointer-events:none;
  background:radial-gradient(58% 66% at 26% 44%, rgba(247,213,1,.20) 0%, rgba(247,213,1,.06) 38%, transparent 68%);
  filter:blur(6px);
}
.hero-copy{max-width:840px}
/* two columns once there is room: the statement on the left, the panel that
   backs it up on the right, both centred against each other */
@media (min-width:961px){
  .hero > .wrap{
    display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
    gap:clamp(38px,4.4vw,76px);align-items:center;
  }
  .hero-copy{max-width:none}
}
.hero h1{
  font-size:clamp(2.6rem,6.4vw,5rem);font-weight:500;letter-spacing:-.032em;
  line-height:1.08;margin:26px 0 0;
}
.hero h1 span{display:block}
.hero h1 .k{
  color:var(--acc);
  text-shadow:0 0 44px rgba(247,213,1,.5), 0 0 90px rgba(247,213,1,.22);
}
.hero .lede{margin-top:26px;font-size:clamp(17px,1.7vw,20.5px);max-width:56ch}
.hero-meta{display:flex;flex-wrap:wrap;gap:9px;margin-top:38px}
.hero-meta span{
  display:inline-flex;align-items:center;gap:8px;padding:8px 14px;
  border-radius:var(--r-pill);border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  font-size:12px;font-weight:500;letter-spacing:.02em;color:var(--mid);
  white-space:nowrap;
}
@media (max-width:430px){.hero-meta span{font-size:11.2px;padding:7px 12px;gap:7px}}
.hero-meta span:first-child::before{
  content:'';width:6px;height:6px;border-radius:50%;background:var(--acc);
  box-shadow:0 0 10px var(--glow), 0 0 20px var(--glow-soft);
}
.hero-meta b{font-weight:600;color:var(--ink)}

/* ── the hero panel ───────────────────────────────────────────────────────
   Static by intent. A still beam of light crosses behind a glass panel that
   simply lists the products Aftaris runs inside. Nothing moves, nothing
   pulses: the hero has to work in a screenshot, in an email, and for someone
   who has switched motion off. */
.hpanel{position:relative;isolation:isolate}
.hpanel-beam{
  position:absolute;z-index:-1;left:-22%;right:-14%;top:16%;height:2px;pointer-events:none;
  background:linear-gradient(90deg,
    rgba(247,213,1,0) 0%, rgba(247,213,1,.5) 24%, #FFEEA0 44%,
    rgba(247,213,1,.5) 62%, rgba(247,213,1,0) 100%);
  filter:blur(.4px)
         drop-shadow(0 0 8px rgba(247,213,1,.85))
         drop-shadow(0 0 26px rgba(247,213,1,.45))
         drop-shadow(0 0 60px rgba(247,213,1,.22));
  transform:rotate(-7deg);
}
.hpanel-in{
  position:relative;padding:clamp(24px,2.6vw,32px);border-radius:var(--r-xl);
  background:linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.028) 48%, rgba(255,255,255,.015));
  border:1px solid var(--line);
  backdrop-filter:blur(18px) saturate(135%);
  -webkit-backdrop-filter:blur(18px) saturate(135%);
  box-shadow:0 1px 0 rgba(255,255,255,.09) inset,
             0 30px 80px rgba(0,0,0,.5),
             0 0 70px rgba(247,213,1,.06);
  overflow:hidden;
}
.hpanel-in::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(152deg, rgba(247,213,1,.11), transparent 46%);
}
.hpanel-h{
  position:relative;z-index:1;display:flex;align-items:center;gap:14px;
  padding-bottom:20px;margin-bottom:6px;border-bottom:1px solid var(--line);
}
.hpanel-h img{width:40px;height:40px;border-radius:12px;flex:none}
.hpanel-h b{display:block;font-family:var(--display);font-weight:500;font-size:1.12rem;
  letter-spacing:-.02em;color:var(--ink)}
.hpanel-h small{display:block;font-size:11.5px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--acc);margin-top:3px}
.hpanel-l{position:relative;z-index:1}
.hpanel-l li{
  display:flex;align-items:center;gap:14px;padding:16px 0;
  border-bottom:1px solid var(--line);
}
.hpanel-l li:last-child{border-bottom:0}
.hpanel-l img{width:26px;height:26px;border-radius:8px;flex:none}
.hpanel-l span{flex:1 1 auto;min-width:0}
.hpanel-l b{display:block;font-family:var(--read);font-weight:600;font-size:14.8px;color:var(--ink)}
.hpanel-l small{display:block;font-size:12.2px;color:var(--faint);margin-top:2px}
.hpanel-l i{
  width:7px;height:7px;border-radius:50%;flex:none;background:var(--acc);
  box-shadow:0 0 10px var(--glow), 0 0 20px var(--glow-soft);
}
.hpanel-f{
  position:relative;z-index:1;margin-top:20px;padding-top:18px;
  border-top:1px solid var(--line);font-size:12.6px;color:var(--faint);
}
@media (max-width:900px){
  .hpanel{margin-top:8px}
  .hpanel-beam{top:10%}
}

/* ── the bento ─────────────────────────────────────────────────────────── */
.bento{display:grid;gap:16px;grid-template-columns:repeat(6,1fr)}
.bento-c{
  grid-column:span 2;padding:30px 28px 32px;border-radius:var(--r-lg);
  position:relative;
  background:linear-gradient(168deg, var(--glass-2), var(--glass) 46%, rgba(255,255,255,.02));
  border:1px solid var(--line);
  backdrop-filter:blur(14px) saturate(130%);-webkit-backdrop-filter:blur(14px) saturate(130%);
  box-shadow:0 1px 0 rgba(255,255,255,.07) inset, 0 22px 60px rgba(0,0,0,.42);
  transition:border-color .26s,transform .26s var(--e),box-shadow .26s;
  overflow:hidden;
}
.bento-c::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(150deg, rgba(247,213,1,.09), transparent 44%);
}
.bento-c:hover{transform:translateY(-3px);border-color:var(--edge);
  box-shadow:0 1px 0 rgba(255,255,255,.1) inset, 0 26px 70px rgba(0,0,0,.5), 0 0 44px rgba(247,213,1,.09)}
.bento--w{grid-column:span 3}
.bento-i{
  position:relative;z-index:1;display:grid;place-items:center;width:46px;height:46px;
  border-radius:14px;background:rgba(247,213,1,.11);color:var(--acc);
  border:1px solid rgba(247,213,1,.2);margin-bottom:22px;
  box-shadow:0 0 22px rgba(247,213,1,.14) inset;
}
.bento-c h3{position:relative;z-index:1;font-size:1.4rem;font-weight:500;letter-spacing:-.02em}
.bento-c p{position:relative;z-index:1;margin-top:13px;color:var(--mid);font-size:15.4px;line-height:1.65}
.bento-note{margin-top:24px;font-size:13.5px;color:var(--faint);max-width:72ch}
@media (max-width:900px){.bento{grid-template-columns:repeat(2,1fr)}.bento-c,.bento--w{grid-column:span 1}}
@media (max-width:560px){.bento{grid-template-columns:1fr}.bento-c,.bento--w{grid-column:span 1}}

/* ── the products ──────────────────────────────────────────────────────── */
.pgrid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.pcard{
  display:flex;flex-direction:column;padding:28px;border-radius:var(--r-lg);position:relative;
  background:linear-gradient(168deg, var(--glass-2), var(--glass) 46%, rgba(255,255,255,.02));
  border:1px solid var(--line);
  backdrop-filter:blur(14px) saturate(130%);-webkit-backdrop-filter:blur(14px) saturate(130%);
  box-shadow:0 1px 0 rgba(255,255,255,.07) inset, 0 22px 60px rgba(0,0,0,.42);
  transition:border-color .26s,transform .26s var(--e),box-shadow .26s;overflow:hidden;
}
.pcard::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(150deg, rgba(247,213,1,.09), transparent 44%)}
.pcard:hover{transform:translateY(-3px);border-color:var(--edge);
  box-shadow:0 1px 0 rgba(255,255,255,.1) inset, 0 26px 70px rgba(0,0,0,.5), 0 0 44px rgba(247,213,1,.09)}
.pcard > *{position:relative;z-index:1}
.pcard-h{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.pcard-logo{width:36px;height:36px;border-radius:11px;flex:none}
.pcard-h h3{font-size:1.24rem;font-weight:500}
.pcard-k{display:block;font-size:11.5px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);margin-top:5px}
.live{
  display:inline-flex;align-items:center;gap:7px;margin-left:auto;flex:none;
  padding:6px 12px;border-radius:var(--r-pill);
  background:rgba(247,213,1,.08);border:1px solid rgba(247,213,1,.2);
  font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--acc);
}
.live i{width:6px;height:6px;border-radius:50%;background:var(--acc);flex:none;
  box-shadow:0 0 9px var(--glow)}
.pcard-s{font-family:var(--display);font-weight:500;font-size:1.06rem;letter-spacing:-.02em;
  color:var(--ink);margin-bottom:10px}
.pcard-b{color:var(--mid);font-size:15px;line-height:1.65}
.pcard-go{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:22px;
  font-size:13px;font-weight:600;color:var(--acc)}
.pcard-go:hover{text-decoration:underline;text-underline-offset:4px}
.pcard--next{background:rgba(255,255,255,.018);border-style:dashed}
.pcard-plus{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;flex:none;
  background:rgba(247,213,1,.11);color:var(--acc);border:1px solid rgba(247,213,1,.2);
  font-family:var(--display);font-weight:500;font-size:20px;line-height:1}

/* ── illustrative exchanges ────────────────────────────────────────────── */
.xgrid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.xcard{
  padding:28px;border-radius:var(--r-lg);position:relative;
  background:linear-gradient(168deg, var(--glass-2), var(--glass) 46%, rgba(255,255,255,.02));
  border:1px solid var(--line);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 1px 0 rgba(255,255,255,.07) inset, 0 22px 60px rgba(0,0,0,.42);
}
.xcard .reg{margin-bottom:18px}
.xq{font-family:var(--display);font-weight:500;font-size:1.1rem;letter-spacing:-.02em;
  line-height:1.4;color:var(--ink)}
.xa{margin-top:16px;padding-top:16px;border-top:1px solid var(--line);
  color:var(--mid);font-size:15px;line-height:1.65}
.xnote{margin-top:24px;font-size:13.5px;color:var(--faint);max-width:72ch}

/* ── the ladder: stadium rows, lit from the left ───────────────────────────
   Each row is a capsule rather than a table line, alternately inset, with a
   thread of light running into the first one. Reads down the page like a
   sequence instead of a spreadsheet. */
.lad{display:grid;gap:16px;position:relative}
.lad-r{
  position:relative;display:grid;
  grid-template-columns:auto minmax(0,.9fr) minmax(0,1.5fr) auto;
  gap:18px 26px;align-items:center;
  padding:26px 34px;border-radius:var(--r-pill);
  background:linear-gradient(100deg, rgba(247,213,1,.14), rgba(247,213,1,.05) 42%, rgba(255,255,255,.03));
  border:1px solid rgba(247,213,1,.22);
  box-shadow:0 1px 0 rgba(255,255,255,.07) inset, 0 20px 54px rgba(0,0,0,.4),
             0 0 40px rgba(247,213,1,.07);
  transition:border-color .26s,box-shadow .26s,transform .26s var(--e);
}
.lad-r:hover{border-color:rgba(247,213,1,.42);transform:translateY(-2px);
  box-shadow:0 1px 0 rgba(255,255,255,.1) inset, 0 24px 62px rgba(0,0,0,.48), 0 0 56px rgba(247,213,1,.14)}
.lad-r:nth-child(even){margin-left:clamp(0px,4vw,64px)}
.lad-r:nth-child(odd){margin-right:clamp(0px,4vw,64px)}
.lad-n{
  display:grid;place-items:center;width:44px;height:44px;border-radius:50%;flex:none;
  background:rgba(247,213,1,.12);border:1px solid rgba(247,213,1,.26);
  font-family:var(--display);font-weight:500;font-size:13.5px;color:var(--acc);
}
.lad-r h3{font-size:1.28rem;font-weight:500}
.lad-r p{color:var(--mid);font-size:15.2px;line-height:1.6}
.lad-s{
  padding:7px 15px;border-radius:var(--r-pill);white-space:nowrap;
  font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  background:rgba(255,255,255,.05);color:var(--mid);border:1px solid var(--line);
}
.lad-s[data-s="Established"],.lad-s[data-s="Active"]{
  background:var(--acc);color:#0A0A0A;border-color:var(--acc);
  box-shadow:0 0 24px rgba(247,213,1,.35);
}
@media (max-width:820px){
  .lad-r{grid-template-columns:auto minmax(0,1fr);gap:10px 16px;
    padding:24px 26px;border-radius:var(--r-xl)}
  .lad-r p{grid-column:2}
  .lad-s{grid-column:2;justify-self:start}
  .lad-r:nth-child(even),.lad-r:nth-child(odd){margin-inline:0}
}

/* ── questions ─────────────────────────────────────────────────────────── */
.faq{display:grid;gap:12px;max-width:900px}
.faq details{
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(168deg, var(--glass-2), var(--glass) 60%);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.faq details[open]{border-color:var(--edge)}
.faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  min-height:62px;padding:16px 26px;cursor:pointer;list-style:none;
}
.faq summary h3{font-family:var(--display);font-weight:500;font-size:1.06rem;letter-spacing:-.018em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:'';flex:none;width:11px;height:11px;border-right:1.6px solid var(--acc);
  border-bottom:1.6px solid var(--acc);transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .24s var(--e);
}
.faq details[open] summary::after{transform:rotate(225deg) translate(-3px,-3px)}
.faq summary:hover{background:rgba(247,213,1,.05)}
.faq p{padding:0 26px 24px;color:var(--mid);font-size:15.4px;max-width:76ch}

/* ── the band ──────────────────────────────────────────────────────────── */
.band .wrap{position:relative}
.band-in{
  display:flex;flex-wrap:wrap;align-items:center;gap:30px 44px;justify-content:space-between;
  padding:clamp(34px,4.4vw,56px) clamp(28px,4vw,54px);border-radius:var(--r-xl);
  background:linear-gradient(168deg, var(--glass-2), var(--glass) 46%, rgba(255,255,255,.02));
  border:1px solid var(--line);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 1px 0 rgba(255,255,255,.07) inset, 0 26px 70px rgba(0,0,0,.45);
}
.band-t{max-width:660px}
.band-t h2{font-size:clamp(1.8rem,3.3vw,2.7rem);font-weight:500;margin:14px 0 0}
.band-t p{margin-top:16px;color:var(--mid);font-size:16.5px}
.band-a{display:flex;flex-wrap:wrap;gap:13px}
/* the loud one, used once per page: the room's light turned up */
.band--hot .band-in{
  background:
    radial-gradient(120% 140% at 8% 0%, rgba(247,213,1,.34), transparent 58%),
    linear-gradient(150deg, rgba(247,213,1,.20), rgba(247,213,1,.06) 54%, rgba(255,255,255,.03));
  border-color:rgba(247,213,1,.36);
  box-shadow:0 1px 0 rgba(255,255,255,.12) inset, 0 26px 80px rgba(0,0,0,.5),
             0 0 80px rgba(247,213,1,.14);
}
.band--hot .band-t h2{color:#FFFBEA}

/* ── the masthead ──────────────────────────────────────────────────────── */
.pm{padding-bottom:clamp(46px,5.4vw,80px);position:relative}
.pm h1{font-size:clamp(2.2rem,5vw,3.9rem);font-weight:500;margin:20px 0 0;max-width:17ch;
  letter-spacing:-.03em}
.pm .lede{margin-top:22px}
.crumbs{margin-bottom:24px}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:9px;font-size:12.5px;color:var(--faint)}
.crumbs a:hover{color:var(--acc)}
.crumbs i{font-style:normal;opacity:.45}
.mast-note{margin-top:26px;font-size:13.5px;color:var(--faint);max-width:68ch}

/* ── long-form ─────────────────────────────────────────────────────────── */
.prose{max-width:780px}
.pr + .pr{margin-top:clamp(36px,4vw,56px);padding-top:clamp(36px,4vw,56px);
  border-top:1px solid var(--line)}
.pr h2{font-size:clamp(1.45rem,2.5vw,2rem);font-weight:500}
.pr p{margin-top:16px;color:var(--mid);font-size:16.2px;line-height:1.7}
.pr a{color:var(--acc);text-decoration:underline;text-underline-offset:3px}
.pr a:hover{color:var(--acc-hi)}
.prl{margin-top:20px;display:grid;gap:12px}
.prl li{display:flex;gap:12px;align-items:flex-start;color:var(--mid);font-size:16px;line-height:1.62}
.prl li .ic{flex:none;margin-top:5px;color:var(--acc)}
.updated{margin-top:clamp(36px,4vw,56px);padding-top:24px;border-top:1px solid var(--line);
  font-size:13px;color:var(--faint)}

.facts{display:grid;max-width:660px;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line);
  background:linear-gradient(168deg, var(--glass-2), var(--glass) 60%)}
.facts div{display:flex;justify-content:space-between;gap:22px;padding:18px 26px}
.facts div + div{border-top:1px solid var(--line)}
.facts dt{font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.facts dd{margin:0;font-family:var(--display);font-weight:500;font-size:1.02rem;color:var(--ink);text-align:right}

.routes{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.route{
  display:flex;flex-direction:column;padding:30px 28px;border-radius:var(--r-lg);position:relative;
  background:linear-gradient(168deg, var(--glass-2), var(--glass) 46%, rgba(255,255,255,.02));
  border:1px solid var(--line);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 1px 0 rgba(255,255,255,.07) inset, 0 22px 60px rgba(0,0,0,.42);
  transition:border-color .26s,transform .26s var(--e);
}
.route:hover{transform:translateY(-3px);border-color:var(--edge)}
.route .reg{margin-bottom:18px}
.route h3{font-size:1.28rem;font-weight:500}
.route p{margin-top:13px;color:var(--mid);font-size:15.2px;line-height:1.65}
.route .btn{margin-top:24px;align-self:flex-start}

/* ── the footer ────────────────────────────────────────────────────────── */
.foot{padding-block:clamp(52px,6vw,84px);position:relative;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.42))}
.foot::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(247,213,1,.3) 30%,rgba(247,213,1,.3) 70%,transparent);
}
.foot-in{display:grid;gap:clamp(34px,4vw,68px);grid-template-columns:minmax(0,1.1fr) minmax(0,2fr)}
.foot-brand img{height:42px;width:auto;margin-bottom:20px}
.foot-brand p{color:var(--faint);font-size:14.6px;line-height:1.7;max-width:46ch}
.foot-nav{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.foot-col h3{font-family:var(--read);font-size:11px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--acc);margin-bottom:16px}
.foot-col a{display:block;padding:5px 0;font-size:14.4px;color:var(--mid)}
.foot-col a:hover{color:var(--ink)}
.legal{padding-block:22px;border-top:1px solid var(--line);background:rgba(0,0,0,.34)}
.legal-in{display:flex;flex-wrap:wrap;gap:6px 28px;justify-content:space-between;
  font-size:12.6px;color:var(--faint)}
@media (max-width:880px){
  .foot-in{grid-template-columns:1fr;gap:36px}
  .foot-brand img{height:48px}
  .foot-nav{grid-template-columns:repeat(4,1fr);gap:14px}
  .foot-col h3{font-size:10px;letter-spacing:.13em}
  .foot-col a{font-size:13.2px;padding:6px 0}
  .legal-in{flex-direction:column;gap:5px}
}

/* ── the opening ──────────────────────────────────────────────────────────
   Five seconds, once per session. Driven by CSS with fill-mode forwards, so
   it lifts on time whether or not the script runs. */
.intro{
  position:fixed;inset:0;z-index:9000;display:grid;place-items:center;
  padding:clamp(20px,6vw,64px);
  background:
    radial-gradient(90% 62% at 6% 10%, rgba(247,213,1,.20) 0%, transparent 62%),
    radial-gradient(78% 58% at 94% 90%, rgba(247,213,1,.15) 0%, transparent 66%),
    radial-gradient(120% 90% at 50% 0%, #141414 0%, #0A0A0A 46%, #080808 100%);
  animation:intro-lift .72s cubic-bezier(.76,0,.24,1) 4.25s forwards;
}
.intro::after{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes intro-lift{
  0%{clip-path:inset(0 0 0 0);opacity:1}
  99%{clip-path:inset(0 0 100% 0);opacity:1}
  100%{clip-path:inset(0 0 100% 0);opacity:0;visibility:hidden;pointer-events:none}
}
.intro-in{position:relative;width:min(100%,900px);
  animation:intro-push .45s cubic-bezier(.4,0,.2,1) 4.05s forwards}
@keyframes intro-push{to{transform:translateY(-16px) scale(1.03);opacity:0}}
.intro-mk{display:block;width:auto;height:clamp(26px,3.6vw,34px);
  margin:0 0 clamp(22px,3.6vw,36px);opacity:0;
  animation:intro-mk .7s cubic-bezier(.16,1,.3,1) .1s forwards}
@keyframes intro-mk{from{opacity:0;transform:translateY(8px)}to{opacity:.95;transform:none}}
.intro-l{
  margin:0;font-family:var(--display);font-weight:500;
  font-size:clamp(1.9rem,7vw,3.9rem);line-height:1.12;letter-spacing:-.03em;
  color:#FFFFFF;opacity:0;
  animation:intro-line .84s cubic-bezier(.16,1,.3,1) forwards;
}
.intro-l.l1{animation-delay:.35s}
.intro-l.l2{animation-delay:.95s}
.intro-l.l3{animation-delay:1.55s;color:#F7D501;
  text-shadow:0 0 40px rgba(247,213,1,.6), 0 0 90px rgba(247,213,1,.28)}
@keyframes intro-line{
  from{opacity:0;transform:translateY(.4em);filter:blur(10px)}
  60%{opacity:1}
  to{opacity:1;transform:none;filter:blur(0)}
}
.intro-rule{
  display:block;height:2px;margin-top:clamp(24px,3.6vw,38px);transform-origin:0 50%;
  border-radius:2px;
  background:linear-gradient(90deg,#F7D501,rgba(247,213,1,0));
  box-shadow:0 0 16px rgba(247,213,1,.6);
  transform:scaleX(0);animation:intro-rule .9s cubic-bezier(.16,1,.3,1) 2.2s forwards;
}
@keyframes intro-rule{to{transform:scaleX(1)}}
.intro-skip{
  position:absolute;right:clamp(14px,4vw,32px);bottom:clamp(14px,4vw,32px);
  min-height:44px;padding:10px 20px;border-radius:var(--r-pill);cursor:pointer;
  font-family:var(--read);font-size:13px;font-weight:500;
  color:rgba(255,255,255,.7);background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.16);
  opacity:0;animation:intro-mk .5s ease 1.4s forwards;
}
.intro-skip:hover{color:#FFFFFF;border-color:rgba(247,213,1,.4)}
.intro-skip:focus-visible{outline:2px solid #F7D501;outline-offset:3px}
.intro--gone{animation:intro-cut .34s ease forwards}
@keyframes intro-cut{to{opacity:0;visibility:hidden;pointer-events:none}}
.no-intro .intro{display:none}

/* ── between pages ─────────────────────────────────────────────────────── */
.cur{
  position:fixed;inset:0;z-index:8500;pointer-events:none;
  background:
    radial-gradient(100% 70% at 6% 20%, rgba(247,213,1,.12) 0%, transparent 60%),
    radial-gradient(120% 90% at 50% 0%, #141414 0%, #0A0A0A 46%, #080808 100%);
  animation:cur-lift 2s cubic-bezier(.72,0,.22,1) forwards;
}
.cur::before{
  content:'';position:absolute;left:50%;top:50%;width:48px;height:2px;
  margin:-1px 0 0 -24px;border-radius:99px;transform-origin:50% 50%;
  background:linear-gradient(90deg,rgba(247,213,1,0),#F7D501,rgba(247,213,1,0));
  box-shadow:0 0 20px rgba(247,213,1,.7);
  animation:cur-pulse 1.1s ease-in-out infinite;
}
@keyframes cur-pulse{0%,100%{transform:scaleX(.28);opacity:.4}50%{transform:scaleX(1);opacity:1}}
@keyframes cur-lift{
  0%,58%{clip-path:inset(0 0 0 0);opacity:1}
  99%{clip-path:inset(0 0 100% 0);opacity:1}
  100%{clip-path:inset(0 0 100% 0);opacity:0;visibility:hidden}
}
.cur--early{animation:cur-fast .5s cubic-bezier(.72,0,.22,1) forwards}
@keyframes cur-fast{
  0%{clip-path:inset(0 0 0 0);opacity:1}
  99%{clip-path:inset(0 0 100% 0);opacity:1}
  100%{clip-path:inset(0 0 100% 0);opacity:0;visibility:hidden}
}
.cur--out{animation:cur-drop .3s cubic-bezier(.4,0,.2,1) forwards;
  clip-path:inset(100% 0 0 0);opacity:1;visibility:visible}
@keyframes cur-drop{to{clip-path:inset(0 0 0 0)}}

/* ── the first screen on a phone ───────────────────────────────────────── */
@media (max-width:900px){
  .hero{min-height:100svh;padding-bottom:calc(var(--sec-y) + 20px)}
  .hero-copy{min-height:min(calc(100svh - 112px), 700px);
    display:flex;flex-direction:column;justify-content:center}
  .hero h1{font-size:clamp(2.4rem,9.6vw,3.3rem)}
}
.scrolldn{display:none}
.sd-rail{position:relative;display:block;width:1px;height:38px;
  background:linear-gradient(180deg,transparent,var(--line-hi) 20%,var(--line-hi) 76%,transparent)}
.sd-rail i{
  position:absolute;left:50%;top:2px;width:5px;height:5px;margin-left:-2.5px;
  border-radius:50%;background:var(--acc);box-shadow:0 0 12px var(--glow);
  animation:sd-run 2.3s cubic-bezier(.55,0,.45,1) infinite;
}
@keyframes sd-run{
  0%{transform:translateY(0);opacity:0}16%{opacity:1}70%{opacity:1}
  100%{transform:translateY(31px);opacity:0}
}
.scrolldn:focus-visible{outline:2px solid var(--acc);outline-offset:4px;border-radius:6px}
@media (max-width:900px){
  .scrolldn{
    position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 14px);
    transform:translateX(-50%);z-index:60;
    display:flex;align-items:flex-start;justify-content:center;
    width:44px;height:44px;padding:0;border:0;background:none;
    transition:opacity .3s ease,transform .3s ease;
  }
  .scrolldn[data-off]{opacity:0;pointer-events:none;transform:translate(-50%,10px)}
}

/* ── when less motion, or more contrast, is asked for ──────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .intro,.cur{display:none !important}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .arc .arc-d{display:none}
  .sd-rail i{animation:none;top:16px;opacity:1}
}
@media (prefers-contrast:more){
  :root{--mid:#D7E5DE;--faint:#BDCFC6;--line:rgba(255,255,255,.3);--line-hi:rgba(255,255,255,.48)}
  html{background:#0A0A0A}

  .glass,.bento-c,.pcard,.xcard,.route,.band-in,.faq details{backdrop-filter:none;background:#161616}
  .glass::after,.bento-c::after,.pcard::after{display:none}
  .hero h1 .k,.intro-l.l3{text-shadow:none}
}


/* ═══════════════════════════════════════════════════════════════════════════
   THE HOME PAGE

   One dark card on a black page. The artwork is the hero's background, full
   bleed, framed so the figure sits right of centre and the copy lands on the
   black she was composed against. Under it, a strip of four capabilities
   divided by hairlines, then a bar naming what Aftaris runs inside.
   ═══════════════════════════════════════════════════════════════════════════ */
.hx{
  width:min(1440px,calc(100% - 40px));margin-inline:auto;
  margin-block:clamp(14px,2vw,26px);
  border-radius:clamp(20px,2vw,30px);overflow:hidden;
  background:#080808;border:1px solid rgba(255,255,255,.07);
  box-shadow:0 50px 130px rgba(0,0,0,.6);
}

/* ── the header ────────────────────────────────────────────────────────── */
.hx-top{
  position:relative;z-index:5;display:flex;align-items:center;gap:24px;
  padding:16px clamp(20px,2.2vw,34px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.hx-brand{display:inline-flex;align-items:center;flex:none}
/* the supplied lockup, used as supplied — no recolouring, no rebuilt
   wordmark beside it. The tagline is part of the artwork, so it needs enough
   height to stay legible. */
.hx-brand img{height:clamp(30px,2.6vw,38px);width:auto}
.hx-nav{display:flex;align-items:center;gap:6px;margin-inline:auto}
.hx-nav a{
  padding:10px 16px;border-radius:var(--r-pill);
  font-size:14px;font-weight:500;color:#B4B4B4;
  transition:color .18s,background .18s;
}
.hx-nav a:hover,.hx-nav a[aria-current="page"]{color:#fff;background:rgba(255,255,255,.06)}
.hx-cta{
  display:inline-flex;align-items:center;gap:10px;flex:none;
  min-height:46px;padding:0 22px;border-radius:var(--r-pill);
  background:var(--acc);color:#0A0A0A;font-size:14px;font-weight:700;
  transition:transform .2s var(--e),box-shadow .2s;
}
.hx-cta:hover{transform:translateY(-1px);box-shadow:0 12px 34px rgba(247,213,1,.32)}
.hx-burger{display:none}

/* ── the hero, with the artwork behind it ──────────────────────────────── */
.hx-stage{
  position:relative;isolation:isolate;
  /* Taller. At 486px against a 1383px width the stage was 2.85:1 while the
     picture is 1.78:1, so `cover` was throwing away 37% of her — and the copy,
     bottom-aligned in a box too short for it, was overflowing the top edge
     (the eyebrow sat five pixels above the hero). */
  min-height:clamp(560px,46vw,760px);
  /* Two columns, both vertically centred: the statement on the left, the
     readout and the panel as one rail on the right. Nothing is absolutely
     positioned, so nothing can overlap or overflow. */
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,370px);
  align-items:center;gap:clamp(24px,3vw,52px);
  padding:clamp(32px,3.6vw,56px) clamp(20px,2.2vw,34px);
  background:#000;
}
.hx-media{position:absolute;inset:0;z-index:0;line-height:0;overflow:hidden}
.hx-media img{
  width:100%;height:100%;display:block;
  /* a taller stage crops far less; 18% keeps the top of her head in and
     takes what is left off the bottom of her chest */
  object-fit:cover;object-position:var(--focus,58% 18%);
}
.hx-media::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:22%;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,0),#000 92%);
}
/* the copy's ground. The picture is already black on its left, this only
   guarantees it at crops where the glow reaches further in. */
.hx-stage::before{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(94deg,#000 0%,rgba(0,0,0,.93) 24%,rgba(0,0,0,.62) 40%,rgba(0,0,0,0) 60%);
}
.hx-stage::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(0deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,0) 34%);
}
.hx-copy{position:relative;z-index:2;max-width:560px}
.hx-eye{
  display:inline-flex;align-items:center;gap:11px;
  font-size:11.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:#D6D6D6;
}
.hx-eye::before{
  content:'';width:7px;height:7px;border-radius:50%;background:var(--acc);
  box-shadow:0 0 12px rgba(247,213,1,.8);
}
.hx-copy h1{
  margin:clamp(18px,2vw,26px) 0 0;
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(2.9rem,6.4vw,var(--h1max,5.6rem));line-height:.86;letter-spacing:-.048em;color:#fff;
}
.hx-copy h1 span{display:block;white-space:nowrap}
.hx-copy h1 .y{color:var(--acc);text-shadow:0 0 50px rgba(247,213,1,.34)}
.hx-lede{
  position:relative;margin:clamp(20px,2.2vw,30px) 0 0;padding-left:18px;
  max-width:40ch;font-size:clamp(14px,1.15vw,16px);line-height:1.55;color:#CFCFCF;
}
.hx-lede::before{
  content:'';position:absolute;left:0;top:2px;bottom:2px;width:3px;border-radius:2px;
  background:var(--acc);
}
.hx-acts{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(24px,2.6vw,34px)}
.hx-btn{
  display:inline-flex;align-items:center;gap:12px;min-height:52px;padding:0 26px;
  border-radius:var(--r-pill);font-size:14px;font-weight:600;
  border:1.5px solid transparent;transition:transform .2s var(--e),box-shadow .2s,background .2s;
}
.hx-btn--y{background:var(--acc);color:#0A0A0A;font-weight:700}
.hx-btn--y .ic{color:#0A0A0A}
.hx-btn--y:hover{transform:translateY(-2px);box-shadow:0 16px 42px rgba(247,213,1,.3)}
.hx-btn--o{border-color:rgba(255,255,255,.34);color:#fff;background:rgba(255,255,255,.03)}
.hx-btn--o .ic{color:var(--acc)}
.hx-btn--o:hover{border-color:#fff;background:rgba(255,255,255,.09);transform:translateY(-2px)}

/* the annotation, top right — the reference's technical readout, carrying
   what is actually true about Aftaris instead of a model name */
/* the right rail: the readout stacked directly on the panel, as one column
   rather than two things pinned to opposite corners of the hero */
.hx-rail{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:stretch;gap:16px;
}

/* In the rail, above the panel — it used to be pinned to the opposite corner
   of the hero from the panel, which is what left a gap between them. */
.hx-note{
  position:relative;z-index:2;width:100%;padding-left:22px;
}
.hx-note::before{
  content:'';position:absolute;left:0;top:7px;width:12px;height:1px;background:rgba(247,213,1,.6);
}
.hx-note::after{
  content:'';position:absolute;left:-1px;top:4.5px;width:6px;height:6px;border-radius:50%;
  background:var(--acc);box-shadow:0 0 10px rgba(247,213,1,.8);
}
.hx-note b{
  display:block;font-family:var(--read);font-size:11px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--acc);
}
.hx-note span{display:block;margin-top:7px;font-size:12.5px;color:#B4B4B4}

/* ── the panel, bottom right ──────────────────────────────────────────────
   The reference puts a live telemetry card here — terabytes processed,
   models deployed, predictions per day, an accuracy figure. None of that is
   a published fact about Aftaris, and two of those rows would also describe
   how it is built, which this site never does. Same component, same four
   rows, carrying what is true: where it runs, and that it runs there today. */
.hx-panel{
  position:relative;z-index:3;width:100%;padding:16px 17px;border-radius:18px;
  background:rgba(14,14,14,.86);border:1px solid rgba(255,255,255,.11);
  backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%);
  box-shadow:0 1px 0 rgba(255,255,255,.07) inset, 0 30px 70px rgba(0,0,0,.6);
}
.hx-panel-h{
  display:flex;align-items:center;gap:10px;padding-bottom:13px;
  border-bottom:1px solid rgba(255,255,255,.09);
  font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#E6E6E6;
}
.hx-panel-h::before{
  content:'';width:7px;height:7px;border-radius:50%;background:var(--acc);flex:none;
  box-shadow:0 0 10px rgba(247,213,1,.8);
}
/* Two across rather than four down. Half the height means the readout sitting
   above it on the desktop hero is no longer covered, and on a phone it stops
   being a long column of single rows. */
.hx-rows{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;background:rgba(255,255,255,.07);
  margin:0 -17px;padding:1px 0;
}
.hx-row{
  display:flex;align-items:center;gap:10px;padding:12px 17px;
  background:rgba(14,14,14,.92);min-width:0;
}
.hx-row-i{
  display:grid;place-items:center;width:32px;height:32px;flex:none;border-radius:10px;
  background:rgba(247,213,1,.08);border:1px solid rgba(247,213,1,.24);
  overflow:hidden;
}
.hx-row:last-child:nth-child(odd){grid-column:1/-1}
.hx-row-i{color:var(--acc)}
/* A product mark is its own square tile, so it fills the chip rather than
   floating inside it as a dark smudge. */
.hx-row-i--mk{background:none;border-color:rgba(255,255,255,.14);padding:0}
.hx-row-i--mk img{width:100%;height:100%;display:block;object-fit:cover;border-radius:9px}
.hx-row-t{flex:1 1 auto;min-width:0}
.hx-row-t small{display:block;font-size:10.8px;line-height:1.3;color:#9C9C9C;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.hx-row-t b{display:block;margin-top:1px;font-family:var(--display);font-weight:600;
  font-size:.98rem;letter-spacing:-.02em;color:#fff}
.hx-row-s{
  flex:none;display:inline-flex;align-items:center;gap:6px;
  font-size:11px;font-weight:600;color:#3FD97F;
}
.hx-row-s i{width:6px;height:6px;border-radius:50%;background:#3FD97F;flex:none;
  box-shadow:0 0 8px rgba(63,217,127,.7)}
.hx-panel-f{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:0;padding-top:12px;border-top:1px solid rgba(255,255,255,.09);
  font-size:11.5px;color:#9C9C9C;
}
.hx-panel-f b{display:inline-flex;align-items:center;gap:7px;font-size:10.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--acc)}

/* ── the four capabilities ─────────────────────────────────────────────── */
.hx-feat{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  background:#0C0C0C;border-top:1px solid rgba(255,255,255,.08);
}
/* THE FOUR ─────────────────────────────────────────────────────────────────
   An index, not four boxes. The mark sits on the same line as the category
   and the title — the pattern the notes below use — with the numeral set
   large and ghosted in the corner and the body on a rule beneath.

   The symmetry is structural rather than hopeful: the head is a fixed-height
   row and the title a fixed two-line box, so all four line up on every line
   whatever the titles do. */
.hx-f{
  position:relative;min-width:0;overflow:hidden;
  display:grid;grid-template-columns:auto minmax(0,1fr);
  grid-template-areas:'icon head' 'body body';
  /* a fixed head row. Left to `auto` the four rows resolved to different
     heights — one of them ten pixels taller than the rest — and the bodies
     under them stopped lining up. Fixed, they cannot drift. */
  grid-template-rows:58px auto;
  align-items:start;gap:0 13px;
  padding:clamp(20px,1.9vw,26px) clamp(18px,1.7vw,26px);
  transition:background .24s var(--e);
}
.hx-f:hover{background:rgba(247,213,1,.028)}
.hx-f + .hx-f::before{
  content:'';position:absolute;left:0;top:clamp(16px,1.6vw,22px);bottom:clamp(16px,1.6vw,22px);
  width:1px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.14) 18%,
    rgba(255,255,255,.14) 82%,transparent);
}
.hx-f-n{
  position:absolute;top:10px;right:14px;pointer-events:none;
  font-family:var(--display);font-weight:800;font-size:clamp(28px,2.8vw,38px);
  line-height:1;letter-spacing:-.05em;color:rgba(255,255,255,.06);
  transition:color .24s var(--e);
}
.hx-f:hover .hx-f-n{color:rgba(247,213,1,.26)}
.hx-f-i{
  grid-area:icon;position:relative;z-index:1;align-self:start;
  display:grid;place-items:center;width:44px;height:44px;border-radius:12px;
  border:1px solid rgba(247,213,1,.34);background:rgba(247,213,1,.05);color:var(--acc);
  transition:border-color .24s var(--e),background .24s var(--e);
}
.hx-f:hover .hx-f-i{border-color:rgba(247,213,1,.6);background:rgba(247,213,1,.1)}
/* the head starts at the top of the row, so the mark sits level with the
   category line rather than floating against a centred block */
.hx-f-h{grid-area:head;position:relative;z-index:1;min-width:0;align-self:start}
.hx-f-k{
  display:block;line-height:1;padding-top:3px;font-size:9.5px;font-weight:700;letter-spacing:.17em;
  text-transform:uppercase;color:var(--acc);
}
.hx-f h2{
  margin:3px 0 0;min-width:0;
  font-family:var(--display);font-weight:600;
  font-size:clamp(.95rem,1.08vw,1.06rem);line-height:1.24;letter-spacing:-.022em;color:#fff;
  height:2.48em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
}
.hx-f p{
  grid-area:body;position:relative;z-index:1;
  margin-top:15px;padding-top:14px;border-top:1px solid rgba(255,255,255,.09);
  font-size:12.8px;line-height:1.58;color:#9E9E9E;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
}
@media (prefers-reduced-motion:reduce){
  .hx-f,.hx-f-n,.hx-f-i{transition:none}
}

/* ── what it runs inside ──────────────────────────────────────────────────
   The reference fills this bar with six invented customer logos under
   "trusted by innovators worldwide". Aftaris has no such customers to name.
   The bar keeps its job — showing what is behind the product — with the real
   marks of the businesses Aftermath operates and Aftaris actually runs in.

   Same marquee AFTech uses: the track holds two identical sets, so shifting
   it exactly -50% lands set two where set one began. Seamless, and no
   JavaScript. --h and --o are tuned per mark, because a dense badge and airy
   line art need different treatment to carry the same optical weight. */
.hx-trust{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px clamp(20px,2.4vw,40px);
  padding:18px clamp(20px,2.2vw,34px);
  background:#0A0A0A;border-top:1px solid rgba(255,255,255,.08);
}
.hx-trust-l{
  display:inline-flex;align-items:center;gap:11px;flex:none;
  font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#8A8A8A;
}
.hx-trust-l::after{
  content:'';width:6px;height:6px;border-radius:50%;background:var(--acc);
  box-shadow:0 0 9px rgba(247,213,1,.7);
}
.marq{
  flex:1 1 320px;min-width:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.marq-track{display:flex;width:max-content;animation:marq 34s linear infinite}
.marq:hover .marq-track,.marq:focus-within .marq-track{animation-play-state:paused}
.marq-set{display:flex;flex:none}
/* margin-inline, not gap, so the spacing is identical across the set-to-set seam */
.trust-cell{
  flex:none;width:186px;height:66px;margin-inline:7px;
  display:grid;place-items:center;padding-inline:16px;border-radius:12px;
  border:1px solid rgba(255,255,255,.08);background:#101010;
  transition:border-color .2s var(--e);
}
.trust-cell img{
  height:var(--h);width:auto;max-width:100%;object-fit:contain;display:block;
  filter:grayscale(1) brightness(1.25);opacity:var(--o);
  transition:filter .2s var(--e),opacity .2s var(--e);
}
a.trust-cell:hover,a.trust-cell:focus-visible{border-color:var(--acc)}
a.trust-cell:hover img,a.trust-cell:focus-visible img{filter:none;opacity:1}
/* a touch screen never hovers, so a grey-until-hover strip would stay grey
   forever for most visitors — give those devices the marks outright */
@media (hover:none),(pointer:coarse){
  .trust-cell img{filter:none;opacity:.95}
}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (max-width:640px){
  .trust-cell{width:142px;height:48px;padding-inline:11px;margin-inline:4px;border-radius:10px}
  .marq-track{animation-duration:26s}
}
/* motion-sensitive visitors get a static, wrapped row instead */
@media (prefers-reduced-motion:reduce){
  .marq{mask-image:none;-webkit-mask-image:none}
  .marq-track{animation:none;width:100%;justify-content:flex-start;flex-wrap:wrap}
  .marq-set{flex-wrap:wrap}
  .marq-set[aria-hidden="true"]{display:none}
}

/* ── centred, and sized to fit the window ────────────────────────────────
   Three things were wanted at once: the picture uncropped, the card whole on
   screen, and the card centred. They are not independent. If the hero must
   keep the picture's 16:9 — which is the only way nothing is cropped top or
   bottom — then the hero's height follows its width, and the card's total
   height follows from that. So the card's WIDTH is derived from the window's
   height instead of the other way round: whatever height is left after the
   header, the strip, the bar and the margins, multiplied by 16/9.

   --chrome is everything in the card that is not the hero. On a tall screen
   the 1440px cap wins and this does nothing. */
@media (min-width:861px){
  body{
    min-height:100svh;display:flex;flex-direction:column;
    /* NOT justify-content:center — once the card is taller than the window a
       centred flex child overflows equally in both directions and the top of
       it becomes unscrollable. Auto margins centre it when there is room and
       simply stop when there is not. */
    justify-content:flex-start;
    padding-block:26px;
  }
  /* No scaling. The card is laid out at its designed size and the page
     scrolls, like any other site — compressing six sections into one screen
     was costing legibility and touch-target size for a scroll nobody minded.
     The auto margin still centres it on a screen tall enough to hold it. */
  .fit{
    margin-block:auto;
    display:flex;flex-direction:column;gap:14px;
  }
  .hx{width:min(1440px,calc(100% - 40px));margin-block:0}
  /* matching ratios, so `cover` is an exact fit: nothing cropped, no letterbox */
  /* The hero is a band whose height follows the window, not the picture's
     ratio. A 16:9 hero at full card width is 56% of that width in height —
     778px on a 1400px card — which on a 900px screen leaves nothing for
     anything else. `cover` crops it to the band, and because it fills there
     is no edge to see; the crop is taken off the empty black above her. */
  /* The hero is a band rather than the picture's full 16:9 — `cover` crops it
     to the band, and because it fills there is no edge to see; the crop comes
     off the empty black above her head. It was held short to help the card fit
     one screen; with that constraint gone it takes a proper hero height. */
  /* 54svh was 486px on a 900px screen — a 2.85:1 stage against a 1.78:1
     picture, which threw away 38% of her and left the copy taller than the
     box it sat in. 72svh brings the crop down to about 17% and gives the
     two columns room to centre. */
  .hx-stage{aspect-ratio:auto;height:clamp(560px,72svh,820px);min-height:0}
  .hx-legal{width:min(1440px,calc(100% - 40px));margin-bottom:0}
}


/* ── as it narrows ─────────────────────────────────────────────────────── */
@media (max-width:1280px){
  .hx{max-height:none}
  .hx-stage{flex:none;min-height:0;padding-bottom:clamp(28px,3vw,44px)}
  .hx-panel{position:static;width:auto;max-width:340px;margin-top:24px}
  .hx-note{display:none}
  .hx-copy{max-width:min(62%,600px)}
  .hx-feat{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hx-f:nth-child(3)::before{display:none}
  .hx-f:nth-child(n+3){border-top:1px solid rgba(255,255,255,.08)}
}
@media (max-width:1020px){
  .hx-nav{display:none}
  .hx-cta{display:none}
  /* the menu button, in the same language as the buttons below it: an
     outlined pill, the accent on the mark, the label in white. 48px tall so
     it clears the touch minimum with room, and the two rules cross into an
     X when it is open so the state is not carried by colour alone. */
  .hx-burger{
    display:inline-flex;align-items:center;gap:11px;margin-left:auto;
    min-height:48px;padding:0 18px 0 16px;border-radius:var(--r-pill);
    background:rgba(247,213,1,.06);border:1.5px solid var(--edge);
    color:#fff;font-family:var(--read);font-size:14px;font-weight:600;
    cursor:pointer;transition:background .2s var(--e),border-color .2s var(--e);
  }
  .hx-burger:hover{background:rgba(247,213,1,.13);border-color:var(--acc)}
  .hx-burger:active{background:rgba(247,213,1,.2)}
  .hx-burger .bx{
    display:grid;place-items:center;width:18px;height:14px;flex:none;position:relative;
  }
  .hx-burger .bl{
    position:absolute;left:0;width:18px;height:2px;border-radius:2px;
    background:var(--acc);transition:transform .24s var(--e),opacity .18s;
  }
  .hx-burger .bl:first-child{transform:translateY(-4px)}
  .hx-burger .bl:nth-child(2){transform:translateY(4px)}
  .hx-burger[aria-expanded="true"] .bl:first-child{transform:rotate(45deg)}
  .hx-burger[aria-expanded="true"] .bl:nth-child(2){transform:rotate(-45deg)}
  .hx-menu{
    display:grid;gap:2px;padding:11px;background:#0C0C0C;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .hx-menu[hidden]{display:none}
  .hx-menu a{
    display:flex;align-items:center;justify-content:space-between;
    min-height:50px;padding:0 16px;border-radius:12px;
    font-size:15.5px;font-weight:600;color:#fff;
  }
  .hx-menu a:hover{background:rgba(255,255,255,.06)}
  .hx-menu a .ic{color:var(--acc)}
}
@media (max-width:860px){
  .hx{width:calc(100% - 24px)}
  /* Beside her, not under her. The picture still fills the stage, but the
     frame is pulled left so the crop takes off the RIGHT and carries her to
     the right-hand edge, leaving the picture's own black on the left for the
     type to sit on. The headline steps down so a column of about 56% is
     enough to hold it. */
  .hx-stage{
    min-height:clamp(480px,112vw,660px);
    display:flex;flex-direction:column;justify-content:center;grid-template-columns:none;
    /* the base rule aligns to flex-end for the desktop hero; in column
       direction that becomes RIGHT, which was throwing the copy across */
    align-items:flex-start;
    padding:clamp(20px,4vw,28px) clamp(18px,4vw,26px) clamp(22px,4vw,30px);
  }
  .hx-media{position:absolute;inset:0;height:auto}
  /* A portrait stage crops a 16:9 picture down to about a third of its width,
     which is narrower than the figure herself — so there is no framing that
     fits both her and a stretch of empty black beside her. She is placed to
     the right and the type sits over the darkened left instead, which is as
     close to side-by-side as a phone allows without shrinking the headline
     past reading size. */
  .hx-media img{object-position:var(--focus-m,50% 22%)}
  .hx-media::after{
    height:100%;
    background:linear-gradient(94deg,#000 0%,rgba(0,0,0,.95) 30%,rgba(0,0,0,.72) 48%,
      rgba(0,0,0,.28) 66%,rgba(0,0,0,0) 82%);
  }
  .hx-stage::before,.hx-stage::after{display:none}
  /* The headline and the lede stay in the left column, clear of her. The
     buttons are let out to the full width — they sit low, where the picture
     is dark anyway, and it is the only way both fit on one line. */
  /* align-items:flex-start on the stage makes children shrink to content,
     so the copy is told to fill the width explicitly — otherwise the
     button row overflows its own box rather than sitting inside it */
  .hx-copy{position:relative;z-index:2;max-width:none;width:100%}
  .hx-lede{max-width:min(66%,258px)}
  .hx-copy h1{max-width:none}
  .hx-copy h1{font-size:clamp(1.9rem,9vw,2.7rem);line-height:.9;letter-spacing:-.045em}
  .hx-eye{font-size:9.5px;letter-spacing:.15em;white-space:nowrap}
  .hx-lede{font-size:12.4px;padding-left:12px}
  .hx-lede::before{width:2px}
  .hx-acts{gap:9px;margin-top:18px;flex-wrap:nowrap}
  .hx-btn{min-height:44px;padding:0 16px;font-size:11.5px;gap:0;white-space:nowrap}
  /* the arrows are what push the pair onto two lines */
  .hx-btn .ic{display:none}
  .hx-rail{align-items:stretch;gap:0;width:100%}
  .hx-panel{position:relative;z-index:3;width:auto;max-width:none;margin-top:18px}
  .hx-note{display:none}
  .hx-feat{grid-template-columns:1fr}
  .hx-f + .hx-f::before{display:none}
  .hx-f + .hx-f{border-top:1px solid rgba(255,255,255,.08)}

  .hx-trust{flex-direction:column;align-items:flex-start;gap:9px;padding:13px clamp(20px,2.2vw,34px)}
  /* The strip's flex basis is a WIDTH for the row layout above. Once this
     section stacks, that same 320px would be read as a HEIGHT and the strip
     would reserve 320px for 48px of logos. Hug the content and span the row. */
  .marq{flex:0 0 auto;width:100%;max-width:100%}
  .hx-trust-l{font-size:9.5px;letter-spacing:.14em;gap:8px}
  .hx-trust-r{margin-left:0}
}
@media (max-width:420px){
  .hx-row{padding:11px 13px;gap:9px}
  .hx-row-i{width:29px;height:29px}
  .hx-row-t b{font-size:.92rem}
  .hx-lede{max-width:min(72%,236px)}
  .hx-copy h1{max-width:none}
  .hx-btn{font-size:10.8px;padding:0 13px}
}
@media (max-width:420px){
  /* two across is still right here, just tighter */
  .hx-row{padding:11px 13px;gap:9px}
  .hx-row-i{width:29px;height:29px}
  .hx-row-t b{font-size:.92rem}
}
@media (max-width:520px){
  .hx{width:calc(100% - 16px);border-radius:18px}
  .hx-brand b{font-size:16px;letter-spacing:.2em}
  .hx-copy h1{font-size:clamp(2.05rem,10.6vw,3.2rem)}
  .hx-trust-r{gap:14px 22px}
  .hx-trust-r a{font-size:13.5px}
}
@media (prefers-reduced-motion:reduce){
  .hx-btn:hover,.hx-cta:hover,}

/* ── the legal line ────────────────────────────────────────────────────── */
.hx-legal{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:10px 28px;
  width:min(1440px,calc(100% - 40px));margin:0 auto clamp(20px,3vw,34px);
  padding:0 clamp(4px,1vw,14px);
  font-size:12px;color:#7C7C7C;
}
.hx-legal-l{display:flex;flex-wrap:wrap;gap:8px 22px}
/* 32px, not 24: the whole card is scaled to fit the window, and at the
   smallest scale it uses (about 0.77) a 26px target renders at 20px.
   What the finger gets is the rendered size, so the floor has to be set
   before the scaling, not after. */
.hx-legal a{display:inline-flex;align-items:center;min-height:34px;color:#9A9A9A}
.hx-legal a:hover{color:var(--acc)}
@media (max-width:860px){
  .hx-legal{width:calc(100% - 24px);flex-direction:column;align-items:flex-start;gap:8px}
}

/* ── the shape of the group ───────────────────────────────────────────────
   A spine with the parent at its head and one branch per kind of
   relationship. Built for the phone first: vertical is the natural reading
   order for a hierarchy, and it is the arrangement that survives a narrow
   screen — the four-column version stopped being a tree the moment it
   wrapped. Wider screens get the label and the marks on one line; the
   structure itself never changes.  */
/* This band sits between the four capabilities above and the logo bar below,
   both of which are flat dark. A warm wash lifts it off them so it reads as
   its own thing rather than a third helping of the same black — and the two
   rules that bracket it carry the accent instead of plain white.
   Checked at its strongest point: the branch labels still measure 5.5:1 on
   the lit ground, so nothing is bought at the cost of legibility. */
/* A structure drawn on a plan: a fine dot grid under the warm wash, which is
   a different texture from the hatch on the band above so the two lit
   sections read as two surfaces rather than one repeated. */
.gtree-sec{
  position:relative;
  padding:clamp(20px,2vw,28px) clamp(20px,2.2vw,34px);
  background:
    radial-gradient(rgba(247,213,1,.10) 1px, transparent 1px) 0 0 / 22px 22px,
    radial-gradient(115% 165% at 6% 0%,   rgba(247,213,1,.13) 0%, rgba(247,213,1,.045) 32%, transparent 64%),
    radial-gradient(95% 150% at 100% 100%, rgba(247,213,1,.075) 0%, transparent 58%),
    #0A0A0A;
  border-top:1px solid rgba(247,213,1,.22);
  border-bottom:1px solid rgba(247,213,1,.22);
}
/* a thin bloom on the top edge, so the band starts with light rather than a line */
.gtree-sec::before{
  content:'';position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(247,213,1,.7) 22%,rgba(247,213,1,.7) 78%,transparent);
  box-shadow:0 0 14px rgba(247,213,1,.35);
}
.gt{position:relative}

/* the head of the spine */
.gt-root{
  display:inline-flex;align-items:center;gap:10px;
  padding:7px 15px 7px 7px;border-radius:var(--r-pill);
  background:var(--acc);color:#0A0A0A;
}
.gt-root-m{
  display:grid;place-items:center;width:26px;height:26px;border-radius:50%;flex:none;
  background:rgba(10,10,10,.14);
}
.gt-root-m img{width:18px;height:18px;border-radius:5px}
.gt-root b{font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:-.01em}
.gt-root-r{
  font-size:10.5px;font-weight:700;letter-spacing:.1em;
  padding-left:10px;margin-left:2px;border-left:1px solid rgba(10,10,10,.28);
  color:rgba(10,10,10,.7);
}

/* the branches */
.gt-list{position:relative;margin:0;padding:2px 0 0 0;list-style:none}
/* the spine itself: drawn from under the root down to the last branch stub */
.gt-list::before{
  content:'';position:absolute;left:13px;top:0;bottom:0;width:1px;
  background:linear-gradient(180deg,rgba(247,213,1,.5),rgba(255,255,255,.14));
}
.gt-b{position:relative;padding:9px 0 9px 34px}
/* the stub that joins the spine to the branch */
.gt-b::before{
  content:'';position:absolute;left:13px;top:22px;width:15px;height:1px;
  background:rgba(255,255,255,.18);
}
/* the last branch closes the spine off rather than letting it run past */
/* masks the spine below the last stub — transparent, so the band's wash
   shows through instead of a patch of flat black sitting on top of it */
.gt-b:last-child::after{
  content:'';position:absolute;left:13px;top:23px;bottom:0;width:1px;
  background:linear-gradient(180deg,rgba(255,255,255,.14),transparent);
  opacity:0;
}
.gt-list::before{mask-image:linear-gradient(180deg,#000 0%,#000 calc(100% - 22px),transparent 100%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 calc(100% - 22px),transparent 100%)}
.gt-b-h{display:flex;align-items:center;gap:9px;margin-bottom:8px;min-width:0}
/* stacked layout: the count sits under the label with the marks */
/* stacked: the label row, then the marks with the count at their end */
.gt-b-r{display:flex;align-items:center;gap:12px;min-width:0}
.gt-b-r .gt-b-m{flex:0 1 auto}
.gt-b-r .gt-b-c{margin-left:auto;flex:none}
.gt-b-l{
  font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#9A9A9A;
}
.gt-b-c{
  display:grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:5px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  color:#B4B4B4;font-size:10px;font-weight:700;
}
.gt-b-you{
  margin-left:2px;padding:3px 9px;border-radius:var(--r-pill);
  background:rgba(247,213,1,.14);border:1px solid rgba(247,213,1,.34);
  color:var(--acc);font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}
.gt-b--me .gt-b-l{color:var(--acc)}
.gt-b--me .gt-b-c{background:rgba(247,213,1,.14);border-color:rgba(247,213,1,.3);color:var(--acc)}
.gt-b--me::before{background:rgba(247,213,1,.55)}

.gt-b-m{display:flex;flex-wrap:wrap;gap:6px}
.gt-m{
  display:inline-flex;align-items:center;gap:7px;min-width:0;
  padding:5px 11px 5px 6px;border-radius:8px;
  background:rgba(10,10,10,.55);border:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.gt-m img{width:18px;height:18px;border-radius:5px;flex:none}
.gt-m b{font-family:var(--read);font-weight:600;font-size:11.5px;color:#C9C9C9;white-space:nowrap}
.gt-b--me .gt-m{background:rgba(247,213,1,.09);border-color:rgba(247,213,1,.3)}
.gt-b--me .gt-m b{color:#fff}

/* once there is room, the label and the marks share a line */
@media (min-width:680px){
  /* three columns, so the row has a right-hand anchor and reaches the edge of
     the band instead of trailing off after one mark */
  /* Two columns, not three. A third `auto` track stretched to share the free
     space instead of hugging its content, which left the count stranded in
     the middle of the row. The marks and the count share the second column
     and the count is pushed to the end with an auto margin, which cannot
     drift. */
  .gt-b{
    display:grid;grid-template-columns:172px minmax(0,1fr);align-items:center;
    gap:0 18px;padding-block:8px;
  }
  .gt-b-h{margin-bottom:0}
  .gt-b::before{top:50%}
  .gt-b:last-child::after{top:calc(50% + 1px)}
  .gt-b-r{display:flex;align-items:center;gap:14px;min-width:0}
  .gt-b-m{flex:0 1 auto}
  .gt-b-c{margin-left:auto;flex:none;min-width:26px;height:24px;border-radius:7px;font-size:11px}
}
@media (min-width:1100px){
  .gt-b{grid-template-columns:210px minmax(0,1fr)}
  .gt-m b{font-size:12px}
  .gt-m{padding:6px 13px 6px 7px}
  .gt-m img{width:17px;height:17px}
}

/* ── as it narrows ─────────────────────────────────────────────────────── */
@media (max-width:1280px){
  .hx{max-height:none}
  .hx-stage{flex:none;min-height:0;padding-bottom:clamp(28px,3vw,44px)}
  .hx-panel{position:static;width:auto;max-width:340px;margin-top:24px}
  .hx-note{display:none}
  .hx-copy{max-width:min(62%,600px)}
  .hx-feat{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hx-f:nth-child(3){border-left:0}
  .hx-f:nth-child(n+3){border-top:1px solid rgba(255,255,255,.08)}
}
@media (max-width:1020px){
  .hx-nav{display:none}
  .hx-cta{display:none}
  /* the menu button, in the same language as the buttons below it: an
     outlined pill, the accent on the mark, the label in white. 48px tall so
     it clears the touch minimum with room, and the two rules cross into an
     X when it is open so the state is not carried by colour alone. */
  .hx-burger{
    display:inline-flex;align-items:center;gap:11px;margin-left:auto;
    min-height:48px;padding:0 18px 0 16px;border-radius:var(--r-pill);
    background:rgba(247,213,1,.06);border:1.5px solid var(--edge);
    color:#fff;font-family:var(--read);font-size:14px;font-weight:600;
    cursor:pointer;transition:background .2s var(--e),border-color .2s var(--e);
  }
  .hx-burger:hover{background:rgba(247,213,1,.13);border-color:var(--acc)}
  .hx-burger:active{background:rgba(247,213,1,.2)}
  .hx-burger .bx{
    display:grid;place-items:center;width:18px;height:14px;flex:none;position:relative;
  }
  .hx-burger .bl{
    position:absolute;left:0;width:18px;height:2px;border-radius:2px;
    background:var(--acc);transition:transform .24s var(--e),opacity .18s;
  }
  .hx-burger .bl:first-child{transform:translateY(-4px)}
  .hx-burger .bl:nth-child(2){transform:translateY(4px)}
  .hx-burger[aria-expanded="true"] .bl:first-child{transform:rotate(45deg)}
  .hx-burger[aria-expanded="true"] .bl:nth-child(2){transform:rotate(-45deg)}
  .hx-menu{
    display:grid;gap:2px;padding:11px;background:#0C0C0C;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .hx-menu[hidden]{display:none}
  .hx-menu a{
    display:flex;align-items:center;justify-content:space-between;
    min-height:50px;padding:0 16px;border-radius:12px;
    font-size:15.5px;font-weight:600;color:#fff;
  }
  .hx-menu a:hover{background:rgba(255,255,255,.06)}
  .hx-menu a .ic{color:var(--acc)}
}
@media (max-width:520px){
  .hx{width:calc(100% - 16px);border-radius:18px}
  .hx-brand b{font-size:16px;letter-spacing:.2em}
  .hx-copy h1{font-size:clamp(2.05rem,10.6vw,3.2rem)}
  .hx-trust-r{gap:14px 22px}
  .hx-trust-r a{font-size:13.5px}
}
@media (prefers-reduced-motion:reduce){
  .hx-btn:hover,.hx-cta:hover,}

/* ── the legal line ────────────────────────────────────────────────────── */
.hx-legal{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:10px 28px;
  width:min(1440px,calc(100% - 40px));margin:0 auto clamp(20px,3vw,34px);
  padding:0 clamp(4px,1vw,14px);
  font-size:12px;color:#7C7C7C;
}
.hx-legal-l{display:flex;flex-wrap:wrap;gap:8px 22px}
/* 32px, not 24: the whole card is scaled to fit the window, and at the
   smallest scale it uses (about 0.77) a 26px target renders at 20px.
   What the finger gets is the rendered size, so the floor has to be set
   before the scaling, not after. */
.hx-legal a{display:inline-flex;align-items:center;min-height:32px;color:#9A9A9A}
.hx-legal a:hover{color:var(--acc)}
@media (max-width:860px){
  .hx-legal{width:calc(100% - 24px);flex-direction:column;align-items:flex-start;gap:8px}
}


/* ═══════════════════════════════════════════════════════════════════════════
   THE SUBPAGES

   The same card, with a masthead where the homepage has the picture. These
   pages carry more than a screenful, so they scroll normally — the
   scale-to-fit only applies where the whole thing is meant to be taken in at
   once, which is the homepage.
   ═══════════════════════════════════════════════════════════════════════════ */
/* a subpage is taller than a screen by nature, so it is never scaled */
.hx--page{max-height:none}

.hx-mast{
  position:relative;
  padding:clamp(30px,3.6vw,54px) clamp(20px,2.2vw,34px) clamp(28px,3.2vw,44px);
  background:
    radial-gradient(88% 130% at 6% 0%, rgba(247,213,1,.10) 0%, transparent 58%),
    #000;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.hx-crumbs{margin-bottom:16px}
.hx-copy .hx-crumbs{margin-bottom:14px}
.hx-crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12px;color:#7E7E7E}
.hx-crumbs a{display:inline-flex;align-items:center;min-height:26px}
.hx-crumbs a:hover{color:var(--acc)}
.hx-crumbs i{font-style:normal;opacity:.45}
.hx-mast h1{
  margin:clamp(14px,1.6vw,20px) 0 0;
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.9rem,3.8vw,3.2rem);line-height:.94;letter-spacing:-.04em;color:#fff;
  max-width:18ch;
}
.hx-mast .hx-lede{margin-top:clamp(14px,1.6vw,20px);max-width:56ch}
.hx-mast .hx-acts{margin-top:clamp(18px,2vw,26px)}

/* a band of content in the card */
.hx-sec{
  padding:clamp(28px,3.2vw,44px) clamp(20px,2.2vw,34px);
  border-top:1px solid rgba(255,255,255,.08);
}
.hx-sec:first-of-type{border-top:0}
.hx-sec--alt{background:#0A0A0A}
.hx-sec-h{max-width:70ch;margin-bottom:clamp(20px,2.4vw,30px)}
.hx-sec-h h2{
  margin-top:12px;font-family:var(--display);font-weight:600;
  font-size:clamp(1.3rem,2.4vw,1.95rem);letter-spacing:-.028em;color:#fff;
}
.hx-sec-l{margin-top:12px;font-size:15px;line-height:1.65;color:#9E9E9E;max-width:64ch}

/* the components inside a band, at the card's density */
.hx-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.hx-tile{
  display:flex;flex-direction:column;padding:22px 20px;border-radius:14px;
  background:rgba(255,255,255,.028);border:1px solid rgba(255,255,255,.08);
  transition:border-color .22s var(--e),background .22s var(--e);
}
.hx-tile:hover{border-color:var(--edge);background:rgba(247,213,1,.05)}
.hx-tile-i{
  display:grid;place-items:center;width:40px;height:40px;border-radius:11px;
  border:1px solid rgba(247,213,1,.34);background:rgba(247,213,1,.05);
  color:var(--acc);margin-bottom:16px;
}
.hx-tile h3{font-family:var(--display);font-weight:600;font-size:1.04rem;
  letter-spacing:-.02em;color:#fff}
.hx-tile p{margin-top:10px;font-size:13.4px;line-height:1.58;color:#9E9E9E}
.hx-tile-go{
  display:inline-flex;align-items:center;gap:7px;margin-top:auto;padding-top:16px;
  min-height:28px;font-size:12.5px;font-weight:600;color:var(--acc);
}
.hx-tile-go:hover{text-decoration:underline;text-underline-offset:4px}
.hx-tile .live{margin-left:auto}
.hx-tile-h{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.hx-tile-h img{width:30px;height:30px;border-radius:8px;flex:none}
.hx-tile-h h3{font-size:1.04rem}
.hx-tile-k{display:block;font-size:10.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:#7E7E7E;margin-top:3px}

/* the numbered ladder */
.hx-lad{display:grid;gap:10px}
.hx-lad-r{
  display:grid;grid-template-columns:auto minmax(0,.85fr) minmax(0,1.6fr) auto;
  gap:12px 20px;align-items:center;
  padding:16px 20px;border-radius:14px;
  background:rgba(255,255,255,.028);border:1px solid rgba(255,255,255,.08);
}
.hx-lad-n{
  display:grid;place-items:center;width:34px;height:34px;border-radius:50%;flex:none;
  background:rgba(247,213,1,.1);border:1px solid rgba(247,213,1,.26);
  font-family:var(--display);font-weight:600;font-size:12px;color:var(--acc);
}
.hx-lad-r h3{font-family:var(--display);font-weight:600;font-size:1.02rem;
  letter-spacing:-.02em;color:#fff}
.hx-lad-r p{font-size:13.4px;line-height:1.58;color:#9E9E9E}
.hx-lad-s{
  padding:6px 12px;border-radius:var(--r-pill);white-space:nowrap;
  font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  background:rgba(255,255,255,.05);color:#9E9E9E;border:1px solid rgba(255,255,255,.09);
}
.hx-lad-s[data-s="Established"],.hx-lad-s[data-s="Active"]{
  background:var(--acc);color:#0A0A0A;border-color:var(--acc);
}
@media (max-width:760px){
  .hx-lad-r{grid-template-columns:auto minmax(0,1fr);gap:8px 14px}
  .hx-lad-r p,.hx-lad-s{grid-column:2}
  .hx-lad-s{justify-self:start}
}

/* prose */
.hx-prose{max-width:74ch}
.hx-pr + .hx-pr{margin-top:26px;padding-top:26px;border-top:1px solid rgba(255,255,255,.08)}
/* h2 on the pages that have no section heading above them, h3 where they sit
   under one — same size either way, because the level is about the document
   outline, not about how big it looks */
.hx-pr h2,.hx-pr h3{font-family:var(--display);font-weight:600;font-size:1.1rem;
  letter-spacing:-.022em;color:#fff}
.hx-pr p{margin-top:11px;font-size:14.6px;line-height:1.68;color:#9E9E9E}
.hx-pr a{color:var(--acc);text-decoration:underline;text-underline-offset:3px}
.hx-pr a:hover{color:var(--acc-hi)}
.hx-pl{margin-top:14px;display:grid;gap:9px}
.hx-pl li{display:flex;gap:10px;align-items:flex-start;font-size:14.4px;line-height:1.6;color:#9E9E9E}
.hx-pl li .ic{flex:none;margin-top:4px;color:var(--acc)}
.hx-updated{margin-top:26px;padding-top:18px;border-top:1px solid rgba(255,255,255,.08);
  font-size:12px;color:#7E7E7E}

/* the particulars */
.hx-facts{display:grid;max-width:600px;border-radius:14px;overflow:hidden;
  border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.028)}
.hx-facts div{display:flex;justify-content:space-between;gap:20px;padding:14px 20px}
.hx-facts div + div{border-top:1px solid rgba(255,255,255,.08)}
.hx-facts dt{font-size:10.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:#7E7E7E}
.hx-facts dd{margin:0;font-family:var(--display);font-weight:600;font-size:.98rem;color:#fff;text-align:right}

/* questions */
.hx-faq{display:grid;gap:8px;max-width:80ch}
.hx-faq details{border:1px solid rgba(255,255,255,.08);border-radius:12px;overflow:hidden;
  background:rgba(255,255,255,.024)}
.hx-faq details[open]{border-color:var(--edge)}
.hx-faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:52px;padding:12px 18px;cursor:pointer;list-style:none;
}
.hx-faq summary::-webkit-details-marker{display:none}
.hx-faq summary h3{font-family:var(--display);font-weight:600;font-size:.98rem;letter-spacing:-.018em;color:#fff}
.hx-faq summary::after{
  content:'';flex:none;width:10px;height:10px;border-right:1.6px solid var(--acc);
  border-bottom:1.6px solid var(--acc);transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .22s var(--e);
}
.hx-faq details[open] summary::after{transform:rotate(225deg) translate(-3px,-3px)}
.hx-faq summary:hover{background:rgba(247,213,1,.05)}
.hx-faq p{padding:0 18px 18px;font-size:14.2px;line-height:1.62;color:#9E9E9E;max-width:76ch}

/* the exchanges */
.hx-x{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.hx-xc{padding:20px;border-radius:14px;background:rgba(255,255,255,.028);
  border:1px solid rgba(255,255,255,.08)}
.hx-xc .hx-eye{margin-bottom:14px}
.hx-xq{font-family:var(--display);font-weight:600;font-size:1rem;letter-spacing:-.02em;
  line-height:1.4;color:#fff}
.hx-xa{margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.08);
  font-size:13.6px;line-height:1.6;color:#9E9E9E}
.hx-note-l{margin-top:16px;font-size:12.2px;line-height:1.55;color:#7E7E7E;max-width:76ch}

/* ── notes ────────────────────────────────────────────────────────────────
   A bento: one lead tile holding two columns and two rows, four smaller ones
   filling the rest. On a phone the lead goes full width and the rest pair up
   two across, so the grid keeps its shape instead of collapsing into a list. */
.nb-sec{
  padding:clamp(20px,2vw,28px) clamp(20px,2.2vw,34px);
  border-top:1px solid rgba(255,255,255,.08);
}
.nb{display:grid;gap:10px;grid-template-columns:repeat(4,minmax(0,1fr))}
.nb-c{
  position:relative;min-width:0;
  /* the mark sits on the same line as the label and the title, with the body
     and the link running full width beneath them */
  display:grid;grid-template-columns:auto minmax(0,1fr);
  grid-template-areas:'icon head' 'body body' 'go go';
  align-items:center;gap:0 12px;
  padding:15px 16px;border-radius:14px;
  background:rgba(255,255,255,.028);border:1px solid rgba(255,255,255,.08);
  transition:border-color .22s var(--e),background .22s var(--e),transform .22s var(--e);
}
.nb-c:hover{border-color:var(--edge);background:rgba(247,213,1,.05);transform:translateY(-2px)}
.nb-c--lead{
  grid-column:span 2;grid-row:span 2;padding:20px;
  grid-template-rows:auto 1fr auto;
  background:
    radial-gradient(120% 130% at 100% 0%, rgba(247,213,1,.12) 0%, transparent 58%),
    rgba(255,255,255,.035);
  border-color:rgba(247,213,1,.24);
}
.nb-i{
  grid-area:icon;display:grid;place-items:center;width:32px;height:32px;border-radius:9px;
  border:1px solid rgba(247,213,1,.3);background:rgba(247,213,1,.06);
  color:var(--acc);
}
.nb-c--lead .nb-i{width:40px;height:40px;border-radius:11px}
.nb-h{grid-area:head;min-width:0}
.nb-k{
  display:block;font-size:9.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:#8A8A8A;
}
.nb-c--lead .nb-k{color:var(--acc)}
.nb-c h3{
  margin-top:3px;font-family:var(--display);font-weight:600;
  font-size:.94rem;line-height:1.25;letter-spacing:-.02em;color:#fff;
}
.nb-c--lead h3{font-size:1.2rem;line-height:1.18;margin-top:4px}
.nb-c p{
  grid-area:body;margin-top:12px;font-size:12.4px;line-height:1.5;color:#9E9E9E;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.nb-c--lead p{font-size:13.6px;line-height:1.6;-webkit-line-clamp:4}
.nb-go{
  grid-area:go;display:inline-flex;align-items:center;gap:6px;justify-self:start;
  margin-top:auto;padding-top:12px;
  min-height:26px;font-size:11.5px;font-weight:600;color:var(--acc);
}
.nb-c:hover .nb-go .ic{transform:translateX(3px)}
.nb-go .ic{transition:transform .2s var(--e)}
@media (max-width:900px){
  .nb{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nb-c--lead{grid-column:1 / -1;grid-row:auto}
  .nb-c--lead p{-webkit-line-clamp:3}
}
@media (max-width:420px){
  .nb{grid-template-columns:1fr}
  .nb-c--lead{grid-column:auto}
}

/* for headings that belong in the outline but not on the screen */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}

/* ── what Aftaris is ──────────────────────────────────────────────────────
   The plain answer, given the full width: the statement on the left, the four
   things it is not on the right. Previously the statement stopped at 44ch and
   the right half of the band sat empty.

   The ground is a diagonal hatch under a warm sweep — a different texture
   from the register below it, so the two lit bands do not read as the same
   surface repeated. */
.wa-sec{
  position:relative;overflow:hidden;
  padding:clamp(22px,2.2vw,34px) clamp(20px,2.2vw,34px);
  background:
    repeating-linear-gradient(115deg, rgba(247,213,1,.05) 0 1px, transparent 1px 9px),
    radial-gradient(80% 190% at 2% 50%,  rgba(247,213,1,.19) 0%, rgba(247,213,1,.05) 36%, transparent 68%),
    radial-gradient(70% 150% at 98% 10%, rgba(247,213,1,.09) 0%, transparent 60%),
    #0A0A0A;
  border-top:1px solid rgba(247,213,1,.22);
}
.wa-sec::before{
  content:'';position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,rgba(247,213,1,.75),rgba(247,213,1,.25) 55%,transparent);
  box-shadow:0 0 14px rgba(247,213,1,.3);
}
.wa{
  position:relative;display:grid;
  grid-template-columns:auto minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(18px,2.4vw,40px);align-items:center;
}
.wa-mk{
  display:grid;place-items:center;width:clamp(48px,5vw,62px);aspect-ratio:1;border-radius:16px;
  background:rgba(10,10,10,.6);border:1px solid rgba(247,213,1,.34);
  box-shadow:0 0 34px rgba(247,213,1,.18);backdrop-filter:blur(8px);
}
.wa-mk img{width:60%;height:auto;border-radius:8px}
.wa-q{
  display:inline-flex;align-items:center;gap:9px;
  font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--acc);
}
.wa-q::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--acc);
  box-shadow:0 0 9px rgba(247,213,1,.8)}
.wa h2{
  margin-top:11px;font-family:var(--display);font-weight:600;
  font-size:clamp(1.05rem,1.85vw,1.42rem);line-height:1.3;letter-spacing:-.024em;color:#fff;
  max-width:none;text-wrap:balance;
}
.wa h2 em{font-style:normal;color:var(--acc)}
/* the right column: what it is not, two by two */
.wa-tags{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:0}
.wa-tag{
  display:flex;align-items:center;gap:9px;min-width:0;
  padding:10px 13px;border-radius:11px;
  background:rgba(10,10,10,.5);border:1px solid rgba(255,255,255,.12);
  font-size:11.6px;font-weight:600;line-height:1.3;color:#C9C9C9;
  backdrop-filter:blur(6px);
}
.wa-tag i{width:6px;height:6px;border-radius:50%;background:var(--acc);flex:none;
  box-shadow:0 0 8px rgba(247,213,1,.6)}
@media (max-width:980px){
  .wa{grid-template-columns:auto minmax(0,1fr);gap:16px 18px}
  .wa-tags{grid-column:1 / -1;margin-top:4px}
}
@media (max-width:560px){
  .wa{grid-template-columns:1fr;gap:12px}
  .wa-mk{width:46px}
  .wa-tags{grid-template-columns:1fr}
}

/* ── phone scroll tearing ────────────────────────────────────────────────
   The ground is four background layers pinned with background-attachment:
   fixed, so every scroll frame repaints the whole viewport — and each of the
   seventeen backdrop-filter surfaces then has to re-sample that repaint.
   Desktop GPUs absorb it; a phone compositor does not, and it shows as
   horizontal striping torn across the cards mid-scroll.

   Both halves are cheap to give up here: the gradients are subtle enough
   that letting them scroll is indistinguishable, and every blurred panel
   already sits on a 72-95% opaque background, so removing the blur changes
   almost nothing except that the page stops tearing. */
@media (max-width:900px), (pointer:coarse){
  html{background-attachment:scroll,scroll,scroll,scroll}
  *{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
}