/* 451 Atölye — "Atelier" tasarım dili
 * En son yüklenir; eski katmanların (main/theme-light) üstüne yazar.
 * Mürekkep (ink) zemin, köz (ember) vurgu, Fraunces display + Plus Jakarta gövde.
 */

:root {
  --ax-ink: #0b201e;
  --ax-ink-2: #10302c;
  --ax-ink-3: #163e3a;
  --ax-paper: #f6f1e9;
  --ax-paper-2: #efe7da;
  --ax-cream: #f6efe4;
  --ax-ember: #c46a42;
  --ax-ember-hot: #e8946a;
  --ax-ember-soft: #f0b893;
  --ax-ember-text: #9a4e30;
  --ax-ember-btn: linear-gradient(135deg, #c0663e, #a4522e 55%, #8a4024); /* white label ≥ 4.5:1 */ /* ember for small text on paper: 5.9:1 (WCAG AA) */
  --ax-water: #2f7a72;
  --ax-mint: #9eccc6;
  --ax-line: rgba(255, 255, 255, 0.1);
  --ax-display: "Fraunces", var(--font-library-heading, Georgia), serif;
  --ax-sans: "Plus Jakarta Sans", system-ui, sans-serif;
  --ax-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ax-ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --ax-radius: 22px;
  /* Width standard (ref: techsign.ai): 1240 content, 920 narrow, 24px gutter */
  --ax-max: 1240px;
  --ax-narrow: 920px;
  --ax-gutter: 24px;
  --site-content-max: var(--ax-max);
  --site-shell-max: var(--ax-max);
  --site-form-max: var(--ax-narrow);
}

@media (max-width: 640px) {
  :root {
    --ax-gutter: 18px;
  }
}

/* main.css forces `p, span, a { font-family: var(--font-site) !important }`,
 * so display typography is switched by re-scoping the variables instead. */
.ax-hero__title,
.ax-hero__title *,
.fx-story__title,
.fx-story__title *,
.fx-ms,
.fx-ms *,
.studio-footer .footer-tagline,
.ax-display {
  --font-site: var(--ax-display);
  --font-heading: var(--ax-display);
}

.fx-ms__head,
.fx-ms__head *,
.fx-note,
.fx-note *,
.fx-cur em {
  --font-site: var(--ax-sans);
}

/* ═════════════════════ HEADER ═════════════════════ */

html body .site-header {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  padding: 12px clamp(10px, 1.6vw, 22px) 0 !important;
  pointer-events: none;
  transition: transform 0.6s var(--ax-ease) !important;
}

html body .site-header .header-inner {
  pointer-events: auto;
  position: relative;
  max-width: var(--ax-max);
  height: 64px;
  margin: 0 auto;
  padding: 0 10px 0 20px;
  border-radius: 20px;
  background: rgba(11, 32, 30, 0.58);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  backdrop-filter: blur(20px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow:
    0 18px 50px -28px rgba(0, 0, 0, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: height 0.5s var(--ax-ease), background 0.4s ease, max-width 0.6s var(--ax-ease);
}

html body .site-header.is-scrolled .header-inner {
  height: 56px;
  max-width: calc(var(--ax-max) - 80px);
  background: rgba(11, 32, 30, 0.84);
}

/* Logo hangs out of the bar on an ink bookmark tab; tucks back in on scroll */
html body .site-header .brand {
  position: relative;
  z-index: 2;
  align-self: flex-start;
  display: flex;
  justify-content: center;
  width: 200px;
  height: 100%;
  margin-left: -6px;
  flex-shrink: 0;
  transition: height 0.5s var(--ax-ease), width 0.5s var(--ax-ease);
}

html body .site-header .brand::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  bottom: -40px;
  border-radius: 0 0 24px 24px;
  background:
    radial-gradient(90% 60% at 50% 100%, rgba(196, 106, 66, 0.22), transparent 70%),
    linear-gradient(180deg, #0f2a27, var(--ax-ink));
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-top: 0;
  box-shadow: 0 26px 40px -24px rgba(0, 0, 0, 0.8);
  transition: bottom 0.55s var(--ax-ease), border-radius 0.55s var(--ax-ease), opacity 0.4s ease;
}

html body .site-header .brand-logo-image {
  position: relative;
  height: 96px !important;
  width: auto;
  margin-top: 2px;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.45));
  transition: height 0.55s var(--ax-ease), margin 0.55s var(--ax-ease);
}

html body .site-header .brand:hover .brand-logo-image {
  transform: none;
}

html body .site-header:not(.ax-top) .brand {
  width: 128px;
}

html body .site-header:not(.ax-top) .brand::before {
  bottom: 0;
  border-radius: 0;
  opacity: 0;
}

html body .site-header:not(.ax-top) .brand-logo-image {
  height: 52px !important;
  margin-top: 2px;
}

@media (max-width: 900px) {
  html body .site-header .brand {
    width: 150px;
    height: 100%;
    margin-left: -4px;
  }

  html body .site-header .brand::before {
    bottom: -28px;
    border-radius: 0 0 20px 20px;
  }

  html body .site-header .brand-logo-image {
    height: 76px !important;
  }

  html body .site-header:not(.ax-top) .brand,
  html.nav-open body .site-header .brand {
    width: 112px;
  }

  html body .site-header:not(.ax-top) .brand-logo-image,
  html.nav-open body .site-header .brand-logo-image {
    height: 52px !important;
  }

  html.nav-open body .site-header .brand::before {
    opacity: 0;
  }
}

/* Links + sliding hover pill (pill created by premium-fx.js) */
html body .site-header .header-nav-primary {
  position: relative;
  gap: 0.15rem;
}

.ax-nav-pill {
  position: absolute;
  top: 50%;
  left: 0;
  height: 36px;
  width: 0;
  margin-top: -18px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.45s var(--ax-ease), width 0.45s var(--ax-ease), opacity 0.25s ease;
}

html body .site-header .header-link {
  position: relative;
  z-index: 1;
  height: 36px;
  padding: 0 0.85rem !important;
  border-radius: 12px;
  background: transparent !important;
  color: rgba(246, 239, 228, 0.72) !important;
  font-family: var(--ax-sans);
  font-size: 0.86rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
  transition: color 0.25s ease;
}

html body .site-header .header-link:hover,
html body .site-header .header-link.is-active {
  color: #fff !important;
}

html body .site-header .header-link::after {
  display: none;
}

html body .site-header .header-link--studio {
  border: 0 !important;
  box-shadow: none !important;
}

html body .site-header .header-link--studio::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-right: 0.45rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #7fb4e0, #3d6d94);
  box-shadow: 0 0 10px rgba(127, 180, 224, 0.8);
}

html body .site-header .header-nav-divider {
  background: rgba(255, 255, 255, 0.1);
}

html body .site-header .header-nav-cta-diagnosis {
  position: relative;
  overflow: hidden;
  height: 40px;
  display: inline-flex;
  align-items: center;
  padding: 0 1.1rem !important;
  border: 0 !important;
  border-radius: 13px !important;
  background: var(--ax-ember-btn) !important;
  color: #fff !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.005em;
  box-shadow: 0 10px 26px -12px rgba(196, 106, 66, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
  transition: transform 0.35s var(--ax-ease), box-shadow 0.35s ease;
}

html body .site-header .header-nav-cta-diagnosis:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 34px -12px rgba(196, 106, 66, 1), inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
}

html body .site-header .language-switcher-link {
  color: rgba(246, 239, 228, 0.5) !important;
}

html body .site-header .language-switcher-link.is-active {
  color: #fff !important;
}

/* Burger → X (icon font hidden, two drawn lines) */
html[data-theme] body .site-header .mobile-nav-toggle {
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0 !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: transparent !important;
}

html[data-theme] body .site-header .mobile-nav-toggle i {
  display: none !important;
}

html[data-theme] body .site-header .mobile-nav-toggle::before,
html[data-theme] body .site-header .mobile-nav-toggle::after {
  content: "";
  position: absolute;
  left: 13px;
  right: 13px;
  height: 1.6px;
  border-radius: 2px;
  background: #fff;
  transition: transform 0.5s var(--ax-ease), top 0.5s var(--ax-ease), right 0.5s var(--ax-ease);
}

html[data-theme] body .site-header .mobile-nav-toggle::before { top: 17px; }
html[data-theme] body .site-header .mobile-nav-toggle::after { top: 25px; right: 18px; }

html[data-theme] body .site-header .mobile-nav-toggle[aria-expanded="true"]::before {
  top: 21px;
  transform: rotate(45deg);
}

html[data-theme] body .site-header .mobile-nav-toggle[aria-expanded="true"]::after {
  top: 21px;
  right: 13px;
  transform: rotate(-45deg);
}

/* ═════════════ MOBILE: full-screen menu (nav is ported to <body> by app.js) ═════════════ */
@media (max-width: 900px) {
  html body .site-header,
  html body .site-header.is-scrolled {
    background: transparent !important;
  }

  html body .site-header .header-inner,
  html body .site-header.is-scrolled .header-inner {
    height: 60px;
    padding: 0 8px 0 16px;
    border-radius: 18px;
  }

  html.nav-open body .site-header {
    z-index: 6000 !important;
    transform: none !important;
  }

  html.nav-open body .site-header .header-inner {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  html body .header-nav {
    background:
      radial-gradient(120% 70% at 100% 0%, rgba(196, 106, 66, 0.28), transparent 60%),
      radial-gradient(90% 60% at 0% 100%, rgba(47, 122, 114, 0.3), transparent 65%),
      var(--ax-ink) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    opacity: 1 !important;
    clip-path: circle(0px at calc(100% - 46px) 44px);
    transition: clip-path 0.7s var(--ax-ease-io), visibility 0s linear 0.7s !important;
  }

  html body .header-nav.is-open {
    clip-path: circle(150% at calc(100% - 46px) 44px);
    transition: clip-path 0.85s var(--ax-ease-io), visibility 0s !important;
  }

  html body .header-nav .header-actions {
    height: 100%;
    max-height: none !important;
    justify-content: flex-start !important;
    gap: 1.6rem !important;
    padding: 104px 26px calc(26px + env(safe-area-inset-bottom, 0px)) !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
  }

  html body .header-nav .header-actions::before {
    display: none;
  }

  html body .header-nav .header-nav-primary {
    counter-reset: ax-nav;
    gap: 0 !important;
  }

  html body .header-nav .header-link,
  html body .header-nav .header-link--studio {
    --font-site: var(--ax-display);
    display: flex !important;
    align-items: baseline;
    gap: 0.9rem;
    height: auto !important;
    min-height: 0;
    padding: 0.55rem 0 !important;
    border-radius: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: none !important;
    color: var(--ax-cream) !important;
    font-family: var(--ax-display) !important;
    font-size: clamp(2.1rem, 10vw, 3rem) !important;
    font-weight: 380 !important;
    letter-spacing: -0.035em;
    line-height: 1.05;
    justify-content: flex-start !important;
  }

  html body .header-nav .header-nav-primary .header-link::before {
    counter-increment: ax-nav;
    content: "0" counter(ax-nav);
    width: auto;
    height: auto;
    margin: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    font-family: var(--ax-sans);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: var(--ax-ember-hot);
    transform: translateY(-1.4em);
  }

  html body .header-nav .header-link--quiet {
    --font-site: var(--ax-sans);
    font-family: var(--ax-sans) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    border: 0 !important;
    letter-spacing: 0;
    width: auto;
  }

  html body .header-nav .header-nav-divider {
    display: none;
  }

  html body .header-nav .header-nav-utils {
    gap: 1rem !important;
    margin-top: auto;
  }

  html body .header-nav .header-nav-cta-diagnosis {
    display: flex;
    align-items: center;
    border: 0 !important;
    background: var(--ax-ember-btn) !important;
    color: #fff !important;
    font-weight: 800 !important;
    box-shadow: 0 18px 40px -16px rgba(196, 106, 66, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
    width: 100%;
    height: 54px;
    justify-content: center;
    border-radius: 16px !important;
    font-size: 1rem !important;
  }

  html body .header-nav .header-user-profile {
    color: var(--ax-cream);
  }
}

/* ═════════════════════ BUTTONS ═════════════════════ */

.ax-btn-ember,
html body .home-page .btn-451-primary.ax-btn-ember {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.05rem 1.15rem 1.05rem 1.6rem;
  border: 0;
  border-radius: 999px;
  background: var(--ax-ember-btn);
  color: #fff !important;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  box-shadow: 0 22px 44px -18px rgba(196, 106, 66, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transition: box-shadow 0.4s ease, background 0.4s ease;
}

.ax-btn-ember svg {
  width: 30px;
  height: 30px;
  padding: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  transition: transform 0.45s var(--ax-ease), background 0.3s ease;
}

.ax-btn-ember:hover svg {
  transform: translateX(3px) rotate(-45deg);
  background: rgba(255, 255, 255, 0.3);
}

.ax-btn-ember:hover {
  box-shadow: 0 26px 54px -18px rgba(196, 106, 66, 1), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* ═════════════════════ HERO ═════════════════════ */

html[data-theme] .home-page .home-hero.ax-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  aspect-ratio: auto !important;
  height: auto;
  padding: calc(76px + 2.5rem) 0 clamp(3.5rem, 8vh, 5.5rem);
  box-sizing: border-box;
  background:
    radial-gradient(55% 60% at 78% 38%, rgba(196, 106, 66, 0.2), transparent 70%),
    radial-gradient(50% 55% at 8% 100%, rgba(47, 122, 114, 0.28), transparent 70%),
    radial-gradient(40% 40% at 30% 0%, rgba(47, 122, 114, 0.12), transparent 70%),
    var(--ax-ink) !important;
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}

/* faint manuscript ruling across the ink */
html[data-theme] .home-page .ax-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: repeating-linear-gradient(180deg, transparent 0 47px, rgba(246, 239, 228, 0.035) 47px 48px);
  -webkit-mask-image: radial-gradient(70% 70% at 60% 40%, #000, transparent 75%);
  mask-image: radial-gradient(70% 70% at 60% 40%, #000, transparent 75%);
}

html[data-theme] .home-page .ax-hero::after {
  display: none;
}

.ax-hero .fx-spotlight {
  z-index: 0;
}

.ax-hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
  width: 100%;
  max-width: var(--ax-max);
  margin: 0 auto;
  padding: 0 var(--ax-gutter);
  box-sizing: border-box;
}

.ax-hero__text {
  min-width: 0;
}

html[data-theme] .home-page .ax-hero .ax-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0;
  font-family: var(--ax-sans);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.24em;
  color: var(--ax-mint) !important;
}

.ax-live {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ax-ember-hot);
  box-shadow: 0 0 12px var(--ax-ember-hot);
}

.ax-live::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px solid var(--ax-ember-hot);
  animation: ax-ping 2.2s var(--ax-ease) infinite;
}

@keyframes ax-ping {
  from { transform: scale(0.5); opacity: 1; }
  to { transform: scale(2.2); opacity: 0; }
}

html[data-theme] .home-page .ax-hero .ax-hero__title {
  max-width: none;
  margin: 0.32em 0 0.42em;
  font-family: var(--ax-display);
  font-size: clamp(2.7rem, 5.2vw, 4.9rem);
  font-weight: 340;
  font-variation-settings: "opsz" 144, "SOFT" 30;
  line-height: 0.9;
  letter-spacing: -0.05em;
  color: var(--ax-cream) !important;
  text-align: left;
}

/* theme-light pins -webkit-text-fill-color on .home-hero h1; hand it back to `color` */
html[data-theme] .home-page .ax-hero .ax-hero__title,
html[data-theme] .home-page .ax-hero .ax-hero__title * {
  -webkit-text-fill-color: currentColor !important;
}

html[data-theme] .home-page .ax-hero .ax-hero__title em {
  font-style: italic;
  font-weight: 300;
  color: var(--ax-ember-soft) !important;
}

.ax-hero__row {
  display: grid;
  gap: 1.8rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(246, 239, 228, 0.14);
}

html[data-theme] .home-page .ax-hero .hero-offer-lead {
  max-width: 34rem;
  margin: 0 0 0.6rem;
  font-family: var(--ax-sans);
  font-size: clamp(1.1rem, 1.7vw, 1.4rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: #fff !important;
}

html[data-theme] .home-page .ax-hero .hero-offer-text {
  max-width: 36rem;
  margin: 0;
  font-size: clamp(0.9rem, 1.15vw, 1.02rem);
  line-height: 1.65;
  color: rgba(246, 239, 228, 0.66) !important;
}

.ax-hero__actions {
  display: grid;
  justify-items: start;
  gap: 0.85rem;
}

html[data-theme] .home-page .ax-hero .hero-cta-row {
  margin: 0;
}

html[data-theme] .home-page .ax-hero .hero-sample-link {
  margin: 0;
}

html[data-theme] .home-page .ax-hero .hero-sample-link a {
  color: var(--ax-cream) !important;
  font-weight: 700;
  font-size: 0.9rem;
  border-bottom: 1px solid rgba(240, 184, 147, 0.5);
  padding-bottom: 2px;
  transition: border-color 0.3s ease, color 0.3s ease;
}

html[data-theme] .home-page .ax-hero .hero-sample-link a:hover {
  color: var(--ax-ember-soft);
  border-color: var(--ax-ember-soft);
}

html[data-theme] .home-page .ax-hero .hero-trust-note {
  margin: 0;
  font-size: 0.76rem;
  letter-spacing: 0.02em;
  color: rgba(246, 239, 228, 0.45) !important;
}

/* —— Art: floating manuscript, rewritten in a loop, edge smouldering —— */
.ax-art {
  position: relative;
  z-index: 1;
  justify-self: center;
  width: min(100%, 360px);
  margin: 2rem 2.5rem 3.5rem;
  aspect-ratio: 3 / 4;
  perspective: 1400px;
  pointer-events: none;
}

.ax-art__glow {
  position: absolute;
  inset: 20% -30% -25%;
  background: radial-gradient(closest-side, rgba(255, 138, 76, 0.4), rgba(196, 106, 66, 0.12) 55%, transparent);
  filter: blur(30px);
  animation: ax-breathe 5s ease-in-out infinite alternate;
}

@keyframes ax-breathe {
  from { opacity: 0.6; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1.05); }
}

.ax-art__stack {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateY(-24deg) rotateX(12deg) rotateZ(5deg);
  animation: ax-float 9s ease-in-out infinite alternate;
}

@keyframes ax-float {
  from { transform: rotateY(-24deg) rotateX(12deg) rotateZ(5deg) translate3d(0, 0, 0); }
  to { transform: rotateY(-16deg) rotateX(8deg) rotateZ(3deg) translate3d(0, -14px, 20px); }
}

.ax-sheet {
  position: absolute;
  inset: 0;
  border-radius: 4px 12px 12px 4px;
  background: linear-gradient(160deg, #fbf6ec, #efe5d3);
  box-shadow: 0 50px 90px -40px rgba(0, 0, 0, 0.85), inset 4px 0 0 rgba(22, 62, 58, 0.06);
}

.ax-sheet--3 { transform: translate3d(26px, 18px, -60px) rotateZ(4deg); filter: brightness(0.62); }
.ax-sheet--2 { transform: translate3d(13px, 9px, -30px) rotateZ(2deg); filter: brightness(0.8); }

.ax-sheet--1 {
  display: flex;
  flex-direction: column;
  gap: 4.2%;
  padding: 11% 11% 14%;
  box-sizing: border-box;
  overflow: hidden;
}

.ax-sheet__meta {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4%;
  padding-bottom: 4%;
  border-bottom: 1px solid rgba(22, 62, 58, 0.12);
}

.ax-sheet__meta b {
  --font-site: var(--ax-sans);
  font-size: clamp(0.5rem, 0.7vw, 0.62rem);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(22, 62, 58, 0.5);
}

.ax-sheet__h {
  width: 52%;
  height: 9px;
  margin-bottom: 3%;
  border-radius: 3px;
  background: rgba(22, 62, 58, 0.82);
}

.ax-l {
  display: block;
  width: var(--w);
  height: 5px;
  border-radius: 99px;
  background: rgba(26, 44, 42, 0.72);
  transform-origin: left center;
}

/* static fallback: the weak sentence already re-inked */
.ax-l--fix {
  background: var(--ax-water);
}

/* Editor's pen — positioned/driven by premium-fx.js */
.ax-pen {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 26px;
  height: 26px;
  margin: -22px 0 0 -3px;
  opacity: 0;
  filter: drop-shadow(0 6px 8px rgba(22, 62, 58, 0.35));
}

.ax-pen svg {
  width: 100%;
  height: 100%;
  fill: var(--ax-ink-3);
  stroke: var(--ax-ember-hot);
  stroke-width: 1;
}

/* Margin notes around the stack */
.ax-chip {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.8rem 0.5rem 0.55rem;
  border-radius: 99px;
  background: rgba(246, 239, 228, 0.96);
  box-shadow: 0 20px 40px -18px rgba(0, 0, 0, 0.7);
  font-size: 0.74rem;
  font-weight: 750;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--ax-ink-3) !important;
}

.ax-chip * {
  color: inherit !important;
}

.ax-chip i {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--ax-water);
  box-shadow: 0 0 0 4px rgba(47, 122, 114, 0.15);
}

.ax-chip--a { top: 9%; right: -14%; }
.ax-chip--b { top: 33%; left: -18%; }
.ax-chip--c { top: 60%; right: -12%; }

.ax-chip--b i {
  background: var(--ax-ember);
  box-shadow: 0 0 0 4px rgba(196, 106, 66, 0.18);
  transition: background 0.4s ease, box-shadow 0.4s ease;
}

.ax-chip__after { display: none; }
.ax-chip--b.is-fixed .ax-chip__before { display: none; }
.ax-chip--b.is-fixed .ax-chip__after { display: inline; }
.ax-chip--b.is-fixed i { background: var(--ax-water); box-shadow: 0 0 0 4px rgba(47, 122, 114, 0.15); }

/* Embers that cool into letters */
.ax-glyphs {
  position: absolute;
  inset: -10% -20% 0;
  z-index: 2;
  pointer-events: none;
}

.ax-glyph {
  --font-site: var(--ax-display);
  position: absolute;
  bottom: 0;
  font-family: var(--ax-display);
  font-style: italic;
  font-weight: 400;
  color: var(--ax-ember-soft);
  text-shadow: 0 0 14px rgba(255, 138, 76, 0.9);
  will-change: transform, opacity;
}

.ax-sheet__edge {
  position: absolute;
  left: -6%;
  right: -6%;
  bottom: -14px;
  height: 34px;
  background:
    radial-gradient(60% 100% at 30% 100%, rgba(255, 210, 168, 0.95), transparent 70%),
    radial-gradient(50% 100% at 75% 100%, rgba(255, 138, 76, 0.95), transparent 70%),
    linear-gradient(0deg, rgba(196, 106, 66, 0.9), transparent);
  filter: blur(7px);
  mix-blend-mode: multiply;
  animation: ax-smoulder 2.6s ease-in-out infinite alternate;
}

@keyframes ax-smoulder {
  0% { opacity: 0.55; transform: scaleY(0.85); }
  45% { opacity: 0.9; transform: scaleY(1.1); }
  100% { opacity: 0.7; transform: scaleY(0.95); }
}

/* Live evaluation card (self-looping, premium-fx.js), floating in front of the stack */
.ax-eval {
  position: absolute;
  z-index: 3;
  right: -16%;
  bottom: -12%;
  width: 232px;
  padding: 1.1rem;
  border-radius: var(--ax-radius);
  background: rgba(11, 32, 30, 0.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: #fff;
}

.ax-eval__head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding-bottom: 0.85rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ax-eval__head b {
  display: block;
  font-size: 0.88rem;
}

.ax-eval__head small {
  font-size: 0.7rem;
  color: rgba(246, 239, 228, 0.55);
}

.ax-eval__seal {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--ax-ember-soft), var(--ax-ember));
  font-size: 0.66rem;
  font-weight: 900;
  box-shadow: 0 0 20px rgba(232, 148, 106, 0.55);
}

.ax-eval__list {
  list-style: none;
  margin: 0 0 0.9rem;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.ax-eval__list li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(246, 239, 228, 0.42);
  transition: color 0.4s ease;
}

.ax-eval__list i {
  position: relative;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

.ax-eval__list i::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 1.8px 1.8px 0;
  transform: rotate(45deg) scale(0);
  transition: transform 0.45s var(--ax-ease);
}

.ax-eval__list li.is-on {
  color: #fff;
}

.ax-eval__list li.is-on i {
  background: var(--ax-water);
  border-color: var(--ax-water);
  box-shadow: 0 0 14px rgba(47, 122, 114, 0.7);
}

.ax-eval__list li.is-on i::after {
  transform: rotate(45deg) scale(1);
}

.ax-eval__list li.is-reading i {
  border-color: var(--ax-ember-hot);
  border-top-color: transparent;
  animation: ax-spin 0.8s linear infinite;
}

@keyframes ax-spin {
  to { transform: rotate(360deg); }
}

.ax-eval__foot {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.ax-eval__bar {
  flex: 1;
  height: 3px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.ax-eval__bar i {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--ax-water), var(--ax-ember-hot));
  transform-origin: left;
}

.ax-eval__foot em {
  font-style: normal;
  font-size: 0.68rem;
  color: rgba(246, 239, 228, 0.55);
  white-space: nowrap;
}

/* —— Editorial background: floating proof marks —— */
.ax-marks {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.ax-mark {
  --font-site: var(--ax-display);
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--ax-display);
  font-style: italic;
  font-weight: 300;
  line-height: 1;
  color: var(--ax-cream);
  opacity: 0;
  will-change: transform;
}

/* —— Live revisions: weak phrase typed, struck, replaced —— */
.ax-revs {
  position: absolute;
  inset: 0;
  z-index: 1;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}

.ax-revs li {
  display: none;
}

.ax-rev {
  --font-site: var(--ax-display);
  position: absolute;
  display: inline-flex;
  align-items: baseline;
  gap: 0.55em;
  font-family: var(--ax-display);
  font-size: clamp(0.95rem, 1.25vw, 1.25rem);
  font-style: italic;
  white-space: nowrap;
}

.ax-rev__old {
  position: relative;
  color: rgba(246, 239, 228, 0.5);
}

.ax-rev__old::after {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  top: 55%;
  height: 1.5px;
  background: var(--ax-ember-hot);
  box-shadow: 0 0 8px rgba(232, 148, 106, 0.7);
  transform: scaleX(var(--strike, 0));
  transform-origin: left;
}

.ax-rev__new {
  color: var(--ax-ember-soft);
}

.ax-rev__caret {
  display: inline-block;
  width: 1.5px;
  height: 1em;
  margin-left: -0.45em;
  background: var(--ax-ember-hot);
  transform: translateY(0.15em);
  animation: ax-caret 1s steps(1) infinite;
}

@keyframes ax-caret {
  50% { opacity: 0; }
}

/* Scroll cue */
.ax-scroll {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 1.2rem;
  width: 22px;
  height: 36px;
  margin-left: -11px;
  border-radius: 99px;
  border: 1.5px solid rgba(246, 239, 228, 0.3);
}

.ax-scroll span {
  position: absolute;
  left: 50%;
  top: 7px;
  width: 3px;
  height: 7px;
  margin-left: -1.5px;
  border-radius: 99px;
  background: var(--ax-cream);
  animation: ax-scroll 1.8s var(--ax-ease) infinite;
}

@keyframes ax-scroll {
  0% { transform: translateY(0); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translateY(12px); opacity: 0; }
}

@media (max-width: 1180px) {
  .ax-eval {
    right: -6%;
    width: 210px;
  }

  .ax-chip {
    font-size: 0.68rem;
  }
}

@media (max-width: 900px) {
  html[data-theme] .home-page .home-hero.ax-hero {
    min-height: 92svh;
    padding: calc(72px + 2.5rem) 0 2.5rem;
  }

  html[data-theme] .home-page .home-hero.ax-hero {
    display: flex !important;
  }

  .ax-hero__inner {
    grid-template-columns: 1fr;
  }

  .ax-art,
  .ax-revs {
    display: none;
  }

  html[data-theme] .home-page .ax-hero .ax-hero__title {
    font-size: clamp(2.6rem, 12vw, 4.2rem);
    line-height: 0.95;
  }

  .ax-hero__row {
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }

  .ax-btn-ember,
  html body .home-page .btn-451-primary.ax-btn-ember {
    font-size: 0.88rem;
    padding: 0.95rem 1rem 0.95rem 1.3rem;
  }

  .ax-scroll {
    display: none;
  }
}

/* ═════════════════════ FOOTER ═════════════════════ */

html[data-theme] body .studio-footer {
  position: relative;
  overflow: hidden;
  padding: clamp(4rem, 9vw, 7rem) 0 clamp(7rem, 16vw, 13rem);
  background:
    radial-gradient(60% 50% at 85% 0%, rgba(196, 106, 66, 0.16), transparent 70%),
    var(--ax-ink) !important;
  color: rgba(246, 239, 228, 0.7);
  border-top: 0 !important;
}

html[data-theme] body .studio-footer::after {
  content: "451";
  position: absolute;
  left: 50%;
  bottom: -0.2em;
  transform: translateX(-50%);
  font-family: var(--ax-display);
  font-size: clamp(10rem, 34vw, 30rem);
  font-weight: 300;
  line-height: 0.8;
  letter-spacing: -0.06em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(246, 239, 228, 0.07);
  pointer-events: none;
  user-select: none;
}

html[data-theme] body .studio-footer .footer-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 4rem);
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3rem);
}

html[data-theme] body .studio-footer .footer-brand {
  text-align: left;
  align-items: flex-start;
}

html[data-theme] body .studio-footer .footer-logo {
  height: 46px;
  width: auto;
}

html[data-theme] body .studio-footer .footer-tagline {
  margin: 1.4rem 0 1.6rem;
  max-width: 18ch;
  font-family: var(--ax-display);
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  font-weight: 330;
  font-style: italic;
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--ax-cream);
}

html[data-theme] body .studio-footer h4 {
  margin: 0.4rem 0 1.1rem;
  font-family: var(--ax-sans);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ax-ember-hot) !important;
}

html[data-theme] body .studio-footer p {
  margin: 0 0 0.55rem;
}

html[data-theme] body .studio-footer a {
  position: relative;
  color: rgba(246, 239, 228, 0.72) !important;
  font-size: 0.92rem;
  text-decoration: none;
  opacity: 1 !important;
  transition: color 0.3s ease;
}

html[data-theme] body .studio-footer .footer-grid > div:not(.footer-brand) a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: var(--ax-ember-hot);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.45s var(--ax-ease);
}

html[data-theme] body .studio-footer a:hover {
  color: #fff !important;
}

html[data-theme] body .studio-footer .footer-grid > div:not(.footer-brand) a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

html[data-theme] body .studio-footer .footer-social {
  display: flex;
  gap: 0.5rem;
}

html[data-theme] body .studio-footer .footer-social-link {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.03);
  transition: background 0.35s ease, border-color 0.35s ease, transform 0.45s var(--ax-ease);
}

html[data-theme] body .studio-footer .footer-social-link:hover {
  background: var(--ax-ember);
  border-color: var(--ax-ember);
  transform: translateY(-3px);
}

@media (max-width: 900px) {
  html[data-theme] body .studio-footer .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  html[data-theme] body .studio-footer .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ax-live::after,
  .ax-scroll span,
  .ax-art__glow,
  .ax-art__stack,
  .ax-rev__caret,
  .ax-sheet__edge,
  .ax-eval__list li.is-reading i {
    animation: none;
  }

  .ax-chip {
    display: none;
  }

  html body .header-nav,
  html body .header-nav.is-open {
    transition: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
 * SITE STANDARD — public pages (dashboards and 451 Studio keep their own shell)
 * Width: 1240 content / 920 narrow / 24px gutter. Paper ground, ink accents.
 * ═══════════════════════════════════════════════════════════════════ */

:root:not(:has(.dashboard-layout, .studio-site)),
html[data-theme]:not(:has(.dashboard-layout, .studio-site)) {
  /* legacy mint/white tokens → paper palette, so every old component follows */
  --bg: var(--ax-paper);
  --panel: #fffdf8;
  --panel-bg: #fffdf8;
  --line: rgba(22, 62, 58, 0.12);
  --light-box-bg: #fffdf8;
  --light-box-border: rgba(22, 62, 58, 0.1);
  --light-box-shadow: 0 1px 0 rgba(22, 62, 58, 0.04), 0 22px 44px -34px rgba(22, 62, 58, 0.45);
  --light-box-shadow-hover: 0 1px 0 rgba(22, 62, 58, 0.04), 0 30px 54px -32px rgba(22, 62, 58, 0.55);
  --light-inset-bg: #f1ebe0;
  --admin-surface-bg: #fffdf8;
  --admin-surface-border: rgba(22, 62, 58, 0.1);
  --water-mist: #f1ebe0;
  --site-page-bg: var(--ax-paper);
  --site-page-bg-soft: var(--ax-paper-2);
  --site-surface: #fffdf8;
  --site-surface-border: rgba(22, 62, 58, 0.1);
  --page-main-padding-top: calc(76px + 3.5rem);
  --page-main-padding-x: var(--ax-gutter);
  --font-heading: var(--ax-display);
}

:root:not(:has(.dashboard-layout, .studio-site)) body {
  background: var(--ax-paper) !important;
}

/* Every public shell snaps to the same column */
:root:not(:has(.dashboard-layout, .studio-site)) :is(main.container, .container, .home-inner, .footer-grid) {
  max-width: var(--ax-max) !important;
  margin-inline: auto;
  box-sizing: border-box;
}

:root:not(:has(.dashboard-layout, .studio-site)) main.container {
  padding-left: var(--ax-gutter) !important;
  padding-right: var(--ax-gutter) !important;
}

:root:not(:has(.dashboard-layout, .studio-site)) .home-page .home-inner {
  padding-left: var(--ax-gutter) !important;
  padding-right: var(--ax-gutter) !important;
}

/* Width normalisation: legacy components carried their own caps (560–960px).
 * Layout containers now take the full 1240 column; only running text keeps a
 * readable measure, left-aligned inside the full-width block. */
html[data-theme] body:not(#ax) :is(
  .home-start-paths__grid, .home-file-stage__grid, .ax-branch, .hiw-track-proof__stage,
  .lab-vitrine__featured, .laboratory-books-grid, .contact-page, .join-page, .section-block,
  .subservices-hub__groups, .positioning-content, .laboratory-books-page, .library-posts-grid,
  .hiw-scenes, .pr-lansman-band__hero, .writer-desk-home-layout
) {
  max-width: none !important;
  width: 100% !important;
  box-sizing: border-box;
}

html[data-theme] body:not(#ax) :is(.positioning-content, .contact-page, .join-page, .section-block) > p {
  max-width: 72ch;
}

html[data-theme] body:not(#ax) .home-page .ik-home-band__call {
  max-width: 820px !important;
}

/* Section header text keeps a comfortable measure, centred */
html[data-theme] body:not(#ax) .home-page :is(.home-start-paths__header, .home-file-stage__header, .lab-vitrine__header, .ik-home-band__header, .hiw-header) {
  max-width: 760px !important;
  margin-inline: auto !important;
}

/* —— Typography —— */
:root:not(:has(.dashboard-layout, .studio-site)) main :is(h1, h2):not(.ax-hero__title):not(.fx-story__title) {
  --font-site: var(--font-heading);
  font-family: var(--font-heading) !important;
  font-weight: 380;
  letter-spacing: -0.03em;
  font-variation-settings: "opsz" 96;
}

:root:not(:has(.dashboard-layout, .studio-site)) main h1:not(.ax-hero__title) {
  font-size: clamp(2.3rem, 4.4vw, 3.8rem);
  line-height: 1.04;
  color: var(--ax-ink-3);
}

:root:not(:has(.dashboard-layout, .studio-site)) main h2 {
  line-height: 1.08;
}

/* —— Buttons —— */
:root:not(:has(.dashboard-layout, .studio-site)) :is(.btn-451-primary, a.cta, button.cta):not(.ax-btn-ember) {
  border: 0 !important;
  border-radius: 999px !important;
  padding: 0.9rem 1.55rem;
  background: linear-gradient(180deg, #1e524c, var(--ax-ink-3)) !important;
  color: #fff !important;
  font-weight: 750;
  letter-spacing: -0.01em;
  box-shadow: 0 16px 34px -20px rgba(22, 62, 58, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  transition: background 0.4s ease, box-shadow 0.4s ease, transform 0.4s var(--ax-ease) !important;
}

:root:not(:has(.dashboard-layout, .studio-site)) :is(.btn-451-primary, a.cta, button.cta):not(.ax-btn-ember):hover {
  background: var(--ax-ember-btn) !important;
  box-shadow: 0 18px 38px -18px rgba(196, 106, 66, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}

:root:not(:has(.dashboard-layout, .studio-site)) :is(.btn-451-secondary, .ghost-button) {
  border-radius: 999px !important;
  border: 1px solid rgba(22, 62, 58, 0.22) !important;
  background: transparent !important;
  color: var(--ax-ink-3) !important;
  font-weight: 700;
  box-shadow: none !important;
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease !important;
}

:root:not(:has(.dashboard-layout, .studio-site)) :is(.btn-451-secondary, .ghost-button):hover {
  background: var(--ax-ink-3) !important;
  border-color: var(--ax-ink-3) !important;
  color: #fff !important;
}

/* —— Form fields —— */
:root:not(:has(.dashboard-layout, .studio-site)) main :is(input:is([type="text"], [type="email"], [type="password"], [type="tel"], [type="url"], [type="number"], [type="search"], :not([type])), select, textarea) {
  border-radius: 12px !important;
  border: 1px solid rgba(22, 62, 58, 0.16) !important;
  background: #fffdf8 !important;
  color: var(--ax-ink-3) !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
}

:root:not(:has(.dashboard-layout, .studio-site)) main :is(input, select, textarea):focus {
  outline: none !important;
  border-color: var(--ax-water) !important;
  box-shadow: 0 0 0 4px rgba(47, 122, 114, 0.14) !important;
}

/* —— Paper cards (shared) —— */
:root:not(:has(.dashboard-layout, .studio-site)) :is(
  .home-start-paths__card, .home-file-stage__option, .hiw-scene, .library-post-card, .post-card,
  .pr-lansman-band__pillar, .auth-card, .contact-form, .faq-item, .service-card,
  .services-hub-card, .ik-home-band__call
) {
  background: #fffdf8 !important;
  border: 1px solid rgba(22, 62, 58, 0.09) !important;
  border-radius: var(--ax-radius) !important;
  box-shadow: 0 1px 0 rgba(22, 62, 58, 0.04), 0 26px 50px -38px rgba(22, 62, 58, 0.5) !important;
  transition: box-shadow 0.45s var(--ax-ease), border-color 0.35s ease !important;
}

:root:not(:has(.dashboard-layout, .studio-site)) :is(
  .home-start-paths__card, .home-file-stage__option, .hiw-scene, .library-post-card, .post-card,
  .pr-lansman-band__pillar, .service-card, .services-hub-card
):hover {
  border-color: rgba(196, 106, 66, 0.35) !important;
  box-shadow: 0 1px 0 rgba(22, 62, 58, 0.04), 0 34px 60px -34px rgba(22, 62, 58, 0.6) !important;
}

/* ═════════════════════ HOME: section system ═════════════════════ */

.home-page :is(
  .home-start-paths, .home-file-stage, .lab-vitrine, .writer-desk-home-band, .ik-home-band,
  .library-band, .how-it-works-band, .editor-roster-band, .pr-lansman-band, .cta-join-band
) {
  position: relative;
  padding-block: clamp(4.5rem, 8vw, 7.5rem) !important;
  border-top: 0 !important;
}

/* tones */
html[data-theme] body:not(#ax) .home-page :is(.home-start-paths, .writer-desk-home-band, .how-it-works-band) {
  background: #fbf8f2 !important;
}

html[data-theme] body:not(#ax) .home-page :is(.home-file-stage, .library-band, .pr-lansman-band, .ik-home-band) {
  background: var(--ax-paper) !important;
}

html[data-theme] body:not(#ax) .home-page :is(.lab-vitrine, .editor-roster-band, .cta-join-band) {
  background:
    radial-gradient(60% 70% at 85% 0%, rgba(196, 106, 66, 0.14), transparent 70%),
    radial-gradient(50% 60% at 0% 100%, rgba(47, 122, 114, 0.22), transparent 70%),
    var(--ax-ink) !important;
  color: rgba(246, 239, 228, 0.72);
}

/* headers */
.home-page :is(
  .home-start-paths__header, .home-file-stage__header, .lab-vitrine__header, .writer-desk-home-band__header,
  .ik-home-band__header, .hiw-header, .section-header, .pr-lansman-band__copy
) {
  margin-bottom: clamp(2rem, 4vw, 3.5rem) !important;
}

html[data-theme] body:not(#ax) .home-page :is(
  .home-start-paths, .home-file-stage, .lab-vitrine, .writer-desk-home-band, .ik-home-band,
  .library-band, .how-it-works-band, .editor-roster-band, .pr-lansman-band, .cta-join-band
) h2 {
  --font-site: var(--ax-display);
  font-family: var(--ax-display) !important;
  font-size: clamp(2.1rem, 3.9vw, 3.4rem) !important;
  font-weight: 360 !important;
  font-style: normal;
  line-height: 1.04 !important;
  letter-spacing: -0.035em !important;
  color: var(--ax-ink-3) !important;
  -webkit-text-fill-color: currentColor !important;
  text-transform: none !important;
}

html[data-theme] body:not(#ax) .home-page :is(.lab-vitrine, .editor-roster-band, .cta-join-band) :is(h2, h3, strong, .lab-vitrine__featured-title) {
  color: var(--ax-cream) !important;
  -webkit-text-fill-color: currentColor !important;
}

html[data-theme] body:not(#ax) .home-page :is(.lab-vitrine, .editor-roster-band, .cta-join-band) :is(p, li, span:not([class*="btn"]):not(.fx-mask):not(.fx-mask *), small) {
  color: rgba(246, 239, 228, 0.66) !important;
}

/* eyebrows */
html[data-theme] body:not(#ax) .home-page :is(
  .home-start-paths, .home-file-stage, .lab-vitrine, .writer-desk-home-band, .ik-home-band,
  .library-band, .how-it-works-band, .editor-roster-band, .pr-lansman-band, .cta-join-band
) :is([class$="__eyebrow"], .eyebrow, .section-eyebrow) {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1.1rem;
  font-family: var(--ax-sans) !important;
  font-size: 0.7rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase;
  color: var(--ax-ember-text) !important;
}

html[data-theme] body:not(#ax) .home-page :is(
  .home-start-paths, .home-file-stage, .lab-vitrine, .writer-desk-home-band, .ik-home-band,
  .library-band, .how-it-works-band, .editor-roster-band, .pr-lansman-band, .cta-join-band
) :is([class$="__eyebrow"], .eyebrow, .section-eyebrow)::before {
  content: "";
  width: 24px;
  height: 1.5px;
  background: currentColor;
}

html[data-theme] body:not(#ax) .home-page :is(.lab-vitrine, .editor-roster-band, .cta-join-band) :is([class$="__eyebrow"], .eyebrow, .section-eyebrow) {
  color: var(--ax-ember-hot) !important;
}

/* ledes */
html[data-theme] body:not(#ax) .home-page :is(
  .home-start-paths, .home-file-stage, .lab-vitrine, .writer-desk-home-band, .ik-home-band,
  .library-band, .how-it-works-band, .editor-roster-band, .pr-lansman-band
) :is([class$="__lede"], [class$="__kicker"], .section-kicker) {
  max-width: 40rem;
  margin-inline: auto;
  font-size: clamp(0.98rem, 1.2vw, 1.1rem) !important;
  line-height: 1.65 !important;
  color: rgba(26, 44, 42, 0.68) !important;
}

html[data-theme] body:not(#ax) .home-page :is(.lab-vitrine, .editor-roster-band) :is([class$="__lede"], [class$="__kicker"], .section-kicker) {
  color: rgba(246, 239, 228, 0.62) !important;
}

/* card tags → small chips */
html[data-theme] body:not(#ax) .home-page :is(.home-start-paths__tag, .home-file-stage__tag) {
  display: inline-flex;
  padding: 0.3rem 0.65rem;
  border-radius: 99px;
  background: rgba(196, 106, 66, 0.1);
  color: var(--ax-ember-deep, #9a4e30) !important;
  font-size: 0.64rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em;
}

html[data-theme] body:not(#ax) .home-page :is(.home-start-paths__card, .home-file-stage__option) :is(h3, strong) {
  font-family: var(--ax-display) !important;
  --font-site: var(--ax-display);
  font-size: clamp(1.35rem, 1.9vw, 1.7rem) !important;
  font-weight: 420 !important;
  letter-spacing: -0.025em;
  color: var(--ax-ink-3) !important;
}

html[data-theme] body:not(#ax) .home-page :is(.home-start-paths__card, .home-file-stage__option) {
  padding: clamp(1.5rem, 2.6vw, 2.2rem) !important;
}

/* Lab vitrine on ink: its own surface tokens */
html[data-theme] body:not(#ax) .home-page .lab-vitrine {
  --lv-surface: rgba(255, 255, 255, 0.04);
  --lv-rule: rgba(255, 255, 255, 0.1);
  --lv-ink: var(--ax-cream);
  --lv-muted: rgba(246, 239, 228, 0.6);
}

html[data-theme] body:not(#ax) .home-page .lab-vitrine__featured {
  border-radius: var(--ax-radius) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html[data-theme] body:not(#ax) .home-page .lab-vitrine :is(a:not([class*="btn"]), .lab-vitrine__featured-link) {
  color: var(--ax-ember-soft) !important;
}

/* Join band: re-assert the dark design its inline styles were written for */
html[data-theme] body:not(#ax):not(#ay) .home-page .cta-join-band .cta-join-role,
html[data-theme] body:not(#ax):not(#ay) .home-page .editor-roster-band :is(.lab-subsection, .editor-roster-empty, [class*="empty"]) {
  background: rgba(255, 255, 255, 0.035) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  border-radius: var(--ax-radius) !important;
  transition: background 0.35s ease, border-color 0.35s ease;
}

html[data-theme] body:not(#ax):not(#ay) .home-page .cta-join-band .cta-join-role:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(232, 148, 106, 0.35) !important;
}

/* 451 Lab roster — same ink panels as the rest of the dark bands */
html[data-theme] body:not(#ax) .home-page .editor-roster-band .lab-subsection-header {
  max-width: none;
  padding-right: clamp(8rem, 18vw, 12rem);
}

html[data-theme] body:not(#ax) .home-page .editor-roster-band .lab-subsection-title {
  font-family: var(--ax-display) !important;
  --font-site: var(--ax-display);
  font-style: normal !important;
  font-weight: 380 !important;
  font-size: clamp(1.7rem, 2.6vw, 2.25rem) !important;
  letter-spacing: -0.03em;
  color: var(--ax-cream) !important;
  -webkit-text-fill-color: currentColor !important;
}

html[data-theme] body:not(#ax) .home-page .editor-roster-band .editor-roster-card {
  grid-template-columns: 7.75rem minmax(0, 1fr);
  gap: 1.1rem 1.25rem;
  padding: 1.15rem 1.2rem !important;
  background: rgba(255, 255, 255, 0.045) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 22px !important;
  box-shadow: none !important;
  transition: background 0.35s ease, border-color 0.35s ease;
}

html[data-theme] body:not(#ax) .home-page .editor-roster-band .editor-roster-card:hover {
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: rgba(232, 148, 106, 0.42) !important;
}

html[data-theme] body:not(#ax) .home-page .editor-roster-band .editor-roster-card__photo {
  border-radius: 14px !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  filter: none !important;
}

html[data-theme] body:not(#ax) .home-page .editor-roster-band .editor-roster-card__name {
  font-family: var(--ax-display) !important;
  --font-site: var(--ax-display);
  font-weight: 420 !important;
  font-size: 1.35rem !important;
  letter-spacing: -0.03em;
  color: var(--ax-cream) !important;
  -webkit-text-fill-color: currentColor !important;
}

html[data-theme] body:not(#ax) .home-page .editor-roster-band .editor-roster-card__role {
  color: var(--ax-ember-hot) !important;
  letter-spacing: 0.14em;
  font-weight: 800;
}

html[data-theme] body:not(#ax) .home-page .editor-roster-band :is(.editor-roster-card__blurb, .editor-roster-card__specialties) {
  color: rgba(246, 239, 228, 0.66) !important;
}

html[data-theme] body:not(#ax) .home-page .editor-roster-band .editor-roster-card__specialties-label {
  color: rgba(246, 239, 228, 0.45) !important;
}

html[data-theme] body:not(#ax) .home-page .editor-roster-band .editor-roster-card__link {
  color: var(--ax-ember-soft) !important;
  border-bottom-color: transparent;
}

html[data-theme] body:not(#ax) .home-page .editor-roster-band .editor-roster-card__link:hover {
  color: #fff !important;
  border-bottom-color: rgba(232, 148, 106, 0.7);
}

html[data-theme] body:not(#ax) .home-page .editor-roster-band .ghost-button {
  background: transparent !important;
  color: var(--ax-cream) !important;
  border: 1px solid rgba(246, 239, 228, 0.35) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  text-transform: none !important;
  letter-spacing: -0.01em !important;
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  padding: 0.85rem 1.45rem !important;
  filter: none !important;
}

html[data-theme] body:not(#ax) .home-page .editor-roster-band .ghost-button:hover {
  background: var(--ax-ember) !important;
  border-color: var(--ax-ember) !important;
  color: #fff !important;
  transform: none !important;
  filter: none !important;
  box-shadow: none !important;
}

/* How-it-works: step icons in ink discs */
html[data-theme] body:not(#ax) .home-page .how-it-works-band .hiw-icon {
  border-radius: 16px !important;
  background: var(--ax-ink-3) !important;
  color: var(--ax-cream) !important;
  box-shadow: 0 14px 30px -16px rgba(22, 62, 58, 0.8);
}

html[data-theme] body:not(#ax) .home-page .how-it-works-band .hiw-icon svg {
  stroke: var(--ax-cream) !important;
  color: var(--ax-cream) !important;
}

html[data-theme] body:not(#ax) .home-page .how-it-works-band .hiw-scene h3 {
  font-family: var(--ax-sans) !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em;
  color: var(--ax-ink-3) !important;
}

/* Library cards: separate paper cards on the band, not a white sheet */
html[data-theme] body:not(#ax) .library-posts-grid {
  background: transparent !important;
  gap: clamp(1rem, 2vw, 1.5rem) !important;
}

/* Library cards */
html[data-theme] body:not(#ax) .home-page .library-band .library-post-card {
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════════
 * SECTION SCENES — each band animates the job it describes (self-looping).
 * premium-fx.js toggles .is-inview; off-screen scenes are paused.
 * ═══════════════════════════════════════════════════════════════════ */

.fx-on .home-hero.is-offscreen *,
.fx-on .home-hero.is-offscreen *::before,
.fx-on .home-hero.is-offscreen *::after,
.fx-on [data-ax-scene]:not(.is-inview) *,
.fx-on [data-ax-scene]:not(.is-inview) *::before,
.fx-on [data-ax-scene]:not(.is-inview) *::after {
  animation-play-state: paused !important;
}

/* —— Shared illustration well inside a card —— */
.ax-vis {
  position: relative;
  height: 178px;
  margin: calc(clamp(1.5rem, 2.6vw, 2.2rem) * -0.55) calc(clamp(1.5rem, 2.6vw, 2.2rem) * -0.55) 1.5rem;
  border-radius: 16px;
  overflow: hidden;
  background:
    radial-gradient(70% 90% at 70% 100%, rgba(196, 106, 66, 0.14), transparent 70%),
    linear-gradient(160deg, #f3ece0, #e9dfcd);
}

.ax-num {
  --font-site: var(--ax-display);
  position: absolute;
  left: 18px;
  top: 8px;
  font-family: var(--ax-display);
  font-size: 3.4rem;
  font-style: italic;
  font-weight: 300;
  line-height: 1;
  color: rgba(22, 62, 58, 0.14);
}

/* 01 — five pages fan out, the editor's seal lands */
.ax-fan {
  position: absolute;
  left: 50%;
  bottom: -34px;
  width: 96px;
  height: 130px;
  margin-left: -48px;
}

.ax-fan__sheet {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 16px 12px;
  border-radius: 4px 8px 8px 4px;
  background: #fffdf8;
  box-shadow: 0 14px 26px -14px rgba(22, 62, 58, 0.55);
  transform-origin: 50% 110%;
  animation: ax-fan 6.5s var(--ax-ease-io) infinite;
}

.ax-fan__sheet i {
  height: 3px;
  border-radius: 99px;
  background: rgba(22, 62, 58, 0.2);
}

.ax-fan__sheet i:nth-child(2) { width: 80%; }
.ax-fan__sheet i:nth-child(3) { width: 92%; }
.ax-fan__sheet i:nth-child(4) { width: 60%; background: rgba(196, 106, 66, 0.45); }

@keyframes ax-fan {
  0%, 8% { transform: rotate(0deg); }
  28%, 78% { transform: rotate(calc((var(--k) - 2) * 15deg)) translateY(-10px); }
  94%, 100% { transform: rotate(0deg); }
}

.ax-stamp {
  --font-site: var(--ax-display);
  position: absolute;
  left: 50%;
  top: 6px;
  z-index: 2;
  display: grid;
  place-items: center;
  align-content: center;
  width: 70px;
  height: 70px;
  margin-left: -35px;
  border-radius: 50%;
  border: 2px solid var(--ax-ember);
  background: rgba(255, 253, 248, 0.85);
  color: var(--ax-ember);
  font-family: var(--ax-display);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1;
  opacity: 0;
  animation: ax-stamp 6.5s var(--ax-ease) infinite;
}

.ax-stamp small {
  font-family: var(--ax-sans);
  font-size: 0.5rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

@keyframes ax-stamp {
  0%, 38% { opacity: 0; transform: scale(2.2) rotate(-30deg); }
  45% { opacity: 1; transform: scale(0.92) rotate(-12deg); }
  50%, 80% { opacity: 1; transform: scale(1) rotate(-12deg); }
  90%, 100% { opacity: 0; transform: scale(1) rotate(-12deg); }
}

/* 02 — file uploads, the quote computes itself */
.ax-quote {
  position: absolute;
  left: 50%;
  top: 24px;
  width: min(78%, 300px);
  transform: translateX(-50%);
  display: grid;
  gap: 9px;
  padding: 12px 14px 14px;
  border-radius: 12px;
  background: #fffdf8;
  box-shadow: 0 20px 34px -22px rgba(22, 62, 58, 0.6);
  font-size: 0.68rem;
  color: var(--ax-ink-3);
}

.ax-quote__file {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 4px 8px;
  padding-bottom: 8px;
  border-bottom: 1px dashed rgba(22, 62, 58, 0.14);
}

.ax-quote__file > i { color: var(--ax-water); }
.ax-quote__file b { font-weight: 700; }

.ax-quote__up {
  grid-column: 1 / -1;
  height: 3px;
  border-radius: 99px;
  background: rgba(47, 122, 114, 0.14);
  overflow: hidden;
}

.ax-quote__up i,
.ax-quote__row i::after {
  display: block;
  height: 100%;
  transform-origin: left;
}

.ax-quote__up i {
  background: var(--ax-water);
  animation: ax-upload 6.5s var(--ax-ease-io) infinite;
}

@keyframes ax-upload {
  0% { transform: scaleX(0); }
  22%, 88% { transform: scaleX(1); }
  96%, 100% { transform: scaleX(0); }
}

.ax-quote__row {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  align-items: center;
  gap: 8px;
  color: rgba(22, 62, 58, 0.62);
  font-weight: 600;
}

.ax-quote__row i {
  position: relative;
  height: 6px;
  border-radius: 99px;
  background: rgba(22, 62, 58, 0.08);
  overflow: hidden;
}

.ax-quote__row i::after {
  content: "";
  position: absolute;
  inset: 0;
  width: calc(55% + var(--k) * 15%);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--ax-water), #7fc1b6);
  animation: ax-qrow 6.5s var(--ax-ease-io) infinite;
  animation-delay: calc(var(--k) * 0.35s);
}

@keyframes ax-qrow {
  0%, 26% { transform: scaleX(0); }
  40%, 88% { transform: scaleX(1); }
  96%, 100% { transform: scaleX(0); }
}

.ax-quote__ok {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 6px;
  border-radius: 99px;
  background: var(--ax-ember);
  color: #fff;
  font-weight: 800;
  animation: ax-ok 6.5s var(--ax-ease) infinite;
}

.ax-quote__ok i {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  font-size: 0.55rem;
}

@keyframes ax-ok {
  0%, 56% { opacity: 0; transform: translateY(6px) scale(0.8); }
  62%, 88% { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; transform: none; }
}

/* —— File stage: the path splits into three —— */
.ax-branch {
  position: relative;
  max-width: 1000px;
  height: 150px;
  margin: -0.5rem auto 0;
}

.ax-branch__root {
  position: absolute;
  left: 50%;
  top: -18px;
  z-index: 1;
  transform: translateX(-50%);
  padding: 0.45rem 1rem;
  border-radius: 99px;
  background: var(--ax-ink-3);
  color: var(--ax-cream) !important;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  white-space: nowrap;
  box-shadow: 0 0 0 6px rgba(22, 62, 58, 0.08), 0 14px 30px -14px rgba(22, 62, 58, 0.8);
}

.ax-branch svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.ax-branch path {
  fill: none;
  stroke: rgba(22, 62, 58, 0.18);
  stroke-width: 1.5;
  stroke-dasharray: 4 6;
  vector-effect: non-scaling-stroke;
}

.ax-branch path.ax-branch__flow {
  stroke: var(--ax-ember);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 14 100;
  stroke-dashoffset: 14;
  filter: drop-shadow(0 0 6px rgba(232, 148, 106, 0.9));
  animation: ax-flow 4.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

@keyframes ax-flow {
  from { stroke-dashoffset: 14; }
  to { stroke-dashoffset: -100; }
}

.ax-orb {
  position: relative;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin: calc(clamp(1.5rem, 2.6vw, 2.2rem) * -1 - 27px) 0 1.2rem;
  border-radius: 18px;
  background: var(--ax-ink-3);
  color: var(--ax-cream);
  font-size: 1.15rem;
  box-shadow: 0 16px 30px -16px rgba(22, 62, 58, 0.9);
  animation: ax-orb 4.2s ease-in-out infinite;
  animation-delay: var(--d);
}

@keyframes ax-orb {
  0%, 70%, 100% { background: var(--ax-ink-3); box-shadow: 0 16px 30px -16px rgba(22, 62, 58, 0.9); transform: none; }
  80% { background: var(--ax-ember); box-shadow: 0 0 0 8px rgba(196, 106, 66, 0.18), 0 18px 34px -12px rgba(196, 106, 66, 0.9); transform: translateY(-3px) scale(1.06); }
}

html[data-theme] body:not(#ax) .home-page .home-file-stage__option {
  overflow: visible;
  margin-top: 27px;
}

@media (max-width: 760px) {
  .ax-branch { display: none; }
}

/* —— How it works: light travels step to step (premium-fx.js) —— */
.hiw-scenes {
  position: relative;
}

.ax-hiw-track {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 27px;
  height: 2px;
  border-radius: 99px;
  background: rgba(22, 62, 58, 0.1);
  pointer-events: none;
}

.ax-hiw-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--ax-water), var(--ax-ember-hot));
  box-shadow: 0 0 10px rgba(232, 148, 106, 0.7);
  transform: scaleX(0);
  transform-origin: left;
}

html[data-theme] body:not(#ax) .home-page .how-it-works-band .hiw-icon {
  position: relative;
  z-index: 1;
  transition: background 0.5s ease, transform 0.6s var(--ax-ease), box-shadow 0.5s ease !important;
}

html[data-theme] body:not(#ax) .home-page .how-it-works-band .hiw-scene.is-lit .hiw-icon {
  background: linear-gradient(135deg, var(--ax-ember-hot), var(--ax-ember)) !important;
  transform: translateY(-4px) scale(1.08);
  box-shadow: 0 0 0 8px rgba(196, 106, 66, 0.14), 0 18px 34px -12px rgba(196, 106, 66, 0.9) !important;
}

html[data-theme] body:not(#ax) .home-page .how-it-works-band .hiw-scene {
  transition: border-color 0.5s ease, box-shadow 0.5s ease !important;
}

html[data-theme] body:not(#ax) .home-page .how-it-works-band .hiw-scene.is-lit {
  border-color: rgba(196, 106, 66, 0.4) !important;
}

/* —— Lab vitrine: the book breathes in 3D —— */
html[data-theme] body:not(#ax) .home-page .lab-vitrine__featured-cover {
  position: relative;
  display: block;
  perspective: 900px;
}

html[data-theme] body:not(#ax) .home-page .lab-vitrine__featured-cover img {
  border-radius: 2px 6px 6px 2px;
  box-shadow: 18px 30px 44px -18px rgba(0, 0, 0, 0.85), inset 3px 0 0 rgba(255, 255, 255, 0.12);
  transform-origin: left center;
  animation: ax-book 7s ease-in-out infinite alternate;
}

@keyframes ax-book {
  from { transform: rotateY(-20deg) rotateX(5deg) translateY(0); }
  to { transform: rotateY(-7deg) rotateX(2deg) translateY(-10px); }
}

html[data-theme] body:not(#ax) .home-page .lab-vitrine__featured-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.28) 50%, transparent 65%);
  mix-blend-mode: overlay;
  animation: ax-sheen 5.5s ease-in-out infinite;
}

@keyframes ax-sheen {
  0%, 55% { transform: translateX(-110%); }
  85%, 100% { transform: translateX(110%); }
}

/* —— İlk Kıvılcım: a struck match + a word counter —— */
html[data-theme] body:not(#ax) .home-page .ik-home-band__inner {
  position: relative;
}

.ax-match,
.ax-counter {
  position: absolute;
  top: 52%;
  pointer-events: none;
}

.ax-match {
  left: clamp(0rem, 4vw, 4rem);
  width: 70px;
  height: 230px;
  transform: rotate(-14deg);
}

.ax-match__stick {
  position: absolute;
  left: 31px;
  top: 52px;
  width: 9px;
  height: 170px;
  border-radius: 3px;
  background: linear-gradient(90deg, #d9b98b, #f2dcb7 45%, #c9a571);
  box-shadow: 4px 10px 18px -8px rgba(22, 62, 58, 0.45);
}

.ax-match__stick::before {
  content: "";
  position: absolute;
  left: -3px;
  top: -14px;
  width: 15px;
  height: 22px;
  border-radius: 50% 50% 45% 45%;
  background: radial-gradient(circle at 40% 35%, #5a2b1a, #2a120a);
}

.ax-match__flame {
  position: absolute;
  left: 18px;
  top: 0;
  width: 36px;
  height: 58px;
  transform-origin: 50% 90%;
  animation: ax-flicker 0.18s ease-in-out infinite alternate;
}

.ax-match__flame i {
  position: absolute;
  left: 50%;
  bottom: 0;
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  transform: translateX(-50%);
}

.ax-match__flame i:first-child {
  width: 34px;
  height: 56px;
  background: radial-gradient(ellipse at 50% 80%, #ffd2a8, #ff8a4c 45%, rgba(196, 106, 66, 0) 72%);
  filter: blur(1px);
  animation: ax-flame 1.6s ease-in-out infinite alternate;
}

.ax-match__flame i:last-child {
  width: 14px;
  height: 26px;
  bottom: 6px;
  background: radial-gradient(ellipse at 50% 70%, #fff, #ffe2c2 60%, rgba(255, 210, 168, 0));
}

@keyframes ax-flicker {
  from { transform: rotate(-2deg) scaleY(1); }
  to { transform: rotate(2deg) scaleY(1.06); }
}

@keyframes ax-flame {
  0% { transform: translateX(-50%) scale(1, 1); }
  50% { transform: translateX(-46%) scale(0.92, 1.1); }
  100% { transform: translateX(-54%) scale(1.04, 0.95); }
}

.ax-match__sparks i {
  position: absolute;
  left: 34px;
  top: 10px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #ffb27a;
  box-shadow: 0 0 6px #ff8a4c;
  opacity: 0;
  animation: ax-spark 2.4s ease-out infinite;
  animation-delay: calc(var(--k) * 0.4s);
}

@keyframes ax-spark {
  0% { opacity: 0; transform: translate(0, 0); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc((var(--k) - 3.5) * 12px), -90px); }
}

.ax-counter {
  right: clamp(0rem, 4vw, 4rem);
  display: grid;
  justify-items: start;
  gap: 0.3rem;
  width: 150px;
  margin-top: -60px;
  color: var(--ax-ink-3);
}

.ax-counter__n {
  --font-site: var(--ax-display);
  font-family: var(--ax-display);
  font-size: 3.4rem;
  font-weight: 340;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.ax-counter span {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ax-ember);
}

.ax-counter__bar {
  width: 100%;
  height: 4px;
  border-radius: 99px;
  background: rgba(22, 62, 58, 0.1);
  overflow: hidden;
}

.ax-counter__bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--ax-water), var(--ax-ember));
  transform: scaleX(0);
  transform-origin: left;
}

.ax-counter small {
  font-size: 0.66rem;
  color: rgba(22, 62, 58, 0.5);
}

@media (max-width: 1100px) {
  .ax-match,
  .ax-counter {
    display: none;
  }
}

/* Keep the word count beside the ticket, clear of the side notch */
@media (min-width: 1101px) {
  html[data-theme] body:not(#ax) .home-page .ik-home-band__inner {
    display: grid;
    grid-template-columns: minmax(96px, 150px) minmax(0, 640px) minmax(128px, 180px);
    justify-content: center;
    column-gap: clamp(1.6rem, 3vw, 2.75rem);
    align-items: center;
  }

  html[data-theme] body:not(#ax) .home-page .ik-home-band__inner > :is(.ik-home-band__header, .ik-home-band__call, .section-action) {
    grid-column: 2;
    width: 100%;
  }

  html[data-theme] body:not(#ax) .home-page .ax-match,
  html[data-theme] body:not(#ax) .home-page .ax-counter {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    margin: 0;
  }

  html[data-theme] body:not(#ax) .home-page .ax-match {
    grid-column: 1;
    grid-row: 2;
    justify-self: center;
  }

  html[data-theme] body:not(#ax) .home-page .ax-counter {
    grid-column: 3;
    grid-row: 2;
    justify-self: start;
    width: auto;
    z-index: 2;
  }

  html[data-theme] body:not(#ax) .home-page .ax-counter > span:not(.ax-counter__bar) {
    white-space: nowrap;
    padding-left: 0.15rem;
  }
}

html[data-theme] body:not(#ax) .home-page .ik-home-band__call {
  position: relative;
  max-width: 620px;
  margin-inline: auto;
  padding: clamp(1.8rem, 3vw, 2.6rem) !important;
  border-radius: 26px !important;
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(196, 106, 66, 0.1), transparent 60%),
    #fffdf8 !important;
}

/* ticket notches */
html[data-theme] body:not(#ax) .home-page .ik-home-band__call::before,
html[data-theme] body:not(#ax) .home-page .ik-home-band__call::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 26px;
  height: 26px;
  margin-top: -13px;
  border-radius: 50%;
  background: var(--ax-paper);
  box-shadow: inset 0 0 0 1px rgba(22, 62, 58, 0.09);
}

html[data-theme] body:not(#ax) .home-page .ik-home-band__call::before { left: -13px; }
html[data-theme] body:not(#ax) .home-page .ik-home-band__call::after { right: -13px; }

/* —— Library: typographic covers for posts without an image —— */
.library-card-media__placeholder.ax-typecover {
  --font-site: var(--ax-display);
  position: relative;
  display: grid !important;
  place-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background:
    radial-gradient(80% 70% at 80% 10%, rgba(196, 106, 66, 0.35), transparent 65%),
    radial-gradient(70% 70% at 0% 100%, rgba(47, 122, 114, 0.45), transparent 70%),
    var(--ax-ink) !important;
  color: var(--ax-cream) !important;
}

.ax-typecover__l {
  font-family: var(--ax-display) !important;
  font-size: clamp(4.5rem, 9vw, 7rem);
  font-style: italic;
  font-weight: 300;
  line-height: 1;
  color: var(--ax-ember-soft) !important;
  text-shadow: 0 10px 40px rgba(232, 148, 106, 0.35);
  transition: transform 0.9s var(--ax-ease);
}

.ax-typecover__t {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--ax-display) !important;
  font-size: 0.9rem;
  line-height: 1.2;
  color: rgba(246, 239, 228, 0.82) !important;
  text-align: left;
}

.ax-typecover__b {
  position: absolute;
  left: 16px;
  top: 12px;
  font-family: var(--ax-sans) !important;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(246, 239, 228, 0.5) !important;
}

.library-post-card:hover .ax-typecover__l {
  transform: scale(1.12) rotate(-6deg);
}

.library-post-card .library-card-media__img {
  transition: transform 1s var(--ax-ease);
}

.library-post-card:hover .library-card-media__img {
  transform: scale(1.05);
}

/* —— 451 Lab minis: Paragraf ¶ lines / Sekans film strip —— */
html[data-theme] body:not(#ax) .home-page .lab-subsection {
  position: relative;
}

.ax-mini {
  position: absolute;
  right: 1.4rem;
  top: 1.2rem;
  pointer-events: none;
}

.ax-mini--para {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-auto-rows: 4px;
  column-gap: 10px;
  row-gap: 7px;
  width: 130px;
  align-items: center;
}

.ax-mini--para b {
  --font-site: var(--ax-display);
  grid-row: 1 / span 4;
  font-family: var(--ax-display);
  font-size: 2.3rem;
  font-weight: 300;
  line-height: 1;
  color: var(--ax-ember-hot);
}

.ax-mini--para i {
  height: 4px;
  border-radius: 99px;
  background: rgba(246, 239, 228, 0.35);
  transform-origin: left;
  animation: ax-para 5s var(--ax-ease-io) infinite;
}

.ax-mini--para i:nth-of-type(1) { animation-delay: 0s; }
.ax-mini--para i:nth-of-type(2) { animation-delay: 0.35s; width: 86%; }
.ax-mini--para i:nth-of-type(3) { animation-delay: 0.7s; width: 94%; }
.ax-mini--para i:nth-of-type(4) { animation-delay: 1.05s; width: 58%; background: var(--ax-ember-hot); }

@keyframes ax-para {
  0% { transform: scaleX(0); }
  18%, 80% { transform: scaleX(1); }
  95%, 100% { transform: scaleX(0); }
}

.ax-mini--film {
  width: 170px;
  height: 46px;
  overflow: hidden;
  border-radius: 8px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}

.ax-film {
  display: flex;
  gap: 6px;
  width: max-content;
  padding: 7px 0;
  border-block: 3px dotted rgba(246, 239, 228, 0.35);
  animation: ax-film 5s linear infinite;
}

.ax-film i {
  width: 38px;
  height: 26px;
  border-radius: 3px;
  background: linear-gradient(135deg, rgba(47, 122, 114, 0.7), rgba(196, 106, 66, 0.55));
}

.ax-film i:nth-child(3n) { background: linear-gradient(135deg, rgba(232, 148, 106, 0.75), rgba(22, 62, 58, 0.6)); }
.ax-film i:nth-child(3n + 1) { background: linear-gradient(135deg, rgba(246, 239, 228, 0.35), rgba(47, 122, 114, 0.55)); }

@keyframes ax-film {
  to { transform: translateX(-220px); }
}

@media (max-width: 640px) {
  .ax-mini { display: none; }
}

/* —— PR / Lansman: signal runs Analiz → Strateji → Lansman (premium-fx.js) —— */
html[data-theme] body:not(#ax) .home-page .pr-lansman-band__stage-line {
  position: relative;
  overflow: hidden;
}

html[data-theme] body:not(#ax) .home-page .pr-lansman-band__stage-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--ax-water), var(--ax-ember-hot));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.9s var(--ax-ease-io);
}

html[data-theme] body:not(#ax) .home-page .pr-lansman-band__stage-line.is-flow::after {
  transform: scaleX(1);
}

html[data-theme] body:not(#ax) .home-page .pr-lansman-band__stage-node {
  transition: background 0.4s ease, color 0.4s ease, box-shadow 0.4s ease, transform 0.5s var(--ax-ease);
}

html[data-theme] body:not(#ax) .home-page .pr-lansman-band__stage-node.is-active {
  background: var(--ax-ink-3) !important;
  color: var(--ax-cream) !important;
  transform: translateY(-2px);
  box-shadow: 0 0 0 6px rgba(47, 122, 114, 0.12), 0 12px 24px -12px rgba(22, 62, 58, 0.8);
}

@media (prefers-reduced-motion: reduce) {
  .ax-fan__sheet,
  .ax-stamp,
  .ax-quote__up i,
  .ax-quote__row i::after,
  .ax-quote__ok,
  .ax-branch__flow,
  .ax-orb,
  .ax-match *,
  .ax-mini *,
  .ax-film,
  .lab-vitrine__featured-cover img,
  .lab-vitrine__featured-cover::after {
    animation: none !important;
  }

  .ax-stamp,
  .ax-quote__ok {
    opacity: 1;
  }
}

/* —— Split header: copy left, living scene right (Yazar Masası, Kütüphane) —— */
.ax-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

html[data-theme] body:not(#ax) .home-page .ax-split > header {
  margin: 0 !important;
  text-align: left !important;
}

html[data-theme] body:not(#ax) .home-page .ax-split > header :is(h2, p) {
  margin-left: 0 !important;
  text-align: left !important;
}

@media (max-width: 860px) {
  .ax-split {
    grid-template-columns: 1fr;
  }
}

/* Interview: mic waveform + Q/A bubbles appearing in turn */
.ax-interview {
  position: relative;
  display: grid;
  gap: 0.7rem;
  padding: 1.4rem;
  border-radius: 26px;
  background:
    radial-gradient(80% 70% at 100% 0%, rgba(196, 106, 66, 0.18), transparent 65%),
    var(--ax-ink);
  box-shadow: 0 40px 70px -40px rgba(11, 32, 30, 0.9);
  min-height: 250px;
}

.ax-interview__mic {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding-bottom: 0.9rem;
  margin-bottom: 0.2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--ax-ember-soft);
  font-size: 1.1rem;
}

.ax-wave {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 30px;
}

.ax-wave i {
  flex: 1;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(180deg, var(--ax-ember-hot), var(--ax-water));
  transform: scaleY(0.2);
  animation: ax-wave 1.3s ease-in-out infinite alternate;
  animation-delay: calc(var(--k) * -0.17s);
}

.ax-wave i:nth-child(3n) { animation-duration: 0.9s; }
.ax-wave i:nth-child(4n + 1) { animation-duration: 1.7s; }

@keyframes ax-wave {
  0% { transform: scaleY(0.15); }
  50% { transform: scaleY(0.5); }
  100% { transform: scaleY(0.9); }
}

.ax-rec {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--ax-sans);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: #ff8a7a !important;
}

.ax-rec::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff5a4a;
  box-shadow: 0 0 10px #ff5a4a;
  animation: ax-caret 1.2s steps(1) infinite;
}

html[data-theme] body:not(#ax) .ax-bubble {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  max-width: 88%;
  margin: 0 !important;
  padding: 0.7rem 0.9rem;
  border-radius: 16px 16px 16px 4px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(246, 239, 228, 0.88) !important;
  font-family: var(--ax-display) !important;
  --font-site: var(--ax-display);
  font-size: 0.98rem !important;
  font-style: italic;
  line-height: 1.4 !important;
  opacity: 0;
  animation: ax-bubble 0.9s var(--ax-ease) forwards;
}

html[data-theme] body:not(#ax) .ax-bubble b {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ax-water);
  color: #fff !important;
  font-family: var(--ax-sans);
  font-style: normal;
  font-size: 0.62rem;
  font-weight: 800;
}

html[data-theme] body:not(#ax) .ax-bubble--a {
  justify-self: end;
  border-radius: 16px 16px 4px 16px;
  background: rgba(232, 148, 106, 0.16);
  animation-delay: 1.6s;
}

html[data-theme] body:not(#ax) .ax-bubble--a b {
  background: var(--ax-ember);
}

html[data-theme] body:not(#ax) .ax-bubble--2 {
  animation-delay: 3.4s;
}

@keyframes ax-bubble {
  0% { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: none; }
}

.ax-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  max-width: 34rem;
  margin: 0 auto 1.5rem;
  padding: 1.1rem 1.4rem;
  border-radius: 18px;
  border: 1px dashed rgba(22, 62, 58, 0.2);
  background: rgba(255, 253, 248, 0.7);
}

.ax-empty__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--ax-ink-3);
  color: var(--ax-ember-soft);
}

html[data-theme] body:not(#ax) .ax-empty p {
  margin: 0 !important;
  font-weight: 600;
  color: var(--ax-ink-3) !important;
}

/* Bookshelf: spines slide out one by one */
.ax-shelf {
  position: relative;
  height: 230px;
  padding: 0 1.4rem;
}

.ax-shelf__row {
  position: absolute;
  left: 1.4rem;
  right: 1.4rem;
  bottom: 14px;
  height: 200px;
  display: flex;
  align-items: flex-end;
  gap: 5px;
}

.ax-shelf__row i {
  position: relative;
  flex: 1;
  height: var(--h);
  border-radius: 3px 3px 1px 1px;
  background:
    linear-gradient(180deg, transparent 12%, rgba(255, 255, 255, 0.18) 12% 14%, transparent 14% 84%, rgba(255, 255, 255, 0.18) 84% 86%, transparent 86%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.18), transparent 30%, rgba(255, 255, 255, 0.1) 60%, rgba(0, 0, 0, 0.15)),
    var(--c);
  box-shadow: 0 10px 18px -12px rgba(11, 32, 30, 0.7);
  animation: ax-spine 9.6s var(--ax-ease) infinite;
  animation-delay: calc(var(--k) * 0.8s);
}

.ax-shelf__row i:nth-child(4n + 2) {
  flex: 1.4;
}

@keyframes ax-spine {
  0%, 6%, 100% { transform: none; }
  2.5%, 4% { transform: translateY(-26px) rotate(-3deg); }
}

.ax-shelf__board {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 14px;
  border-radius: 4px;
  background: linear-gradient(180deg, #2a201a, #120c08);
  box-shadow: 0 20px 30px -16px rgba(11, 32, 30, 0.8);
}

/* "Dosyan bir kara kutuya girmez" → ink panel */
html[data-theme] body:not(#ax) .home-page .hiw-track-proof {
  margin-top: clamp(3rem, 6vw, 5rem) !important;
  padding: clamp(1.8rem, 4vw, 3rem) !important;
  border-radius: 28px !important;
  border: 0 !important;
  background:
    radial-gradient(60% 80% at 100% 0%, rgba(196, 106, 66, 0.18), transparent 65%),
    radial-gradient(60% 70% at 0% 100%, rgba(47, 122, 114, 0.3), transparent 70%),
    var(--ax-ink) !important;
  box-shadow: 0 50px 90px -50px rgba(11, 32, 30, 0.9) !important;
}

html[data-theme] body:not(#ax) .home-page .hiw-track-proof :is(h2, h3, h4, strong) {
  -webkit-text-fill-color: currentColor !important;
  --font-site: var(--ax-display);
  font-family: var(--ax-display) !important;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem) !important;
  font-weight: 380 !important;
  color: var(--ax-cream) !important;
}

html[data-theme] body:not(#ax) .home-page .hiw-track-proof p {
  color: rgba(246, 239, 228, 0.66) !important;
}

html[data-theme] body:not(#ax) .home-page .hiw-track-proof__stage {
  border-radius: 18px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: rgba(255, 255, 255, 0.04) !important;
}

html[data-theme] body:not(#ax) .home-page .hiw-track-proof__stage :is(span, li, .hiw-track-proof__label) {
  color: rgba(246, 239, 228, 0.7) !important;
}

html[data-theme] body:not(#ax) .home-page .hiw-track-proof__step.is-current .hiw-track-proof__label,
html[data-theme] body:not(#ax) .home-page .hiw-track-proof__status {
  color: var(--ax-ember-soft) !important;
}

html[data-theme] body:not(#ax):not(#ay) .home-page .hiw-track-proof .ghost-button {
  background: transparent !important;
  border-color: rgba(246, 239, 228, 0.3) !important;
  color: var(--ax-cream) !important;
}

html[data-theme] body:not(#ax) .home-page .hiw-track-proof .ghost-button:hover {
  background: var(--ax-ember) !important;
  border-color: var(--ax-ember-text) !important;
}

@media (prefers-reduced-motion: reduce) {
  .ax-wave i,
  .ax-rec::before,
  .ax-bubble,
  .ax-shelf__row i {
    animation: none !important;
  }

  .ax-bubble {
    opacity: 1 !important;
  }
}


/* ═════════════ INNER PAGES: shared section language ═════════════ */
:root:not(:has(.dashboard-layout, .studio-site)) main:not(:has(.home-page)) :is([class$="__eyebrow"], .eyebrow, .section-eyebrow, [class$="-eyebrow"]) {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--ax-sans) !important;
  font-size: 0.7rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase;
  color: var(--ax-ember-text) !important;
}

:root:not(:has(.dashboard-layout, .studio-site)) main:not(:has(.home-page)) :is([class$="__eyebrow"], .eyebrow, .section-eyebrow, [class$="-eyebrow"])::before {
  content: "";
  width: 22px;
  height: 1.5px;
  background: currentColor;
}

:root:not(:has(.dashboard-layout, .studio-site)) main:not(:has(.home-page)) h2 {
  font-size: clamp(1.7rem, 2.8vw, 2.5rem);
  color: var(--ax-ink-3);
  text-transform: none;
}

:root:not(:has(.dashboard-layout, .studio-site)) main:not(:has(.home-page)) :is([class$="__lede"], [class$="__kicker"], [class$="-lede"], [class$="-kicker"], .lead) {
  font-size: clamp(1rem, 1.25vw, 1.12rem);
  line-height: 1.65;
  color: rgba(26, 44, 42, 0.7);
}

/* —— Fixes: chip labels hug their text; icons on ink stay light —— */
html[data-theme] body:not(#ax) .home-page :is(.home-start-paths__tag, .home-file-stage__tag) {
  justify-self: start;
  align-self: flex-start;
  align-items: center;
  width: fit-content !important;
  max-width: 100%;
  margin: 0 0 0.9rem !important;
  padding: 0.42rem 0.75rem 0.38rem !important;
  line-height: 1 !important;
  height: auto !important;
  min-height: 0 !important;
}

html[data-theme] body:not(#ax) :is(.ax-orb, .ax-empty__icon, .ax-quote__ok, .ax-interview__mic) i,
html[data-theme] body:not(#ax) :is(.ax-orb, .ax-empty__icon) i::before {
  color: var(--ax-cream) !important;
  -webkit-text-fill-color: currentColor !important;
}

html[data-theme] body:not(#ax) .ax-interview__mic > i {
  color: var(--ax-ember-soft) !important;
}

html[data-theme] body:not(#ax) .home-page .home-start-paths__btn--ember {
  display: inline-flex;
  align-items: center;
  padding: 0.9rem 1.55rem !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--ax-ember-btn) !important;
  color: #fff !important;
  font-weight: 750;
  box-shadow: 0 16px 34px -18px rgba(196, 106, 66, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}

/* —— Legacy dark-designed widgets, re-toned for the paper theme (contrast audit) —— */
html[data-theme] body:not(#ax) :is(.submit-pricing-callout, [class*="pricing-callout"]) :is([class$="__eyebrow"], .eyebrow) {
  color: rgba(255, 255, 255, 0.88) !important;
}

html[data-theme] body:not(#ax) .auth-card #calculator-total-block {
  background:
    radial-gradient(80% 90% at 100% 0%, rgba(196, 106, 66, 0.22), transparent 65%),
    var(--ax-ink) !important;
  border-color: rgba(232, 148, 106, 0.35) !important;
  border-radius: 16px !important;
}

html[data-theme] body:not(#ax) .auth-card #calculator-total-block :is(.calculator-total-label, div, span) {
  color: rgba(246, 239, 228, 0.66) !important;
}

html[data-theme] body:not(#ax) .auth-card #calculator-total-block strong {
  color: #fff !important;
}

html[data-theme] body:not(#ax) .demo-diagnosis-sample-link a {
  color: var(--ax-ink-3) !important;
  font-weight: 700;
  border-bottom: 1px solid rgba(196, 106, 66, 0.55) !important;
}

html[data-theme] body:not(#ax) .demo-diagnosis-sample-link a:hover {
  color: var(--ax-ember-text) !important;
}

html[data-theme] body:not(#ax) #beta-testi .beta-premium-chip {
  color: var(--ax-water) !important;
  background: rgba(47, 122, 114, 0.1) !important;
  border-color: rgba(47, 122, 114, 0.28) !important;
}

/* ═════════════ Join band: team constellation ═════════════ */
.ax-join {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

html[data-theme] body:not(#ax) .home-page .cta-join-band h2 {
  font-size: clamp(2.4rem, 4.6vw, 4rem) !important;
  margin: 0 0 1.2rem !important;
}

html[data-theme] body:not(#ax) .home-page .ax-join__lede {
  max-width: 34rem;
  margin: 0 0 2rem !important;
  font-size: clamp(1rem, 1.3vw, 1.15rem) !important;
  line-height: 1.7 !important;
}

.ax-join__cta svg {
  stroke: currentColor;
}

.ax-orbit {
  position: relative;
  justify-self: center;
  width: min(100%, 440px);
  aspect-ratio: 1;
}

.ax-orbit__ring {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  border: 1px dashed rgba(246, 239, 228, 0.16);
}

.ax-orbit__ring > .ax-orbit__node {
  /* nodes are positioned from the orbit centre, not the ring box */
  left: 50%;
  top: 50%;
}

.ax-orbit__ring--inner {
  inset: 28%;
  border-style: solid;
  border-color: rgba(232, 148, 106, 0.18);
  animation-duration: 40s;
  animation-direction: reverse;
}

@keyframes ax-spin-slow {
  to { transform: rotate(360deg); }
}

.ax-orbit__node {
  --r: min(42vw, 184px);
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  /* one transform chain: orbit around the seal while the label stays upright */
  transform: rotate(var(--a)) translateY(calc(-1 * var(--r))) rotate(calc(-1 * var(--a)));
  animation: ax-orbit 60s linear infinite;
}

@keyframes ax-orbit {
  from { transform: rotate(var(--a)) translateY(calc(-1 * var(--r))) rotate(calc(-1 * var(--a))); }
  to { transform: rotate(calc(var(--a) + 360deg)) translateY(calc(-1 * var(--r))) rotate(calc(-1 * var(--a) - 360deg)); }
}

html[data-theme] body:not(#ax) .home-page .ax-orbit__node b {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  padding: 0.45rem 0.85rem;
  border-radius: 99px;
  background: rgba(16, 48, 44, 0.92);
  border: 1px solid rgba(246, 239, 228, 0.14);
  color: var(--ax-cream) !important;
  font-size: 0.74rem;
  font-weight: 750;
  white-space: nowrap;
  transform: translate(-50%, -50%);
  box-shadow: 0 14px 30px -16px rgba(0, 0, 0, 0.8);
  animation: ax-node 12s ease-in-out infinite;
  animation-delay: calc(var(--k) * 2s);
}

@keyframes ax-node {
  0%, 14%, 100% {
    background: rgba(16, 48, 44, 0.92);
    border-color: rgba(246, 239, 228, 0.14);
    box-shadow: 0 14px 30px -16px rgba(0, 0, 0, 0.8);
  }
  4%, 10% {
    background: var(--ax-ember);
    border-color: var(--ax-ember-hot);
    box-shadow: 0 0 0 6px rgba(196, 106, 66, 0.18), 0 16px 34px -12px rgba(196, 106, 66, 0.9);
  }
}

.ax-orbit__seal {
  --font-site: var(--ax-display);
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  align-content: center;
  width: 31%;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 35% 30%, var(--ax-ember-soft), var(--ax-ember) 55%, #7d3d24);
  color: #fff;
  font-family: var(--ax-display);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 500;
  line-height: 1;
  box-shadow: 0 0 60px rgba(232, 148, 106, 0.45), inset 0 2px 0 rgba(255, 255, 255, 0.25);
}

.ax-orbit__seal small {
  margin-top: 0.3rem;
  font-family: var(--ax-sans);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.85;
}

.ax-orbit__pulse {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 31%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(232, 148, 106, 0.5);
  transform: translate(-50%, -50%) scale(1);
  animation: ax-pulse 4s ease-out infinite;
}

@keyframes ax-pulse {
  from { opacity: 0.8; transform: translate(-50%, -50%) scale(1); }
  to { opacity: 0; transform: translate(-50%, -50%) scale(2.8); }
}

.ax-roles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: clamp(3rem, 6vw, 5rem);
}

html[data-theme] body:not(#ax) .home-page .ax-role {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.7rem;
  padding: clamp(1.5rem, 2.4vw, 2rem);
  border-radius: var(--ax-radius);
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
  transition: background 0.4s ease, border-color 0.4s ease, transform 0.5s var(--ax-ease);
}

html[data-theme] body:not(#ax) .home-page .ax-role::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--ax-ember-hot), transparent);
  transform: scaleX(0);
  transition: transform 0.6s var(--ax-ease);
}

html[data-theme] body:not(#ax) .home-page .ax-role:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(232, 148, 106, 0.3);
  transform: translateY(-4px);
}

html[data-theme] body:not(#ax) .home-page .ax-role:hover::after {
  transform: scaleX(1);
}

html[data-theme] body:not(#ax) .home-page .ax-role__n {
  --font-site: var(--ax-display);
  position: absolute;
  right: 1.2rem;
  top: 0.8rem;
  font-family: var(--ax-display);
  font-size: 2.6rem;
  font-style: italic;
  font-weight: 300;
  color: rgba(246, 239, 228, 0.1) !important;
}

.ax-role__icon {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.ax-role--ember .ax-role__icon { background: rgba(255, 108, 60, 0.1); border-color: rgba(255, 108, 60, 0.25); }
.ax-role--water .ax-role__icon { background: rgba(93, 197, 255, 0.1); border-color: rgba(93, 197, 255, 0.25); }
.ax-role--violet .ax-role__icon { background: rgba(160, 120, 255, 0.1); border-color: rgba(160, 120, 255, 0.25); }

html[data-theme] body:not(#ax) .home-page .ax-role strong {
  font-size: 1.08rem;
  font-weight: 800;
  color: #fff !important;
}

html[data-theme] body:not(#ax) .home-page .ax-role__text {
  font-size: 0.92rem;
  line-height: 1.6;
  color: rgba(246, 239, 228, 0.6) !important;
}

@media (max-width: 860px) {
  .ax-join,
  .ax-roles {
    grid-template-columns: 1fr;
  }

  .ax-orbit {
    width: min(100%, 360px);
  }
}

/* ═════════════ Library cards: real cards (legacy column rules off) ═════════════ */
html[data-theme] body:not(#ax) .library-posts-grid {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
  border: 0 !important;
  padding: 0 !important;
}

html[data-theme] body:not(#ax) .library-posts-grid::before,
html[data-theme] body:not(#ax) .library-posts-grid::after,
html[data-theme] body:not(#ax) .library-posts-grid .library-post-card::before,
html[data-theme] body:not(#ax) .library-posts-grid .library-post-card::after {
  display: none !important;
  content: none !important;
}

html[data-theme] body:not(#ax) .library-posts-grid .library-post-card {
  display: flex !important;
  flex-direction: column;
  height: 100%;
  margin: 0 !important;
  padding: 0 0 1.4rem !important;
  overflow: hidden;
  border-bottom: 1px solid rgba(22, 62, 58, 0.09) !important;
}

html[data-theme] body:not(#ax) .library-posts-grid .library-post-card > :not(.library-post-card__media) {
  padding-left: 1.35rem !important;
  padding-right: 1.35rem !important;
}

html[data-theme] body:not(#ax) .library-posts-grid .library-post-card__media {
  margin: 0 0 1.1rem !important;
  border-radius: 0 !important;
  overflow: hidden;
}

html[data-theme] body:not(#ax) .library-posts-grid .library-post-card__byline {
  margin-top: auto !important;
  padding-top: 0.9rem !important;
}

/* ═════════════ Lab vitrine: one featured book uses the whole column ═════════════ */
html[data-theme] body:not(#ax) .home-page .lab-vitrine__stage:not(:has(.lab-vitrine__thumb)) {
  grid-template-columns: 1fr !important;
}

html[data-theme] body:not(#ax) .home-page .lab-vitrine__featured {
  grid-template-columns: minmax(180px, 280px) minmax(0, 1fr) !important;
  gap: clamp(2rem, 5vw, 4.5rem) !important;
  align-items: center !important;
  padding: clamp(1.8rem, 4vw, 3.2rem) !important;
}

html[data-theme] body:not(#ax) .home-page .lab-vitrine__featured-title {
  --font-site: var(--ax-display);
  font-family: var(--ax-display) !important;
  font-size: clamp(2rem, 3.6vw, 3.2rem) !important;
  font-weight: 340 !important;
  line-height: 1.02 !important;
  letter-spacing: -0.035em;
}

/* Laboratuvardan Çıkanlar — paper catalog on the same column as the other inner pages */
html[data-theme] body:not(#ax) .laboratory-books-page {
  margin: 0 0 clamp(3rem, 6vw, 5rem) !important;
  padding: 0 !important;
}

html[data-theme] body:not(#ax) .laboratory-books-page__empty {
  margin: 0;
  color: rgba(26, 44, 42, 0.68);
}

html[data-theme] body:not(#ax) .laboratory-books-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
  gap: clamp(1.1rem, 2vw, 1.5rem) !important;
  justify-content: stretch !important;
  overflow: visible !important;
  max-width: none !important;
}

html[data-theme] body:not(#ax) .laboratory-book-card {
  display: flex;
  flex-direction: column;
  width: auto !important;
  max-width: none !important;
  flex: none !important;
  margin: 0;
  background: #fffdf8 !important;
  border: 1px solid rgba(22, 62, 58, 0.09) !important;
  border-radius: 22px !important;
  box-shadow: 0 1px 0 rgba(22, 62, 58, 0.04), 0 26px 50px -38px rgba(22, 62, 58, 0.55);
  overflow: hidden;
  color: var(--ax-ink-3);
  transition: border-color 0.35s ease, box-shadow 0.45s var(--ax-ease), transform 0.45s var(--ax-ease);
}

html[data-theme] body:not(#ax) .laboratory-book-card:hover {
  border-color: rgba(196, 106, 66, 0.35) !important;
  box-shadow: 0 1px 0 rgba(22, 62, 58, 0.04), 0 34px 60px -34px rgba(22, 62, 58, 0.65);
  transform: translateY(-3px);
}

html[data-theme] body:not(#ax) .laboratory-book-card__cover {
  aspect-ratio: 2 / 3;
  background:
    radial-gradient(80% 70% at 80% 0%, rgba(196, 106, 66, 0.16), transparent 70%),
    #efe7da;
  overflow: hidden;
}

html[data-theme] body:not(#ax) .laboratory-book-card__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ax-ease);
}

html[data-theme] body:not(#ax) .laboratory-book-card:hover .laboratory-book-card__cover img {
  transform: scale(1.035);
}

html[data-theme] body:not(#ax) .laboratory-book-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1;
  padding: 1.05rem 1.15rem 1.2rem;
}

html[data-theme] body:not(#ax) .laboratory-book-card__title {
  margin: 0 0 0.35rem;
  font-family: var(--ax-display) !important;
  --font-site: var(--ax-display);
  font-size: clamp(1.25rem, 1.6vw, 1.55rem);
  font-weight: 420;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--ax-ink-3) !important;
  -webkit-text-fill-color: currentColor !important;
}

html[data-theme] body:not(#ax) .laboratory-book-card__spot {
  margin: 0 0 0.7rem;
  font-family: var(--ax-display);
  font-size: 0.98rem;
  font-style: italic;
  line-height: 1.5;
  color: rgba(26, 44, 42, 0.72) !important;
}

html[data-theme] body:not(#ax) .laboratory-book-card__meta {
  display: grid;
  gap: 0.35rem;
  margin: auto 0 0;
  padding-top: 0.75rem;
}

html[data-theme] body:not(#ax) .laboratory-book-card__meta div {
  display: grid;
  grid-template-columns: 4.6rem minmax(0, 1fr);
  gap: 0.45rem;
  align-items: baseline;
}

html[data-theme] body:not(#ax) .laboratory-book-card__meta dt {
  margin: 0;
  font-family: var(--ax-sans);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(26, 44, 42, 0.45);
}

html[data-theme] body:not(#ax) .laboratory-book-card__meta dd {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.35;
  color: var(--ax-ink-3);
}

/* One title on the shelf reads as a spread, not a lonely thumbnail */
html[data-theme] body:not(#ax) .laboratory-books-grid:has(> .laboratory-book-card:only-child) {
  grid-template-columns: minmax(0, 1fr) !important;
}

html[data-theme] body:not(#ax) .laboratory-books-grid:has(> .laboratory-book-card:only-child) .laboratory-book-card {
  display: grid;
  grid-template-columns: minmax(180px, 280px) minmax(0, 1fr);
  align-items: stretch;
}

html[data-theme] body:not(#ax) .laboratory-books-grid:has(> .laboratory-book-card:only-child) .laboratory-book-card__cover {
  aspect-ratio: auto;
  min-height: 100%;
}

html[data-theme] body:not(#ax) .laboratory-books-grid:has(> .laboratory-book-card:only-child) .laboratory-book-card__body {
  justify-content: center;
  padding: clamp(1.4rem, 3vw, 2.4rem);
}

html[data-theme] body:not(#ax) .laboratory-books-grid:has(> .laboratory-book-card:only-child) .laboratory-book-card__title {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
}

@media (max-width: 720px) {
  html[data-theme] body:not(#ax) .laboratory-books-grid,
  html[data-theme] body:not(#ax) .laboratory-books-grid:has(> .laboratory-book-card:only-child) {
    grid-template-columns: 1fr !important;
  }

  html[data-theme] body:not(#ax) .laboratory-books-grid:has(> .laboratory-book-card:only-child) .laboratory-book-card {
    grid-template-columns: minmax(132px, 46%) minmax(0, 1fr);
  }

  html[data-theme] body:not(#ax) .laboratory-book-card__meta div {
    grid-template-columns: 1fr;
    gap: 0.1rem;
  }
}

/* ═════════════ 451 Yazar Masası — paper shelf, same language as the laboratory page ═════════════ */
html[data-theme] body:not(#ax) .writer-desk-page__inner,
html[data-theme] body:not(#ax) .writer-desk-detail__body,
html[data-theme] body:not(#ax) .writer-desk-detail__footer {
  max-width: var(--ax-max) !important;
  padding-left: var(--ax-gutter) !important;
  padding-right: var(--ax-gutter) !important;
}

html[data-theme] body:not(#ax) .writer-desk-page__empty,
html[data-theme] body:not(#ax) .writer-desk-home-band__soon {
  margin: 0.85rem 0 0;
  text-align: left;
  color: rgba(26, 44, 42, 0.62) !important;
  font-weight: 600;
}

html[data-theme] body:not(#ax) .home-page .writer-desk-home-band__soon {
  max-width: 36rem;
  margin: 1rem 0 0 !important;
}

html[data-theme] body:not(#ax) :is(.writer-desk-featured__media img, .writer-desk-card__media img, .writer-desk-detail__portrait img) {
  filter: none !important;
  object-fit: cover;
}

html[data-theme] body:not(#ax) :is(.writer-desk-featured__label, .writer-desk-card__label, .writer-desk-detail__label) {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin: 0 0 0.7rem;
  padding: 0.28rem 0.6rem;
  border-radius: 99px;
  background: rgba(196, 106, 66, 0.1);
  color: var(--ax-ember-text) !important;
  font-family: var(--ax-sans) !important;
  font-size: 0.62rem !important;
  font-weight: 800;
  letter-spacing: 0.14em;
}

html[data-theme] body:not(#ax) :is(.writer-desk-featured__writer, .writer-desk-card__writer, .writer-desk-detail__writer) {
  margin: 0 0 0.35rem;
  font-family: var(--ax-sans);
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  color: var(--ax-ink-3) !important;
}

html[data-theme] body:not(#ax) :is(.writer-desk-featured__title, .writer-desk-card__title, .writer-desk-detail__title) {
  font-family: var(--ax-display) !important;
  --font-site: var(--ax-display);
  font-weight: 400 !important;
  letter-spacing: -0.03em;
  color: var(--ax-ink-3) !important;
  -webkit-text-fill-color: currentColor !important;
}

html[data-theme] body:not(#ax) :is(.writer-desk-featured__spot, .writer-desk-card__spot, .writer-desk-detail__spot) {
  color: rgba(26, 44, 42, 0.72) !important;
}

html[data-theme] body:not(#ax) :is(.writer-desk-featured__date, .writer-desk-card__date, .writer-desk-detail__date) {
  color: rgba(26, 44, 42, 0.48) !important;
  letter-spacing: 0.04em;
}

html[data-theme] body:not(#ax) :is(.writer-desk-featured__cta, .writer-desk-card__cta, .writer-desk-detail__back) {
  color: var(--ax-ember-text) !important;
  letter-spacing: 0.08em;
}

html[data-theme] body:not(#ax) .writer-desk-featured {
  margin: 0 0 1.25rem;
  border: 0;
}

html[data-theme] body:not(#ax) .writer-desk-featured__link,
html[data-theme] body:not(#ax) .writer-desk-card__link {
  background: #fffdf8;
  border: 1px solid rgba(22, 62, 58, 0.09);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(22, 62, 58, 0.04), 0 26px 50px -38px rgba(22, 62, 58, 0.55);
  transition: border-color 0.35s ease, box-shadow 0.45s var(--ax-ease), transform 0.45s var(--ax-ease);
}

html[data-theme] body:not(#ax) .writer-desk-featured__link:hover,
html[data-theme] body:not(#ax) .writer-desk-card__link:hover {
  opacity: 1;
  border-color: rgba(196, 106, 66, 0.35);
  box-shadow: 0 1px 0 rgba(22, 62, 58, 0.04), 0 34px 60px -34px rgba(22, 62, 58, 0.65);
  transform: translateY(-3px);
}

html[data-theme] body:not(#ax) .writer-desk-featured__link {
  grid-template-columns: minmax(200px, 320px) minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
  padding: 0;
}

html[data-theme] body:not(#ax) .writer-desk-featured__media,
html[data-theme] body:not(#ax) .writer-desk-card__media,
html[data-theme] body:not(#ax) .writer-desk-detail__portrait {
  background:
    radial-gradient(80% 70% at 80% 0%, rgba(196, 106, 66, 0.16), transparent 70%),
    #efe7da;
  border: 0;
  margin: 0;
}

html[data-theme] body:not(#ax) .writer-desk-featured__media {
  aspect-ratio: auto;
  max-height: none;
  min-height: 100%;
}

html[data-theme] body:not(#ax) .writer-desk-featured__copy,
html[data-theme] body:not(#ax) .writer-desk-card__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.2rem, 2.4vw, 2.2rem);
}

html[data-theme] body:not(#ax) .writer-desk-archive-grid {
  gap: clamp(1.1rem, 2vw, 1.5rem);
}

html[data-theme] body:not(#ax) .writer-desk-card__link {
  height: 100%;
  padding: 0;
  border-top: 0;
}

html[data-theme] body:not(#ax) .writer-desk-card__media {
  aspect-ratio: 4 / 5;
}

html[data-theme] body:not(#ax) .writer-desk-card__media img {
  transition: transform 0.7s var(--ax-ease);
}

html[data-theme] body:not(#ax) .writer-desk-card__link:hover .writer-desk-card__media img,
html[data-theme] body:not(#ax) .writer-desk-featured__link:hover .writer-desk-featured__media img {
  transform: scale(1.035);
  filter: none !important;
}

html[data-theme] body:not(#ax) .writer-desk-home-layout {
  max-width: none;
  align-items: stretch;
}

html[data-theme] body:not(#ax) .writer-desk-card--home-featured .writer-desk-card__link {
  grid-template-columns: minmax(180px, 280px) minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
}

html[data-theme] body:not(#ax) .writer-desk-card--home-featured .writer-desk-card__media {
  aspect-ratio: auto;
  min-height: 100%;
}

html[data-theme] body:not(#ax) .writer-desk-card--home-compact .writer-desk-card__link {
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  padding: 0;
  border-radius: 18px;
}

html[data-theme] body:not(#ax) .writer-desk-card--home-compact .writer-desk-card__media {
  flex: 0 0 96px;
  width: 96px;
  aspect-ratio: 3 / 4;
}

html[data-theme] body:not(#ax) .writer-desk-card--home-compact .writer-desk-card__body {
  padding: 0.85rem 1rem;
}

html[data-theme] body:not(#ax) .writer-desk-card--home-compact .writer-desk-card__spot,
html[data-theme] body:not(#ax) .writer-desk-card--home-compact .writer-desk-card__date {
  display: none;
}

html[data-theme] body:not(#ax) .writer-desk-home-band .ghost-button {
  background: transparent !important;
  color: var(--ax-ink-3) !important;
  border: 1px solid rgba(22, 62, 58, 0.22) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  text-transform: none !important;
  letter-spacing: -0.01em !important;
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  padding: 0.85rem 1.45rem !important;
  filter: none !important;
}

html[data-theme] body:not(#ax) .writer-desk-home-band .ghost-button:hover {
  background: var(--ax-ink-3) !important;
  border-color: var(--ax-ink-3) !important;
  color: #fff !important;
  transform: none !important;
  filter: none !important;
  box-shadow: none !important;
}

html[data-theme] body:not(#ax) .writer-desk-detail__hero {
  padding: var(--page-main-padding-top) var(--ax-gutter) 0;
  border: 0;
  background: transparent;
}

html[data-theme] body:not(#ax) .writer-desk-detail__hero-inner {
  display: grid;
  grid-template-columns: minmax(200px, 320px) minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
  max-width: var(--ax-max);
  margin-inline: auto;
  padding: 0 !important;
  overflow: hidden;
  border-radius: 28px;
  background: #fffdf8;
  border: 1px solid rgba(22, 62, 58, 0.09);
  box-shadow: 0 1px 0 rgba(22, 62, 58, 0.04), 0 40px 70px -46px rgba(22, 62, 58, 0.7);
}

html[data-theme] body:not(#ax) .writer-desk-detail__intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.4rem, 3vw, 2.6rem);
}

html[data-theme] body:not(#ax) .writer-desk-detail__portrait {
  aspect-ratio: auto;
  min-height: 100%;
}

html[data-theme] body:not(#ax) .writer-desk-detail .resource-body,
html[data-theme] body:not(#ax) .writer-desk-detail .resource-body :is(p, li) {
  color: #1f2a28 !important;
}

html[data-theme] body:not(#ax) .writer-desk-detail .resource-body {
  max-width: 68ch;
  margin-inline: auto;
}

html[data-theme] body:not(#ax) .writer-desk-detail .resource-body :is(h2, h3, h4) {
  font-family: var(--ax-display) !important;
  --font-site: var(--ax-display);
  font-weight: 400 !important;
  letter-spacing: -0.03em;
  color: var(--ax-ink-3) !important;
}

html[data-theme] body:not(#ax) .writer-desk-detail__footer {
  border-top: 0;
  padding-top: 1.75rem;
}

@media (max-width: 800px) {
  html[data-theme] body:not(#ax) .writer-desk-featured__link,
  html[data-theme] body:not(#ax) .writer-desk-card--home-featured .writer-desk-card__link,
  html[data-theme] body:not(#ax) .writer-desk-detail__hero-inner {
    grid-template-columns: minmax(132px, 42%) minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ax-orbit__ring,
  .ax-orbit__node,
  .ax-orbit__node b,
  .ax-orbit__pulse {
    animation: none !important;
  }
}

/* Article lead image: cinematic crop instead of a full-height photo */
html[data-theme] body:not(#ax) .article-hero__lead {
  max-width: var(--ax-max);
  margin-inline: auto;
  overflow: hidden;
  border-radius: var(--ax-radius);
}

html[data-theme] body:not(#ax) .article-hero__lead-img {
  width: 100% !important;
  height: min(62vh, 620px) !important;
  object-fit: cover !important;
}

/* Inner pages: legacy bands painted solid white → let the paper ground through
 * (gradients/images are kept; only flat background-color is released). */
:root:not(:has(.dashboard-layout, .studio-site)) body:not(#ax) main:not(:has(.home-page)) section {
  background-color: transparent !important;
}

/* Remaining legacy white page wrappers → paper (found by a page-wide scan) */
html[data-theme] body:not(#ax):not(#ay) :is(
  .positioning-band, .modular-services-band, .beta-band,
  .marketing-services-hub-page, .marketing-service-page
) {
  background-color: transparent !important;
}

/* Reading page: a lighter sheet of paper for long-form text */
html[data-theme] body:not(#ax):not(#ay) .library-reading-page {
  background-color: #fbf8f2 !important;
}

/* ═════════════ 451 Kütüphane (list page) ═════════════ */
:root:not(:has(.dashboard-layout, .studio-site)) body {
  overflow-x: clip; /* allows full-bleed bands without a horizontal scrollbar */
}

html[data-theme] body:not(#ax):not(#ay) .library-page-hero.ax-libhero {
  position: relative;
  margin: 0 calc(50% - 50vw) !important;
  padding: calc(var(--page-main-padding-top) + 1.5rem) 0 clamp(3.5rem, 7vw, 5.5rem) !important;
  background:
    radial-gradient(55% 80% at 85% 20%, rgba(196, 106, 66, 0.2), transparent 70%),
    radial-gradient(50% 70% at 0% 100%, rgba(47, 122, 114, 0.3), transparent 70%),
    var(--ax-ink) !important;
  overflow: hidden;
}

/* the hero carries the header clearance itself, on every breakpoint */
html[data-theme] body:not(#ax):not(#ay) main:has(> .ax-libhero) {
  padding-top: 0 !important;
}

html[data-theme] body:not(#ax) .ax-libhero__inner {
  display: grid !important;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: end;
  max-width: var(--ax-max) !important;
  padding: 0 var(--ax-gutter) !important;
}

html[data-theme] body:not(#ax):not(#ay) .ax-libhero .library-page-hero__eyebrow {
  color: var(--ax-ember-hot) !important;
}

html[data-theme] body:not(#ax):not(#ay) .ax-libhero .library-page-hero__title {
  --font-site: var(--ax-display);
  --font-heading: var(--ax-display);
  font-family: var(--ax-display) !important;
  font-size: clamp(3rem, 7vw, 6.2rem) !important;
  font-weight: 320 !important;
  line-height: 0.95 !important;
  letter-spacing: -0.05em !important;
  color: var(--ax-cream) !important;
  -webkit-text-fill-color: currentColor !important;
  max-width: none !important;
}

html[data-theme] body:not(#ax):not(#ay) .ax-libhero .library-page-hero__lead {
  color: rgba(246, 239, 228, 0.66) !important;
  font-size: clamp(1rem, 1.3vw, 1.15rem) !important;
}

.ax-shelf--hero {
  height: 280px;
}

.ax-shelf--hero .ax-shelf__row {
  height: 250px;
}

.ax-shelf--hero .ax-shelf__board {
  background: linear-gradient(180deg, #3a2b20, #1a110b);
}

@media (max-width: 860px) {
  /* the hero carries the header clearance itself, on every breakpoint */
html[data-theme] body:not(#ax):not(#ay) main:has(> .ax-libhero) {
  padding-top: 0 !important;
}

html[data-theme] body:not(#ax) .ax-libhero__inner {
    grid-template-columns: 1fr;
  }

  .ax-shelf--hero {
    height: 180px;
  }

  .ax-shelf--hero .ax-shelf__row {
    height: 150px;
  }
}

html[data-theme] body:not(#ax):not(#ay) .resources-grid-section {
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(5rem, 9vw, 8rem) !important;
}

html[data-theme] body:not(#ax):not(#ay) .resources-grid-section > .container {
  max-width: var(--ax-max) !important;
  padding: 0 var(--ax-gutter) !important;
}

/* Magazine grid: the newest post leads across two columns */
@media (min-width: 900px) {
  html[data-theme] body:not(#ax):not(#ay) .resources-grid-section .library-posts-grid > .library-post-card:first-child {
    grid-column: span 2;
  }

  html[data-theme] body:not(#ax):not(#ay) .resources-grid-section .library-posts-grid > .library-post-card:first-child .library-post-card__title {
    font-size: clamp(1.6rem, 2.4vw, 2.2rem) !important;
    line-height: 1.1 !important;
  }
}

/* Category pills */
html[data-theme] body:not(#ax):not(#ay) .library-category-pill {
  border-radius: 999px !important;
  border: 1px solid rgba(22, 62, 58, 0.16) !important;
  background: transparent !important;
  color: var(--ax-ink-3) !important;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
}

html[data-theme] body:not(#ax):not(#ay) .library-category-pill:hover,
html[data-theme] body:not(#ax):not(#ay) .library-category-pill.is-active {
  background: var(--ax-ink-3) !important;
  border-color: var(--ax-ink-3) !important;
  color: var(--ax-cream) !important;
}

/* Legacy inline white text (written for the old dark theme) → ink */
html[data-theme] body:not(#ax):not(#ay) .resources-grid-section :is(.library-active-author span, .library-posts-grid > div p) {
  color: rgba(22, 62, 58, 0.6) !important;
}

html[data-theme] body:not(#ax):not(#ay) .resources-grid-section .library-active-author strong {
  color: var(--ax-ink-3) !important;
}

html[data-theme] body:not(#ax):not(#ay) .resources-grid-section .pagination :is(a, span) {
  min-width: 44px;
  text-align: center;
  border-radius: 999px !important;
  border: 1px solid rgba(22, 62, 58, 0.16) !important;
  background: transparent !important;
  color: var(--ax-ink-3) !important;
  transition: background 0.3s ease, color 0.3s ease;
}

html[data-theme] body:not(#ax):not(#ay) .resources-grid-section .pagination span,
html[data-theme] body:not(#ax):not(#ay) .resources-grid-section .pagination a:hover {
  background: var(--ax-ink-3) !important;
  border-color: var(--ax-ink-3) !important;
  color: var(--ax-cream) !important;
}

/* ═════════════ /free-diagnosis/ — ink aside + form ═════════════ */
html[data-theme] body:not(#ax):not(#ay) main:has(.ax-fd) {
  max-width: var(--ax-max) !important;
  width: 100% !important;
  margin-inline: auto !important;
  padding-left: var(--ax-gutter) !important;
  padding-right: var(--ax-gutter) !important;
  box-sizing: border-box;
}

html[data-theme] body:not(#ax):not(#ay) .ax-fd,
html[data-theme] body:not(#ax):not(#ay) .ax-fd__inner {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

html[data-theme] body:not(#ax):not(#ay) .ax-fd__inner {
  display: grid !important;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
  padding-bottom: clamp(4rem, 8vw, 7rem) !important;
}

.ax-fd__aside {
  position: sticky;
  top: 96px;
  display: grid;
  gap: 1.3rem;
  padding: clamp(1.8rem, 3.5vw, 2.8rem);
  border-radius: 28px;
  background:
    radial-gradient(70% 60% at 100% 0%, rgba(196, 106, 66, 0.24), transparent 65%),
    radial-gradient(60% 60% at 0% 100%, rgba(47, 122, 114, 0.32), transparent 70%),
    var(--ax-ink);
  box-shadow: 0 50px 90px -50px rgba(11, 32, 30, 0.95);
  color: var(--ax-cream);
}

html[data-theme] body:not(#ax):not(#ay) .ax-fd__aside .demo-diagnosis-page__header {
  margin: 0 !important;
  max-width: none !important;
  text-align: left !important;
}

html[data-theme] body:not(#ax):not(#ay) .ax-fd__aside .demo-diagnosis-page__eyebrow {
  justify-content: flex-start;
  color: var(--ax-ember-hot) !important;
}

html[data-theme] body:not(#ax):not(#ay) .ax-fd__aside h1 {
  --font-site: var(--ax-display);
  margin: 0.6rem 0 1rem !important;
  font-family: var(--ax-display) !important;
  font-size: clamp(2.3rem, 3.6vw, 3.4rem) !important;
  font-weight: 330 !important;
  line-height: 1 !important;
  letter-spacing: -0.045em !important;
  color: var(--ax-cream) !important;
  -webkit-text-fill-color: currentColor !important;
  text-align: left !important;
}

html[data-theme] body:not(#ax):not(#ay) .ax-fd__aside :is(.demo-diagnosis-page__subtitle, .demo-diagnosis-page__info) {
  margin: 0 !important;
  max-width: none !important;
  text-align: left !important;
  color: rgba(246, 239, 228, 0.68) !important;
  font-size: 1rem !important;
  line-height: 1.65 !important;
}

html[data-theme] body:not(#ax):not(#ay) .ax-fd__aside .demo-diagnosis-page__info {
  font-size: 0.8rem !important;
  letter-spacing: 0.02em;
  color: rgba(246, 239, 228, 0.5) !important;
}

html[data-theme] body:not(#ax):not(#ay) .ax-fd__aside .demo-diagnosis-sample-link {
  margin: 0 !important;
  text-align: left !important;
}

html[data-theme] body:not(#ax):not(#ay) .ax-fd__aside .demo-diagnosis-sample-link a {
  color: var(--ax-ember-soft) !important;
  border-bottom-color: rgba(240, 184, 147, 0.5) !important;
}

/* the hero's floating eval card, as an in-flow block */
.ax-eval.ax-eval--static {
  position: relative;
  inset: auto;
  width: auto;
  background: rgba(255, 255, 255, 0.05);
}

html[data-theme] body:not(#ax):not(#ay) .ax-fd__main .demo-diagnosis-form-wrap {
  max-width: none !important;
  margin: 0 !important;
}

html[data-theme] body:not(#ax):not(#ay) .ax-fd__main :is(.demo-diagnosis-card, .demo-diagnosis-form-wrap > *:first-child) {
  max-width: none !important;
  border-radius: 28px !important;
  background: #fffdf8 !important;
  border: 1px solid rgba(22, 62, 58, 0.09) !important;
  box-shadow: 0 1px 0 rgba(22, 62, 58, 0.04), 0 40px 80px -50px rgba(22, 62, 58, 0.55) !important;
}

@media (max-width: 960px) {
  html[data-theme] body:not(#ax):not(#ay) .ax-fd__inner {
    grid-template-columns: 1fr;
  }

  .ax-fd__aside {
    position: relative;
    top: auto;
  }
}

/* Wizard buttons follow the pill system; mobile keeps the form close to the top */
html[data-theme] body:not(#ax):not(#ay) .ax-fd :is(.demo-wizard-nav__next, .demo-wizard-nav__submit) {
  border: 0 !important;
  border-radius: 999px !important;
  padding: 0.95rem 1.8rem !important;
  background: var(--ax-ember-btn) !important;
  color: #fff !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em;
  box-shadow: 0 18px 38px -18px rgba(196, 106, 66, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}

html[data-theme] body:not(#ax):not(#ay) .ax-fd .demo-wizard-nav__back {
  border-radius: 999px !important;
}

@media (max-width: 960px) {
  .ax-fd__aside .ax-eval--static {
    display: none;
  }

  .ax-fd__aside {
    gap: 0.9rem;
  }
}

/* ═════════════ /free-diagnosis/ wizard: one card, WCAG-level text, every state ═════════════ */
html[data-theme] body:not(#ax):not(#ay) .ax-fd .demo-diagnosis-card {
  padding: clamp(1.4rem, 3vw, 2.4rem) !important;
}

html[data-theme] body:not(#ax):not(#ay) .ax-fd .demo-diagnosis-form {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* step tabs */
html[data-theme] body:not(#ax):not(#ay) .ax-fd .demo-diagnosis-howto__item {
  border-radius: 16px !important;
  border: 1px solid rgba(22, 62, 58, 0.14) !important;
  background: #fbf8f2 !important;
  opacity: 1 !important;
}

html[data-theme] body:not(#ax):not(#ay) .ax-fd .demo-diagnosis-howto__item :is(strong, .demo-diagnosis-howto__desc, span) {
  color: var(--ax-ink-3) !important;
}

html[data-theme] body:not(#ax):not(#ay) .ax-fd .demo-diagnosis-howto__item .demo-diagnosis-howto__desc {
  color: rgba(22, 62, 58, 0.78) !important;
}

html[data-theme] body:not(#ax):not(#ay) .ax-fd .demo-diagnosis-howto__item.is-active {
  background: var(--ax-ink-3) !important;
  border-color: var(--ax-ink-3) !important;
  box-shadow: 0 16px 30px -18px rgba(22, 62, 58, 0.9) !important;
}

html[data-theme] body:not(#ax):not(#ay) .ax-fd .demo-diagnosis-howto__item.is-active :is(strong, span) {
  color: #fff !important;
}

html[data-theme] body:not(#ax):not(#ay) .ax-fd .demo-diagnosis-howto__item.is-active .demo-diagnosis-howto__desc {
  color: rgba(246, 239, 228, 0.85) !important;
}

html[data-theme] body:not(#ax):not(#ay) .ax-fd .demo-diagnosis-howto__item.is-active .demo-diagnosis-howto__num {
  background: var(--ax-ember) !important;
  color: #fff !important;
}

html[data-theme] body:not(#ax):not(#ay) .ax-fd .demo-diagnosis-howto__item:disabled {
  cursor: default;
}

/* text */
html[data-theme] body:not(#ax):not(#ay) .ax-fd :is(label, .demo-file-upload__label, .demo-wizard-summary dt) {
  color: var(--ax-ink-3) !important;
  letter-spacing: 0.01em;
}

html[data-theme] body:not(#ax):not(#ay) .ax-fd .demo-wizard-summary dt {
  color: rgba(22, 62, 58, 0.78) !important;
}

html[data-theme] body:not(#ax):not(#ay) .ax-fd :is(.demo-wizard-panel__lead, .demo-file-upload__help, .demo-field-hint, .demo-diagnosis-security, .demo-diagnosis-trust__text, .atolye-consent-row span) {
  color: rgba(22, 62, 58, 0.8) !important;
}

html[data-theme] body:not(#ax):not(#ay) .ax-fd .atolye-consent-row :is(label, span) {
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  line-height: 1.5 !important;
}

html[data-theme] body:not(#ax):not(#ay) .ax-fd .atolye-consent-row a {
  color: var(--ax-ink-3) !important;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: rgba(196, 106, 66, 0.6);
  text-underline-offset: 3px;
}

/* errors: clearly red-ember, readable */
html[data-theme] body:not(#ax):not(#ay) .ax-fd .demo-field-error {
  margin-top: 0.4rem;
  color: #a1391c !important;
  font-weight: 650;
}

html[data-theme] body:not(#ax):not(#ay) .ax-fd .demo-diagnosis-feedback.is-error {
  border-radius: 14px !important;
  border: 1px solid rgba(161, 57, 28, 0.3) !important;
  background: rgba(196, 106, 66, 0.1) !important;
  color: #8a2f15 !important;
  font-weight: 650;
}

/* upload zone */
html[data-theme] body:not(#ax):not(#ay) .ax-fd .file-drop-zone {
  border-radius: 18px !important;
  border: 1.5px dashed rgba(47, 122, 114, 0.4) !important;
  background: #fbf8f2 !important;
}

html[data-theme] body:not(#ax):not(#ay) .ax-fd .file-drop-zone .drop-icon {
  color: var(--ax-water) !important;
}

html[data-theme] body:not(#ax):not(#ay) .ax-fd .file-drop-zone .drop-text {
  color: var(--ax-ink-3) !important;
  font-weight: 600;
}

html[data-theme] body:not(#ax):not(#ay) .ax-fd .file-drop-zone .file-name-preview:not([hidden]) {
  display: block !important;
  margin: 0 0 0.9rem;
  font-weight: 750;
  color: var(--ax-ink-3) !important;
}

html[data-theme] body:not(#ax):not(#ay) .ax-fd .file-drop-zone .file-name-preview:not([hidden])::before {
  content: "\f15c";
  font-family: "Font Awesome 6 Free";
  font-weight: 400;
  margin-right: 0.5rem;
  color: var(--ax-water);
}

html[data-theme] body:not(#ax):not(#ay) .ax-fd .demo-file-actions .ghost-button {
  padding: 0.55rem 1.1rem !important;
  font-size: 0.78rem !important;
}

/* summary */
html[data-theme] body:not(#ax):not(#ay) .ax-fd .demo-wizard-summary {
  border-radius: 18px !important;
  background: #fbf8f2 !important;
  border: 1px solid rgba(22, 62, 58, 0.1) !important;
}

html[data-theme] body:not(#ax):not(#ay) .ax-fd .demo-wizard-summary dd {
  color: var(--ax-ink-3) !important;
  font-weight: 600;
}

/* ═════════════ Library search: floats over the hero edge, catalog drawers ═════════════ */
html[data-theme] body:not(#ax):not(#ay) .library-search-panel.ax-search {
  position: relative;
  z-index: 2;
  margin: calc(-1 * clamp(5rem, 9vw, 7rem)) 0 clamp(2rem, 4vw, 3rem) !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-theme] body:not(#ax):not(#ay) .ax-search .library-search-panel__inner {
  display: grid !important;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  align-items: stretch;
  min-height: 0 !important;
  border-radius: 28px !important;
  overflow: hidden;
  background: #fffdf8 !important;
  border: 1px solid rgba(22, 62, 58, 0.08) !important;
  box-shadow: 0 1px 0 rgba(22, 62, 58, 0.04), 0 50px 90px -50px rgba(11, 32, 30, 0.6) !important;
}

/* content first, catalog on the right */
html[data-theme] body:not(#ax):not(#ay) .ax-search .library-search-panel__content {
  order: 0;
  display: grid;
  align-content: center;
  gap: 0.7rem;
  padding: clamp(1.8rem, 4vw, 3.2rem) !important;
  background: transparent !important;
}

html[data-theme] body:not(#ax):not(#ay) .ax-search .library-search-panel__eyebrow {
  color: var(--ax-ember-text) !important;
}

html[data-theme] body:not(#ax):not(#ay) .ax-search .library-search-panel__title {
  --font-site: var(--ax-display);
  margin: 0 !important;
  font-family: var(--ax-display) !important;
  font-size: clamp(2rem, 3.4vw, 3rem) !important;
  font-weight: 340 !important;
  line-height: 1 !important;
  letter-spacing: -0.04em !important;
  color: var(--ax-ink-3) !important;
}

html[data-theme] body:not(#ax):not(#ay) .ax-search .library-search-panel__lead {
  margin: 0 0 0.8rem !important;
  color: rgba(22, 62, 58, 0.8) !important;
  font-size: 1rem !important;
}

html[data-theme] body:not(#ax):not(#ay) .ax-search .library-search-bar,
html[data-theme] body:not(#ax):not(#ay) .ax-search .library-search-form {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
}

html[data-theme] body:not(#ax):not(#ay) .ax-search .library-search-bar__combo {
  display: flex !important;
  align-items: center;
  gap: 0.6rem;
  height: 64px;
  padding: 0 7px 0 1.3rem !important;
  border-radius: 999px !important;
  border: 1.5px solid rgba(22, 62, 58, 0.14) !important;
  background: #fbf8f2 !important;
  box-shadow: inset 0 2px 6px rgba(22, 62, 58, 0.04) !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease !important;
}

html[data-theme] body:not(#ax):not(#ay) .ax-search .library-search-bar__combo:focus-within {
  border-color: var(--ax-water) !important;
  background: #fff !important;
  box-shadow: 0 0 0 5px rgba(47, 122, 114, 0.12) !important;
}

html[data-theme] body:not(#ax):not(#ay) .ax-search .library-search-bar__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--ax-water) !important;
}

html[data-theme] body:not(#ax):not(#ay) .ax-search .library-search-bar__input {
  flex: 1;
  min-width: 0;
  height: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 1.05rem !important;
  color: var(--ax-ink-3) !important;
}

html[data-theme] body:not(#ax):not(#ay) .ax-search .library-search-bar__input::placeholder {
  font-family: var(--ax-display);
  font-style: italic;
  color: rgba(22, 62, 58, 0.55);
}

html[data-theme] body:not(#ax):not(#ay) .ax-search .library-search-bar__reset {
  color: rgba(22, 62, 58, 0.6) !important;
  font-size: 1.4rem;
}

html[data-theme] body:not(#ax):not(#ay) .ax-search .library-search-bar__go {
  height: 50px;
  padding: 0 1.6rem !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--ax-ember-btn) !important;
  color: #fff !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em;
  box-shadow: 0 14px 28px -14px rgba(196, 106, 66, 0.95) !important;
  cursor: pointer;
}

/* Catalog cabinet: drawers slide out in turn, index cards lift */
html[data-theme] body:not(#ax):not(#ay) .ax-search .ax-catalog {
  order: 1;
  position: relative;
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  align-content: center;
  padding: clamp(1.4rem, 3vw, 2.2rem);
  background:
    radial-gradient(70% 70% at 80% 0%, rgba(196, 106, 66, 0.22), transparent 65%),
    var(--ax-ink) !important;
}

.ax-catalog__drawer {
  position: relative;
  height: 64px;
  border-radius: 8px;
  background: linear-gradient(180deg, #8a5a3c, #6b4129);
  box-shadow: inset 0 0 0 3px #5a3420, inset 0 -6px 10px rgba(0, 0, 0, 0.25), 0 10px 18px -10px rgba(0, 0, 0, 0.8);
  animation: ax-drawer 9s var(--ax-ease) infinite;
  animation-delay: calc(var(--k) * 1.5s);
}

.ax-catalog__label {
  position: absolute;
  left: 50%;
  top: 9px;
  transform: translateX(-50%);
  padding: 2px 10px;
  border-radius: 3px;
  background: #f3e6cf;
  color: #3a2414 !important;
  font-family: var(--ax-display) !important;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: inset 0 0 0 1px rgba(90, 52, 32, 0.4);
}

.ax-catalog__pull {
  position: absolute;
  left: 50%;
  bottom: 12px;
  width: 30px;
  height: 9px;
  margin-left: -15px;
  border-radius: 0 0 10px 10px;
  border: 2px solid #d9b98b;
  border-top: 0;
}

.ax-catalog__cards {
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 100%;
  height: 0;
  pointer-events: none;
}

.ax-catalog__cards i {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -14px;
  height: 40px;
  border-radius: 3px 3px 0 0;
  background:
    linear-gradient(180deg, transparent 10px, rgba(196, 106, 66, 0.55) 10px 11px, transparent 11px 20px, rgba(22, 62, 58, 0.18) 20px 21px, transparent 21px 28px, rgba(22, 62, 58, 0.18) 28px 29px, transparent 29px),
    #fffdf8;
  opacity: 0;
  transform: translateY(14px);
  animation: ax-card 9s var(--ax-ease) infinite;
  animation-delay: calc(var(--k) * 1.5s);
}

.ax-catalog__cards i:nth-child(2) { left: 6%; right: -6%; animation-name: ax-card2; }
.ax-catalog__cards i:nth-child(3) { left: -6%; right: 6%; animation-name: ax-card3; }

@keyframes ax-drawer {
  0%, 14%, 100% { transform: none; z-index: 0; }
  3%, 11% { transform: translateY(6px) scale(1.04); z-index: 2; }
}

@keyframes ax-card {
  0%, 14%, 100% { opacity: 0; transform: translateY(14px); }
  4%, 10% { opacity: 1; transform: translateY(-16px) rotate(-2deg); }
}

@keyframes ax-card2 {
  0%, 14%, 100% { opacity: 0; transform: translateY(14px); }
  5%, 10% { opacity: 1; transform: translateY(-6px) rotate(3deg); }
}

@keyframes ax-card3 {
  0%, 14%, 100% { opacity: 0; transform: translateY(14px); }
  6%, 10% { opacity: 1; transform: translateY(-26px) rotate(-5deg); }
}

@media (max-width: 860px) {
  html[data-theme] body:not(#ax):not(#ay) .ax-search .library-search-panel__inner {
    grid-template-columns: 1fr;
  }

  html[data-theme] body:not(#ax):not(#ay) .ax-search .ax-catalog {
    grid-template-columns: repeat(3, 1fr);
    padding: 1.8rem 1.2rem 1.2rem;
  }

  .ax-catalog__drawer {
    height: 52px;
  }

  html[data-theme] body:not(#ax):not(#ay) .ax-search .library-search-bar__combo {
    height: 56px;
  }

  html[data-theme] body:not(#ax):not(#ay) .ax-search .library-search-bar__go {
    height: 44px;
    padding: 0 1.1rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ax-catalog__drawer,
  .ax-catalog__cards i {
    animation: none !important;
  }
}


/* Library card category line: readable teal */
html[data-theme] body:not(#ax):not(#ay) .library-post-card__category {
  color: #1e524c !important;
}

html[data-theme] body:not(#ax):not(#ay) .ax-search .library-search-panel__content {
  grid-template-columns: minmax(0, 1fr) !important;
  width: auto !important;
  max-width: none !important;
}

html[data-theme] body:not(#ax):not(#ay) .ax-search .ax-catalog {
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  height: auto !important;
  justify-self: stretch;
  align-self: stretch;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

/* legacy mobile rule reserved 200px under the old photo */
html[data-theme] body:not(#ax):not(#ay) .ax-search .library-search-panel__inner {
  padding: 0 !important;
}


/* ═════════════ WCAG AA pass — muted legacy text on paper, measured per selector ═════════════
 * Generated from a page-wide audit (normal text ≥ 4.5:1, large ≥ 3:1): each colour keeps its
 * original hue, only deepened until it clears the bar on its real background. */
html[data-theme] body:not(#ax) main a.article-hero__rubric-link { color: rgb(220, 20, 26) !important; }
html[data-theme] body:not(#ax) main a.ff-tehsis-page__back { color: rgb(100, 110, 106) !important; }
html[data-theme] body:not(#ax) main a.ff-tehsis__cta-link { color: rgb(100, 110, 106) !important; }
html[data-theme] body:not(#ax) main a.ik-series__back { color: rgb(100, 110, 106) !important; }
html[data-theme] body:not(#ax) main a.modular-item > span { color: rgb(105, 117, 114) !important; }
html[data-theme] body:not(#ax) main aside.calculator-summary-card > p { color: rgb(106, 117, 114) !important; }
html[data-theme] body:not(#ax) main aside.calculator-summary-card span { color: rgb(105, 117, 114) !important; }
html[data-theme] body:not(#ax) main div.auth-footer { color: rgb(105, 117, 114) !important; }
html[data-theme] body:not(#ax) main div.beta-premium-footnote > span { color: rgb(106, 117, 114) !important; }
html[data-theme] body:not(#ax) main div.beta-premium-why-card > h4 { color: rgb(143, 110, 4) !important; }
html[data-theme] body:not(#ax) main div.beta-premium-why-card > p { color: rgb(106, 118, 116) !important; }
html[data-theme] body:not(#ax) main div.calculator-left > p { color: rgb(96, 106, 101) !important; }
html[data-theme] body:not(#ax) main div.calculator-left label { color: rgb(96, 106, 101) !important; }
html[data-theme] body:not(#ax) main div.hiw-scene > p { color: rgb(101, 113, 109) !important; }
html[data-theme] body:not(#ax) main div.ik-featured__meta > span { color: rgb(100, 110, 106) !important; }
html[data-theme] body:not(#ax) main div.ik-home-band__meta > span { color: rgb(106, 117, 114) !important; }
html[data-theme] body:not(#ax) main div.legal-document-body > p { color: rgb(96, 106, 101) !important; }
html[data-theme] body:not(#ax) main div.legal-document-body a { color: rgb(44, 115, 108) !important; }
html[data-theme] body:not(#ax) main div.legal-document-content p { color: rgb(100, 110, 106) !important; }
html[data-theme] body:not(#ax) main div.modular-info-bar > p { color: rgb(106, 117, 114) !important; }
html[data-theme] body:not(#ax) main div.ms-faq-answer > p { color: rgb(106, 117, 114) !important; }
html[data-theme] body:not(#ax) main div.ms-highlight-box > p { color: rgb(93, 105, 101) !important; }
html[data-theme] body:not(#ax) main div.ms-highlight-box strong { color: rgb(93, 105, 101) !important; }
html[data-theme] body:not(#ax) main div.ms-intro-body > p { color: rgb(100, 110, 106) !important; }
html[data-theme] body:not(#ax) main div.ms-intro-body em { color: rgb(100, 110, 106) !important; }
html[data-theme] body:not(#ax) main div.ms-package-body > p { color: rgb(106, 117, 114) !important; }
html[data-theme] body:not(#ax) main div.ms-section-body > p { color: rgb(100, 110, 106) !important; }
html[data-theme] body:not(#ax) main div.ms-section-body em { color: rgb(100, 110, 106) !important; }
html[data-theme] body:not(#ax) main div.ms-section-body li { color: rgb(100, 110, 106) !important; }
html[data-theme] body:not(#ax) main div.ms-section-body strong { color: rgb(100, 110, 106) !important; }
html[data-theme] body:not(#ax) main div.radio-card-content > div { color: rgb(105, 117, 116) !important; }
html[data-theme] body:not(#ax) main div.why-card > p { color: rgb(105, 117, 114) !important; }
html[data-theme] body:not(#ax) main dl.ik-call__facts dt { color: rgb(106, 117, 114) !important; }
html[data-theme] body:not(#ax) main li.beta-premium-feature span { color: rgb(106, 117, 114) !important; }
html[data-theme] body:not(#ax) main li.ms-phase-card > p { color: rgb(106, 117, 114) !important; }
html[data-theme] body:not(#ax) main p.beta-premium-description { color: rgb(100, 110, 106) !important; }
html[data-theme] body:not(#ax) main p.editorial-hub__lead { color: rgb(100, 110, 106) !important; }
html[data-theme] body:not(#ax) main p.eyebrow { color: rgb(44, 115, 108) !important; }
html[data-theme] body:not(#ax) main p.field > label { color: rgb(105, 117, 114) !important; }
html[data-theme] body:not(#ax) main p.ms-hero-lead { color: rgb(100, 110, 106) !important; }
html[data-theme] body:not(#ax) main p.ms-packages-note { color: rgb(100, 110, 106) !important; }
html[data-theme] body:not(#ax) main p.positioning-text { color: rgb(100, 110, 106) !important; }
html[data-theme] body:not(#ax) main p.pr-lansman-band__excerpt { color: rgb(100, 110, 106) !important; }
html[data-theme] body:not(#ax) main p.pr-lansman-band__lead { color: rgb(100, 110, 106) !important; }
html[data-theme] body:not(#ax) main p.submit-wizard-panel__lead { color: rgb(109, 113, 115) !important; }
html[data-theme] body:not(#ax) main p.subtitle { color: rgb(105, 117, 114) !important; }
html[data-theme] body:not(#ax) main section.library-related-posts > p { color: rgb(101, 113, 109) !important; }
html[data-theme] body:not(#ax) main section.ms-cta > p { color: rgb(100, 110, 106) !important; }
html[data-theme] body:not(#ax) main span.beta-premium-chip { color: rgb(45, 117, 110) !important; }
html[data-theme] body:not(#ax) main span.editorial-hub__excerpt { color: rgb(105, 117, 114) !important; }
html[data-theme] body:not(#ax) main span.ik-status { color: rgb(100, 110, 106) !important; }
html[data-theme] body:not(#ax) main ul.ms-bullet-list > li { color: rgb(100, 110, 106) !important; }

/* WCAG AA pass — remaining targeted fixes */
html[data-theme] body:not(#ax):not(#ay) .ax-btn-ember,
html[data-theme] body:not(#ax):not(#ay) .ax-btn-ember span {
  color: #fff !important;
}

html[data-theme] body:not(#ax) main .ms-sticky-nav a:not(.btn-451-primary):not([class*="cta"]) {
  color: rgb(70, 82, 79) !important;
}

html[data-theme] body:not(#ax) main .ms-sticky-nav a:not(.btn-451-primary):not([class*="cta"]):hover {
  color: var(--ax-ink-3) !important;
}

html[data-theme] body:not(#ax):not(#ay) main :is(.legal-document-body, .legal-document-content) :is(p, li) {
  color: rgb(62, 72, 68) !important;
}

html[data-theme] body:not(#ax) main .custom-radio-card .radio-card-content > div {
  color: rgb(72, 82, 80) !important;
}

html[data-theme] body:not(#ax) main #beta-testi .beta-premium-chip {
  color: #1e524c !important;
}

/* ═════════════ Form feedback, site-wide: legacy dark-theme pinks were invisible on paper ═════════════ */
:root:not(:has(.dashboard-layout, .studio-site)) body:not(#ax):not(#ay) main :is(
  [class*="feedback"].is-error, .contact-form__alert, .join-form__error, .errorlist, ul.errors,
  .non_field_errors, .form-error, .field-error, .alert-error, .required-modal-error
) {
  color: #8a2f15 !important;
  border-radius: 14px;
  border-color: rgba(161, 57, 28, 0.32) !important;
  background-color: rgba(196, 106, 66, 0.1) !important;
  font-weight: 650;
}

:root:not(:has(.dashboard-layout, .studio-site)) body:not(#ax):not(#ay) main :is(
  [class*="feedback"].is-error, .contact-form__alert, .join-form__error, .errorlist, ul.errors, .non_field_errors
) * {
  color: inherit !important;
}

:root:not(:has(.dashboard-layout, .studio-site)) body:not(#ax):not(#ay) main :is([class*="feedback"].is-success, .is-success[aria-live]) {
  color: #1e524c !important;
  background-color: rgba(47, 122, 114, 0.1) !important;
  border-color: rgba(47, 122, 114, 0.3) !important;
}

/* anything the page scrolls to lands below the fixed header */
:root:not(:has(.dashboard-layout, .studio-site)) :is(main [id], main [aria-live], main [class*="feedback"], main [class*="error"]) {
  scroll-margin-top: 110px;
}

/* Every scrollIntoView / anchor jump clears the fixed header (forms scroll to their errors) */
:root:not(:has(.dashboard-layout, .studio-site)) {
  scroll-padding-top: 116px;
}

/* field-level errors are red, not body-black */
:root:not(:has(.dashboard-layout, .studio-site)) body:not(#ax):not(#ay) main :is([class*="__error"], .captcha-field__error, .errorlist li) {
  color: #a1391c !important;
  font-weight: 650;
}

/* ═════════════ Application layout (.ax-apply): ink aside + form card ═════════════ */
html[data-theme] body:not(#ax):not(#ay) main:has(> .ax-apply) {
  max-width: var(--ax-max) !important;
  padding-left: var(--ax-gutter) !important;
  padding-right: var(--ax-gutter) !important;
}

.ax-apply {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
  padding-bottom: clamp(4rem, 8vw, 7rem);
}

.ax-apply__aside {
  position: sticky;
  top: 96px;
  display: grid;
  gap: 1.1rem;
  padding: clamp(1.8rem, 3.5vw, 2.8rem);
  border-radius: 28px;
  background:
    radial-gradient(70% 60% at 100% 0%, rgba(196, 106, 66, 0.24), transparent 65%),
    radial-gradient(60% 60% at 0% 100%, rgba(47, 122, 114, 0.32), transparent 70%),
    var(--ax-ink);
  box-shadow: 0 50px 90px -50px rgba(11, 32, 30, 0.95);
}

html[data-theme] body:not(#ax):not(#ay) .ax-apply__back {
  justify-self: start;
  color: rgba(246, 239, 228, 0.78) !important;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
}

html[data-theme] body:not(#ax):not(#ay) .ax-apply__back:hover {
  color: #fff !important;
}

html[data-theme] body:not(#ax):not(#ay) .ax-apply__eyebrow {
  margin: 0.4rem 0 0 !important;
  font-size: 0.7rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.22em !important;
  color: var(--ax-ember-hot) !important;
}

html[data-theme] body:not(#ax):not(#ay) .ax-apply__title {
  --font-site: var(--ax-display);
  margin: 0 !important;
  font-family: var(--ax-display) !important;
  font-size: clamp(2.2rem, 3.6vw, 3.3rem) !important;
  font-weight: 330 !important;
  line-height: 1.02 !important;
  letter-spacing: -0.045em !important;
  color: var(--ax-cream) !important;
  -webkit-text-fill-color: currentColor !important;
}

html[data-theme] body:not(#ax):not(#ay) .ax-apply__lead {
  margin: 0 !important;
  color: rgba(246, 239, 228, 0.78) !important;
  line-height: 1.65 !important;
}

.ax-apply__warn {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.9rem;
  margin-top: 0.6rem;
  padding: 1.2rem;
  border-radius: 18px;
  background: rgba(232, 148, 106, 0.1);
  border: 1px solid rgba(232, 148, 106, 0.35);
}

.ax-apply__warn-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(232, 148, 106, 0.2);
  color: var(--ax-ember-soft);
}

html[data-theme] body:not(#ax):not(#ay) .ax-apply__warn h4 {
  margin: 0 0 0.45rem !important;
  font-family: var(--ax-sans) !important;
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  color: #fff !important;
}

html[data-theme] body:not(#ax):not(#ay) .ax-apply__warn p {
  margin: 0 0 0.45rem !important;
  font-size: 0.86rem !important;
  line-height: 1.6 !important;
  color: rgba(246, 239, 228, 0.86) !important;
}

html[data-theme] body:not(#ax):not(#ay) .ax-apply__warn p strong {
  color: #fff !important;
}

html[data-theme] body:not(#ax):not(#ay) .ax-apply__warn .ax-apply__warn-strong {
  margin: 0 !important;
  color: var(--ax-ember-soft) !important;
  font-weight: 700;
}

.ax-apply__main {
  padding: clamp(1.4rem, 3vw, 2.4rem);
  border-radius: 28px;
  background: #fffdf8;
  border: 1px solid rgba(22, 62, 58, 0.09);
  box-shadow: 0 1px 0 rgba(22, 62, 58, 0.04), 0 40px 80px -50px rgba(22, 62, 58, 0.55);
}

.ax-apply__form {
  display: grid;
  gap: 1.8rem;
}

.ax-apply__set {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

html[data-theme] body:not(#ax):not(#ay) .ax-apply__set legend {
  --font-site: var(--ax-display);
  padding: 0;
  margin-bottom: 0.4rem;
  font-family: var(--ax-display) !important;
  font-size: clamp(1.4rem, 2vw, 1.8rem) !important;
  font-weight: 380 !important;
  letter-spacing: -0.03em;
  color: var(--ax-ink-3) !important;
}

html[data-theme] body:not(#ax):not(#ay) .ax-apply__hint {
  margin: 0 0 1.1rem !important;
  color: rgb(72, 84, 81) !important;
  font-size: 0.9rem;
}

html[data-theme] body:not(#ax):not(#ay) .ax-apply__group {
  margin: 1.2rem 0 0.7rem !important;
  font-size: 0.7rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.18em !important;
  color: var(--ax-ember-text) !important;
}

.ax-apply__opts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
}

.ax-opt {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.8rem;
  align-items: start;
  padding: 1rem 1.1rem;
  border-radius: 16px;
  border: 1.5px solid rgba(22, 62, 58, 0.12);
  background: #fbf8f2;
  cursor: pointer;
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.ax-opt:hover {
  border-color: rgba(47, 122, 114, 0.45);
}

.ax-opt input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.ax-opt__box {
  position: relative;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 7px;
  border: 1.5px solid rgba(22, 62, 58, 0.35);
  background: #fff;
  transition: background 0.25s ease, border-color 0.25s ease;
}

.ax-opt__box::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 3px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform 0.3s var(--ax-ease);
}

.ax-opt:has(input:checked) {
  border-color: var(--ax-water);
  background: rgba(47, 122, 114, 0.08);
  box-shadow: 0 12px 26px -20px rgba(22, 62, 58, 0.8);
}

.ax-opt:has(input:checked) .ax-opt__box {
  background: var(--ax-water);
  border-color: var(--ax-water);
}

.ax-opt:has(input:checked) .ax-opt__box::after {
  transform: rotate(45deg) scale(1);
}

.ax-opt:has(input:focus-visible) {
  box-shadow: 0 0 0 4px rgba(47, 122, 114, 0.2);
}

html[data-theme] body:not(#ax):not(#ay) .ax-opt__title {
  display: block;
  margin-bottom: 0.2rem;
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--ax-ink-3) !important;
}

html[data-theme] body:not(#ax):not(#ay) .ax-opt__desc {
  display: block;
  font-size: 0.84rem;
  line-height: 1.5;
  color: rgb(72, 84, 81) !important;
}

.ax-apply__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.1rem;
}

.ax-apply__fields legend {
  grid-column: 1 / -1;
}

.ax-field {
  display: grid;
  gap: 0.4rem;
}

.ax-field--full {
  grid-column: 1 / -1;
}

html[data-theme] body:not(#ax):not(#ay) .ax-field > span {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--ax-ink-3) !important;
}

html[data-theme] body:not(#ax):not(#ay) .ax-field :is(input, textarea) {
  padding: 0.9rem 1rem !important;
  font-size: 0.98rem;
}

html[data-theme] body:not(#ax):not(#ay) .ax-apply__note {
  margin: 0 !important;
  padding: 1rem 1.1rem;
  border-radius: 14px;
  background: #fbf8f2;
  border: 1px dashed rgba(22, 62, 58, 0.18);
  font-size: 0.88rem;
  line-height: 1.6;
  color: rgb(62, 74, 71) !important;
}

.ax-apply__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.8rem;
}

@media (max-width: 960px) {
  .ax-apply {
    grid-template-columns: 1fr;
  }

  .ax-apply__aside {
    position: relative;
    top: auto;
  }
}

@media (max-width: 640px) {
  .ax-apply__opts,
  .ax-apply__fields {
    grid-template-columns: 1fr;
  }
}

/* Join role forms + password reset: muted legacy text → AA */
html[data-theme] body:not(#ax):not(#ay) main :is(.join-page__back, .join-form__help, .bf-help, .join-form__consent-note) {
  color: rgb(72, 84, 81) !important;
}

html[data-theme] body:not(#ax):not(#ay) main .join-page p:not([class]) {
  color: rgb(62, 74, 71) !important;
}

html[data-theme] body:not(#ax):not(#ay) main.auth-container label {
  color: var(--ax-ink-3) !important;
}

/* Catalog v2: everything stays inside its own box — drawers pull forward, one index
 * card in its own slot above the cabinet gets written line by line. */
html[data-theme] body:not(#ax):not(#ay) .ax-search .ax-catalog {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-content: center;
  overflow: hidden;
}

.ax-catalog__card {
  grid-column: 1 / -1;
  position: relative;
  display: grid;
  gap: 7px;
  align-content: center;
  height: 78px;
  margin-bottom: 6px;
  padding: 0 18px 0 64px;
  border-radius: 6px;
  background:
    linear-gradient(180deg, transparent 22px, rgba(196, 106, 66, 0.55) 22px 23px, transparent 23px),
    #fbf5ea;
  box-shadow: 0 14px 26px -14px rgba(0, 0, 0, 0.75);
  transform: rotate(-1.5deg);
  animation: ax-card-float 6s ease-in-out infinite alternate;
}

.ax-catalog__card b {
  position: absolute;
  left: 16px;
  top: 50%;
  margin-top: -16px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--ax-ember);
  color: var(--ax-ember-text);
  font-family: var(--ax-display);
  font-size: 0.7rem;
  font-weight: 700;
  transform: rotate(-12deg);
}

.ax-catalog__card i {
  height: 3px;
  border-radius: 99px;
  background: rgba(22, 62, 58, 0.35);
  transform-origin: left;
  animation: ax-card-line 6s var(--ax-ease-io) infinite;
}

.ax-catalog__card i:nth-of-type(1) { width: 78%; animation-delay: 0s; }
.ax-catalog__card i:nth-of-type(2) { width: 92%; animation-delay: 0.45s; }
.ax-catalog__card i:nth-of-type(3) { width: 56%; animation-delay: 0.9s; background: rgba(196, 106, 66, 0.6); }

@keyframes ax-card-line {
  0% { transform: scaleX(0); }
  16%, 78% { transform: scaleX(1); }
  92%, 100% { transform: scaleX(0); }
}

@keyframes ax-card-float {
  from { transform: rotate(-1.5deg) translateY(0); }
  to { transform: rotate(-0.5deg) translateY(-3px); }
}

/* drawers: pull forward in place, label lights up — no overflow */
.ax-catalog__drawer {
  animation: ax-drawer2 9s var(--ax-ease) infinite !important;
  animation-delay: calc(var(--k) * 1.5s) !important;
}

@keyframes ax-drawer2 {
  0%, 15%, 100% { transform: none; filter: none; box-shadow: inset 0 0 0 3px #5a3420, inset 0 -6px 10px rgba(0, 0, 0, 0.25), 0 10px 18px -10px rgba(0, 0, 0, 0.8); }
  4%, 11% { transform: scale(1.05); filter: brightness(1.12); box-shadow: inset 0 0 0 3px #5a3420, inset 0 -6px 10px rgba(0, 0, 0, 0.2), 0 18px 26px -10px rgba(0, 0, 0, 0.95); }
}

.ax-catalog__label {
  animation: ax-label 9s ease infinite;
  animation-delay: calc(var(--k) * 1.5s);
}

@keyframes ax-label {
  0%, 15%, 100% { background: #f3e6cf; }
  4%, 11% { background: #ffe4c4; box-shadow: 0 0 12px rgba(255, 196, 140, 0.8), inset 0 0 0 1px rgba(90, 52, 32, 0.4); }
}

@media (prefers-reduced-motion: reduce) {
  .ax-catalog__card,
  .ax-catalog__card i,
  .ax-catalog__label {
    animation: none !important;
  }
}

/* ═════════════ Inner page mastheads → ink panels (join, writer desk, İlk Kıvılcım, sample report, contact) ═════════════ */
html[data-theme] body:not(#ax):not(#ay) main :is(.join-page__masthead, .writer-desk-page__header, .ik-series__header, .ik-call__hero, .ff-tehsis-page__header, .contact-page__head, .laboratory-books-band__header) {
  position: relative;
  max-width: none !important;
  margin: 0 0 clamp(1.8rem, 4vw, 3rem) !important;
  padding: clamp(2rem, 5vw, 3.6rem) clamp(1.6rem, 4vw, 3.4rem) !important;
  border: 0 !important;
  border-radius: 28px !important;
  text-align: left !important;
  background:
    radial-gradient(60% 80% at 100% 0%, rgba(196, 106, 66, 0.22), transparent 65%),
    radial-gradient(60% 70% at 0% 100%, rgba(47, 122, 114, 0.3), transparent 70%),
    var(--ax-ink) !important;
  box-shadow: 0 50px 90px -50px rgba(11, 32, 30, 0.95) !important;
  overflow: hidden;
}

html[data-theme] body:not(#ax):not(#ay) main :is(.join-page__masthead, .writer-desk-page__header, .ik-series__header, .ik-call__hero, .ff-tehsis-page__header, .contact-page__head, .laboratory-books-band__header) h1 {
  --font-site: var(--ax-display);
  margin: 0.4rem 0 0.9rem !important;
  max-width: 22ch;
  font-family: var(--ax-display) !important;
  font-size: clamp(2.4rem, 5vw, 4.4rem) !important;
  font-weight: 330 !important;
  line-height: 1 !important;
  letter-spacing: -0.045em !important;
  color: var(--ax-cream) !important;
  -webkit-text-fill-color: currentColor !important;
  text-align: left !important;
}

html[data-theme] body:not(#ax):not(#ay) main :is(.join-page__masthead, .writer-desk-page__header, .ik-series__header, .ik-call__hero, .ff-tehsis-page__header, .contact-page__head, .laboratory-books-band__header) :is(p, li, dd, dt, small, span:not([class*="status"]):not([class*="badge"])) {
  max-width: 62ch;
  margin-left: 0 !important;
  text-align: left !important;
  color: rgba(246, 239, 228, 0.82) !important;
}

html[data-theme] body:not(#ax):not(#ay) main :is(.join-page__masthead, .writer-desk-page__header, .ik-series__header, .ik-call__hero, .ff-tehsis-page__header, .contact-page__head, .laboratory-books-band__header) :is([class$="__eyebrow"], .eyebrow) {
  color: var(--ax-ember-hot) !important;
  letter-spacing: 0.2em !important;
}

html[data-theme] body:not(#ax):not(#ay) main :is(.join-page__masthead, .writer-desk-page__header, .ik-series__header, .ik-call__hero, .ff-tehsis-page__header, .contact-page__head, .laboratory-books-band__header) a:not([class*="btn"]):not(.cta):not(.ghost-button) {
  color: var(--ax-ember-soft) !important;
}

html[data-theme] body:not(#ax):not(#ay) main :is(.join-page__masthead, .writer-desk-page__header, .ik-series__header, .ik-call__hero, .ff-tehsis-page__header, .contact-page__head, .laboratory-books-band__header) :is([class*="status"], [class*="badge"], [class*="chip"]) {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(246, 239, 228, 0.25) !important;
  color: var(--ax-cream) !important;
}

/* "back" links that sit just above a masthead */
html[data-theme] body:not(#ax):not(#ay) main :is(.ik-series__back, .ff-tehsis-page__back, .join-page__back) {
  display: inline-flex;
  margin-bottom: 1rem;
  font-weight: 700;
}

/* ═════════════ Article (library reading page) ═════════════ */
html[data-theme] body:not(#ax):not(#ay) .library-reading-page {
  background-color: var(--ax-paper) !important;
}

html[data-theme] body:not(#ax):not(#ay) .resource-detail-hero {
  padding: 0 !important;
  background: transparent !important;
}

html[data-theme] body:not(#ax):not(#ay) .resource-detail-hero > .container {
  max-width: var(--ax-max) !important;
  padding: 0 var(--ax-gutter) !important;
}

html[data-theme] body:not(#ax):not(#ay) .article-hero {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
}

/* ink band, full-bleed, text aligned to the column */
html[data-theme] body:not(#ax):not(#ay) .article-hero__lockup {
  position: relative;
  margin: 0 calc(50% - 50vw) !important;
  padding: calc(76px + 4rem) calc(50vw - 50% + 0px) clamp(3.5rem, 7vw, 5.5rem) !important;
  max-width: none !important;
  text-align: left !important;
  background:
    radial-gradient(55% 80% at 85% 10%, rgba(196, 106, 66, 0.2), transparent 70%),
    radial-gradient(50% 70% at 0% 100%, rgba(47, 122, 114, 0.3), transparent 70%),
    var(--ax-ink) !important;
}

html[data-theme] body:not(#ax):not(#ay) .article-hero--has-lead .article-hero__lockup {
  padding-bottom: clamp(9rem, 16vw, 13rem) !important;
}

html[data-theme] body:not(#ax):not(#ay) .article-hero__lockup > * {
  max-width: 860px;
}

html[data-theme] body:not(#ax):not(#ay) .article-hero__rubric {
  margin: 0 0 1.1rem !important;
}

html[data-theme] body:not(#ax):not(#ay) .article-hero__rubric-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--ax-sans) !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase;
  text-decoration: none !important;
  color: var(--ax-ember-hot) !important;
}

html[data-theme] body:not(#ax):not(#ay) .article-hero__rubric-link::before {
  content: "";
  width: 24px;
  height: 1.5px;
  background: currentColor;
}

html[data-theme] body:not(#ax):not(#ay) .article-hero__title {
  --font-site: var(--ax-display);
  --font-heading: var(--ax-display);
  margin: 0 0 1.2rem !important;
  font-family: var(--ax-display) !important;
  font-size: clamp(2.6rem, 6vw, 5.4rem) !important;
  font-weight: 320 !important;
  line-height: 0.98 !important;
  letter-spacing: -0.045em !important;
  color: var(--ax-cream) !important;
  -webkit-text-fill-color: currentColor !important;
  text-align: left !important;
}

html[data-theme] body:not(#ax):not(#ay) .article-hero__dek {
  --font-site: var(--ax-display);
  margin: 0 0 1.8rem !important;
  font-family: var(--ax-display) !important;
  font-size: clamp(1.15rem, 1.8vw, 1.45rem) !important;
  font-style: italic;
  font-weight: 340 !important;
  line-height: 1.45 !important;
  color: rgba(246, 239, 228, 0.82) !important;
  text-align: left !important;
}

html[data-theme] body:not(#ax):not(#ay) .article-hero__byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin: 0 !important;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(246, 239, 228, 0.14);
  text-align: left !important;
}

.ax-byline__avatar {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--ax-ember-soft), var(--ax-ember));
  color: #fff;
  font-size: 0.62rem;
  font-weight: 900;
}

html[data-theme] body:not(#ax):not(#ay) :is(.article-hero__byline-link, .article-hero__byline-name) {
  font-family: var(--ax-sans) !important;
  font-size: 0.8rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  color: var(--ax-cream) !important;
  text-decoration: none !important;
}

html[data-theme] body:not(#ax):not(#ay) .ax-byline__time {
  font-family: var(--ax-sans) !important;
  font-size: 0.8rem !important;
  color: rgba(246, 239, 228, 0.75) !important;
}

html[data-theme] body:not(#ax):not(#ay) .ax-byline__time::before {
  content: "·";
  margin-right: 0.75rem;
  opacity: 0.6;
}

/* lead image overlaps the band */
html[data-theme] body:not(#ax):not(#ay) .article-hero__lead {
  position: relative;
  z-index: 1;
  max-width: 1100px !important;
  margin: calc(-1 * clamp(7rem, 13vw, 11rem)) auto 0 !important;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 50px 90px -40px rgba(11, 32, 30, 0.75);
}

html[data-theme] body:not(#ax):not(#ay) .article-hero__lead-img {
  display: block;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 8;
  object-fit: cover !important;
}

html[data-theme] body:not(#ax):not(#ay) .article-hero__credit {
  position: absolute;
  right: 14px;
  bottom: 12px;
  padding: 0.3rem 0.65rem;
  border-radius: 99px;
  background: rgba(11, 32, 30, 0.7);
  color: rgba(246, 239, 228, 0.88) !important;
  font-size: 0.7rem;
}

/* reading column */
html[data-theme] body:not(#ax):not(#ay) .resource-detail-content {
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(4rem, 8vw, 7rem) !important;
}

html[data-theme] body:not(#ax):not(#ay) .resource-detail-content > .container {
  max-width: var(--ax-max) !important;
  padding: 0 var(--ax-gutter) !important;
}

html[data-theme] body:not(#ax):not(#ay) .library-reading-page .resource-body {
  max-width: 70ch !important;
  margin-inline: auto !important;
  color: #1f2a28 !important;
}

html[data-theme] body:not(#ax):not(#ay) .library-reading-page .resource-body p {
  color: #1f2a28 !important;
}

html[data-theme] body:not(#ax):not(#ay) .library-article-shell > p:first-of-type::first-letter {
  float: left;
  margin: 0.08em 0.12em 0 0;
  font-family: var(--ax-display);
  font-size: 4.6em;
  font-weight: 400;
  line-height: 0.82;
  color: var(--ax-ember);
}

html[data-theme] body:not(#ax):not(#ay) .library-reading-page .resource-body :is(h2, h3, h4) {
  --font-site: var(--ax-display);
  font-family: var(--ax-display) !important;
  font-weight: 400 !important;
  letter-spacing: -0.03em;
  color: var(--ax-ink-3) !important;
}

html[data-theme] body:not(#ax):not(#ay) .library-reading-page .resource-body blockquote {
  margin: 2.2rem 0 !important;
  padding: 0.4rem 0 0.4rem 1.5rem !important;
  border-left: 3px solid var(--ax-ember) !important;
  background: none !important;
  font-family: var(--ax-display);
  font-size: 1.35em;
  font-style: italic;
  line-height: 1.45;
  color: var(--ax-ink-3) !important;
}

html[data-theme] body:not(#ax):not(#ay) .library-reading-page .resource-body a {
  color: var(--ax-ink-3) !important;
  text-decoration: underline;
  text-decoration-color: rgba(196, 106, 66, 0.6);
  text-underline-offset: 3px;
}

/* font size rail: a glass pill */
html[data-theme] body:not(#ax):not(#ay) .library-font-controls {
  border-radius: 999px !important;
  border: 1px solid rgba(22, 62, 58, 0.12) !important;
  background: rgba(255, 253, 248, 0.92) !important;
  box-shadow: 0 16px 34px -20px rgba(22, 62, 58, 0.6) !important;
}

html[data-theme] body:not(#ax):not(#ay) .library-font-control {
  color: var(--ax-ink-3) !important;
  border-radius: 999px !important;
}

/* closing: CTA as ink card, footer as pills */
html[data-theme] body:not(#ax):not(#ay) .library-article-cta {
  max-width: 860px;
  margin: clamp(3rem, 6vw, 4.5rem) auto !important;
  padding: clamp(1.8rem, 4vw, 2.8rem) !important;
  border: 0 !important;
  border-radius: 26px !important;
  background:
    radial-gradient(60% 80% at 100% 0%, rgba(196, 106, 66, 0.22), transparent 65%),
    var(--ax-ink) !important;
  text-align: center;
}

html[data-theme] body:not(#ax):not(#ay) .library-article-cta__title {
  --font-site: var(--ax-display);
  font-family: var(--ax-display) !important;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem) !important;
  font-weight: 380 !important;
  color: var(--ax-cream) !important;
}

html[data-theme] body:not(#ax):not(#ay) .library-article-cta__text {
  color: rgba(246, 239, 228, 0.8) !important;
}

html[data-theme] body:not(#ax):not(#ay) .library-article-cta__btn {
  background: var(--ax-ember-btn) !important;
}

html[data-theme] body:not(#ax):not(#ay) .resource-detail-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  max-width: 860px;
  margin: 0 auto !important;
  padding-top: 1.5rem !important;
  border-top: 1px solid rgba(22, 62, 58, 0.12) !important;
}

html[data-theme] body:not(#ax):not(#ay) :is(.resource-detail-footer__back, .resource-detail-footer__print) {
  display: inline-flex !important;
  align-items: center;
  gap: 0.5rem;
  width: auto !important;
  padding: 0.75rem 1.3rem !important;
  border-radius: 999px !important;
  border: 1px solid rgba(22, 62, 58, 0.2) !important;
  background: transparent !important;
  color: var(--ax-ink-3) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

html[data-theme] body:not(#ax):not(#ay) :is(.resource-detail-footer__back, .resource-detail-footer__print):hover {
  background: var(--ax-ink-3) !important;
  color: #fff !important;
}

html[data-theme] body:not(#ax):not(#ay) .library-related-posts {
  max-width: var(--ax-max);
  margin-inline: auto;
}

/* —— remaining audit fixes —— */
html[data-theme] body:not(#ax):not(#ay) main :is(.library-band, .resources-grid-section) p[style*="255,255,255"] {
  color: rgb(72, 84, 81) !important;
}

html[data-theme] body:not(#ax):not(#ay) main :is(.legal-document-body, .legal-document-content, .container) strong {
  color: var(--ax-ink-3) !important;
}

/* mobile floating font pill: opaque so it never mixes with the text behind it */
html[data-theme] body:not(#ax):not(#ay) :is(.library-font-rail, .library-font-controls) {
  background: #fffdf8 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* ═════════════ Painted colour = declared colour ═════════════
 * Legacy rules pin -webkit-text-fill-color (dark) on many elements; it silently wins over
 * `color`, so text styled light on ink panels painted dark and became unreadable.
 * On public pages the fill now always follows `color` (only real gradient text is exempt). */
:root:not(:has(.dashboard-layout, .studio-site)) body:not(#ax):not(#ay) *:not(.editor-info h1) {
  -webkit-text-fill-color: currentColor !important;
}

/* De-emphasis by tone, not opacity (opacity pushed text below AA) */
.fx-story.is-live .fx-story__step,
.fx-story.is-live .fx-story__step.is-done {
  opacity: 1;
}

html[data-theme] body:not(#ax):not(#ay) .fx-story.is-live .fx-story__step:not(.is-active) :is(h3, p, .fx-story__num) {
  color: rgb(84, 98, 95) !important;
}

html[data-theme] body:not(#ax):not(#ay) .ax-fd__aside .demo-diagnosis-page__info {
  color: rgba(246, 239, 228, 0.8) !important;
}

html[data-theme] body:not(#ax):not(#ay) main :is(.demo-field-hint, .custom-radio-card, .custom-radio-card *) {
  opacity: 1 !important;
}

html[data-theme] body:not(#ax):not(#ay) main .demo-field-hint {
  color: rgb(72, 84, 81) !important;
}

html[data-theme] body:not(#ax):not(#ay) main .custom-radio-card:not(.is-selected) .radio-card-content > div {
  color: rgb(72, 84, 81) !important;
}

/* ═════════════ Service pages: chapter rail ═════════════ */

/* in normal flow (not sticky): a chapter list at the top of the page */
html[data-theme] body:not(#ax):not(#ay) .ms-sticky-nav {
  position: relative !important;
  top: auto !important;
  z-index: 1 !important;
  margin: 0 0 1.5rem !important;
  padding: 0 var(--ax-gutter) !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  pointer-events: none;
}

html[data-theme] body:not(#ax):not(#ay) .ms-sticky-nav-inner {
  position: relative;
  pointer-events: auto;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center;
  gap: 0.35rem !important;
  max-width: var(--ax-max) !important;
  margin: 0 auto !important;
  padding: 6px !important;
  border-radius: 999px;
  background: rgba(255, 253, 248, 0.9);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(22, 62, 58, 0.1);
  box-shadow: 0 18px 40px -26px rgba(22, 62, 58, 0.6);
  overflow: hidden;
}

/* no-JS fallback: the whole row scrolls */
html[data-theme] body:not(#ax):not(#ay) .ms-sticky-nav:not(.ax-rail) .ms-sticky-nav-inner {
  overflow-x: auto;
  scrollbar-width: none;
}

.ax-rail__track {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 0.25rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent);
}

.ax-rail__track::-webkit-scrollbar {
  display: none;
}

.ax-rail.is-start .ax-rail__track {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
}

.ax-rail.is-end .ax-rail__track {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px);
  mask-image: linear-gradient(90deg, transparent, #000 28px);
}

.ax-rail.is-start.is-end .ax-rail__track {
  -webkit-mask-image: none;
  mask-image: none;
}

html[data-theme] body:not(#ax):not(#ay) .ms-sticky-nav :is(.ax-rail__track a, .ms-sticky-nav-inner > a:not(.ms-sticky-nav__cta)) {
  flex-shrink: 0;
  padding: 0.6rem 0.95rem !important;
  border-radius: 999px;
  white-space: nowrap;
  font-size: 0.82rem !important;
  font-weight: 650 !important;
  letter-spacing: -0.005em;
  text-decoration: none !important;
  color: rgb(62, 74, 71) !important;
  transition: background 0.3s ease, color 0.3s ease !important;
}

html[data-theme] body:not(#ax):not(#ay) .ms-sticky-nav .ax-rail__track a:hover {
  background: rgba(22, 62, 58, 0.07);
  color: var(--ax-ink-3) !important;
}

html[data-theme] body:not(#ax):not(#ay) .ms-sticky-nav .ax-rail__track a.is-active {
  background: var(--ax-ink-3);
  color: #fff !important;
  box-shadow: 0 8px 18px -10px rgba(22, 62, 58, 0.9);
}

.ax-rail__arrow {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ax-ink-3);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.25s ease, opacity 0.25s ease;
}

.ax-rail__arrow:hover {
  background: rgba(22, 62, 58, 0.08);
}

.ax-rail.is-start .ax-rail__arrow--prev,
.ax-rail.is-end .ax-rail__arrow--next {
  opacity: 0;
  pointer-events: none;
}

html[data-theme] body:not(#ax):not(#ay) .ms-sticky-nav .ms-sticky-nav__cta {
  flex-shrink: 0;
  margin: 0 !important;
  padding: 0.65rem 1.2rem !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--ax-ember-btn) !important;
  color: #fff !important;
  font-size: 0.8rem !important;
  font-weight: 800 !important;
  white-space: nowrap;
  box-shadow: 0 10px 22px -12px rgba(196, 106, 66, 0.95) !important;
}

.ax-rail__progress {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 0;
  height: 2px;
  border-radius: 99px;
  overflow: hidden;
  pointer-events: none;
}

.ax-rail__progress i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--ax-water), var(--ax-ember-hot));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s linear;
}

@media (max-width: 900px) {
  html[data-theme] body:not(#ax):not(#ay) .ms-sticky-nav {
    padding: 0 12px !important;
  }

  .ax-rail__arrow {
    display: none;
  }

  html[data-theme] body:not(#ax):not(#ay) .ms-sticky-nav .ms-sticky-nav__cta {
    padding: 0.6rem 0.9rem !important;
    font-size: 0.72rem !important;
  }
}

/* rail arrows: quiet glyph buttons (beat the global button skin) */
html[data-theme] body:not(#ax):not(#ay) .ms-sticky-nav button.ax-rail__arrow {
  width: 34px !important;
  height: 34px !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--ax-ink-3) !important;
  font-size: 1.3rem !important;
}

html[data-theme] body:not(#ax):not(#ay) .ms-sticky-nav button.ax-rail__arrow:hover {
  background: rgba(22, 62, 58, 0.08) !important;
}

@media (max-width: 900px) {
  html[data-theme] body:not(#ax):not(#ay) .ms-sticky-nav button.ax-rail__arrow {
    display: none !important;
  }
}

/* phones: the rail is for chapters; the page carries its own apply buttons */
@media (max-width: 600px) {
  html[data-theme] body:not(#ax):not(#ay) .ms-sticky-nav .ms-sticky-nav__cta {
    display: none !important;
  }
}

/* ═════════════ Home hero art on phones: shown below the copy, scaled ═════════════ */
@media (max-width: 900px) {
  html[data-theme] body:not(#ax) .home-page .ax-hero .ax-art {
    display: block !important;
    justify-self: center;
    width: min(64vw, 270px);
    margin: 2.2rem auto 1.6rem;
  }

  .ax-hero .ax-eval,
  .ax-hero .ax-revs {
    display: none !important;
  }

  .ax-hero .ax-chip {
    display: inline-flex !important;
    padding: 0.35rem 0.6rem 0.35rem 0.4rem;
    font-size: 0.6rem;
    gap: 0.35rem;
  }

  .ax-hero .ax-chip i {
    width: 12px;
    height: 12px;
    box-shadow: 0 0 0 3px rgba(47, 122, 114, 0.15);
  }

  .ax-hero .ax-chip--a { top: 4%; right: -16%; }
  .ax-hero .ax-chip--b { top: 36%; left: -20%; }
  .ax-hero .ax-chip--c { top: 70%; right: -14%; }
}

/* ═════════════ /451atolye-nedir/ ═════════════ */
/* hero: ink band, copy + production line */
html[data-theme] body:not(#ax):not(#ay) .home-page .positioning-band.ax-about-hero {
  position: relative;
  margin-top: 0 !important;
  padding: calc(76px + 4.5rem) 0 clamp(4rem, 8vw, 6.5rem) !important;
  background:
    radial-gradient(55% 80% at 85% 20%, rgba(196, 106, 66, 0.2), transparent 70%),
    radial-gradient(50% 70% at 0% 100%, rgba(47, 122, 114, 0.3), transparent 70%),
    var(--ax-ink) !important;
  border: 0 !important;
}

html[data-theme] body:not(#ax):not(#ay) .ax-about-hero__grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  text-align: left !important;
}

html[data-theme] body:not(#ax):not(#ay) .ax-about-hero .eyebrow {
  color: var(--ax-ember-hot) !important;
}

html[data-theme] body:not(#ax):not(#ay) .ax-about-hero h1 {
  --font-site: var(--ax-display);
  margin: 0.4rem 0 1.4rem !important;
  font-family: var(--ax-display) !important;
  font-size: clamp(2.6rem, 5.4vw, 5rem) !important;
  font-weight: 320 !important;
  line-height: 0.98 !important;
  letter-spacing: -0.045em !important;
  color: var(--ax-cream) !important;
  text-align: left !important;
}

html[data-theme] body:not(#ax):not(#ay) .ax-about-hero .positioning-text {
  max-width: 58ch !important;
  margin: 0 0 1rem !important;
  text-align: left !important;
  color: rgba(246, 239, 228, 0.8) !important;
  font-size: clamp(0.98rem, 1.2vw, 1.08rem) !important;
  line-height: 1.7 !important;
}

html[data-theme] body:not(#ax):not(#ay) .ax-about-hero .positioning-text.geo-entity-lead {
  color: var(--ax-cream) !important;
  font-size: clamp(1.05rem, 1.4vw, 1.2rem) !important;
}

/* production line: a page travels Yazar → Editör → Okur */
.ax-line {
  position: relative;
  height: 260px;
  padding: 0 4%;
}

.ax-line__rail {
  position: absolute;
  left: 12%;
  right: 12%;
  top: 112px;
  height: 2px;
  border-radius: 99px;
  background: repeating-linear-gradient(90deg, rgba(246, 239, 228, 0.25) 0 8px, transparent 8px 16px);
  overflow: hidden;
}

.ax-line__glow {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--ax-water), var(--ax-ember-hot));
  transform-origin: left;
  animation: ax-rail 9s var(--ax-ease-io) infinite;
}

@keyframes ax-rail {
  0%, 8% { transform: scaleX(0); }
  30%, 46% { transform: scaleX(0.5); }
  68%, 88% { transform: scaleX(1); }
  96%, 100% { transform: scaleX(1); opacity: 0; }
}

.ax-line__stations {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: space-between;
  padding: 0 4%;
}

html[data-theme] body:not(#ax):not(#ay) .ax-line__st {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 0.7rem;
  width: 31%;
  padding-top: 148px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(246, 239, 228, 0.8) !important;
}

.ax-line__st b {
  position: absolute;
  top: 82px;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--ax-cream);
  font-size: 1.15rem;
  transition: background 0.4s ease;
}

.ax-line__st--a b { left: calc(4% + 15.5% - 30px); animation: ax-st-a 9s ease infinite; }
.ax-line__st--b b { left: calc(50% - 30px); animation: ax-st-b 9s ease infinite; }
.ax-line__st--c b { right: calc(4% + 15.5% - 30px); animation: ax-st-c 9s ease infinite; }

@keyframes ax-st-a {
  0%, 18% { background: var(--ax-water); box-shadow: 0 0 0 8px rgba(47, 122, 114, 0.2), 0 16px 34px -14px rgba(47, 122, 114, 0.9); }
  26%, 100% { background: rgba(255, 255, 255, 0.06); box-shadow: none; }
}

@keyframes ax-st-b {
  0%, 26%, 50%, 100% { background: rgba(255, 255, 255, 0.06); box-shadow: none; }
  32%, 46% { background: var(--ax-ember); box-shadow: 0 0 0 8px rgba(196, 106, 66, 0.2), 0 16px 34px -14px rgba(196, 106, 66, 0.9); }
}

@keyframes ax-st-c {
  0%, 64%, 92%, 100% { background: rgba(255, 255, 255, 0.06); box-shadow: none; }
  70%, 88% { background: var(--ax-water); box-shadow: 0 0 0 8px rgba(47, 122, 114, 0.2), 0 16px 34px -14px rgba(47, 122, 114, 0.9); }
}

.ax-line__page {
  position: absolute;
  top: 0;
  left: calc(4% + 15.5% - 24px);
  display: grid;
  gap: 6px;
  align-content: center;
  width: 48px;
  height: 64px;
  padding: 0 9px;
  border-radius: 3px 7px 7px 3px;
  background: #fbf5ea;
  box-shadow: 0 16px 28px -14px rgba(0, 0, 0, 0.8);
  animation: ax-travel 9s var(--ax-ease-io) infinite;
}

.ax-line__page i {
  height: 3px;
  border-radius: 99px;
  background: rgba(22, 62, 58, 0.35);
}

.ax-line__page i:nth-child(2) { width: 80%; }
.ax-line__page i:nth-child(3) { animation: ax-fixline 9s ease infinite; }
.ax-line__page i:nth-child(4) { width: 60%; }

@keyframes ax-travel {
  0% { transform: translateX(0) translateY(10px); opacity: 0; }
  6%, 20% { transform: translateX(0) translateY(0); opacity: 1; }
  32%, 46% { transform: translateX(var(--ax-line-mid, 190px)) translateY(-8px) rotate(-3deg); opacity: 1; }
  70%, 86% { transform: translateX(var(--ax-line-end, 380px)) translateY(0) rotate(2deg); opacity: 1; }
  96%, 100% { transform: translateX(var(--ax-line-end, 380px)) translateY(-14px); opacity: 0; }
}

@keyframes ax-fixline {
  0%, 36% { background: var(--ax-ember); }
  44%, 100% { background: var(--ax-water); }
}

/* why cards */
html[data-theme] body:not(#ax):not(#ay) .home-page .why-us-band {
  padding-block: clamp(4.5rem, 8vw, 7rem) !important;
  background: #fbf8f2 !important;
}

html[data-theme] body:not(#ax):not(#ay) .home-page .why-grid {
  counter-reset: ax-why;
  gap: clamp(1rem, 2vw, 1.4rem) !important;
}

html[data-theme] body:not(#ax):not(#ay) .home-page .why-card {
  position: relative;
  counter-increment: ax-why;
  padding: clamp(1.6rem, 2.6vw, 2.2rem) !important;
  border-radius: var(--ax-radius) !important;
  background: #fffdf8 !important;
  border: 1px solid rgba(22, 62, 58, 0.09) !important;
  box-shadow: 0 1px 0 rgba(22, 62, 58, 0.04), 0 26px 50px -38px rgba(22, 62, 58, 0.5) !important;
  text-align: left !important;
  transition: border-color 0.35s ease, box-shadow 0.45s var(--ax-ease) !important;
}

html[data-theme] body:not(#ax):not(#ay) .home-page .why-card::after {
  content: "0" counter(ax-why);
  position: absolute;
  right: 1.2rem;
  top: 0.9rem;
  font-family: var(--ax-display);
  font-size: 2.4rem;
  font-style: italic;
  font-weight: 300;
  color: rgba(22, 62, 58, 0.12);
}

html[data-theme] body:not(#ax):not(#ay) .home-page .why-card:hover {
  border-color: rgba(196, 106, 66, 0.35) !important;
}

html[data-theme] body:not(#ax):not(#ay) .home-page .why-card :is(.why-icon, [class*="icon"]) {
  display: grid !important;
  place-items: center;
  width: 54px !important;
  height: 54px !important;
  margin: 0 0 1.2rem !important;
  border-radius: 16px !important;
  background: var(--ax-ink-3) !important;
  color: var(--ax-cream) !important;
  box-shadow: 0 14px 30px -16px rgba(22, 62, 58, 0.8);
}

html[data-theme] body:not(#ax):not(#ay) .home-page .why-card :is(.why-icon, [class*="icon"]) :is(svg, i) {
  color: var(--ax-cream) !important;
  stroke: currentColor !important;
}

html[data-theme] body:not(#ax):not(#ay) .home-page .why-card h3 {
  --font-site: var(--ax-display);
  margin: 0 0 0.6rem !important;
  font-family: var(--ax-display) !important;
  font-size: 1.45rem !important;
  font-weight: 420 !important;
  letter-spacing: -0.025em;
  color: var(--ax-ink-3) !important;
  text-align: left !important;
}

html[data-theme] body:not(#ax):not(#ay) .home-page .why-card p {
  text-align: left !important;
  font-size: 0.94rem !important;
  line-height: 1.65 !important;
}

/* modular services: selectable chips in category cards */
html[data-theme] body:not(#ax):not(#ay) .home-page .modular-services-band {
  padding-block: clamp(4.5rem, 8vw, 7rem) !important;
  background: var(--ax-paper) !important;
}

html[data-theme] body:not(#ax):not(#ay) .home-page .modular-box {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-theme] body:not(#ax):not(#ay) .home-page .modular-category {
  margin: 0 !important;
  padding: 1.5rem !important;
  border-radius: var(--ax-radius);
  background: #fffdf8;
  border: 1px solid rgba(22, 62, 58, 0.09);
  box-shadow: 0 1px 0 rgba(22, 62, 58, 0.04), 0 22px 44px -36px rgba(22, 62, 58, 0.45);
}

html[data-theme] body:not(#ax):not(#ay) .home-page .modular-grid {
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)) !important;
  gap: 0.55rem !important;
}

html[data-theme] body:not(#ax):not(#ay) .home-page .modular-item {
  position: relative;
  display: flex !important;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 0.95rem !important;
  border-radius: 999px !important;
  border: 1.5px solid rgba(22, 62, 58, 0.12) !important;
  background: #fbf8f2 !important;
  box-shadow: none !important;
  font-weight: 650;
  transition: border-color 0.25s ease, background 0.25s ease !important;
}

html[data-theme] body:not(#ax):not(#ay) .home-page .modular-item:hover {
  border-color: rgba(47, 122, 114, 0.5) !important;
}

html[data-theme] body:not(#ax):not(#ay) .home-page .modular-item.is-selected {
  border-color: var(--ax-ember) !important;
  background: rgba(196, 106, 66, 0.1) !important;
}

html[data-theme] body:not(#ax):not(#ay) .home-page .modular-item.is-selected :is(span, i, svg) {
  color: var(--ax-ember-text) !important;
}

html[data-theme] body:not(#ax):not(#ay) .home-page .modular-info-bar {
  margin-top: 1.4rem !important;
  padding: 1rem 1.3rem !important;
  border-radius: 999px !important;
  border: 1px dashed rgba(22, 62, 58, 0.22) !important;
  background: #fffdf8 !important;
  text-align: center;
}

/* beta test: chart on an ink panel, curve draws itself */
html[data-theme] body:not(#ax):not(#ay) .home-page .beta-band {
  padding-block: clamp(4.5rem, 8vw, 7rem) !important;
  background: #fbf8f2 !important;
}

html[data-theme] body:not(#ax):not(#ay) #beta-testi .beta-premium-chart-card {
  border-radius: 24px !important;
  border: 0 !important;
  background:
    radial-gradient(70% 80% at 100% 0%, rgba(196, 106, 66, 0.2), transparent 65%),
    var(--ax-ink) !important;
  box-shadow: 0 40px 80px -45px rgba(11, 32, 30, 0.9) !important;
}

html[data-theme] body:not(#ax):not(#ay) #beta-testi .beta-premium-chip {
  background: rgba(127, 193, 182, 0.14) !important;
  border-color: rgba(127, 193, 182, 0.35) !important;
  color: #a9dcd3 !important;
}

html[data-theme] body:not(#ax):not(#ay) #beta-testi .beta-premium-footnote span {
  color: rgba(246, 239, 228, 0.72) !important;
}

#beta-testi .ax-curve__grid {
  stroke: rgba(246, 239, 228, 0.08);
  stroke-width: 1;
  fill: none;
}

#beta-testi .ax-curve__line {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  filter: drop-shadow(0 0 8px rgba(232, 148, 106, 0.55));
  animation: ax-curve 6s var(--ax-ease-io) infinite;
}

@keyframes ax-curve {
  0% { stroke-dashoffset: 100; }
  55%, 85% { stroke-dashoffset: 0; opacity: 1; }
  95%, 100% { stroke-dashoffset: 0; opacity: 0; }
}

#beta-testi .ax-curve__dot {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: ax-dot 6s ease infinite;
}

#beta-testi .ax-curve__dot--drop { fill: #e8946a; animation-delay: 0.1s; }
#beta-testi .ax-curve__dot--peak { fill: #f0b893; animation-delay: 0.9s; }

@keyframes ax-dot {
  0%, 20% { opacity: 0; transform: scale(0.3); }
  28% { opacity: 1; transform: scale(1.6); }
  34%, 85% { opacity: 1; transform: scale(1); }
  95%, 100% { opacity: 0; }
}

html[data-theme] body:not(#ax):not(#ay) #beta-testi .beta-premium-why-card {
  border-radius: 20px !important;
  background: #fffdf8 !important;
  border: 1px solid rgba(22, 62, 58, 0.09) !important;
}

html[data-theme] body:not(#ax):not(#ay) #beta-testi .beta-premium-why-card h4 {
  color: var(--ax-ember-text) !important;
}

html[data-theme] body:not(#ax):not(#ay) #beta-testi .beta-premium-feature {
  border-radius: 16px !important;
  background: #fffdf8 !important;
  border: 1px solid rgba(22, 62, 58, 0.09) !important;
}

@media (max-width: 900px) {
  html[data-theme] body:not(#ax):not(#ay) .ax-about-hero__grid {
    grid-template-columns: 1fr;
  }

  html[data-theme] body:not(#ax):not(#ay) .home-page .modular-box {
    grid-template-columns: 1fr;
  }

  .ax-line {
    height: 230px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ax-line__glow,
  .ax-line__page,
  .ax-line__page i,
  .ax-line__st b,
  #beta-testi .ax-curve__line,
  #beta-testi .ax-curve__dot {
    animation: none !important;
  }

  #beta-testi .ax-curve__line { stroke-dashoffset: 0; }
  #beta-testi .ax-curve__dot { opacity: 1; }
}

/* Story on phones: steps are stacked in one slot — only the active one may show */
@media (max-width: 900px) {
  html[data-theme] body:not(#ax):not(#ay) .fx-story.is-live .fx-story__step:not(.is-active) {
    opacity: 0 !important;
    visibility: hidden !important;
  }

  html[data-theme] body:not(#ax):not(#ay) .fx-story.is-live .fx-story__step.is-active {
    opacity: 1 !important;
    visibility: visible !important;
  }
}


/* rail is no longer docked, so a reading-progress line has nothing to report */
.ax-rail__progress {
  display: none !important;
}

/* ═════════════ Lab vitrine with several books (featured + rail) ═════════════
 * The single-book sizing squeezed the copy column to ~140px next to the rail,
 * so long titles ran out of their column. */
html[data-theme] body:not(#ax):not(#ay) .home-page .lab-vitrine__stage:has(.lab-vitrine__thumb) {
  display: grid !important;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr) !important;
  gap: clamp(1.2rem, 2.5vw, 2rem) !important;
  align-items: start;
}

html[data-theme] body:not(#ax):not(#ay) .home-page .lab-vitrine__stage > *,
html[data-theme] body:not(#ax):not(#ay) .home-page .lab-vitrine__featured > *,
html[data-theme] body:not(#ax):not(#ay) .home-page .lab-vitrine__featured-copy {
  min-width: 0;
}

html[data-theme] body:not(#ax):not(#ay) .home-page .lab-vitrine__stage:has(.lab-vitrine__thumb) .lab-vitrine__featured {
  grid-template-columns: minmax(140px, 0.8fr) minmax(0, 1.2fr) !important;
  gap: clamp(1.4rem, 3vw, 2.4rem) !important;
  padding: clamp(1.4rem, 2.6vw, 2.2rem) !important;
}

html[data-theme] body:not(#ax):not(#ay) .home-page .lab-vitrine__featured-title {
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}

html[data-theme] body:not(#ax):not(#ay) .home-page .lab-vitrine__stage:has(.lab-vitrine__thumb) .lab-vitrine__featured-title {
  font-size: clamp(1.7rem, 2.4vw, 2.5rem) !important;
  line-height: 1.04 !important;
}

html[data-theme] body:not(#ax):not(#ay) .home-page .lab-vitrine__featured-spot {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* rail: glass book cards, two per row beside the feature */
html[data-theme] body:not(#ax):not(#ay) .home-page .lab-vitrine__thumbs {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.8rem !important;
}

html[data-theme] body:not(#ax):not(#ay) .home-page .lab-vitrine__thumb {
  display: flex !important;
  flex-direction: column;
  min-width: 0;
  padding: 0 !important;
  overflow: hidden;
  border-radius: 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.3s ease, background 0.3s ease, transform 0.45s var(--ax-ease) !important;
}

html[data-theme] body:not(#ax):not(#ay) .home-page .lab-vitrine__thumb:hover,
html[data-theme] body:not(#ax):not(#ay) .home-page .lab-vitrine__thumb.is-active {
  border-color: rgba(232, 148, 106, 0.5) !important;
  background: rgba(255, 255, 255, 0.07) !important;
  transform: translateY(-3px);
}

html[data-theme] body:not(#ax):not(#ay) .home-page .lab-vitrine__thumb-cover {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

html[data-theme] body:not(#ax):not(#ay) .home-page .lab-vitrine__thumb-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ax-ease);
}

html[data-theme] body:not(#ax):not(#ay) .home-page .lab-vitrine__thumb:hover .lab-vitrine__thumb-cover img {
  transform: scale(1.05);
}

html[data-theme] body:not(#ax):not(#ay) .home-page .lab-vitrine__thumb-body {
  display: grid;
  gap: 0.3rem;
  padding: 0.85rem 0.95rem 1rem !important;
  min-width: 0;
}

html[data-theme] body:not(#ax):not(#ay) .home-page .lab-vitrine__thumb-title {
  --font-site: var(--ax-display);
  font-family: var(--ax-display) !important;
  font-size: 1.02rem !important;
  line-height: 1.2;
  color: var(--ax-cream) !important;
  overflow-wrap: break-word;
}

html[data-theme] body:not(#ax):not(#ay) .home-page .lab-vitrine__thumb-meta {
  font-size: 0.78rem !important;
  line-height: 1.4;
  color: rgba(246, 239, 228, 0.75) !important;
  overflow-wrap: break-word;
}

/* ≤1280: feature on top, the other books in one row below */
@media (max-width: 1280px) {
  html[data-theme] body:not(#ax):not(#ay) .home-page .lab-vitrine__stage:has(.lab-vitrine__thumb) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html[data-theme] body:not(#ax):not(#ay) .home-page .lab-vitrine__thumbs {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  html[data-theme] body:not(#ax):not(#ay) .home-page .lab-vitrine__stage:has(.lab-vitrine__thumb) .lab-vitrine__featured {
    grid-template-columns: minmax(150px, 240px) minmax(0, 1fr) !important;
  }

  html[data-theme] body:not(#ax):not(#ay) .home-page .lab-vitrine__stage:has(.lab-vitrine__thumb) .lab-vitrine__featured-title {
    font-size: clamp(1.9rem, 4vw, 2.8rem) !important;
  }
}

@media (max-width: 700px) {
  html[data-theme] body:not(#ax):not(#ay) .home-page .lab-vitrine__thumbs {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html[data-theme] body:not(#ax):not(#ay) .home-page .lab-vitrine__featured,
  html[data-theme] body:not(#ax):not(#ay) .home-page .lab-vitrine__stage:has(.lab-vitrine__thumb) .lab-vitrine__featured {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html[data-theme] body:not(#ax):not(#ay) .home-page .lab-vitrine__featured-cover {
    width: min(60vw, 220px);
    justify-self: center;
  }
}