/* ============================================================
   Elara Insights, article pages
   Shares the design language of index.html and about.html.
   Edit here once, all articles follow.
   ============================================================ */

:root{
  --black:#000000;
  --white:#FFFFFF;
  --dim:rgba(255,255,255,.62);
  --dimmer:rgba(255,255,255,.42);
  --brand:#5AB4E5;
  --line:rgba(255,255,255,.14);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  background:var(--black); color:var(--white);
  -webkit-font-smoothing:antialiased;
  font-size:15px; line-height:1.55; font-weight:400;
}
.wrap{max-width:1360px;margin:0 auto;padding:0 24px}

/* ---------- nav ---------- */
nav{position:fixed;top:0;left:0;right:0;z-index:200;padding:18px 0;
  background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 100%)}
.nav-in{max-width:1360px;margin:0 auto;padding:0 24px;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.nav-l{display:flex;align-items:center;gap:26px;justify-self:start}
.nav-in .logo{justify-self:center}
.nav-in .nav-cta{justify-self:end}
.nav-l a{color:var(--white);text-decoration:none;font-size:13.5px;font-weight:500;letter-spacing:.04em;opacity:.86;transition:opacity .2s}
.nav-l a:hover,.nav-l a.is-here{opacity:1}
.logo{--mark:57.7px;display:inline-flex;align-items:center;text-decoration:none;line-height:0}
.logo img{display:block;width:var(--mark);height:auto}
.nav-cta{border:1px solid rgba(255,255,255,.62);border-radius:100px;padding:8px 20px;
  text-shadow:0 1px 12px rgba(0,0,0,.5);backdrop-filter:blur(4px);
  font-size:14px;font-weight:500;color:var(--white);text-decoration:none;transition:background .25s,color .25s}
.nav-cta:hover{background:var(--white);color:#000}

/* ---------- article hero ---------- */
.art-hero{position:relative;min-height:clamp(440px,64vh,660px);
  display:flex;align-items:flex-end;justify-content:center}
.art-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 42%;opacity:.34;filter:saturate(.75)}
.art-hero::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.32) 26%,rgba(0,0,0,.18) 46%,rgba(0,0,0,.40) 78%,rgba(0,0,0,.92) 95%,#000 100%)}
.art-hero-copy{position:relative;z-index:4;text-align:center;padding:0 24px 76px;max-width:900px}
.art-back{display:inline-block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.66);text-decoration:none;margin-bottom:30px;transition:color .25s}
.art-back:hover{color:var(--white)}
.art-cat{font-size:10.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--brand);margin-bottom:20px}
.art-hero-copy h1{font-size:clamp(27px,3.4vw,46px);font-weight:300;line-height:1.2;
  letter-spacing:-.026em;text-shadow:0 2px 24px rgba(0,0,0,.55)}
.art-meta{display:flex;align-items:center;justify-content:center;gap:14px;
  margin-top:26px;font-size:12.5px;color:rgba(255,255,255,.56)}
.art-meta i{display:block;width:3px;height:3px;border-radius:50%;
  background:rgba(255,255,255,.4);font-style:normal}

/* ---------- article body ---------- */
.art-body{padding:74px 0 20px}
.art-col{max-width:720px;margin:0 auto}
.art-col > p{font-size:17px;line-height:1.85;color:rgba(255,255,255,.76);margin-bottom:22px}
.art-col > p:first-child{font-size:19.5px;line-height:1.75;color:rgba(255,255,255,.9);font-weight:300}
.art-col h2{font-size:clamp(22px,2.5vw,31px);font-weight:300;line-height:1.24;
  letter-spacing:-.022em;margin:56px 0 20px}
.art-col h2:first-child{margin-top:0}
.art-col h3{font-size:19px;font-weight:400;line-height:1.4;letter-spacing:-.012em;margin:36px 0 14px}
.art-col strong{font-weight:500;color:var(--white)}
.art-col em{font-style:italic;color:rgba(255,255,255,.86)}
.art-col a{color:var(--brand);text-decoration:none;border-bottom:1px solid rgba(90,180,229,.38);
  transition:border-color .25s}
.art-col a:hover{border-color:var(--brand)}
.art-col ul,.art-col ol{margin:0 0 26px;padding-left:0;list-style:none}
.art-col ol{counter-reset:artnum}
.art-col li{position:relative;padding-left:26px;margin-bottom:13px;
  font-size:17px;line-height:1.82;color:rgba(255,255,255,.76)}
.art-col ul > li::before{content:'';position:absolute;left:2px;top:.72em;
  width:5px;height:5px;border-radius:50%;background:var(--brand);opacity:.85}
.art-col ol > li{counter-increment:artnum}
.art-col ol > li::before{content:counter(artnum);position:absolute;left:0;top:0;
  font-size:12.5px;line-height:1.9;color:var(--brand);font-weight:500}
.art-col blockquote{margin:38px 0;padding:4px 0 4px 26px;border-left:1px solid var(--brand)}
.art-col blockquote p{font-size:20px;line-height:1.6;font-weight:300;color:var(--white);margin:0}
.art-col table{width:100%;border-collapse:collapse;margin:0 0 30px;font-size:15.5px}
.art-col th,.art-col td{text-align:left;padding:13px 14px;border-bottom:1px solid var(--line)}
.art-col th{font-size:10.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.5)}
.art-col td{color:rgba(255,255,255,.76);line-height:1.7}
.art-col hr{border:0;border-top:1px solid var(--line);margin:48px 0}

/* ---------- faq ---------- */
.art-faq{padding:66px 0 10px}
.art-faq h2{font-size:clamp(23px,2.6vw,33px);font-weight:300;line-height:1.2;
  letter-spacing:-.022em;margin-bottom:30px}
.faq{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line);cursor:pointer}
.faq-head{display:flex;align-items:center;justify-content:space-between;gap:28px;
  padding:24px 4px;transition:opacity .25s}
.faq-item:hover .faq-head{opacity:.74}
.faq-head h3{font-size:clamp(16px,1.5vw,18.5px);font-weight:400;line-height:1.4;
  letter-spacing:-.01em;margin:0}
.faq-chev{flex:none;width:28px;height:28px;border:1px solid rgba(255,255,255,.26);
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  transition:transform .4s cubic-bezier(.2,.7,.3,1),border-color .25s,background .25s}
.faq-chev svg{width:11px;height:11px;stroke:#fff;fill:none;stroke-width:1.7}
.faq-item.active .faq-chev{transform:rotate(180deg);border-color:var(--brand);
  background:rgba(90,180,229,.14)}
.faq-body{max-height:0;overflow:hidden;opacity:0;
  transition:max-height .5s ease,opacity .3s ease,padding .3s ease}
.faq-item.active .faq-body{max-height:600px;opacity:1;padding:0 56px 26px 4px}
.faq-body p{font-size:16px;line-height:1.8;color:var(--dim)}
@media(max-width:600px){.faq-item.active .faq-body{padding:0 0 22px 0}}

/* ---------- disclaimer ---------- */
.art-note{max-width:720px;margin:56px auto 0;padding:20px 0 0;border-top:1px solid var(--line)}
.art-note p{font-size:12.5px;line-height:1.75;color:var(--dimmer)}

/* ---------- keep reading ---------- */
.art-rel{padding:86px 0 20px;border-top:1px solid var(--line);margin-top:78px}
.art-rel h2{font-size:clamp(22px,2.4vw,30px);font-weight:300;letter-spacing:-.022em;
  line-height:1.2;margin-bottom:34px}
.art-rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
.ins-card{text-decoration:none;color:inherit;display:block}
.ins-card img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;
  border-radius:4px;margin-bottom:20px;transition:opacity .4s}
.ins-card:hover img{opacity:.88}
.ins-cat{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--brand);margin-bottom:12px}
.ins-card h3{font-size:18.5px;font-weight:400;line-height:1.34;letter-spacing:-.012em;margin-bottom:12px}
.ins-card p{font-size:16px;line-height:1.78;color:rgba(255,255,255,.66);margin-bottom:18px}
.ins-more{font-size:13.5px;color:var(--white);opacity:.7;transition:opacity .25s}
.ins-card:hover .ins-more{opacity:1}
@media(max-width:900px){.art-rel-grid{grid-template-columns:repeat(2,1fr);gap:28px}
  .art-rel-grid > *:nth-child(3){display:none}}
@media(max-width:600px){.art-rel-grid{grid-template-columns:1fr;gap:34px}
  .art-rel-grid > *:nth-child(3){display:block}}

/* ---------- waitlist ---------- */
.wl{padding:104px 0 114px;text-align:center;border-top:1px solid var(--line);margin-top:80px}
.wl h2{font-size:clamp(26px,3vw,40px);font-weight:400;line-height:1.2;letter-spacing:-.02em;margin-bottom:14px}
.wl h2 em{font-style:normal;color:var(--brand)}
.wl>.wrap>p{font-size:15px;color:var(--dim);max-width:420px;margin:0 auto 36px;line-height:1.7}
.wl-form{display:flex;gap:8px;max-width:440px;margin:0 auto 14px}
.wl-form input{flex:1;background:transparent;border:1px solid var(--line);border-radius:100px;
  padding:14px 22px;color:#fff;font-size:13.5px;font-family:inherit;outline:none;transition:border-color .2s}
.wl-form input::placeholder{color:var(--dimmer)}
.wl-form input:focus{border-color:var(--brand)}
.wl-form button{background:#fff;color:#000;border:none;border-radius:100px;padding:14px 28px;
  font-size:13.5px;font-weight:500;font-family:inherit;cursor:pointer;white-space:nowrap;transition:opacity .2s}
.wl-form button:hover{opacity:.85}
.wl-form button:disabled{opacity:.55;cursor:default}
.wl-fine{font-size:11px;color:var(--dimmer)}
.wl-msg{display:none;font-size:14px;margin-top:14px}
.wl-msg.ok{color:var(--brand)}
.wl-msg.err{color:#E8A598}

/* ---------- footer ---------- */
footer{padding:48px 0 32px;border-top:1px solid var(--line)}
.foot{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px;margin-bottom:40px}
.foot-brand .logo{--mark:57.7px;margin-bottom:12px;display:block}
.foot-brand p{font-size:14.5px;line-height:1.7;color:rgba(255,255,255,.55);max-width:240px}
.foot-col h4{font-size:10.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.42);margin-bottom:18px}
.foot-col ul{list-style:none}
.foot-col li{margin-bottom:11px}
.foot-col a{font-size:14.5px;color:rgba(255,255,255,.72);text-decoration:none;
  transition:color .25s}
.foot-col a:hover{color:var(--white)}
.foot-bottom{padding-top:26px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.foot-bottom p{font-size:12px;color:rgba(255,255,255,.42)}
@media(max-width:820px){
  .foot{grid-template-columns:1fr 1fr;gap:36px}
  .foot-brand{grid-column:1 / -1}
}
@media(max-width:480px){.foot{grid-template-columns:1fr}}

/* ---------- scroll reveal, same easing as the homepage ---------- */
.reveal{opacity:0;transform:translateY(52px);
  transition:opacity .95s cubic-bezier(.16,1,.3,1),transform .95s cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1;transform:none}
.reveal-group>*{opacity:0;transform:translateY(46px);
  transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.reveal-group.in>*{opacity:1;transform:none}
.reveal-group.in>*:nth-child(1){transition-delay:.00s}
.reveal-group.in>*:nth-child(2){transition-delay:.09s}
.reveal-group.in>*:nth-child(3){transition-delay:.18s}
.reveal-group.in>*:nth-child(4){transition-delay:.27s}
.reveal-group.in>*:nth-child(5){transition-delay:.36s}
.reveal-group.in>*:nth-child(6){transition-delay:.45s}
@keyframes heroUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes heroFade{from{opacity:0}to{opacity:1}}
nav{animation:heroFade 1.1s ease .15s both}
.page-in{animation:heroUp 1s cubic-bezier(.16,1,.3,1) .28s both}
@media (prefers-reduced-motion: reduce){
  .reveal,.reveal-group>*{opacity:1!important;transform:none!important;transition:none!important}
  nav,.page-in{animation:none!important}
}

/* ---------- mobile header + menu ---------- */
.nav-burger{display:none;background:none;border:0;padding:6px;cursor:pointer;
  justify-self:end;line-height:0}
.nav-burger span{display:block;width:24px;height:2px;background:#fff;border-radius:2px;
  transition:transform .35s cubic-bezier(.2,.7,.3,1),opacity .25s}
.nav-burger span+span{margin-top:6px}
.nav-burger.open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav-burger.open span:nth-child(2){opacity:0}
.nav-burger.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.mobile-menu{position:fixed;inset:0;z-index:190;background:#000;
  display:flex;flex-direction:column;justify-content:center;padding:0 32px;
  opacity:0;visibility:hidden;transform:translateY(-12px);
  transition:opacity .4s cubic-bezier(.2,.7,.3,1),transform .4s cubic-bezier(.2,.7,.3,1),visibility .4s}
.mobile-menu.open{opacity:1;visibility:visible;transform:none}
.mobile-menu a{display:block;color:#fff;text-decoration:none;
  font-size:28px;font-weight:300;letter-spacing:-.02em;padding:16px 0;
  border-bottom:1px solid rgba(255,255,255,.12);
  opacity:0;transform:translateY(18px);
  transition:opacity .5s cubic-bezier(.2,.7,.3,1),transform .5s cubic-bezier(.2,.7,.3,1)}
.mobile-menu.open a{opacity:1;transform:none}
.mobile-menu.open a:nth-child(1){transition-delay:.10s}
.mobile-menu.open a:nth-child(2){transition-delay:.16s}
.mobile-menu.open a:nth-child(3){transition-delay:.22s}
.mobile-menu.open a:nth-child(4){transition-delay:.28s}
.mobile-menu.open a:nth-child(5){transition-delay:.34s}
body.menu-open{overflow:hidden}

@media(max-width:900px){
  .nav-in{grid-template-columns:auto 1fr auto;gap:12px}
  .nav-l{display:none}
  .nav-in .logo{justify-self:start;--mark:59.9px}
  .nav-in .nav-cta{justify-self:center;font-size:13px;padding:8px 18px;white-space:nowrap}
  .nav-burger{display:block}
}
@media(max-width:700px){
  .art-hero-copy{padding-bottom:56px}
  .art-body{padding-top:56px}
  .art-col > p:first-child{font-size:18px}
  .wl{padding:76px 0 84px}
}
@media(max-width:380px){
  .nav-in .nav-cta{font-size:12px;padding:7px 14px}
  .nav-in .logo{--mark:53.3px}
  .mobile-menu a{font-size:24px;padding:14px 0}
}

/* ---------- header condenses on scroll, desktop only ---------- */
/* At the top the header is chrome laid over the hero: full bleed, no
   container, items pushed to the far edges. Once the page moves it becomes an
   object in its own right, a narrow bar floating above the content rather
   than sitting on it. The scrim leaves with it, because a gradient is only
   doing work while there is a hero underneath to separate from.
   Geometry measured off the reference: 840 wide, 46 tall, 15 from the top,
   6px of padding with 22 on the left where the links start.

   None of this runs below 1025, which is where .nav-l a stops being hidden
   and the header actually has links to contract. Narrower than that there is
   nothing to condense into, so the bar was redrawing itself on scroll without
   saying anything new. The whole treatment is gated here, transitions
   included, so phones and tablets keep the plain header. */
@media(min-width:1025px){
  nav{transition:padding .45s cubic-bezier(.16,1,.3,1),background .4s ease}
  .nav-in{border:1px solid transparent;border-radius:100px;
    transition:max-width .5s cubic-bezier(.16,1,.3,1),
               padding .5s cubic-bezier(.16,1,.3,1),
               background .4s ease,border-color .4s ease}

  nav.is-stuck{padding:15px 0;background:transparent}
  nav.is-stuck .nav-in{
    position:relative;
    /* Capped, but never edge to edge: between 900 and 1000px the cap alone
       would leave the pill touching both sides of the screen. */
    /* Wide enough that the links clear the centred wordmark with room to
       spare. Below about 850 the last link runs underneath it. */
    max-width:880px;width:calc(100% - 48px);
    /* Even padding, so the centre of the content box is the centre of the bar
       and the wordmark lands on it. The links take their own inset instead;
       asymmetric padding here was pushing the wordmark 8px right of centre. */
    padding:5px;
    /* Near solid. A section heading passing underneath is large, bright text,
       and 22px of blur does not destroy letters that big: the leak through the
       tint is (1 - alpha) * 255, so .66 left 87 levels of it and the titles read
       straight through the bar. The blur still earns its keep over the photo
       cards. */
    background:rgba(13,24,33,.94);
    -webkit-backdrop-filter:blur(22px) saturate(140%);
    backdrop-filter:blur(22px) saturate(140%);
    /* The reference carries no border, but its pages are white. Ours are black,
       and a dark translucent pill on black needs one edge to exist at all. */
    border-color:rgba(255,255,255,.10);
    /* The wordmark sits at the centre of the bar, with the links running from
       the left edge and the button held to the right, so there is open space
       either side of it. The middle column is only as wide as the wordmark and
       the two outer columns take an equal share of what is left, which is what
       puts it on the centre line however wide the bar is. */
    grid-template-columns:1fr auto 1fr}

  /* The waitlist is what the site is for, so the outline fills in once somebody
     has read far enough to have a reason to tap it. Its height sets the bar's:
     35 plus 6 above and below comes out at the reference's 46. */
  nav.is-stuck .nav-cta{
    background:var(--white);color:#000;border-color:var(--white);
    padding:7px 15px;font-size:13px;line-height:1.45;
    justify-self:end}

  /* Nudged up 2px. The wordmark's macron is a thin stroke sitting well above
     the letters, so centring on the ink box leaves the mass of the word
     sitting low next to the links. Measured on the x-height band, which is
     what the eye actually reads, it was 1.8px below them. */
  nav.is-stuck .nav-in .logo{--mark:51px;justify-self:center}

  /* The links step down to 12 against the wordmark's 23, so the name is
     plainly the largest thing in the bar and the navigation reads as
     navigation. The wordmark can grow this far without touching the bar's
     height, which the button sets at 34.8. */
  nav.is-stuck .nav-l{
    flex-wrap:nowrap;white-space:nowrap;gap:19px;padding-left:18px}
  nav.is-stuck .nav-l a{font-size:12px;letter-spacing:.03em}
}
@media (prefers-reduced-motion: reduce){
  nav,.nav-in,.nav-cta{transition:none}
}