/* Trusted Partner page additions. Inline on purpose: /assets is served with a
         ten year cache, so a separate stylesheet would need a new name on every edit. */
      /* Five section links and the long apply button need more room than the old four. */
      .nav-link,.brand-suffix,.nav-cta{white-space:nowrap}
      @media (max-width:1279px){.nav-links{display:none}.menu-btn{display:grid}}
      /* Phones and tablets: the nav keeps its frosted background from the start, so hero text
         scrolling up underneath it stays legible (it used to turn on only after the hero). */
      @media (max-width:980px){.nav{-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);border-bottom-color:var(--line);background:#06090f99}}
      .hero-eyebrow{margin-bottom:1.25rem}
      /* Two hero paragraphs: keep them together; the original spacing goes after the second. */
      .hero-sub:not(.hero-sub-2){margin-bottom:0}
      .hero-sub-2{margin-top:.8rem}
      /* Laptops up to 860px tall: with both of Daniel's hero paragraphs the Apply button fell
         below the first screen (813px on 1366 x 768), so the hero type steps down a size. */
      @media (min-width:768px) and (max-height:860px){
        .hero{padding-top:calc(var(--nav-h) + 1.5rem)}
        .hero-headline{font-size:clamp(2.6rem,4.1vw,3.5rem);line-height:1.06}
        .hero-sub{font-size:1.08rem;line-height:1.5}
        .hero-sub-2{margin-bottom:1.4rem}
      }
      .hero-trust{margin-top:1.4rem;color:var(--ink-2);font-size:.9rem;letter-spacing:.01em}
      .hero-trust span{white-space:nowrap}
      .hero-trust i{font-style:normal;color:var(--ink-3);margin:0 .5rem}

      .audience-grid{display:grid;gap:clamp(1rem,1.6vw,1.4rem);grid-template-columns:repeat(3,minmax(0,1fr))}
      .audience-card{display:flex;flex-direction:column;gap:.6rem}
      .audience-card .card-text{flex:1}
      .card-link{display:inline-flex;align-items:center;gap:.45rem;margin-top:.9rem;color:var(--ink);font-weight:600;font-size:.95rem;text-decoration:none;border-bottom:1px solid var(--line-strong);padding:.75rem 0 .35rem;align-self:flex-start;transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease)}
      .card-link:hover,.card-link:focus-visible{border-color:var(--cyan);color:var(--cyan)}
      .card-link .arr{transition:transform .3s var(--ease)}
      .card-link:hover .arr{transform:translateX(3px)}
      .audience-card .tile{margin-bottom:.4rem}

      .chapter-strip.steps-4{grid-template-columns:repeat(4,minmax(0,1fr))}
      /* The four steps carry one sentence each, so they need far less height than the
         old science chapters: tighter padding and a shorter stage close the gaps. */
      .step-scene{padding-block:clamp(2rem,4vw,3.5rem)}
      .step-scene .scene-stage{min-height:min(44vh,400px)}
      #how-eva-works{padding-bottom:clamp(1.5rem,3vw,2.5rem)}
      .split-anchor{height:0;margin:0}
      /* Particles live on a fixed canvas behind the page, and the video sections paint an
         opaque backdrop. Fading the backdrop in and out at its edges lets a particle shape
         that crosses the boundary dissolve instead of being sliced off in a straight line. */
      .gym-reveal .bed,.challenge-open .bed,.talk-section .bed{-webkit-mask-image:linear-gradient(180deg,#0000 0,#000 22%,#000 78%,#0000 100%);mask-image:linear-gradient(180deg,#0000 0,#000 22%,#000 78%,#0000 100%)}
      .hero .bed{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 80%,#0000 100%);mask-image:linear-gradient(180deg,#000 0,#000 80%,#0000 100%)}
      /* Phones: a full-height crop of the coach video shows only the coach looking at his
         phone. A shorter band over the copy, framed to the right, keeps coach and client
         both in shot. */
      @media (max-width:767px){
        .talk-section .bed{bottom:auto;height:min(52%,400px);-webkit-mask-image:linear-gradient(180deg,#0000 0,#000 10%,#000 62%,#0000 100%);mask-image:linear-gradient(180deg,#0000 0,#000 10%,#000 62%,#0000 100%)}
        .talk-section .bed video,.talk-section .bed img{object-position:84% 30%}
        .talk-section .bed:after{background:linear-gradient(0deg,#04060bd9 0,#04060b00 45%),#04060b40}
      }
      .phone-art{aspect-ratio:252/524}
      #deva .phone{width:min(230px,64%)}
      /* The bundle fades the phone in over most of the step, so the particles behind it
         showed through and looked as if they were in front. Show it at full strength, and
         centre it in its stage, which is where the particle outline is centred, so the
         outline sits evenly around the phone. */
      #deva #phone{opacity:1 !important}
      #deva .scene-stage{display:grid;place-items:center}
      /* Stacked (980px and below): text first, then a shorter stage, whichever side the
         step sits on at desktop width, so two stages never land next to each other. */
      @media (max-width:980px){.step-scene .scene-copy{order:1}.step-scene .scene-stage{order:2;min-height:42vh}}
      /* Buttons: the gradient was painted from the padding box, so it tiled under the
         transparent border and showed a thin violet line on the edges. */
      .btn-primary{background-origin:border-box;border:0}
      .step-body{margin-top:1rem}

      .split-col p.split-item{display:block;color:var(--ink-2);line-height:1.55;margin:0 0 .75rem}
      .split-col p.split-item:last-child{margin-bottom:0}
      .control-card{margin-top:clamp(1.5rem,3vw,2.2rem);display:grid;grid-template-columns:auto 1fr;gap:1rem 1.2rem;align-items:start}
      .control-card h3{margin-bottom:.35rem}
      .section-cta{margin-top:clamp(2rem,4vw,3rem);display:flex;flex-wrap:wrap;gap:1rem;align-items:center}
      .section-cta .btn{width:auto}

      .stories-grid{display:grid;gap:clamp(1rem,1.6vw,1.4rem);grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(1.5rem,3vw,2.5rem)}
      .story-card{display:flex;flex-direction:column;gap:.9rem}
      .story-thumb{position:relative;display:block;aspect-ratio:16/10;border-radius:18px;overflow:hidden;border:1px solid var(--line);background:var(--bg-raised)}
      .story-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
      .story-thumb:hover img{transform:scale(1.04)}
      .story-thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#04060b8c,#04060b14 60%)}
      .story-play{position:absolute;left:50%;top:50%;z-index:1;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;display:grid;place-items:center;background:#ffffff26;border:1px solid #ffffff59;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:transform .3s var(--ease),background .3s var(--ease)}
      .story-thumb:hover .story-play{transform:scale(1.08);background:#ffffff40}
      .story-play svg{width:22px;height:22px;margin-left:3px;color:#fff}
      .story-quote{color:var(--ink-3);font-style:italic;line-height:1.5}
      .story-meta{font-size:.9rem;color:var(--ink-2)}
      .story-meta b{display:block;color:var(--ink);font-size:1.05rem}

      .path-wrap{margin-top:clamp(3rem,6vw,5rem);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,5vw,5rem);align-items:start}

      /* The image column spans the full height of the four cards, so tops and bottoms line up. */
      .supp-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,4vw,4rem);align-items:stretch}
      .supp-photo{position:relative;margin:0;display:flex;flex-direction:column;justify-content:center;align-items:center}
      .supp-photo::before{content:"";position:absolute;inset:6% 2%;border-radius:50%;background:radial-gradient(closest-side,#9717cc33,#4623be14 60%,#0000)}
      .supp-photo img{position:relative;display:block;width:100%;height:auto;object-fit:contain}
      .supp-photo figcaption{position:relative;color:var(--ink-3);font-size:.8rem;text-align:center;margin-top:.75rem}
      .supp-points{display:grid;gap:clamp(1rem,1.6vw,1.3rem);grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr}
      .supp-points .card{display:flex;flex-direction:column}
      .supp-points .card .card-text{flex:1}
      /* No lift on these cards: the hover lift broke the top alignment with the image. */
      .supp-points .card:hover{transform:none}
      .supp-intro{margin-top:1rem}
      .receive{margin-top:clamp(3rem,6vw,5rem);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,4rem);align-items:center}
      .proto-card{padding:clamp(1.3rem,2vw,1.8rem)}
      .proto-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:1.2rem}
      .proto-head b{display:block;font-size:1.1rem}
      .proto-head span{color:var(--ink-3);font-size:.82rem}
      .proto-tag{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan);border:1px solid color-mix(in srgb,var(--cyan) 40%,transparent);border-radius:999px;padding:4px 10px;white-space:nowrap}
      .proto-prod{display:flex;gap:1rem;align-items:center;background:var(--glass-bg);border:1px solid var(--line);border-radius:16px;padding:.8rem 1rem;margin-bottom:1rem}
      .proto-prod img{flex:none;width:56px;height:auto}
      .proto-label{display:block;color:var(--ink-3);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase}
      .proto-rows{display:grid;gap:.1rem}
      .proto-rows div{display:flex;justify-content:space-between;gap:1rem;padding:.7rem 0;border-bottom:1px solid var(--line)}
      .proto-rows dt{color:var(--ink-3)}
      .proto-rows dd{margin:0;font-weight:600;text-align:right}
      .proto-foot{margin-top:1rem;color:var(--ink-3);font-size:.8rem}

      .pricing-split{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(2rem,5vw,5rem);align-items:center}
      .pricing-split .section-head{margin-bottom:0}
      .pricing-split .t-body{margin-top:1rem}
      .price-compare{display:grid;gap:clamp(.8rem,1.2vw,1rem);grid-template-columns:minmax(0,1fr)}
      .price-compare .price-card{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.25rem 1.5rem}
      .price-compare .price-name{grid-column:1/-1}
      .price-compare .price-amount{grid-column:2;grid-row:2/4;justify-self:end}
      .price-std{color:var(--ink-3);font-size:.9rem}
      .price-std s{text-decoration-thickness:1px;white-space:nowrap}
            .price-save{color:var(--ink-2);font-size:.88rem}
      /* "Let us talk" sits over the coach footage, full width, text on the dark side. */
      .talk-section{position:relative;overflow:hidden;min-height:78svh;display:flex;align-items:center;padding-block:clamp(5rem,12vh,8rem)}
      .talk-section .shell{position:relative;z-index:2}
      /* The bundle dims the coach footage as the form approaches (it used to sit behind the
         form). Here it is its own section, so keep it at full strength. */
      .talk-section .bed{opacity:1 !important}
      /* On wide screens the footage starts a third of the way in, so the two coaches sit
         clear of the text instead of behind it; the left edge fades into the page. */
      @media (min-width:1100px){.talk-section .bed{left:32%}}
      .talk-copy{max-width:560px}
      .talk-copy .t-body{margin-top:.6rem;color:var(--ink-2)}

      .form-intro{color:var(--ink-2);margin:-.2rem 0 1.4rem;font-size:.95rem;line-height:1.5}
      .lead-form select{width:100%}
      .field-hint{color:var(--ink-3);font-size:.78rem;margin:0}
      .more-details{grid-column:1/-1;border:1px solid var(--line);border-radius:16px;padding:0 1rem;background:var(--glass-bg)}
      .more-details summary{cursor:pointer;padding:.95rem 0;font-weight:600;list-style:none;display:flex;justify-content:space-between;align-items:center}
      .more-details summary::-webkit-details-marker{display:none}
      .more-details summary::after{content:"+";font-size:1.3rem;color:var(--ink-3);line-height:1}
      .more-details[open] summary::after{content:"\2212"}
      .more-details summary:focus-visible{outline:2px solid var(--cyan);outline-offset:4px;border-radius:6px}
      .more-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem 1.1rem;padding-bottom:1.1rem}
      .consent-field{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr;gap:.75rem;align-items:start;font-size:.9rem;color:var(--ink-2);line-height:1.5}
      .consent-field input{width:24px;height:24px;margin-top:2px;accent-color:var(--violet)}
      .consent-field a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
      .consent-field .field-error{grid-column:2}
      .form-status b{display:block;margin-bottom:.25rem}

      /* Footer: the eva.ae footer, including the physical address. */
      footer.site{padding:70px 0 34px;border-top:1px solid var(--line);color:var(--ink-2);position:relative;z-index:2;background:var(--bg)}
      .foot-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:36px;margin-bottom:42px}
      .foot-grid>div p{font-size:.88rem;max-width:34ch;margin-top:14px;line-height:1.55}
      .footer-logo{display:inline-flex;color:var(--ink)}
      .footer-logo svg{width:64px;height:auto}
      .footer-logo svg path{fill:currentColor}
      .foot-col h5{color:var(--ink);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;margin:0 0 15px;font-weight:700}
      .foot-col>a,.foot-col .foot-static{display:flex;align-items:center;gap:7px;font-size:.9rem;padding-block:.4rem;color:var(--ink-2);text-decoration:none;transition:color .25s ease}
      .foot-col a:hover{color:var(--ink)}
      .foot-col .soon{font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--line-strong);border-radius:999px;padding:2px 7px;color:var(--ink-3)}
      .foot-social{display:flex;gap:14px;margin-top:12px}
      .foot-social a{color:var(--ink-2);padding:.45rem 0;transition:color .3s}
      .foot-social a:hover{color:var(--ink)}
      .foot-social svg{width:18px;height:18px;display:block}
      .foot-disc{font-size:.74rem;opacity:.68;max-width:100ch;line-height:1.6;border-top:1px solid var(--line);padding-top:24px}
      .foot-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;margin-top:22px;font-size:.8rem}
      .foot-bottom .res{display:inline-flex;align-items:center;gap:8px}
      .foot-bottom .res::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--cyan)}
      @media (max-width:1099px){.foot-grid{grid-template-columns:1fr 1fr}}
      @media (max-width:640px){.foot-grid{grid-template-columns:1fr}footer.site{padding:50px 0 28px}.foot-disc{font-size:.7rem}.foot-bottom{font-size:.72rem;flex-direction:column;align-items:flex-start}}

      .sticky-apply{position:fixed;left:var(--gutter);right:var(--gutter);bottom:calc(14px + env(safe-area-inset-bottom));z-index:60;opacity:0;transform:translateY(120%);pointer-events:none;transition:opacity .3s var(--ease),transform .3s var(--ease)}
      .sticky-apply.is-on{opacity:1;transform:none;pointer-events:auto}
      /* Docked: an in-page Apply button has reached the sticky's spot. Swap instantly so it
         reads as one button that stops floating and scrolls on with the page. */
      .sticky-apply.is-docked{opacity:0;transform:none;pointer-events:none;transition:none}
      .sticky-apply .btn{width:100%;box-shadow:0 18px 40px -12px #000;white-space:nowrap;padding-inline:1rem}
      @media (min-width:900px){.sticky-apply{display:none}}

      @media (max-width:1099px){
        .audience-grid,.stories-grid{grid-template-columns:minmax(0,1fr)}
        .path-wrap,.supp-grid,.receive,.pricing-split{grid-template-columns:minmax(0,1fr)}
        .supp-photo{max-width:380px;margin-inline:auto}
      }
      @media (max-width:767px){
        .chapter-strip.steps-4{grid-template-columns:repeat(2,minmax(0,1fr))}
        .supp-points,.more-grid{grid-template-columns:minmax(0,1fr)}
        /* One column: let each card take its own height, not the tallest card's. */
        .supp-points{grid-auto-rows:auto}
        .section-cta .btn{width:100%}
        .proto-rows div{flex-direction:column;gap:.2rem}
        .proto-rows dd{text-align:left}
        .proto-head{flex-direction:column}
        .price-compare .price-card{grid-template-columns:minmax(0,1fr)}
        .price-compare .price-amount{grid-column:1;grid-row:auto;justify-self:start;margin-top:.3rem}
        footer.site{padding-bottom:6.5rem}
        .talk-section{min-height:auto;align-items:flex-end;padding-top:40vh}
        /* The offer and the apply button should fit the first screen of a 360 x 640 phone. */
        .hero{padding-top:74px;padding-bottom:56px}
        .hero-eyebrow{margin-bottom:.6rem;font-size:.62rem;letter-spacing:.08em;padding:4px 10px}
        .hero-headline{font-size:clamp(1.85rem,8.4vw,2.35rem);line-height:1.08}
        .hero-sub{margin-top:.7rem;font-size:.95rem;line-height:1.5}
        .hero-sub{margin-bottom:0}
        .hero-sub-2{margin-top:.6rem;font-size:.9rem}
        .hero-actions{margin-top:1rem}
        .hero-actions .btn{white-space:nowrap;padding-inline:1rem;font-size:.92rem}
      }
    
/* ---- Partner resources ---- */
/* Article pages in the live site's design: its tokens, type scale, cards and fixed header. */
html{scroll-padding-top:calc(var(--nav-h) + 1.5rem)}
/* The site gives headings an 82px scroll margin for its homepage sections; here the scroll
   padding already clears the header (and the guide bar on phones), so jumps land on the heading. */
.hub .article [id]{scroll-margin-top:0}
.hub-main{position:relative;z-index:1;padding-top:calc(var(--nav-h) + clamp(1.75rem,4vw,3.25rem));padding-bottom:var(--space-section)}
.hub-sentinel{position:absolute;top:0;left:0;width:1px;height:140px;pointer-events:none}
.hub-frame{display:grid;grid-template-columns:250px minmax(0,1fr);gap:clamp(2rem,4.5vw,5rem);align-items:start}
.hub-content{max-width:780px;min-width:0}

/* Side menu: sticks under the fixed header and scrolls on its own */
.hub .sidebar{position:sticky;top:calc(var(--nav-h) + 1.5rem);max-height:calc(100vh - var(--nav-h) - 5.5rem);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent;padding-right:.5rem;font-size:.875rem;line-height:1.4}
.hub .sidebar section+section{margin-top:1.5rem}
.hub .sidebar h2{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:0 0 .45rem .8rem;transition:color var(--dur) var(--ease)}
.hub .sidebar a{display:flex;align-items:center;min-height:40px;padding:.45rem .8rem;border-radius:12px;color:var(--ink-2);text-decoration:none;transition:color var(--dur) var(--ease),background-color var(--dur) var(--ease)}
.hub .sidebar a:hover{color:var(--ink);background:var(--glass-bg)}
.hub .sidebar a[aria-current=page]{color:var(--ink);font-weight:600;background:var(--grad-soft);box-shadow:inset 2px 0 0 var(--cyan)}
.hub .sidebar section.is-current h2{color:var(--ink)}
.hub a:focus-visible,.hub summary:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}

/* Phone and tablet: an "All guides" pill floats under the header, opaque so text scrolls
   cleanly beneath it. It opens the guide list as a panel, and a gradient line under its label
   fills as the reader moves through the guide. */
.guide-bar{display:none}
@media(max-width:900px){
  html{scroll-padding-top:calc(var(--nav-h) + 5rem)}
  .hub-main{padding-top:calc(var(--nav-h) + 1rem)}
  .hub-frame{display:block}
  .hub-frame>.sidebar{display:none}
  .guide-bar{display:block;position:sticky;top:calc(var(--nav-h) + .6rem);z-index:40;margin:0 0 1.5rem;width:max-content;max-width:100%}
  .gb-row{position:relative;display:flex;padding:.28rem;border-radius:999px;background:#0b0f17;border:1px solid var(--glass-border);
    box-shadow:0 16px 36px -18px #000000f0,0 0 0 1px #04060b}
  .gb-btn{display:flex;align-items:center;gap:.6rem;min-height:44px;padding:0 1rem 0 .95rem;border:1px solid var(--line-strong);border-radius:999px;
    background:var(--grad-soft);color:var(--ink);font:inherit;font-size:.9rem;font-weight:600;white-space:nowrap;cursor:pointer;
    transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
  .gb-btn[aria-expanded=true]{background:var(--grad-2);border-color:transparent}
  .gb-ico{width:14px;height:14px;fill:var(--cyan);flex:none}
  .gb-btn[aria-expanded=true] .gb-ico{fill:var(--ink)}
  .gb-chev{width:16px;height:16px;flex:none;margin-left:.1rem;fill:none;stroke:var(--ink-2);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease)}
  .gb-btn[aria-expanded=true] .gb-chev{transform:rotate(180deg);stroke:var(--ink)}
  /* Text scrolling up under the bar fades out behind it instead of showing round its edges. */
  .guide-bar::before{content:"";position:absolute;z-index:-1;pointer-events:none;top:calc(-.6rem - 1px);bottom:-1.1rem;
    left:calc(-1 * var(--gutter));width:100vw;background:linear-gradient(var(--bg) 0, var(--bg) 72%, #04060b00 100%)}
  /* The page's category sits in the bar beside the button, in place of its own chip. */
  .hub-eyebrow{display:none}
  .gb-row{align-items:center}
  .gb-btn{flex:none}
  .gb-tag{display:inline-flex;align-items:center;gap:8px;min-width:0;padding:0 .9rem 0 .8rem;font-size:.7rem;font-weight:500;
    letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .gb-tag::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px var(--cyan)}
  .gb-progress{position:absolute;left:1.4rem;right:1.4rem;bottom:-1px;height:2px;border-radius:2px;overflow:hidden;pointer-events:none}
  .gb-progress i{display:block;width:100%;height:100%;background:var(--grad-line);transform-origin:0 50%;transform:scaleX(var(--p,0))}
  .gb-panel{position:absolute;left:0;top:calc(100% + .55rem);width:min(22rem,calc(100vw - 2 * var(--gutter)));max-height:min(68vh,560px);
    overflow-y:auto;overscroll-behavior:contain;padding:1rem .75rem;border-radius:var(--radius-card);background:#0b0f17f7;
    border:1px solid var(--line-strong);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:var(--card-shadow);scrollbar-width:thin}
  .gb-panel[hidden]{display:none}
  .gb-panel .sidebar{display:block;position:static;max-height:none;overflow:visible;padding:0}
  .gb-panel .sidebar h2{margin-left:.6rem}
  /* The breadcrumb stays on one tidy line; its links keep a full-height tap area. */
  .hub-eyebrow{margin-bottom:.9rem}
  .hub .article>nav{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.5;margin:0 0 .9rem}
  .hub .article>nav a{display:inline;min-height:0;padding-block:.7rem}
}

/* Eyebrow */
.hub-eyebrow{margin:0 0 1.25rem}

/* Article */
.hub .article>nav{font-size:var(--fs-small);color:var(--ink-3);line-height:1.6;margin:0 0 1.25rem}
.hub .article>nav a{color:var(--ink-3);text-decoration:underline;text-underline-offset:3px;display:inline-flex;align-items:center;min-height:40px}
.hub .article>nav a:hover{color:var(--ink)}
.hub .article h1{font-size:clamp(2.1rem,3.6vw,3.25rem);font-weight:800;letter-spacing:-.025em;line-height:1.1;text-wrap:balance;color:var(--ink);margin:0 0 1.5rem;max-width:22ch}
.hub .article p,.hub .article li{color:var(--ink-2);font-size:var(--fs-body);line-height:1.75}
.hub .article p{margin:0 0 1.1rem}
.hub .article>p:first-of-type{font-size:var(--fs-lead);line-height:1.5;color:var(--ink)}
.hub .article h2{font-size:clamp(1.35rem,1.1vw + 1.05rem,1.75rem);font-weight:700;letter-spacing:-.02em;line-height:1.25;color:var(--ink);margin:2.75rem 0 .9rem}
.hub .article h3{font-size:1.15rem;font-weight:700;letter-spacing:-.01em;line-height:1.3;color:var(--ink);margin:1.9rem 0 .5rem}
.hub .article ul,.hub .article ol{margin:0 0 1.25rem;padding-left:1.35rem}
.hub .article ul{list-style:disc}
.hub .article ol{list-style:decimal}
.hub .article li{margin:.45rem 0}
.hub .article li::marker{color:var(--cyan)}
.hub .article a{color:var(--cyan);text-decoration:underline;text-underline-offset:3px}
.hub .article a:hover{color:var(--ink)}
.hub .article strong{color:var(--ink);font-weight:600}

/* Resource index: the guides as site cards */
.hub-content[data-id=IDX] .article>ul{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin:1.25rem 0 2rem}
.hub-content[data-id=IDX] .article>ul>li{margin:0;background:var(--bg-raised);border:1px solid var(--line);border-radius:var(--radius-card);padding:1.35rem 1.4rem;transition:border-color .45s var(--ease),transform .45s var(--ease)}
.hub-content[data-id=IDX] .article>ul>li:hover{border-color:var(--line-strong);transform:translateY(-2px)}
.hub-content[data-id=IDX] .article>ul>li::marker{content:none}
.hub-content[data-id=IDX] .article>ul>li>a{display:block;color:var(--ink);font-weight:700;font-size:1.02rem;line-height:1.4;text-decoration:none;margin-bottom:.4rem}
.hub-content[data-id=IDX] .article>ul>li>a:hover{color:var(--cyan)}
.hub-content[data-id=IDX] .article>ul>li>p{font-size:.9rem;line-height:1.6;margin:0}
@media(max-width:700px){.hub-content[data-id=IDX] .article>ul{grid-template-columns:1fr}}

/* The EVA mark from eva.ae, drifting with the page */
.hub .watermark{position:fixed;right:-180px;top:30%;width:780px;height:780px;z-index:0;pointer-events:none;opacity:.07;filter:blur(.5px);will-change:transform}
.hub .watermark svg{width:100%;height:100%;display:block}
@media(max-width:1100px){.hub .watermark{right:-300px;width:600px;height:600px}}
@media(max-width:600px){.hub .watermark{right:-220px;top:35%;width:440px;height:440px;opacity:.045}}
@media(prefers-reduced-motion:reduce){.hub .watermark{display:none}}
.hub footer.site{position:relative;z-index:1}

/* An open menu fills the screen: a frosted header would otherwise trap the fixed menu inside its own box, and it switches at once (no fade) so the page never shows through while the menu opens. */
body.is-locked .nav{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--bg);transition:none}