/* ============================================================
   NUVEX CONTENT PAGES — v9 (2026-10-10)
   Guides, use cases, comparisons, specs and company pages.

   The landing's language, carried into pages people read: a soft
   grey page, white cards, lavender panels, ink for the one main
   action, the logo's violet as the brand mark. Visuals before
   words; every example sits on a tinted stage like the landing's.

   Tokens and buttons: design-system.css. Header/footer: site-chrome.css.
   Built by scripts/pages/build.js — edit the content there, not here.
   ============================================================ */
:root{
  --pg-lav:#F1EEFC;
  --pg-lav-2:#E3DCFB;
  --pg-peach:#FFD2BE;
  --pg-col:680px;
}
.pg-wrap{max-width:var(--nx-wrap);margin:0 auto;padding:0 var(--nx-gutter)}

/* scroll reveal, only once JS is known to run; if pages.js never arrives
   the content shows itself after a moment instead of staying hidden */
.js .pg-rv{opacity:0;translate:0 22px;transition:opacity .8s ease,translate 1.05s var(--nx-ease)}
.js .pg-rv.in{opacity:1;translate:0 0}
.js:not(.pg-ready) .pg-rv{animation:pgShow .6s ease 2.2s forwards}
@keyframes pgShow{to{opacity:1;translate:0 0}}

/* ---------- hero: the page's name, one line, then a visual ---------- */
.pg-hero{position:relative;overflow:hidden;padding:clamp(44px,5.5vw,76px) 0 clamp(8px,1.4vw,16px);text-align:center}
.pg-hero .pg-wrap{position:relative;z-index:1}
.pg-crumbs{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:7px;margin:0 0 16px;font-size:13px;color:var(--nx-mute)}
.pg-crumbs a{color:var(--nx-sub)}
.pg-crumbs a:hover{color:var(--nx-ink)}
.pg-crumbs span[aria-hidden]{color:var(--nx-line-strong)}
.pg-hero h1{max-width:22ch;margin:0 auto;font-size:clamp(30px,3.4vw,44px);font-weight:500;line-height:1.08;letter-spacing:-.04em;color:var(--nx-ink);text-wrap:balance}
.pg-hero h1 em{color:var(--nx-violet)}
.pg-lede{max-width:52ch;margin:12px auto 0;font-size:16.5px;line-height:1.55;letter-spacing:-.014em;color:var(--nx-sub);text-wrap:pretty}
.pg-meta{display:flex;justify-content:center;flex-wrap:wrap;gap:4px 0;margin:14px 0 0;font-size:13px;color:var(--nx-mute)}
.pg-meta span{display:inline-flex;align-items:center}
.pg-meta span + span::before{content:"";width:3px;height:3px;margin:0 12px;border-radius:50%;background:var(--nx-line-strong)}
.pg-meta .ok::after{content:"";order:-1;width:6px;height:6px;margin-right:7px;border-radius:50%;background:var(--nx-green)}
.pg-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:24px}

/* the hero's own visual, under the words */
.pg-hero-art{margin-top:clamp(28px,3.6vw,44px);margin-bottom:clamp(8px,1.6vw,20px)}

/* a few flat brand shapes, still, on hub pages only */
.pg-sh{position:absolute;display:block;pointer-events:none;z-index:0}
.pg-sh.a{left:6%;top:30%;width:70px;height:70px;background:var(--nx-brand);border-radius:100% 0 100% 100%;transform:rotate(-12deg)}
.pg-sh.b{right:8%;top:24%;width:64px;height:24px;background:var(--pg-peach);border-radius:999px;transform:rotate(-12deg)}
.pg-sh.c{right:12%;bottom:12%;width:62px;height:62px;border:8px solid var(--pg-lav-2);border-radius:50%}
.pg-sh.d{left:11%;bottom:14%;width:36px;height:36px;background:var(--nx-ink);border-radius:14px;transform:rotate(12deg)}
@media (max-width:980px){.pg-sh{display:none}}

/* ---------- body: one centred reading column ---------- */
.pg-body{display:grid;grid-template-columns:minmax(0,var(--pg-col));justify-content:center;padding:clamp(28px,3.4vw,48px) var(--nx-gutter) clamp(64px,7vw,96px)}
/* long pages: a folded list of sections above the text */
.pg-toc-fold{margin:0;border:1px solid var(--nx-line);border-radius:16px;background:var(--nx-surface)}
.pg-toc-fold summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:13px 18px;font-size:14.5px;font-weight:500;color:var(--nx-ink)}
.pg-toc-fold summary span{font-weight:400;color:var(--nx-mute)}
.pg-toc-fold summary::-webkit-details-marker{display:none}
.pg-toc-fold summary::after{content:"";margin-left:auto;width:8px;height:8px;border-right:1.6px solid var(--nx-sub);border-bottom:1.6px solid var(--nx-sub);transform:rotate(45deg) translateY(-2px);transition:transform .3s var(--nx-ease)}
.pg-toc-fold[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.pg-toc-fold ol{list-style:none;margin:0;padding:0 18px 10px;columns:2 220px;column-gap:28px}
.pg-toc-fold li{break-inside:avoid}
.pg-toc-fold a{display:block;padding:7px 0;font-size:14.5px;line-height:1.4;color:var(--nx-sub);border-top:1px solid var(--nx-line)}
.pg-toc-fold a:hover{color:var(--nx-ink)}

/* ---------- the reading column ---------- */
.pg-article{min-width:0;font-size:16.5px;line-height:1.7;letter-spacing:-.011em;color:var(--nx-text-2)}
.pg-article > * + *{margin-top:18px}
.pg-article > section > * + *{margin-top:18px}
.pg-article > section{margin-top:clamp(52px,5.5vw,68px)}
.pg-article > section:first-of-type{margin-top:clamp(36px,4vw,48px)}
.pg-article > :first-child{margin-top:0}
.pg-article h2{font-size:clamp(23px,2.2vw,28px);font-weight:500;line-height:1.15;letter-spacing:-.035em;color:var(--nx-ink);scroll-margin-top:calc(var(--chrome-h,68px) + 28px);text-wrap:balance}
.pg-article h2 + *{margin-top:16px}
.pg-article h3{margin-top:32px;font-size:18.5px;font-weight:500;line-height:1.28;letter-spacing:-.025em;color:var(--nx-ink);scroll-margin-top:calc(var(--chrome-h,68px) + 28px)}
.pg-article h3 + *{margin-top:10px}
.pg-article p{text-wrap:pretty}
.pg-article ul:not([class]),.pg-article ol:not([class]){padding-left:1.25em}
.pg-article ul:not([class]) li + li,.pg-article ol:not([class]) li + li{margin-top:8px}
.pg-article li::marker{color:var(--nx-mute)}
.pg-article strong,.pg-article b{font-weight:500;color:var(--nx-ink)}
.pg-article a:not([class]){color:var(--nx-violet);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--nx-violet) 32%,transparent);text-underline-offset:3px;transition:text-decoration-color .16s ease}
.pg-article a:not([class]):hover{text-decoration-color:var(--nx-violet)}
.pg-article code{padding:2px 6px;border-radius:6px;background:var(--nx-field);font-family:var(--nx-mono);font-size:.86em;color:var(--nx-ink)}
.pg-article kbd{padding:1px 6px;border-radius:6px;border:1px solid var(--nx-line-strong);font-family:var(--nx-mono);font-size:.82em}
.pg-article hr{height:1px;border:0;background:var(--nx-line);margin:40px 0}
.pg-label{display:block;font-family:var(--nx-mono);font-size:11px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--nx-mute)}

/* the direct answer: the first thing a reader (or an AI) sees */
.pg-answer{padding:22px 24px 24px;background:var(--nx-surface);border:1px solid var(--nx-line);border-radius:20px;box-shadow:var(--nx-shadow-card)}
.pg-answer .pg-label{margin-bottom:10px;color:var(--nx-violet)}
.pg-answer p{font-size:16.5px;line-height:1.6;color:var(--nx-ink)}
.pg-answer p + p{margin-top:10px}

/* notes */
.pg-note{padding:18px 20px 19px;border-radius:18px;background:var(--pg-lav);font-size:16px;line-height:1.6;color:var(--nx-text-2)}
.pg-note .pg-label{margin-bottom:6px;color:var(--nx-violet)}
.pg-note.warn{background:var(--nx-amber-tint)}
.pg-note.warn .pg-label{color:var(--nx-amber)}
.pg-note.plain{background:var(--nx-field)}
.pg-note.plain .pg-label{color:var(--nx-mute)}
.pg-note p + p{margin-top:8px}

/* real numbers, set large */
.pg-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.pg-facts > div{padding:18px 18px 17px;background:var(--nx-surface);border:1px solid var(--nx-line);border-radius:18px}
.pg-facts b{display:block;font-size:clamp(20px,2vw,24px);font-weight:500;line-height:1.1;letter-spacing:-.035em;color:var(--nx-ink);font-variant-numeric:tabular-nums}
.pg-facts span{display:block;margin-top:6px;font-size:13.5px;line-height:1.4;color:var(--nx-sub)}

/* tables */
.pg-table-wrap{overflow-x:auto;background:var(--nx-surface);border:1px solid var(--nx-line);border-radius:18px;-webkit-overflow-scrolling:touch}
.pg-table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.5}
.pg-table th{padding:12px 16px;text-align:left;font-size:12.5px;font-weight:500;letter-spacing:-.005em;color:var(--nx-sub);background:var(--nx-paper);border-bottom:1px solid var(--nx-line);white-space:nowrap}
.pg-table td{padding:13px 16px;border-bottom:1px solid var(--nx-line);vertical-align:top;color:var(--nx-text-2)}
.pg-table tr:last-child td{border-bottom:0}
.pg-table td:first-child{color:var(--nx-ink)}
.pg-table .dim{font-family:var(--nx-mono);font-size:13.5px;letter-spacing:-.01em;color:var(--nx-ink);white-space:nowrap}
.pg-table .sub{display:block;margin-top:2px;font-size:13px;color:var(--nx-mute)}
.pg-table caption{caption-side:bottom;padding:10px 16px 12px;text-align:left;font-size:13px;color:var(--nx-mute);border-top:1px solid var(--nx-line)}
.pg-table.cmp td.us,.pg-table.cmp th.us{background:var(--pg-lav)}
.pg-table.cmp th.us{color:var(--nx-violet)}
.pg-yes,.pg-no,.pg-part{display:inline-flex;align-items:center;gap:7px}
.pg-yes::before,.pg-no::before,.pg-part::before{content:"";flex:none;width:16px;height:16px;border-radius:50%;background:center/10px no-repeat}
.pg-yes::before{background-color:var(--nx-green-tint);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23287649' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
.pg-no::before{background-color:var(--nx-field);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E6E77' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7 7 17'/%3E%3C/svg%3E")}
.pg-part::before{background-color:var(--nx-amber-tint);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2393600F' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E")}

/* a dimension you can copy with one click */
.pg-copy{display:inline-flex;align-items:center;gap:6px;height:28px;margin:-3px 0;padding:0 9px;border-radius:8px;background:var(--nx-field);font-family:var(--nx-mono);font-size:13.5px;letter-spacing:-.01em;color:var(--nx-ink);white-space:nowrap;cursor:pointer;transition:background-color .16s ease}
.pg-copy:hover{background:var(--nx-line)}
.pg-copy::after{content:"";width:12px;height:12px;opacity:.45;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317171A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='12' height='12' rx='2'/%3E%3Cpath d='M5 15V5a2 2 0 0 1 2-2h10'/%3E%3C/svg%3E") center/contain no-repeat}
.pg-copy.done{background:var(--nx-green-tint);color:var(--nx-green)}
.pg-copy.done::after{opacity:1;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23287649' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E")}

.pg-stack{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.pg-tag{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:999px;background:var(--nx-field);font-size:12px;font-weight:500;color:var(--nx-text-2);white-space:nowrap}
.pg-tag.req{background:var(--nx-violet);color:#fff}
.pg-tag.soon{background:var(--nx-amber-tint);color:var(--nx-amber)}

/* plain-text dimensions block (people type 1320x2868 with a letter x) */
.pg-plain{padding:18px 20px;border-radius:18px;background:var(--nx-surface);border:1px solid var(--nx-line);font-family:var(--nx-mono);font-size:13.5px;line-height:1.9;color:var(--nx-text-2);white-space:pre-wrap;overflow-x:auto}

/* steps, numbered on a thin line */
.pg-steps{list-style:none;margin:0;padding:0;counter-reset:pgs}
.pg-steps > li{position:relative;padding:0 0 28px 54px;counter-increment:pgs}
.pg-steps > li::before{content:counter(pgs);position:absolute;left:0;top:-1px;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:var(--nx-ink);color:#fff;font-size:14px;font-weight:500}
.pg-steps > li::after{content:"";position:absolute;left:15.5px;top:39px;bottom:6px;width:1px;background:var(--nx-line-strong)}
.pg-steps > li:last-child{padding-bottom:0}
.pg-steps > li:last-child::after{display:none}
.pg-steps > li > b{display:block;font-size:17.5px;font-weight:500;letter-spacing:-.02em;color:var(--nx-ink)}
.pg-steps > li > p{margin-top:4px}

/* ---------- storyboard: a set drawn as five little frames ---------- */
.pg-board{display:grid;grid-template-columns:repeat(var(--n,5),minmax(0,1fr));gap:clamp(8px,1.2vw,14px)}
.pg-frame{margin:0;min-width:0}
.pg-role{display:block;margin:0 0 8px;font-family:var(--nx-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--nx-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pg-mini{position:relative;display:block;aspect-ratio:1320/2868;overflow:hidden;border-radius:clamp(9px,1vw,13px);background:var(--tint,#EEEBFB);box-shadow:0 1px 2px rgba(16,16,20,.06),0 16px 30px -22px rgba(16,16,20,.4)}
.pg-mini > b{position:absolute;left:7%;right:7%;top:7%;font-size:clamp(11px,1.12vw,15px);font-weight:600;line-height:1.02;letter-spacing:-.035em;text-align:center;color:var(--fg,#17171A);text-wrap:balance}
.pg-mini > i{position:absolute;left:13%;right:13%;top:27%;bottom:-8%;border:clamp(3px,.35vw,4px) solid var(--bezel,#17171A);border-bottom:0;border-radius:clamp(12px,1.4vw,18px);background:var(--screen,#fff)}
.pg-mini > i::before{content:"";position:absolute;left:50%;top:5px;width:26%;height:5px;translate:-50% 0;border-radius:9px;background:var(--bezel,#17171A)}
.pg-mini > i::after{content:"";position:absolute;left:12%;right:12%;top:15%;height:52%;border-radius:6px;background:
  linear-gradient(var(--ui,#ECEAF7),var(--ui,#ECEAF7)) 0 0/60% 9% no-repeat,
  linear-gradient(var(--ui2,#F4F3FA),var(--ui2,#F4F3FA)) 0 22%/100% 30% no-repeat,
  linear-gradient(var(--ui,#ECEAF7),var(--ui,#ECEAF7)) 0 66%/100% 12% no-repeat,
  linear-gradient(var(--ui,#ECEAF7),var(--ui,#ECEAF7)) 0 86%/72% 12% no-repeat}
.pg-mini.scene > i{display:none}
.pg-mini.scene::after{content:"";position:absolute;left:14%;right:14%;top:34%;bottom:12%;border-radius:12px;background:var(--hero,rgba(255,255,255,.75));box-shadow:0 10px 22px -16px rgba(16,16,20,.4)}
.pg-mini.scene::before{content:"";position:absolute;z-index:1;right:10%;top:56%;width:44%;height:9%;border-radius:999px;background:#fff;box-shadow:0 6px 14px -10px rgba(16,16,20,.45)}
.pg-frame figcaption{margin-top:10px;font-size:13.5px;line-height:1.42;color:var(--nx-sub)}
.pg-frame figcaption b,.pg-frame figcaption strong{display:block;font-weight:500;color:var(--nx-ink)}
@media (max-width:640px){
  .pg-board{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 calc(-1 * var(--nx-gutter));padding:4px var(--nx-gutter) 10px}
  .pg-board::-webkit-scrollbar{display:none}
  .pg-frame{flex:0 0 38%;scroll-snap-align:start}
  .pg-mini > b{font-size:13px}
}

/* palette swatches */
.pg-swatches{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:10px}
.pg-swatch{display:block;overflow:hidden;border-radius:16px;background:var(--nx-surface);border:1px solid var(--nx-line)}
.pg-swatch i{display:block;height:64px;background:var(--c)}
.pg-swatch b{display:block;padding:10px 12px 0;font-family:var(--nx-mono);font-size:12.5px;font-weight:400;letter-spacing:0;color:var(--nx-ink)}
.pg-swatch small{display:block;padding:1px 12px 12px;font-size:13px;line-height:1.35;color:var(--nx-sub)}

/* do / don't */
.pg-dd{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pg-dd > div{padding:18px 20px 20px;border-radius:18px;background:var(--nx-surface);border:1px solid var(--nx-line)}
.pg-dd .pg-label{margin-bottom:10px}
.pg-dd .do .pg-label{color:var(--nx-green)}
.pg-dd .dont .pg-label{color:var(--nx-red)}
.pg-dd ul{list-style:none;margin:0;padding:0}
.pg-dd li{position:relative;padding-left:24px;font-size:15.5px;line-height:1.5}
.pg-dd li + li{margin-top:9px}
.pg-dd li::before{content:"";position:absolute;left:0;top:4px;width:15px;height:15px;border-radius:50%;background:center/9px no-repeat}
.pg-dd .do li::before{background-color:var(--nx-green-tint);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23287649' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
.pg-dd .dont li::before{background-color:var(--nx-red-tint);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23BD3B36' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7 7 17'/%3E%3C/svg%3E")}
@media (max-width:640px){.pg-dd{grid-template-columns:1fr}}

/* headlines: the weak version, then the one that sells */
.pg-heads{display:grid;gap:10px}
.pg-head{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:14px;padding:16px 18px;border-radius:18px;background:var(--nx-surface);border:1px solid var(--nx-line)}
.pg-head s{font-size:15px;line-height:1.4;color:var(--nx-mute);text-decoration-color:color-mix(in srgb,var(--nx-red) 55%,transparent)}
.pg-head i{width:22px;height:22px;border-radius:50%;background:var(--nx-field) center/12px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2362626B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E")}
.pg-head b{font-size:17px;font-weight:600;line-height:1.15;letter-spacing:-.03em;color:var(--nx-ink)}
.pg-head small{display:block;margin-top:3px;font-family:var(--nx-mono);font-size:11.5px;font-weight:400;letter-spacing:0;color:var(--nx-mute)}
@media (max-width:560px){.pg-head{grid-template-columns:1fr;gap:8px}.pg-head i{display:none}}

/* chips: short lists that read better as tags */
.pg-chips{display:flex;flex-wrap:wrap;gap:8px}
.pg-chips span{display:inline-flex;align-items:center;height:32px;padding:0 13px;border-radius:999px;background:var(--nx-surface);box-shadow:inset 0 0 0 1px var(--nx-line);font-size:14px;color:var(--nx-text-2)}
.pg-chips.bad span{text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--nx-red) 50%,transparent);color:var(--nx-mute)}

/* cards for points that deserve a box each */
.pg-points{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:12px}
.pg-point{padding:20px 22px 22px;border-radius:20px;background:var(--nx-surface);border:1px solid var(--nx-line)}
.pg-point .pg-num{display:inline-grid;place-items:center;width:28px;height:28px;margin-bottom:14px;border-radius:9px;background:var(--pg-lav);font-family:var(--nx-mono);font-size:12px;color:var(--nx-violet)}
.pg-point h3,.pg-point b.t{display:block;margin:0 0 6px;font-size:17.5px;font-weight:500;line-height:1.3;letter-spacing:-.022em;color:var(--nx-ink)}
.pg-point p{font-size:15.5px;line-height:1.55;color:var(--nx-sub)}

/* ---------- examples: a set on a tinted stage, like the landing ---------- */
.pg-stage{margin:0;padding:clamp(14px,2.6vw,36px);border-radius:clamp(20px,2.4vw,30px);background:var(--tint,#EEEBFB)}
.pg-wall{display:grid;grid-template-columns:repeat(var(--n,5),minmax(0,1fr));gap:clamp(8px,1.3vw,16px)}
.pg-stage figcaption{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;margin-top:clamp(14px,1.8vw,22px);font-size:13.5px;line-height:1.45;color:color-mix(in srgb,var(--nx-ink) 70%,transparent)}
.pg-stage figcaption b{font-weight:500;color:var(--nx-ink)}
.pg-stage figcaption .pg-prompt{flex:1 1 320px;min-width:0}
.pg-stage figcaption .pg-tags{display:flex;flex-wrap:wrap;gap:6px}
.pg-stage figcaption .pg-tags span{height:24px;display:inline-flex;align-items:center;padding:0 9px;border-radius:999px;background:rgba(255,255,255,.6);font-size:12px;color:var(--nx-text-2)}
.pg-hero .pg-stage{max-width:1040px;margin:0 auto}
@media (max-width:820px){
  .pg-stage{border-radius:22px}
  .pg-wall{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 calc(-1 * clamp(14px,2.6vw,36px));padding:2px clamp(14px,2.6vw,36px) 12px}
  .pg-wall::-webkit-scrollbar{display:none}
  .pg-wall > *{flex:0 0 42%;scroll-snap-align:start}
}
@media (max-width:520px){.pg-wall > *{flex-basis:62%}}

/* an image, or — until the owner supplies it — a marked empty slot */
.pg-img{display:block;width:100%;height:auto;aspect-ratio:var(--ar,1320/2868);object-fit:cover;border-radius:clamp(10px,1.2vw,16px);background:rgba(255,255,255,.55);box-shadow:0 1px 2px rgba(16,16,20,.06),0 22px 44px -28px rgba(16,16,20,.4)}
.pg-slot{position:relative;display:block;width:100%;aspect-ratio:var(--ar,1320/2868);border-radius:clamp(10px,1.2vw,16px);background:rgba(255,255,255,.62);border:1.5px dashed color-mix(in srgb,var(--nx-ink) 20%,transparent)}
.pg-slot::before{content:"";position:absolute;left:50%;top:50%;width:26px;height:26px;translate:-50% -34px;background:var(--nx-mute);opacity:.75;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='3'/%3E%3Ccircle cx='9' cy='10' r='1.7'/%3E%3Cpath d='M21 16l-5-5-8 9'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='3'/%3E%3Ccircle cx='9' cy='10' r='1.7'/%3E%3Cpath d='M21 16l-5-5-8 9'/%3E%3C/svg%3E") center/contain no-repeat}
.pg-slot::after{content:"Image here\A" attr(data-slot);white-space:pre;position:absolute;left:6px;right:6px;top:50%;translate:0 -2px;text-align:center;font-size:12.5px;line-height:1.55;letter-spacing:-.005em;color:var(--nx-sub)}
.pg-figure{margin:0}
.pg-figure figcaption{margin-top:10px;font-size:13.5px;line-height:1.45;color:var(--nx-mute)}
.pg-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,2vw,24px);align-items:end}
.pg-pair .pg-arrow{display:none}
/* pictures not made yet: the owner sees the "Image here" boxes on their own
   computer; visitors on the live site never see an empty box */
html:not(.pg-local) .pg-empty{display:none}
html:not(.pg-local) .pg-hero-art:not(:has(> :not(.pg-empty))){display:none}

/* ---------- device outlines drawn to scale (spec pages) ---------- */
.pg-devices{display:flex;align-items:flex-end;justify-content:center;gap:clamp(14px,3vw,40px);padding:clamp(26px,4vw,44px) clamp(12px,3vw,32px) clamp(20px,3vw,32px);border-radius:clamp(22px,2.6vw,30px);background:var(--tint,var(--pg-lav))}
.pg-dev{display:flex;flex-direction:column;align-items:center;gap:12px;min-width:0}
.pg-dev i{display:block;width:var(--w);aspect-ratio:var(--ar);border-radius:var(--r,16px);background:var(--nx-surface);box-shadow:0 0 0 2px var(--nx-ink),0 22px 40px -24px rgba(16,16,20,.45);position:relative}
.pg-dev i::before{content:"";position:absolute;left:50%;top:6px;width:22%;height:5px;translate:-50% 0;border-radius:6px;background:var(--nx-ink);opacity:var(--island,1)}
.pg-dev i::after{content:attr(data-dim);position:absolute;inset:auto 0 50%;translate:0 50%;text-align:center;font-family:var(--nx-mono);font-size:clamp(10px,1vw,12.5px);color:var(--nx-ink);white-space:pre}
.pg-dev span{font-size:13px;line-height:1.35;text-align:center;color:var(--nx-text-2)}
.pg-dev span b{display:block;font-weight:500;color:var(--nx-ink)}
.pg-dev.req i{box-shadow:0 0 0 2.5px var(--nx-violet),0 22px 40px -24px rgba(16,16,20,.45)}
.pg-dev.req span b::after{content:"Required";display:inline-block;margin-left:6px;padding:0 7px;border-radius:999px;background:var(--nx-violet);color:#fff;font-size:10.5px;line-height:18px;vertical-align:1px}

/* ---------- the try box: the landing's composer, ready to go ---------- */
.pg-try{margin:0}
.pg-try-in{position:relative;overflow:hidden;padding:clamp(36px,5vw,64px) clamp(20px,4vw,56px);border-radius:clamp(24px,2.6vw,32px);background:var(--pg-lav);text-align:center}
.pg-try h2{max-width:20ch;margin:0 auto;font-size:clamp(26px,2.8vw,38px);font-weight:500;line-height:1.06;letter-spacing:-.045em;color:var(--nx-ink);text-wrap:balance}
.pg-try p{max-width:46ch;margin:12px auto 0;font-size:16px;line-height:1.5;color:var(--nx-sub)}
.pg-composer{max-width:600px;margin:26px auto 0;text-align:left;padding:15px 9px 9px 18px;border-radius:18px;background:var(--nx-surface);border:1px solid var(--nx-line);box-shadow:var(--nx-shadow-card);transition:border-color .2s ease,box-shadow .3s ease}
.pg-composer:hover{border-color:var(--nx-line-strong)}
.pg-composer:focus-within{border-color:var(--nx-line-strong);box-shadow:0 0 0 4px rgba(16,16,20,.035),var(--nx-shadow-card)}
.pg-composer input[type=text]{display:block;width:100%;margin:0 0 12px;padding:0 8px 0 0;border:0;background:none;font-size:15px;line-height:1.5;letter-spacing:-.014em;color:var(--nx-ink)}
.pg-composer input[type=text]::placeholder{color:var(--nx-mute)}
.pg-composer input[type=text]:focus{outline:none}
.pg-composer-bar{display:flex;align-items:center;gap:8px}
.pg-add{display:inline-flex;align-items:center;gap:6px;height:34px;margin-left:-8px;padding:0 10px 0 8px;border-radius:9px;font-size:13.5px;font-weight:500;color:var(--nx-text-2);transition:background-color .16s ease,color .16s ease}
.pg-add:hover{background:var(--nx-field);color:var(--nx-ink)}
.pg-add svg,.pg-start svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.pg-start{margin-left:auto;flex:none;width:34px;height:34px;display:grid;place-items:center;border:0;border-radius:50%;background:var(--nx-action);color:#fff;cursor:pointer;transition:background-color .2s ease,transform .25s var(--nx-ease)}
.pg-start:hover{background:var(--nx-action-hover)}
.pg-start:active{transform:scale(.94)}
.pg-try small{display:block;margin-top:16px;font-size:13px;color:var(--nx-sub)}
html.signed-in .pg-try small{visibility:hidden}

/* ---------- FAQ ---------- */
.pg-faq{border-top:1px solid var(--nx-line)}
.pg-faq details{border-bottom:1px solid var(--nx-line)}
.pg-faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:16px;padding:17px 2px;font-size:16px;font-weight:500;line-height:1.4;letter-spacing:-.02em;color:var(--nx-ink);transition:color .16s ease}
.pg-faq summary:hover{color:var(--nx-violet)}
.pg-faq summary::-webkit-details-marker{display:none}
.pg-faq summary::after{content:"";margin-left:auto;flex:none;width:9px;height:9px;border-right:1.6px solid var(--nx-sub);border-bottom:1.6px solid var(--nx-sub);transform:rotate(45deg) translateY(-3px);transition:transform .35s var(--nx-ease)}
.pg-faq details[open] summary::after{transform:rotate(-135deg) translateY(-3px)}
.pg-faq details > div{padding:0 2px 20px;font-size:15.5px;line-height:1.65;color:var(--nx-sub)}
.pg-faq details > div p + p{margin-top:8px}

/* ---------- related pages ---------- */
.pg-related{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:10px}
.pg-card{display:flex;flex-direction:column;gap:4px;padding:18px 18px 16px;border-radius:18px;background:var(--nx-surface);border:1px solid var(--nx-line);color:inherit;transition:border-color .2s ease,transform .45s var(--nx-ease),box-shadow .35s ease}
.pg-card:hover{border-color:var(--nx-line-strong);transform:translateY(-3px);box-shadow:var(--nx-shadow-card)}
.pg-card b{font-size:15.5px;font-weight:500;line-height:1.3;letter-spacing:-.018em;color:var(--nx-ink)}
.pg-card span{font-size:13.5px;line-height:1.45;color:var(--nx-sub)}
.pg-card .pg-go{margin-top:auto;padding-top:10px;font-size:13px;font-weight:500;color:var(--nx-violet)}

/* who wrote it, when it was checked, against what */
.pg-byline{display:flex;gap:14px;align-items:flex-start;padding:20px 0 0;border-top:1px solid var(--nx-line);font-size:14px;line-height:1.55;color:var(--nx-sub)}
.pg-byline img{flex:none;width:36px;height:36px;border-radius:10px}
.pg-byline b{font-weight:500;color:var(--nx-ink)}
.pg-byline ul{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:4px 14px}
.pg-byline a{color:var(--nx-sub);text-decoration:underline;text-decoration-color:var(--nx-line-strong);text-underline-offset:3px}
.pg-byline a:hover{color:var(--nx-ink)}

/* ---------- comparisons ---------- */
.pg-versus{display:flex;align-items:center;justify-content:center;gap:12px;margin:22px 0 0}
.pg-versus span{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px 0 10px;border-radius:999px;background:var(--nx-surface);box-shadow:0 0 0 1px var(--nx-line);font-size:15px;font-weight:500;color:var(--nx-ink)}
.pg-versus span img{width:22px;height:22px;border-radius:6px}
.pg-versus span.them::before{content:attr(data-i);display:grid;place-items:center;width:22px;height:22px;border-radius:7px;background:var(--nx-field);font-size:12px;font-weight:600;color:var(--nx-sub)}
.pg-versus em{font-family:var(--nx-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--nx-mute)}
.pg-verdict{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pg-verdict > div{padding:20px 22px 22px;border-radius:20px;background:var(--nx-surface);border:1px solid var(--nx-line)}
.pg-verdict > div.us{background:var(--pg-lav);border-color:transparent}
.pg-verdict .pg-label{margin-bottom:12px}
.pg-verdict .us .pg-label{color:var(--nx-violet)}
.pg-verdict ul{list-style:none;margin:0;padding:0}
.pg-verdict li{position:relative;padding-left:20px;font-size:15.5px;line-height:1.5;color:var(--nx-text-2)}
.pg-verdict li + li{margin-top:8px}
.pg-verdict li::before{content:"";position:absolute;left:2px;top:9px;width:7px;height:7px;border-radius:50%;background:var(--nx-line-strong)}
.pg-verdict .us li::before{background:var(--nx-violet)}
@media (max-width:640px){.pg-verdict{grid-template-columns:1fr}}

/* ---------- hubs ---------- */
.pg-hub{padding:clamp(8px,1.5vw,16px) var(--nx-gutter) clamp(72px,8vw,112px)}
.pg-group{margin-top:clamp(44px,5vw,64px)}
.pg-group:first-child{margin-top:0}
.pg-group-h{display:flex;align-items:baseline;gap:10px;margin:0 0 16px}
.pg-group-h h2{font-size:clamp(22px,2.2vw,28px);font-weight:500;letter-spacing:-.04em}
.pg-group-h span{font-family:var(--nx-mono);font-size:12.5px;color:var(--nx-mute)}
.pg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:12px}
.pg-tile{position:relative;display:flex;flex-direction:column;min-height:100%;overflow:hidden;border-radius:22px;background:var(--nx-surface);border:1px solid var(--nx-line);color:inherit;transition:border-color .2s ease,transform .45s var(--nx-ease),box-shadow .35s ease}
.pg-tile:hover{border-color:var(--nx-line-strong);transform:translateY(-4px);box-shadow:var(--nx-shadow-card)}
.pg-tile-art{display:flex;justify-content:center;align-items:flex-end;gap:8px;height:150px;padding:20px 20px 0;overflow:hidden;background:var(--tint,var(--pg-lav))}
.pg-tile-art .pg-mini{flex:0 0 30%;border-radius:10px 10px 0 0;aspect-ratio:auto;height:120%;align-self:flex-start;margin-top:4px}
.pg-tile-art .pg-mini:nth-child(2){margin-top:-6px}
.pg-tile-art .pg-mini > b{font-size:10.5px;top:8%}
.pg-tile-art .pg-mini > i{top:31%;border-width:2.5px;border-radius:11px}
.pg-tile-art .pg-mini > i::before{top:3px;height:3px}
.pg-tile-b{display:flex;flex-direction:column;gap:4px;padding:16px 18px 18px}
.pg-tile-b b{font-size:16.5px;font-weight:500;letter-spacing:-.022em;color:var(--nx-ink)}
.pg-tile-b span{font-size:14px;line-height:1.45;color:var(--nx-sub)}
.pg-rows{display:flex;flex-direction:column;border-top:1px solid var(--nx-line)}
.pg-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:18px;padding:18px 4px;border-bottom:1px solid var(--nx-line);color:inherit;transition:background-color .2s ease,padding .35s var(--nx-ease)}
.pg-row:hover{background:var(--nx-surface);padding-left:14px;padding-right:14px}
.pg-row b{display:block;font-size:17px;font-weight:500;letter-spacing:-.022em;color:var(--nx-ink)}
.pg-row span.d{display:block;margin-top:2px;font-size:14.5px;color:var(--nx-sub)}
.pg-row .k{height:26px;display:inline-flex;align-items:center;padding:0 10px;border-radius:999px;background:var(--nx-field);font-size:12.5px;color:var(--nx-text-2);white-space:nowrap}
.pg-row svg{width:16px;height:16px;fill:none;stroke:var(--nx-mute);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:translate .25s var(--nx-ease),stroke .2s ease}
.pg-row:hover svg{translate:3px 0;stroke:var(--nx-ink)}
@media (max-width:640px){.pg-row{grid-template-columns:minmax(0,1fr) auto}.pg-row .k{display:none}}

/* filter chips (examples, glossary) */
.pg-filter{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:0 0 clamp(22px,3vw,32px)}
.pg-filter button{height:34px;padding:0 14px;border-radius:999px;background:var(--nx-surface);box-shadow:inset 0 0 0 1px var(--nx-line);font-size:14px;color:var(--nx-sub);transition:background-color .16s ease,color .16s ease,box-shadow .16s ease}
.pg-filter button:hover{color:var(--nx-ink);box-shadow:inset 0 0 0 1px var(--nx-line-strong)}
.pg-filter button[aria-pressed="true"]{background:var(--nx-ink);color:#fff;box-shadow:none}
.pg-sets{display:flex;flex-direction:column;gap:clamp(28px,4vw,48px)}
.pg-set[hidden]{display:none}
.pg-set-h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 16px;margin:0 0 14px}
.pg-set-h h2{font-size:clamp(20px,2vw,26px);font-weight:500;letter-spacing:-.035em}
.pg-set-h a{font-size:14px;font-weight:500;color:var(--nx-violet)}

/* glossary */
.pg-az{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 8px}
.pg-az a{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--nx-surface);box-shadow:inset 0 0 0 1px var(--nx-line);font-family:var(--nx-mono);font-size:13px;color:var(--nx-text-2)}
.pg-az a:hover{box-shadow:inset 0 0 0 1px var(--nx-ink);color:var(--nx-ink)}
.pg-search{display:flex;align-items:center;gap:10px;height:48px;padding:0 16px;border-radius:14px;background:var(--nx-surface);border:1px solid var(--nx-line-strong)}
.pg-search svg{flex:none;width:16px;height:16px;fill:none;stroke:var(--nx-mute);stroke-width:2;stroke-linecap:round}
.pg-search input{flex:1;min-width:0;height:100%;border:0;background:none;font-size:15.5px;color:var(--nx-ink)}
.pg-search input:focus{outline:none}
.pg-search:focus-within{border-color:var(--nx-ink)}
.pg-gloss{margin:0}
.pg-gloss > div{padding:18px 0;border-bottom:1px solid var(--nx-line);scroll-margin-top:calc(var(--chrome-h,68px) + 24px)}
.pg-gloss > div[hidden]{display:none}
.pg-gloss dt{font-size:17.5px;font-weight:500;letter-spacing:-.02em;color:var(--nx-ink)}
.pg-gloss dt small{margin-left:8px;font-family:var(--nx-mono);font-size:11.5px;font-weight:400;letter-spacing:.06em;text-transform:uppercase;color:var(--nx-mute)}
.pg-gloss dd{margin:6px 0 0;font-size:16px;line-height:1.62;color:var(--nx-text-2)}
.pg-gloss-letter{margin:34px 0 0;padding:0 0 6px;font-family:var(--nx-mono);font-size:13px;letter-spacing:.14em;color:var(--nx-violet);border-bottom:1px solid var(--nx-ink)}

/* checklist that remembers what you ticked */
.pg-progress{position:sticky;top:calc(var(--chrome-h,68px) + 12px);z-index:5;display:flex;align-items:center;gap:14px;padding:12px 16px;border-radius:16px;background:color-mix(in srgb,var(--nx-surface) 92%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--nx-line);font-size:14px;color:var(--nx-sub)}
.pg-progress b{font-weight:500;color:var(--nx-ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.pg-progress i{position:relative;flex:1;height:6px;border-radius:6px;background:var(--nx-field);overflow:hidden}
.pg-progress i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--p,0%);border-radius:inherit;background:var(--nx-ink);transition:width .5s var(--nx-ease)}
.pg-progress button{font-size:13px;color:var(--nx-mute)}
.pg-progress button:hover{color:var(--nx-ink)}
.pg-check{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.pg-check label{display:grid;grid-template-columns:24px minmax(0,1fr);gap:14px;align-items:start;padding:16px 18px;border-radius:16px;background:var(--nx-surface);border:1px solid var(--nx-line);cursor:pointer;transition:border-color .2s ease,background-color .2s ease}
.pg-check label:hover{border-color:var(--nx-line-strong)}
.pg-check input{appearance:none;-webkit-appearance:none;width:22px;height:22px;margin:1px 0 0;border-radius:7px;border:1.5px solid var(--nx-line-strong);background:var(--nx-surface) center/13px no-repeat;cursor:pointer;transition:background-color .2s ease,border-color .2s ease}
.pg-check input:checked{background-color:var(--nx-ink);border-color:var(--nx-ink);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
.pg-check b{display:block;font-size:16px;font-weight:500;line-height:1.4;letter-spacing:-.015em;color:var(--nx-ink);transition:color .2s ease}
.pg-check span{display:block;margin-top:3px;font-size:14.5px;line-height:1.55;color:var(--nx-sub)}
.pg-check label:has(input:checked){background:var(--nx-paper)}
.pg-check label:has(input:checked) b{color:var(--nx-mute);text-decoration:line-through;text-decoration-color:var(--nx-line-strong)}

/* ---------- company pages ---------- */
.pg-split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:720px){.pg-split{grid-template-columns:1fr}}
.pg-contact{display:flex;flex-direction:column;gap:6px;padding:22px 22px 24px;border-radius:20px;background:var(--nx-surface);border:1px solid var(--nx-line)}
.pg-contact b{font-size:17px;font-weight:500;letter-spacing:-.02em;color:var(--nx-ink)}
.pg-contact span{font-size:15px;line-height:1.5;color:var(--nx-sub)}
.pg-contact a{margin-top:8px;font-weight:500;color:var(--nx-violet)}

/* legal text: quieter, denser */
.pg-legal{font-size:16px;line-height:1.7}
.pg-legal h2{font-size:clamp(20px,1.9vw,23px)}
.pg-legal h3{font-size:17.5px}
.pg-legal .highlight{padding:18px 20px;border-radius:18px;background:var(--pg-lav)}
.pg-legal table{width:100%;border-collapse:collapse;font-size:15px;background:var(--nx-surface);border:1px solid var(--nx-line);border-radius:14px;overflow:hidden}
.pg-legal th,.pg-legal td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--nx-line);vertical-align:top}
.pg-legal th{font-size:12.5px;font-weight:500;color:var(--nx-sub);background:var(--nx-paper)}
.pg-legal section > * + *{margin-top:14px}

@media (max-width:560px){
  .pg-hero h1{font-size:clamp(28px,8vw,34px)}
  .pg-article{font-size:16px}
  .pg-answer{padding:18px 18px 20px}
  .pg-try-in{padding:32px 16px}
}
@media (prefers-reduced-motion:reduce){
  .js .pg-rv{opacity:1;translate:none;transition:none}
  .pg-card,.pg-tile,.pg-row,.pg-progress i::after{transition:none}
}

/* ---------- the size checker ---------- */
.pg-hero .pg-tool{max-width:1080px;margin:0 auto;text-align:left}
.pg-tool-points{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:14px;color:var(--nx-sub)}
.pg-tool-points li{position:relative;padding-left:22px}
.pg-tool-points li::before{content:"";position:absolute;left:0;top:4px;width:14px;height:14px;border-radius:50%;background:var(--nx-green-tint) center/9px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23287649' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
.pg-fix{margin:18px 0}
.pg-fix h3{margin:0 0 10px;font-size:15px;font-weight:500;letter-spacing:-.015em;color:var(--nx-ink)}
.pg-fix-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.fix-btn{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:12px 14px;border-radius:14px;background:var(--nx-surface);border:1px solid var(--nx-line);text-align:left;cursor:pointer;transition:border-color .16s ease,transform .3s var(--nx-ease)}
.fix-btn:hover{border-color:var(--nx-ink);transform:translateY(-2px)}
.fix-btn b{font-family:var(--nx-mono);font-size:13.5px;font-weight:500;color:var(--nx-ink)}
.fix-btn b::after{content:" ↓";color:var(--nx-violet)}
.fix-btn span{font-size:12.5px;color:var(--nx-sub)}
.fix-none{font-size:14px;color:var(--nx-mute)}