/* ============================================================
   PAGE: more
   ============================================================ */

/* Visually-hidden utility (WCAG 4.1.2) */
body.page-more .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

body.page-more *, body.page-more *::before, body.page-more *::after, body.page-more { margin: 0; padding: 0; box-sizing: border-box; }

:root:has(body.page-more) {
  --blue-light: #4da6ff;
  --blue-dark: #0a1e3d;
  --bg: #050a14;
  --glass-border: rgba(255,255,255,0.25);
  --card-bg: rgba(255,255,255,0.025);
  --card-border: rgba(255,255,255,0.06);
  --spring: cubic-bezier(0.23, 1, 0.32, 1);
}

html:has(body.page-more) { scroll-behavior: smooth; overflow-x: hidden; }

body.page-more {
  font-family: 'Onest', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: #fff;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  max-width: 100vw;
}

/* ─── Nav ─── */

body.page-more .nav-wrapper { position: fixed; top: 24px; left: 0; right: 0; display: flex; justify-content: center; align-items: center; z-index: 1000; padding: 0 24px; pointer-events: none; }
body.page-more .nav-wrapper.nav-enter { animation: navDrop 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0.3s both; }
/* The page transition must never swallow this entrance: hold it at frame 0
   while the veil is up (html.ll-loading) so the full run plays the moment it
   lifts. Same pattern as the two product heroes. */
html.ll-loading body.page-more .nav-wrapper.nav-enter { animation-play-state: paused; }
body.page-more .nav { pointer-events: auto; }

body.page-more .nav {
  display: flex; align-items: center; gap: 6px; padding: 8px 10px;
  border-radius: 999px; border: 1px solid var(--glass-border);
  position: relative; overflow: hidden;
  background: rgba(18,18,28,0.22);
  backdrop-filter: blur(32px) saturate(1.6);
  -webkit-backdrop-filter: blur(32px) saturate(1.6);
  box-shadow: 0 4px 24px rgba(0,0,0,0.25), 0 1px 3px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.04);
}

body.page-more .nav::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
  background-size: 128px 128px;
  pointer-events: none;
  z-index: 0;
}

body.page-more .nav a {
  position: relative; z-index: 1; text-decoration: none; color: rgba(255,255,255,0.65);
  font-size: 14px; font-weight: 500; padding: 8px 20px; border-radius: 999px;
  transition: color 0.25s, background 0.25s, padding 0.35s cubic-bezier(0.23, 1, 0.32, 1); white-space: nowrap;
  display: flex; align-items: center; gap: 6px; text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

body.page-more .nav a:hover { color: #fff; background: rgba(255,255,255,0.08); }
body.page-more .nav a.active { color: #fff; background: rgba(255,255,255,0.12); }

body.page-more .nav-icon { display: none; width: 16px; height: 16px; fill: currentColor; flex-shrink: 0; }

body.page-more .nav-label { display: inline; overflow: hidden; max-width: 100px; transition: opacity 0.25s ease; opacity: 1; text-overflow: ellipsis; }

body.page-more .light-only { display: none !important; }
[data-theme="light"] body.page-more .dark-only { display: none !important; }
[data-theme="light"] body.page-more .light-only { display: inline !important; }

/* ─── Shared ─── */
body.page-more .btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 14px 32px;
  border-radius: 999px; font-size: 15px; font-weight: 600; text-decoration: none;
  transition: all 0.3s; cursor: pointer; border: none; min-height: 44px; /* WCAG 2.5.5 */ 
}

body.page-more .btn-primary { background: #fff; color: var(--bg); }
body.page-more .btn-primary:hover { background: rgba(255,255,255,0.9); transform: translateY(-2px); box-shadow: 0 8px 30px rgba(77,166,255,0.25); }

body.page-more .btn-outline { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.2); }
body.page-more .btn-outline:hover { border-color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.05); transform: translateY(-2px); }

/* ─── Divider ─── */
body.page-more .section-divider {
  width: 100%; height: 1px; border: none; margin: 0;
  background: linear-gradient(90deg, transparent, rgba(77,166,255,0.12), transparent);
}

body.page-more .section-divider.bright {
  background: linear-gradient(90deg, transparent, rgba(77,166,255,0.2), transparent);
}

/* ─── Demos ─── */
body.page-more .demos-section { padding: 120px 24px 100px; position: relative; }

body.page-more .demos-header { text-align: center; margin-bottom: 56px; }

body.page-more .demos-header .label {
  font-size: 13px; font-weight: 600; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--blue-light); margin-bottom: 16px;
}

body.page-more .demos-header h1 {
  font-size: clamp(28px, 4vw, 44px); font-weight: 800;
  letter-spacing: -0.02em; margin-bottom: 16px; color: #fff;
}

body.page-more .demos-header p {
  color: rgba(255,255,255,0.7); font-size: 16px;
  max-width: 500px; margin: 0 auto; line-height: 1.6;
}

body.page-more .demos-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 24px; max-width: 920px; margin: 0 auto;
}

body.page-more .demo-card {
  background: linear-gradient(rgba(255,255,255,0.02), rgba(255,255,255,0.02)), var(--bg);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 20px; overflow: hidden;
  transition: border-color 0.4s var(--spring),
              transform 0.5s var(--spring),
              box-shadow 0.4s ease;
}

body.page-more .demo-card:hover {
  border-color: rgba(77,166,255,0.2);
  transform: translateY(-4px);
  box-shadow: 0 20px 60px -16px rgba(0,0,0,0.6), 0 0 40px -10px rgba(77,166,255,0.15);
}

body.page-more .demo-preview {
  width: 100%; aspect-ratio: 16 / 10;
  background: linear-gradient(145deg, rgba(77,166,255,0.06), rgba(10,30,61,0.35));
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

body.page-more .demo-preview .placeholder-icon {
  width: 48px; height: 48px; border-radius: 12px;
  background: rgba(77,166,255,0.1);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; opacity: 0.3; margin: 0 auto;
  transition: opacity 0.3s, transform 0.5s var(--spring);
}

body.page-more .demo-card:hover .demo-preview .placeholder-icon {
  opacity: 0.5; transform: scale(1.1);
}

body.page-more .demo-preview::before {
  content: ''; position: absolute; top: 14px; left: 14px;
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255,255,255,0.08);
  box-shadow: 13px 0 0 rgba(255,255,255,0.08), 26px 0 0 rgba(255,255,255,0.08);
  z-index: 3;
}

/* ── Static screenshot preview ── */
body.page-more .demo-preview.has-video .placeholder-icon { display: none; }
body.page-more .demo-preview.has-video::before { display: none; }
body.page-more .demo-preview .demo-poster {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  transition: opacity 0.5s ease;
  display: block;
  opacity: 0;
}
body.page-more .demo-preview.poster-loaded .demo-poster { opacity: 1; }

/* Loading bar shown while the poster image is being fetched */
body.page-more .demo-preview .demo-loader {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  z-index: 2;
  opacity: 1;
  transition: opacity 0.35s ease;
}
body.page-more .demo-preview.poster-loaded .demo-loader { opacity: 0; }
body.page-more .demo-loader-track {
  width: 120px; height: 2px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
[data-theme="light"] body.page-more .demo-loader-track { background: rgba(0,0,0,0.08); }
body.page-more .demo-loader-fill {
  position: absolute; top: 0; bottom: 0;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgba(245,179,66,0.9), transparent);
  border-radius: 2px;
  animation: p_more__demoLoaderSlide 1.2s cubic-bezier(.4,0,.2,1) infinite;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  body.page-more .demo-preview .demo-poster { transition: none; }
  body.page-more .demo-loader-fill { animation: none; }
}

body.page-more .demo-body { padding: 28px 28px 24px; }

body.page-more .demo-body h2 {
  font-size: 18px; font-weight: 700; margin-bottom: 8px;
  letter-spacing: -0.01em; color: #fff;
}

body.page-more .demo-body p {
  font-size: 14px; color: rgba(255,255,255,0.5); line-height: 1.65;
  margin-bottom: 16px;
}

body.page-more .demo-card-link {
  display: block; text-decoration: none; color: inherit; cursor: pointer;
}

body.page-more .demo-meta {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}

body.page-more .demo-tag {
  display: inline-block; padding: 4px 14px; border-radius: 999px;
  font-size: 11px; font-weight: 600;
  background: rgba(245,179,66,0.08); color: #f5b342;
  border: 1px solid rgba(245,179,66,0.14);
  letter-spacing: 0.02em;
}

body.page-more .demo-view {
  font-size: 12px; font-weight: 600; color: var(--blue-light);
  opacity: 0; transform: translateX(-6px);
  transition: opacity 0.5s ease, transform 0.5s var(--spring);
  transition-delay: var(--stagger, 0s);
  letter-spacing: 0.01em;
}
body.page-more .demo-card:hover .demo-view { opacity: 1; transform: translateX(0); }
@media (max-width: 1024px) {
  /* Mobile has no hover, so an IntersectionObserver on the button
     itself adds .is-revealed when the button enters the viewport.
     Triggering on the button (rather than the card centre) means
     the animation plays exactly when the user can see the button -
     in BOTH scroll directions. Reveal is deliberately bigger and
     slower than the desktop hover. */
  body.page-more .demo-view {
    transform: translateX(-20px);
    transition: opacity 0.75s ease, transform 0.75s var(--spring);
  }
  body.page-more .demo-view.is-revealed { opacity: 1; transform: translateX(0); }
}

/* ─── Location ─── */
body.page-more .location-section { padding: 100px 24px 110px; position: relative; }

body.page-more .location-header { text-align: center; margin-bottom: 56px; }

body.page-more .location-header .label {
  font-size: 13px; font-weight: 600; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--blue-light); margin-bottom: 16px;
}

body.page-more .location-header h2 {
  font-size: clamp(28px, 4vw, 44px); font-weight: 800;
  letter-spacing: -0.02em; margin-bottom: 16px; color: #fff;
}

body.page-more .location-header p {
  color: rgba(255,255,255,0.7); font-size: 16px;
  max-width: 500px; margin: 0 auto; line-height: 1.6;
}

body.page-more .location-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  max-width: 680px; margin: 0 auto;
}

/* Hidden (opacity/translate) until the reveal-on-scroll JS in more.html adds
   .revealed - same pattern as the pricing feature cards. Reduced motion is
   neutralised by the global rule at the end of this file. */
body.page-more .location-card {
  padding: 36px 32px; background: var(--card-bg);
  border: 1px solid var(--card-border); border-radius: 20px;
  text-align: center;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s ease, transform 0.5s var(--spring), border-color 0.3s;
}

body.page-more .location-card:hover, body.page-more .location-card:focus-within { border-color: rgba(255,255,255,0.12); transform: translateY(-3px); }

/* `.revealed:hover` re-asserts the hover lift so it wins over the reveal
   end-state (equal specificity to the base :hover, so it must out-specify
   .revealed). */
body.page-more .location-card.revealed {
  opacity: 1;
  transform: translateY(0);
}
body.page-more .location-card.revealed:hover,
body.page-more .location-card.revealed:focus-within {
  transform: translateY(-3px);
}

body.page-more .location-card .loc-icon {
  width: 48px; height: 48px; border-radius: 12px;
  background: rgba(77,166,255,0.1);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; margin: 0 auto 16px;
}
body.page-more .location-card .loc-icon img {
  width: 24px; height: 24px; object-fit: contain;
  filter: brightness(0.85) drop-shadow(0 0 4px rgba(77,166,255,0.25));
  transition: filter 0.4s ease;
}
[data-theme="light"] body.page-more .location-card .loc-icon img {
  filter: brightness(1.15) drop-shadow(0 0 6px rgba(43,127,212,0.4));
}
body.page-more .location-card h3 { font-size: 18px; font-weight: 700; margin-bottom: 6px; color: #fff; }
body.page-more .location-card .loc-type { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue-light); margin-bottom: 12px; }
body.page-more .location-card p { font-size: 14px; color: rgba(255,255,255,0.5); line-height: 1.65; }

/* ─── About ─── */
body.page-more .about-section {
  padding: 100px 24px; position: relative;
}

body.page-more .about-inner {
  max-width: 760px; margin: 0 auto;
}

body.page-more .dev-profile {
  text-align: center; margin-bottom: 72px;
}

/* The ring is brand amber (Ellis, 2026-08-20), deliberately a faint 1px
   hairline rather than a solid 2px band - it matches the weight of the old
   blue ring it replaced, just in yellow. The gradient behind it never shows
   (the photo fills the circle), so only the border carries colour. */
body.page-more .dev-avatar {
  width: 88px; height: 88px; border-radius: 50%;
  background: linear-gradient(135deg, rgba(77,166,255,0.15), rgba(77,166,255,0.04));
  border: 1px solid rgba(245,179,66,0.85);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px;
  font-size: 36px; line-height: 1;
}

body.page-more .dev-role {
  font-size: 13px; font-weight: 600; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--blue-light);
  margin-bottom: 16px;
}

body.page-more .dev-name {
  font-size: clamp(26px, 4vw, 38px); font-weight: 800; letter-spacing: -0.02em;
  margin-bottom: 14px; color: #fff;
}

body.page-more .dev-bio {
  font-size: 15px; color: rgba(255,255,255,0.5); line-height: 1.8;
  max-width: 540px; margin: 0 auto 28px;
}

body.page-more .dev-stats {
  display: flex; justify-content: center; gap: 40px;
}

body.page-more .dev-stat {
  text-align: center;
}

body.page-more .dev-stat-value {
  font-size: 22px; font-weight: 800; color: #fff;
  letter-spacing: -0.02em;
}

body.page-more .dev-stat-label {
  font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.5);
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-top: 2px;
}

body.page-more .dev-divider {
  width: 48px; height: 1px; margin: 0 auto;
  background: linear-gradient(90deg, transparent, rgba(77,166,255,0.2), transparent);
}

body.page-more .about-columns {
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px;
}

body.page-more .about-col h2 {
  font-size: clamp(28px, 4vw, 44px); font-weight: 800;
  margin-bottom: 16px; letter-spacing: -0.02em; color: #fff;
}

body.page-more .about-col p {
  color: rgba(255,255,255,0.7); font-size: 16px; line-height: 1.8;
}

/* ─── Platforms ─── */
body.page-more .platforms-section {
  padding: 100px 24px; text-align: center; position: relative;
}

/* ─── Platforms & products ───
   One card anatomy for all four cards: a status line, the identity (a logo
   lockup or a name), the copy, then a terminal panel pinned to the card's
   foot so the panels in a row share a baseline. The top edge carries
   provenance: a faint line for a third-party platform, brand blue for the
   in-house platform, amber for work in the lab. */
body.page-more .hosting-header { margin-bottom: 44px; }
body.page-more .hosting-header .label {
  font-size: 13px; font-weight: 600; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--blue-light); margin-bottom: 16px;
}
body.page-more .hosting-section-title {
  font-size: clamp(28px, 4vw, 40px); font-weight: 800; letter-spacing: -0.03em;
  color: #fff; margin-bottom: 14px;
}
body.page-more .hosting-section-sub {
  font-size: 15px; color: rgba(255,255,255,0.55); max-width: 540px; margin: 0 auto; line-height: 1.7;
}
body.page-more .hosting-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px;
  max-width: 920px; margin: 0 auto; text-align: left;
}
body.page-more .hosting-card {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  padding: 32px 30px 26px; border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.07);
  background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012) 60%), var(--bg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 24px 48px -32px rgba(0,0,0,0.85);
  overflow: hidden;
  transition: border-color 0.4s var(--spring), transform 0.5s var(--spring);
}
@media (hover: hover) and (pointer: fine) {
  body.page-more .hosting-card:hover { border-color: rgba(77,166,255,0.22); transform: translateY(-3px); }
}
body.page-more .hosting-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.10), transparent);
}
body.page-more .hosting-card.inhouse::before { background: linear-gradient(90deg, transparent, var(--blue-light), transparent); }
body.page-more .hosting-card.upcoming::before { background: linear-gradient(90deg, transparent, #f5b342, transparent); }
body.page-more .hosting-card.inhouse {
  background: radial-gradient(70% 45% at 50% 0%, rgba(77,166,255,0.10), transparent 70%), linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012) 60%), var(--bg);
}
body.page-more .hosting-card-status {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 22px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
body.page-more .hosting-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--blue-light); box-shadow: 0 0 0 3px rgba(77,166,255,0.16); flex: 0 0 auto; }
body.page-more .hosting-card.upcoming .hosting-card-status { color: #f5b342; }
body.page-more .hosting-card.upcoming .hosting-dot { background: #f5b342; box-shadow: 0 0 0 3px rgba(245,179,66,0.16); }
/* Identity row: the Shopify wordmark and the LaingLogic lockup share one
   34px height so the two platform cards open with equal weight. The lockup
   sets "Laing" heavy and "Logic" regular, the way the portal and the email
   template write the name. */
body.page-more .shopify-logo-link { display: inline-flex; align-items: center; height: 34px; margin: 0 0 18px; transition: opacity 0.3s; }
body.page-more .shopify-logo-link:hover { opacity: 0.8; }
body.page-more .shopify-logo-link img { height: 34px; width: auto; }
body.page-more .ll-logo-lockup {
  display: inline-flex; align-items: center; gap: 10px; height: 34px; margin: 0 0 18px;
  text-decoration: none; color: #fff; transition: opacity 0.3s;
}
body.page-more .ll-logo-lockup:hover { opacity: 0.8; }
body.page-more .ll-logo-lockup .logo-mark { width: 34px; height: 34px; border-radius: 8px; }
body.page-more .ll-logo-word { font-size: 24px; letter-spacing: -0.03em; line-height: 1; white-space: nowrap; }
body.page-more .ll-word-laing { font-weight: 800; color: #fff; }
body.page-more .ll-word-logic { font-weight: 400; color: rgba(255,255,255,0.72); }
body.page-more .hosting-card h3 {
  font-size: 19px; font-weight: 800; color: #fff;
  letter-spacing: -0.02em; margin-bottom: 10px;
}
body.page-more .hosting-card p {
  font-size: 13.5px; color: rgba(255,255,255,0.55); line-height: 1.7; margin: 0;
}
body.page-more .hosting-card p + p { margin-top: 10px; }
body.page-more .hosting-link {
  color: rgba(255,255,255,0.7); text-decoration: underline;
  text-underline-offset: 3px; transition: color 0.2s;
}
body.page-more .hosting-link:hover { color: #fff; }
/* Terminal panel: a filename tab over the config tree. */
body.page-more .hosting-panel { margin-top: auto; padding-top: 24px; }
body.page-more .hosting-panel-bar {
  display: flex; align-items: center; padding: 8px 14px;
  border: 1px solid rgba(255,255,255,0.06); border-bottom: 0; border-radius: 10px 10px 0 0;
  background: rgba(255,255,255,0.025);
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
  font-size: 10.5px; letter-spacing: 0.02em; color: rgba(255,255,255,0.38);
}
body.page-more .hosting-panel-file::before { content: '› '; color: var(--blue-light); }
body.page-more .hosting-card-features {
  border-radius: 0 0 10px 10px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(0,0,0,0.22);
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
  font-size: 11.5px; line-height: 1.75;
  padding: 14px 16px;
}
body.page-more .hosting-card-feat {
  display: block; white-space: nowrap;
  color: rgba(255,255,255,0.25);
}
body.page-more .hosting-card-feat::before {
  content: '├─ '; color: rgba(255,255,255,0.12);
}
body.page-more .hosting-card-feat:last-child::before { content: '└─ '; }
body.page-more .hosting-card-feat .feat-key { color: #c792ea; }
body.page-more .hosting-card-feat .feat-val { color: #c3e88d; }
body.page-more .hosting-card-feat .feat-bool { color: #82aaff; }
body.page-more .hosting-card-feat.feat-divider::before { content: ''; }
body.page-more .hosting-card-feat.feat-indent::before { content: '│  '; }
body.page-more .hosting-card-feat.feat-indent { padding-left: 14px; }

/* Typewriter (hosting cards): the JS in more.html hides each line while it
   is armed and types it back in when the block scrolls into view; the caret
   is the block cursor that follows the typed character. Solid, not blinking:
   it only exists while actively typing, and terminals blink only when idle.
   visibility (not display) keeps line boxes in flow so the card never
   shifts height. */
body.page-more .hosting-card-feat.tw-pending { visibility: hidden; }
body.page-more .tw-caret {
  display: inline-block;
  width: 7px; height: 12px;
  margin-left: 2px;
  vertical-align: -1px;
  background: var(--blue-light);
}

body.page-more .platforms-inner { max-width: 920px; margin: 0 auto; color: #fff; }
body.page-more .hosting-grid + .platforms-disclaimer { margin-top: 32px; }

body.page-more .platforms-disclaimer {
  font-size: 11px; color: rgba(255,255,255,0.5); line-height: 1.6;
  max-width: 560px; margin: 0 auto;
}

/* ─── Glow line ─── */
body.page-more .cta-glow-line { text-align: center; padding: 0 24px 48px; }
body.page-more .cta-glow-line span {
  display: inline-block; width: 60px; height: 2px; border-radius: 1px;
  background: linear-gradient(90deg, transparent, var(--blue-light), transparent);
  opacity: 0;
  transition: opacity 1s ease, width 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 1s ease;
  filter: drop-shadow(0 0 0 rgba(77,166,255,0));
}
body.page-more .cta-glow-line.glow span {
  opacity: 1; width: 180px;
  filter: drop-shadow(0 0 8px rgba(77,166,255,0.6));
  animation: lineGlow 3s ease-in-out infinite 1.2s;
}

/* ─── CTA ─── */
body.page-more .cta-section { padding: 40px 24px 80px; text-align: center; position: relative; }

body.page-more .cta-box {
  max-width: 600px; margin: 0 auto; padding: 56px 40px;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 24px;
}

body.page-more .cta-box h2 { font-size: 28px; font-weight: 800; margin-bottom: 12px; color: #fff; }
body.page-more .cta-box p { color: rgba(255,255,255,0.45); font-size: 15px; margin-bottom: 32px; line-height: 1.6; }

body.page-more footer a:has(> .footer-logo) { display: inline-block; }
body.page-more .footer-logo {
  width: 48px; height: auto; margin-bottom: 14px;
  filter: drop-shadow(0 0 6px rgba(77,166,255,0.4));
}

body.page-more footer {
  text-align: center; padding: 48px 24px 32px; color: rgba(255,255,255,0.2);
  font-size: 13px; border-top: 1px solid rgba(255,255,255,0.04);
}

body.page-more .footer-social { display: flex; justify-content: center; gap: 10px; margin-bottom: 24px; }
body.page-more .footer-social a { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.08); color: rgba(255,255,255,0.3); text-decoration: none; transition: color 0.25s, border-color 0.25s, transform 0.25s; }
body.page-more .footer-social a:hover { color: var(--blue-light); border-color: rgba(77,166,255,0.3); transform: translateY(-2px); }
body.page-more .footer-social a svg { width: 14px; height: 14px; }
body.page-more footer .footer-links { display: flex; justify-content: center; align-items: center; gap: 0; flex-wrap: wrap; row-gap: 4px; margin-bottom: 24px; }
body.page-more footer .footer-links a { color: rgba(255,255,255,0.55); text-decoration: none; transition: color 0.2s; font-size: clamp(11px, 3vw, 13px);
  /* inline-block + padding lifts these from a 14px-tall target to 24px,
     the WCAG 2.2 AA 2.5.8 minimum. They wrap onto two rows on a phone,
     so a short target here meant real mis-taps between legal pages. */
  display: inline-block; padding: 5px 0; }
body.page-more footer .footer-links a:hover { color: rgba(255,255,255,0.6); }
body.page-more footer .footer-sep { color: rgba(255,255,255,0.3); margin: 0 clamp(4px, 1.5vw, 10px); }
body.page-more footer .address { color: rgba(255,255,255,0.48); margin-bottom: 8px; }
body.page-more footer .footer-copy { color: rgba(255,255,255,0.46); }

@media (max-width: 640px) {
  body.page-more .nav { gap: 3px; padding: 8px 10px; }
  body.page-more .nav a { padding: 9px 12px; font-size: 13px; }
  body.page-more .nav-icon { display: block; }
  body.page-more .nav-label { max-width: 0; opacity: 0; }
  body.page-more .nav a.active .nav-label { max-width: 70px; opacity: 1; font-size: 12px; }
  body.page-more .nav a.active { padding: 9px 14px; }
  body.page-more .demos-grid { grid-template-columns: 1fr; }
  body.page-more .dev-stats { gap: 24px; }
  body.page-more .dev-stat-value { font-size: 18px; }
  body.page-more .about-columns { grid-template-columns: 1fr; gap: 40px; }
  body.page-more .hosting-header { margin-bottom: 36px; }
  body.page-more .hosting-card { padding: 26px 22px 22px; border-radius: 18px; }
  body.page-more .hosting-card h3 { font-size: 16px; }
  body.page-more .location-grid { grid-template-columns: 1fr; max-width: 360px; margin: 0 auto; }
}

/* ─── Platforms & products: one column once two 30px-padded cards can no
   longer hold a 34px lockup and a terminal panel side by side. ─── */
@media (max-width: 860px) {
  body.page-more .hosting-grid { grid-template-columns: 1fr; gap: 16px; max-width: 520px; }
}

/* ─── Theme toggle ─── */
body.page-more .theme-toggle { position: relative; z-index: 1; width: 34px; height: 34px; border: none; background: transparent; cursor: pointer; border-radius: 50%; margin-left: 2px; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.65); transition: color 0.25s, background 0.25s; text-decoration: none; padding: 0; font-size: 0; min-width: 34px; flex-shrink: 0; }
body.page-more .theme-toggle:hover { color: #fff; background: rgba(255,255,255,0.08); }

/* ─── Mobile header bubble (the client portal sign-in link since 2026-09-17) ─── */
body.page-more .theme-toggle-mobile {
  display: none; pointer-events: auto;
  width: 48px; height: 48px;
  border: 1px solid var(--glass-border);
  border-radius: 50%;
  background: rgba(18,18,28,0.22);
  backdrop-filter: blur(32px) saturate(1.6);
  -webkit-backdrop-filter: blur(32px) saturate(1.6);
  box-shadow: 0 4px 24px rgba(0,0,0,0.25), 0 1px 3px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.04);
  position: relative;
  cursor: pointer; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.65);
  transition: color 0.25s, border-color 0.25s;
  padding: 0; font-size: 0; margin-left: 8px; flex-shrink: 0;
}
body.page-more .theme-toggle-mobile:hover { border-color: rgba(255,255,255,0.2); }
:root:has(body.page-more) { --nav-scale: 1; }
body.page-more .nav-fit { display: flex; align-items: center; gap: 8px; width: max-content; max-width: none; transform: scale(var(--nav-scale)); transform-origin: center top; pointer-events: auto; will-change: transform; }
body.page-more .nav-fit.nav-fit-transitions { transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1); }

/* ─── Mobile nav-link click animation ───
   .nav-collapsed = active label is currently at width 0.
   .nav-anim      = transition is currently enabled (only present during the
   collapse-on-click window on the outgoing page, and during the expand-on-
   load window on the incoming page).
   Without .nav-anim, refresh and breakpoint resize both snap - preserves
   the "no character-by-character reveal" guarantee from the previous fix. */
@media (max-width: 640px) {
  html.nav-collapsed:has(body.page-more) .nav a.active .nav-label {
    max-width: 0;
    opacity: 0;
  }
  html.nav-anim:has(body.page-more) .nav a.active .nav-label {
    transition: max-width 220ms cubic-bezier(0.22, 1, 0.36, 1),
                opacity 180ms ease;
  }
  /* Neutralise the active highlight during the collapsed state so all 5
     links read as plain icons (no grey background, no brighter text, no
     widened padding). The existing `transition: color 0.25s, background
     0.25s` on `.nav a` smoothly fades the styling out and back in. */
  html.nav-collapsed:has(body.page-more) .nav a.active {
    background: transparent;
    color: rgba(255,255,255,0.65);
    /* Symmetric padding + zero gap so the active pill collapses to a true
       circle (16px icon + 9px padding × 2 = 34×34) instead of an oval. */
    padding: 9px;
    gap: 0;
  }
  html[data-theme="light"].nav-collapsed:has(body.page-more) .nav a.active {
    color: rgba(0,0,0,0.6);
  }
}
body.page-more .nav { gap: 6px; padding: 8px 10px; }
body.page-more .nav a { font-size: 14px; padding: 8px 20px; gap: 6px; }
body.page-more .nav-icon { width: 16px; height: 16px; }
body.page-more .nav-label { max-width: 100px; }
body.page-more .theme-toggle { width: 34px; height: 34px; min-width: 34px; margin-left: 2px; }
body.page-more .theme-toggle-mobile { width: 48px; height: 48px; margin-left: 0; }
@media (max-width: 640px) {
  body.page-more .nav-fit { gap: 8px; }
  body.page-more .nav { gap: 3px; padding: 8px 10px; }
  body.page-more .nav a { padding: 9px 12px; font-size: 13px; }
  body.page-more .nav a:not(.active) .nav-label { max-width: 0; opacity: 0; }
  body.page-more .nav a.active .nav-label { max-width: 70px; font-size: 12px; }
  body.page-more .nav a.active { padding: 9px 14px; }
}
[data-theme="light"] body.page-more .theme-toggle-mobile { border-color: rgba(0,0,0,0.08); color: rgba(0,0,0,0.6); background: rgba(255,255,255,0.3); backdrop-filter: blur(32px) saturate(2.0); -webkit-backdrop-filter: blur(32px) saturate(2.0); box-shadow: 0 4px 24px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.7); }
[data-theme="light"] body.page-more .theme-toggle-mobile:hover { border-color: rgba(0,0,0,0.2); }
@media (max-width: 640px) {
  body.page-more .nav .theme-toggle { display: none; }
  body.page-more .theme-toggle-mobile { display: flex; }
}

[data-theme="light"]:has(body.page-more) { --bg: #eef1f6; --blue-light: #1a66b5; --glass-border: rgba(0,0,0,0.13); }
[data-theme="light"] body.page-more { background: var(--bg); color: #1a1a2e; }
[data-theme="light"] body.page-more .theme-toggle { color: rgba(0,0,0,0.6); }
[data-theme="light"] body.page-more .theme-toggle:hover { color: #1a1a2e; background: rgba(0,0,0,0.05); }
[data-theme="light"] body.page-more .nav { background: rgba(255,255,255,0.3); backdrop-filter: blur(32px) saturate(2.0); -webkit-backdrop-filter: blur(32px) saturate(2.0); border-color: rgba(0,0,0,0.08); box-shadow: 0 4px 24px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.7); }
[data-theme="light"] body.page-more .nav::before { opacity: 0.5; }
[data-theme="light"] body.page-more .nav a { color: rgba(0,0,0,0.6); text-shadow: 0 1px 2px rgba(255,255,255,0.5); }
[data-theme="light"] body.page-more .nav a:hover { color: #1a1a2e; -webkit-text-fill-color: #1a1a2e; background: rgba(0,0,0,0.05); }
[data-theme="light"] body.page-more .nav a.active { color: #1a1a2e; -webkit-text-fill-color: #1a1a2e; background: rgba(0,0,0,0.11); }

/* ── Adaptive nav text ── */
body.page-more .nav.nav-dark-adaptive a { color: rgba(0,0,0,0.7); text-shadow: 0 1px 2px rgba(255,255,255,0.3); }
body.page-more .nav.nav-dark-adaptive a:hover { color: rgba(0,0,0,0.9); }
body.page-more .nav.nav-dark-adaptive a.active { color: rgba(0,0,0,0.9); }
body.page-more .nav.nav-dark-adaptive .theme-toggle { color: rgba(0,0,0,0.6); }
[data-theme="light"] body.page-more .nav.nav-light-adaptive a { color: rgba(255,255,255,0.85); text-shadow: 0 1px 3px rgba(0,0,0,0.4); }
[data-theme="light"] body.page-more .nav.nav-light-adaptive a:hover { color: #fff; }
[data-theme="light"] body.page-more .nav.nav-light-adaptive a.active { color: #fff; }
[data-theme="light"] body.page-more .nav.nav-light-adaptive .theme-toggle { color: rgba(255,255,255,0.8); }

[data-theme="light"] body.page-more .btn-primary { background: #1a1a2e; color: #fff; }
[data-theme="light"] body.page-more .btn-primary:hover { background: #2a2a4e; }
[data-theme="light"] body.page-more .btn-outline { color: #1a1a2e; border-color: rgba(0,0,0,0.15); }
[data-theme="light"] body.page-more .btn-outline:hover { border-color: rgba(0,0,0,0.6); background: rgba(0,0,0,0.04); }

/* ─── Light: demos ─── */
[data-theme="light"] body.page-more .demos-header .label { color: var(--blue-light); }
[data-theme="light"] body.page-more .demos-header h1 { color: #1a1a2e; }
[data-theme="light"] body.page-more .demos-header p { color: rgba(0,0,0,0.6); }
[data-theme="light"] body.page-more .demo-card { background: linear-gradient(rgba(0,0,0,0.04), rgba(0,0,0,0.04)), var(--bg); border-color: rgba(0,0,0,0.09); }
[data-theme="light"] body.page-more .demo-card:hover { border-color: rgba(43,127,212,0.3); box-shadow: 0 20px 60px -16px rgba(0,0,0,0.12), 0 4px 20px -4px rgba(43,127,212,0.1); }
[data-theme="light"] body.page-more .demo-preview { background: linear-gradient(145deg, rgba(43,127,212,0.08), rgba(77,166,255,0.04)); border-bottom-color: rgba(0,0,0,0.04); }
[data-theme="light"] body.page-more .demo-preview::before { background: rgba(0,0,0,0.12); box-shadow: 13px 0 0 rgba(0,0,0,0.12), 26px 0 0 rgba(0,0,0,0.12); }
[data-theme="light"] body.page-more .demo-preview .placeholder-icon { background: rgba(43,127,212,0.12); }
[data-theme="light"] body.page-more .demo-body h2 { color: #1a1a2e; }
[data-theme="light"] body.page-more .demo-body p { color: rgba(0,0,0,0.6); }
[data-theme="light"] body.page-more .demo-tag { background: rgba(240,165,0,0.08); border-color: rgba(240,165,0,0.22); color: #f0a500; }
[data-theme="light"] body.page-more .demo-view { color: #1a66b5; }

/* ─── Light: location ─── */
[data-theme="light"] body.page-more .location-header .label { color: var(--blue-light); }
[data-theme="light"] body.page-more .location-header h2 { color: #1a1a2e; }
[data-theme="light"] body.page-more .location-header p { color: rgba(0,0,0,0.6); }
[data-theme="light"] body.page-more .location-card { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.09); }
[data-theme="light"] body.page-more .location-card:hover { border-color: rgba(0,0,0,0.12); }
[data-theme="light"] body.page-more .location-card .loc-icon { background: rgba(43,127,212,0.12); }
[data-theme="light"] body.page-more .location-card h3 { color: #1a1a2e; }
[data-theme="light"] body.page-more .location-card .loc-type { color: var(--blue-light); }
[data-theme="light"] body.page-more .location-card p { color: rgba(0,0,0,0.6); }

/* ─── Light: about ─── */
[data-theme="light"] body.page-more .dev-avatar { background: linear-gradient(135deg, rgba(43,127,212,0.15), rgba(43,127,212,0.04)); border-color: rgba(240,165,0,0.85); }
[data-theme="light"] body.page-more .dev-role { color: var(--blue-light); }
[data-theme="light"] body.page-more .dev-name { color: #1a1a2e; }
[data-theme="light"] body.page-more .dev-bio { color: rgba(0,0,0,0.6); }
[data-theme="light"] body.page-more .dev-stat-value { color: #1a1a2e; }
[data-theme="light"] body.page-more .dev-stat-label { color: rgba(0,0,0,0.6); }
[data-theme="light"] body.page-more .dev-divider { background: linear-gradient(90deg, transparent, rgba(43,127,212,0.2), transparent); }
[data-theme="light"] body.page-more .about-col h2 { color: #1a1a2e; }
[data-theme="light"] body.page-more .about-col p { color: rgba(0,0,0,0.6); }

/* ─── Light: platforms ─── */
[data-theme="light"] body.page-more .platforms-inner { color: #1a1a2e; }
[data-theme="light"] body.page-more .hosting-section-title { color: #1a1a2e; }
[data-theme="light"] body.page-more .hosting-section-sub { color: rgba(0,0,0,0.6); }
[data-theme="light"] body.page-more .hosting-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.75), rgba(255,255,255,0.35) 60%), var(--bg);
  border-color: rgba(0,0,0,0.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 18px 40px -30px rgba(15,30,60,0.35);
}
[data-theme="light"] body.page-more .hosting-card.inhouse {
  background: radial-gradient(70% 45% at 50% 0%, rgba(43,127,212,0.10), transparent 70%), linear-gradient(180deg, rgba(255,255,255,0.75), rgba(255,255,255,0.35) 60%), var(--bg);
}
[data-theme="light"] body.page-more .hosting-card::before { background: linear-gradient(90deg, transparent, rgba(0,0,0,0.10), transparent); }
[data-theme="light"] body.page-more .hosting-card.inhouse::before { background: linear-gradient(90deg, transparent, #2b7fd4, transparent); }
[data-theme="light"] body.page-more .hosting-card.upcoming::before { background: linear-gradient(90deg, transparent, #f0a500, transparent); }
[data-theme="light"] body.page-more .hosting-card-status { color: rgba(0,0,0,0.5); }
[data-theme="light"] body.page-more .hosting-dot { background: #2b7fd4; box-shadow: 0 0 0 3px rgba(43,127,212,0.16); }
[data-theme="light"] body.page-more .hosting-card.upcoming .hosting-card-status { color: #c98400; }
[data-theme="light"] body.page-more .hosting-card.upcoming .hosting-dot { background: #f0a500; box-shadow: 0 0 0 3px rgba(240,165,0,0.18); }
[data-theme="light"] body.page-more .hosting-card h3 { color: #1a1a2e; }
[data-theme="light"] body.page-more .hosting-card p { color: rgba(0,0,0,0.6); }
[data-theme="light"] body.page-more .hosting-link { color: #1a66b5; }
[data-theme="light"] body.page-more .hosting-link:hover { color: #1a5fa8; }
[data-theme="light"] body.page-more .hosting-panel-bar { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.1); color: rgba(0,0,0,0.45); }
[data-theme="light"] body.page-more .hosting-panel-file::before { color: #2b7fd4; }
[data-theme="light"] body.page-more .hosting-card-features { background: rgba(248,250,252,0.95); border-color: rgba(0,0,0,0.1); }
[data-theme="light"] body.page-more .hosting-card-feat { color: rgba(0,0,0,0.25); }
[data-theme="light"] body.page-more .hosting-card-feat::before { color: rgba(0,0,0,0.12); }
[data-theme="light"] body.page-more .hosting-card-feat .feat-key { color: #7c3aed; }
[data-theme="light"] body.page-more .hosting-card-feat .feat-val { color: #166534; }
[data-theme="light"] body.page-more .hosting-card-feat .feat-bool { color: #2563eb; }
[data-theme="light"] body.page-more .shopify-logo-link img.dark-only { display: none; }
[data-theme="light"] body.page-more .shopify-logo-link img.light-only { display: inline; filter: none; }
[data-theme="light"] body.page-more .ll-logo-lockup, [data-theme="light"] body.page-more .ll-word-laing { color: #1a1a2e; }
[data-theme="light"] body.page-more .ll-word-logic { color: rgba(0,0,0,0.62); }
[data-theme="light"] body.page-more .platforms-disclaimer { color: rgba(0,0,0,0.5); }
[data-theme="light"] body.page-more .platforms-disclaimer { color: rgba(0,0,0,0.6); }

/* ─── Light: cta ─── */
[data-theme="light"] body.page-more .cta-glow-line span { background: linear-gradient(90deg, transparent, var(--blue-light), transparent); }
[data-theme="light"] body.page-more .cta-box { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.09); }
[data-theme="light"] body.page-more .cta-box h2 { color: #1a1a2e; }
[data-theme="light"] body.page-more .cta-box p { color: rgba(0,0,0,0.6); }

/* ─── Light: divider ─── */
[data-theme="light"] body.page-more .section-divider { background: linear-gradient(90deg, transparent, rgba(43,127,212,0.12), transparent); }
[data-theme="light"] body.page-more .section-divider.bright { background: linear-gradient(90deg, transparent, rgba(43,127,212,0.2), transparent); }

/* ─── Light: footer ─── */
[data-theme="light"] body.page-more footer { color: rgba(0,0,0,0.6); border-color: rgba(0,0,0,0.09); }
[data-theme="light"] body.page-more footer .address { color: rgba(0,0,0,0.6); }
[data-theme="light"] body.page-more .footer-social a { border-color: rgba(0,0,0,0.1); color: rgba(0,0,0,0.6); }
[data-theme="light"] body.page-more .footer-social a:hover { color: var(--blue-light); border-color: rgba(77,166,255,0.3); }
[data-theme="light"] body.page-more footer .footer-logo { filter: drop-shadow(0 0 6px rgba(43,127,212,0.3)); }
[data-theme="light"] body.page-more footer .footer-links a { color: rgba(0,0,0,0.6); }
[data-theme="light"] body.page-more footer .footer-links a:hover { color: #1a1a2e; }
[data-theme="light"] body.page-more footer .footer-sep { color: rgba(0,0,0,0.45); }
[data-theme="light"] body.page-more footer .footer-copy { color: rgba(0,0,0,0.6); }

/* ─── Skeleton ─── */
body.page-more .skeleton-text { height: 12px; margin-bottom: 8px; width: 80%; }
body.page-more .skeleton-text.short { width: 40%; }
body.page-more .skeleton-text.medium { width: 60%; }
body.page-more .skeleton-heading { height: 28px; width: 50%; margin-bottom: 12px; border-radius: 8px; }
body.page-more .skeleton-pill { height: 28px; width: 100px; border-radius: 999px; }
body.page-more .skeleton-bar { height: 4px; width: 100%; border-radius: 999px; }
body.page-more .skeleton-circle { width: 30px; height: 30px; border-radius: 50%; }
body.page-more .skeleton-amount { height: 36px; width: 120px; margin: 0 auto 8px; border-radius: 8px; }
body.page-more .skeleton-btn { height: 48px; width: 100%; border-radius: 14px; }
body.page-more .skeleton-input { height: 44px; width: 100%; border-radius: 12px; }
body.page-more .skeleton-row { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; gap: 12px; }
body.page-more .skeleton-row .skeleton-text { margin-bottom: 0; }
body.page-more .skeleton-dot { display: flex; align-items: center; gap: 10px; padding: 5px 0; }
body.page-more .skeleton-dots-row { display: flex; justify-content: center; gap: 24px; margin-top: 12px; }
body.page-more .skeleton-content { opacity: 0; transition: opacity 0.2s; }
body.page-more.show-skeleton .skeleton-content { opacity: 1; }
body.page-more.loaded .skeleton-content { display: none !important; }
body.page-more:not(.loaded) .real-content { display: none; }
body.page-more.loaded .real-content { display: contents; }
/* sk-mask - text-preserving skeleton shimmer that inherits exact layout from real content */
body.page-more .skeleton-content .demo-preview::before { visibility: hidden !important; }
body.page-more .skeleton-content .demo-preview .placeholder-icon { visibility: hidden !important; }
body.page-more .skeleton-content .demo-view { visibility: hidden !important; }
/* skeleton about-columns collapse to match real .about-columns breakpoint */

body.page-more .skeleton-heading.large { height: 42px; width: 70%; }
body.page-more .skeleton-card { border-radius: 20px; padding: 24px; min-height: 120px; border: 1px solid rgba(255,255,255,0.06); background: rgba(255,255,255,0.025); }
/* Respect prefers-reduced-motion (WCAG 2.2 AA 2.3.3) */
@media (prefers-reduced-motion: reduce) {
  body.page-more *, body.page-more *::before, body.page-more *::after, body.page-more {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body.page-more .skip-link {position:fixed;top:-48px;left:0;background:#2b7fd4;color:#fff;padding:10px 16px;z-index:99999;text-decoration:none;font-weight:600;border-radius:0 0 4px 0;transition:top .2s ease,opacity .2s ease;font-size:14px;opacity:0;pointer-events:none;white-space:nowrap}
body.page-more .skip-link:focus, body.page-more .skip-link:focus-visible {top:0;opacity:1;pointer-events:auto;outline:2px solid #fff;outline-offset:-4px}

/* Global :focus-visible - keyboard accessibility (WCAG 2.4.7) */
body.page-more a:focus-visible, body.page-more button:focus-visible, body.page-more [role="button"]:focus-visible, body.page-more input:focus-visible, body.page-more select:focus-visible, body.page-more textarea:focus-visible, body.page-more .btn:focus-visible, body.page-more .theme-toggle:focus-visible, body.page-more .theme-toggle-mobile:focus-visible {
  outline: 2px solid var(--blue-light, #4da6ff);
  outline-offset: 2px;
  border-radius: 4px;
}
body.page-more .btn:focus-visible { border-radius: 999px; }