/* ══════════════════════════════════════════════════════════════════════
   LYDIAN LANDING · POLISH v14
   Loaded last. Everything here is a legibility or hierarchy fix backed by a
   measurement, not a taste call.

   Measured before (Chrome, 1440×900, dark, rendered pixels — not declared
   colours, because the hero background is a full-bleed animated canvas):

     rail card value  2.72:1   FAIL
     rail card foot   2.19:1   FAIL
     rail foot right  2.18:1   FAIL
     tile kicker      2.37:1   FAIL
     rail kicker      3.25:1   AA-large only
     rail label       3.56:1   AA-large only

   Cause: #ai-synapse paints a full-viewport, high-chroma particle field at
   full strength directly behind every hero surface, and the hero panels are
   near-transparent. Three fixes, in order of leverage:
     1. the canvas becomes a depth layer instead of the subject
     2. a scrim sits between the canvas and the hero content
     3. the hero panels get a real surface and lifted text
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. The particle field is atmosphere, not content ─────────────────── */
#ai-synapse {
  opacity: 0.26;
  filter: saturate(0.62) contrast(0.92);
  /* Fade it out where the reading surfaces are: the two rail columns and the
     top/bottom edges. The centre, where the constellation lives, keeps most
     of the texture. */
  -webkit-mask-image: radial-gradient(
    ellipse 58% 62% at 50% 52%,
    #000 0%,
    #000 42%,
    rgba(0, 0, 0, 0.35) 76%,
    rgba(0, 0, 0, 0.12) 100%
  );
  mask-image: radial-gradient(
    ellipse 58% 62% at 50% 52%,
    #000 0%,
    #000 42%,
    rgba(0, 0, 0, 0.35) 76%,
    rgba(0, 0, 0, 0.12) 100%
  );
}
[data-theme='light'] #ai-synapse {
  opacity: 0.2;
  filter: saturate(0.55) contrast(0.9);
}

/* ── 2. Scrim between canvas (z-index 2) and hero content ─────────────────
   .hero is z-index 3 and forms a stacking context, so a z-index:-1 child of
   .hero paints above the canvas and below every hero surface. */
.hero::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      rgba(18, 18, 17, 0.9) 0%,
      rgba(18, 18, 17, 0.42) 18%,
      rgba(18, 18, 17, 0) 34%,
      rgba(18, 18, 17, 0) 66%,
      rgba(18, 18, 17, 0.42) 82%,
      rgba(18, 18, 17, 0.9) 100%
    ),
    linear-gradient(
      180deg,
      rgba(18, 18, 17, 0.72) 0%,
      rgba(18, 18, 17, 0) 22%,
      rgba(18, 18, 17, 0) 74%,
      rgba(18, 18, 17, 0.78) 100%
    ),
    radial-gradient(
      ellipse 72% 70% at 50% 50%,
      rgba(18, 18, 17, 0) 0%,
      rgba(18, 18, 17, 0.28) 62%,
      rgba(18, 18, 17, 0.62) 100%
    );
}
[data-theme='light'] .hero::before {
  background:
    linear-gradient(
      90deg,
      rgba(250, 249, 247, 0.94) 0%,
      rgba(250, 249, 247, 0.55) 18%,
      rgba(250, 249, 247, 0) 34%,
      rgba(250, 249, 247, 0) 66%,
      rgba(250, 249, 247, 0.55) 82%,
      rgba(250, 249, 247, 0.94) 100%
    ),
    linear-gradient(
      180deg,
      rgba(250, 249, 247, 0.8) 0%,
      rgba(250, 249, 247, 0) 22%,
      rgba(250, 249, 247, 0) 74%,
      rgba(250, 249, 247, 0.85) 100%
    ),
    radial-gradient(
      ellipse 72% 70% at 50% 50%,
      rgba(250, 249, 247, 0) 0%,
      rgba(250, 249, 247, 0.3) 62%,
      rgba(250, 249, 247, 0.66) 100%
    );
}

/* ── 3. Telemetry rails get a real surface ───────────────────────────── */
.hero-rail-card {
  background: linear-gradient(180deg, rgba(30, 30, 28, 0.9) 0%, rgba(22, 22, 21, 0.92) 100%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-left: 2px solid rgba(233, 116, 81, 0.75);
  backdrop-filter: blur(16px) saturate(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 10px 28px rgba(0, 0, 0, 0.42);
}
[data-theme='light'] .hero-rail-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(252, 250, 248, 0.95) 100%);
  border-color: rgba(31, 31, 30, 0.12);
  border-left-color: rgba(201, 90, 55, 0.8);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 10px 26px rgba(143, 61, 33, 0.1);
}

.hero-rail-kicker {
  color: rgba(255, 255, 255, 0.82);
}
.rail-card-label {
  color: rgba(255, 255, 255, 0.76);
}
.rail-card-value {
  color: #ffffff;
}
.rail-card-value-sm {
  color: rgba(255, 255, 255, 0.94);
}
.rail-card-foot {
  color: rgba(255, 255, 255, 0.68);
}
.hero-rail-badge {
  background: rgba(24, 24, 23, 0.86);
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
[data-theme='light'] .hero-rail-kicker {
  color: rgba(31, 31, 30, 0.8);
}
[data-theme='light'] .rail-card-label {
  color: rgba(31, 31, 30, 0.72);
}
[data-theme='light'] .rail-card-value {
  color: #17110d;
}
[data-theme='light'] .rail-card-foot {
  color: rgba(31, 31, 30, 0.66);
}
[data-theme='light'] .hero-rail-badge {
  background: rgba(255, 255, 255, 0.92);
  color: rgba(31, 31, 30, 0.72);
}

/* ── 4. Constellation tile kicker was the weakest text on the page ───── */
.cst {
  --cst-kicker: rgba(255, 255, 255, 0.74);
}
/* Light theme measured at 3.63:1 — below AA for text this small (~8px), and
   "large text" relief does not apply at that size. */
[data-theme='light'] .cst {
  --cst-kicker: rgba(48, 20, 8, 0.95);
}

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

/* The search field was a hard-coded 200px, sized for the English
   "Search... ⌘K". Every translated placeholder overflows it — the Turkish
   build renders "AI araçları, modülle…" clipped mid-word. Fluid width, with
   the placeholder allowed to ellipsis instead of hard-cutting.
   !important is required: the width lives in an inline style attribute. */
#live-search-input {
  width: clamp(200px, 19vw, 300px) !important;
  text-overflow: ellipsis;
}

/* Pre-existing header overflow, measured on the untouched v13 build too:
   at 1024px the desktop header is 1247px wide — 223px past the viewport, so
   the "Giriş Yap" button sits off-screen. The nav does not collapse to the
   mobile menu until a lower breakpoint. Shed the optional controls on the way
   down instead of letting the primary action fall off the edge. */
@media (max-width: 1279px) {
  #live-search-input {
    width: clamp(150px, 14vw, 190px) !important;
  }
}
@media (max-width: 1520px) {
  #health-status-badge {
    display: none !important;
  }
}
@media (max-width: 1300px) {
  #search-container {
    display: none !important;
  }
}

/* "16/16" carried no label and no accessible name — it read as a version
   number. The badge now announces itself; sighted users get the word too
   wherever the header has room for it. */
.health-badge-label {
  display: none;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
}
[data-theme='light'] .health-badge-label {
  color: rgba(31, 31, 30, 0.55);
}
@media (min-width: 1400px) {
  .health-badge-label {
    display: inline;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   theme.css ships a blanket `[data-theme='light'] span { color: … }` rule
   (specificity 0,1,1). It outranks every single-class component rule, so the
   constellation's own tokens were being ignored in light mode — the tile
   kicker rendered in theme.css's navy at 3.6:1 instead of the warm ink it
   declares. Restated here at higher specificity rather than with !important,
   so the component keeps owning its own colours.
   ══════════════════════════════════════════════════════════════════════ */
[data-theme='light'] .cst .cst-node-name {
  color: var(--cst-text);
}
[data-theme='light'] .cst .cst-node-kicker {
  color: var(--cst-kicker);
}
[data-theme='light'] .cst .cst-live {
  color: #7a3216;
}
[data-theme='light'] .hero-rail .rail-card-label {
  color: rgba(31, 31, 30, 0.72);
}
[data-theme='light'] .hero-rail .rail-card-foot {
  color: rgba(31, 31, 30, 0.66);
}
[data-theme='light'] .hero-rail .hero-rail-kicker span {
  color: inherit;
}

/* ══════════════════════════════════════════════════════════════════════
   HERO LEDE + CALL TO ACTION

   The hero previously carried no visible proposition and no action: the h1
   was screen-reader-only (.hero-title--sr) and the only clickable things were
   the fifteen platform tiles. A visitor landing here could not tell what is
   being offered or what to do next.

   The constellation stays the hero. The lede is deliberately compact — an
   eyebrow, one display line, and the existing localised sentence as the
   subhead — so the orbit keeps most of the viewport.
   ══════════════════════════════════════════════════════════════════════ */
.hero-lede {
  position: relative;
  z-index: 5;
  padding-top: 10px;
  max-width: min(92vw, 760px);
  margin: 0 auto;
  text-align: center;
  opacity: 0;
  animation: hero-lede-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.25s forwards;
}
@keyframes hero-lede-in {
  from {
    opacity: 0;
    translate: 0 10px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

.hero-eyebrow {
  display: inline-block;
  font-family: ui-monospace, 'Geist Mono', 'JetBrains Mono', Menlo, monospace;
  font-size: clamp(9px, 0.85vw, 11px);
  font-weight: 700;
  letter-spacing: 0.2em;
  color: #f5a47c;
  border: 1px solid rgba(233, 116, 81, 0.42);
  border-radius: 999px;
  padding: 4px 13px;
  margin-bottom: 12px;
  background: rgba(233, 116, 81, 0.09);
}

.hero-h1 {
  font-size: clamp(1.6rem, 3.3vw, 2.9rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
  color: #fbf7f5;
}

.hero-sub {
  font-size: clamp(0.82rem, 1.05vw, 0.98rem);
  line-height: 1.55;
  margin: 0 auto;
  max-width: 680px;
  color: rgba(255, 255, 255, 0.74);
}

[data-theme='light'] .hero-h1 {
  color: #201108;
}
[data-theme='light'] .hero-sub {
  color: rgba(31, 31, 30, 0.72);
}
[data-theme='light'] .hero-eyebrow {
  color: #a2431f;
  border-color: rgba(201, 90, 55, 0.45);
  background: rgba(233, 116, 81, 0.1);
}

/* ── Actions ─────────────────────────────────────────────────────────── */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 16px auto 0;
}
.hero-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px; /* WCAG 2.2 target size */
  padding: 0 20px;
  border-radius: 11px;
  font-size: clamp(0.8rem, 1vw, 0.92rem);
  font-weight: 650;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition:
    transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.24s ease,
    background 0.24s ease,
    border-color 0.24s ease;
}
.hero-cta--primary {
  color: #17110d;
  background: linear-gradient(135deg, #f5a47c 0%, #e97451 55%, #c95a37 100%);
  border: 1px solid rgba(245, 164, 124, 0.6);
  box-shadow: 0 10px 26px rgba(201, 90, 55, 0.32);
}
.hero-cta--ghost {
  color: rgba(255, 255, 255, 0.9);
  background: rgba(30, 30, 28, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.hero-cta:hover,
.hero-cta:focus-visible {
  transform: translateY(-2px);
  outline: none;
}
.hero-cta--primary:hover,
.hero-cta--primary:focus-visible {
  box-shadow: 0 16px 34px rgba(201, 90, 55, 0.42);
}
.hero-cta--ghost:hover,
.hero-cta--ghost:focus-visible {
  border-color: rgba(233, 116, 81, 0.6);
  background: rgba(38, 38, 35, 0.85);
}
.hero-cta:focus-visible {
  outline: 2px solid #f5a47c;
  outline-offset: 3px;
}
[data-theme='light'] .hero-cta--ghost {
  color: #2b1409;
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(31, 31, 30, 0.14);
}
[data-theme='light'] .hero-cta--ghost:hover {
  background: #ffffff;
  border-color: rgba(201, 90, 55, 0.55);
}

/* The lede and the actions take vertical room, so the constellation's height
   ceiling drops to match. It still renders larger than the v13 orbit it
   replaced — measured, not estimated. */
/* The stage box is square, but ring-3 tiles sit at 58cqmin plus half a tile,
   so the constellation paints ~10.5% of its own width beyond the box top and
   bottom. Margin is derived from the same width expression so the two cannot
   drift apart.

   Height budget, measured: hero = 100vh - 68px header. The lede and the button
   row take ~134px with the subhead hidden. The constellation's vertical extent
   is ~1.21x its width, so the width a viewport can actually afford is
   (100vh - 210px) / 1.22.

   There is also a floor. Below roughly a 520px stage the tiles stop shrinking
   with it — the font bottoms out around 8px while the stage keeps going — so
   they grow relative to the rings and start colliding. That is a geometric
   limit, not a styling choice, and it is why short viewports fall back to the
   index grid instead of a cramped orbit. */
.cst {
  --cst-w: min(88vw, 720px, calc((100vh - 268px) / 1.24));
  width: var(--cst-w);
  margin-block: calc(var(--cst-w) * 0.115);
}
@media (max-width: 1599px) {
  .cst {
    --cst-w: min(90vw, 660px, calc((100vh - 268px) / 1.24));
  }
}
@media (max-width: 1439px) {
  .cst {
    --cst-w: min(92vw, 620px, calc((100vh - 268px) / 1.24));
  }
}
@media (max-width: 1023px) {
  .cst {
    --cst-w: min(94vw, 560px, calc((100vh - 268px) / 1.24));
  }
}
@media (max-width: 767px), (max-height: 790px) {
  .cst {
    --cst-w: min(94vw, 520px);
    margin-block: 0.9rem;
  }
}

/* Short viewports: shed the lede down to the headline and tighten the buttons,
   which buys back ~79px — enough to keep 1280x800 and 1440x900 on the orbit
   instead of dropping them to the index. Verified against the overlap check at
   every rotation phase. */
@media (max-height: 900px) and (min-width: 768px) {
  .hero-sub {
    display: none;
  }
  .hero-eyebrow {
    display: none;
  }
  .hero-h1 {
    font-size: clamp(1.4rem, 2.5vw, 2.1rem);
    margin-bottom: 6px;
  }
  .hero-cta {
    min-height: 40px;
    padding: 0 17px;
  }
  .hero-actions {
    margin-top: 10px;
  }
  .cst {
    --cst-w: min(90vw, 660px, calc((100vh - 186px) / 1.24));
  }
}
@media (max-width: 767px) {
  .hero-sub {
    display: none;
  }
}

@media (max-width: 767px) {
  .hero-lede {
    margin-bottom: 2px;
  }
  .hero-h1 {
    font-size: clamp(1.35rem, 6vw, 1.9rem);
  }
  .hero-sub {
    display: none; /* the index below is the message on a phone */
  }
  .hero-actions {
    gap: 8px;
  }
  .hero-cta {
    padding: 0 15px;
    font-size: 0.8rem;
  }
  .hero-cta--ghost:last-child {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-lede,
  .hero-actions {
    animation: none !important;
    opacity: 1 !important;
  }
  .hero-cta {
    transition: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   BRAND EMBLEM (header)

   The mark is a physical object — a machined copper glyph seated in a dark
   disc — so it is lit rather than animated: a slow specular sweep across the
   metal on hover, and a ring that tightens with it. Nothing spins, nothing
   bounces. The idle state is completely still; motion only answers a pointer.

   The source render carried a generator watermark in the bottom-right corner.
   It was measured (the only pixels above luminance 60 in that quadrant, a
   48x48 star at 944..991) and patched from the mirrored bottom-left corner so
   the grain and vignette match; peak luminance there went from 137 to 20.7
   against a background of 17.
   ══════════════════════════════════════════════════════════════════════ */
.ly-brandmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.ly-emblem {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex: 0 0 auto;
  isolation: isolate;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.ly-emblem-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  box-shadow:
    0 2px 10px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(233, 116, 81, 0.22);
  transition: box-shadow 0.4s ease;
}

/* Specular sweep — a band of light crossing the metal, clipped to the disc */
.ly-emblem-sheen {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}
.ly-emblem-sheen::before {
  content: '';
  position: absolute;
  top: -60%;
  left: -120%;
  width: 60%;
  height: 220%;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 236, 224, 0.42) 45%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: rotate(14deg);
  transition: left 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Ring that tightens on approach */
.ly-emblem-ring {
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px solid rgba(233, 116, 81, 0);
  pointer-events: none;
  z-index: 2;
  transition:
    inset 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.45s ease;
}

.ly-brandmark:hover .ly-emblem,
.ly-brandmark:focus-visible .ly-emblem {
  transform: translateY(-1px);
}
.ly-brandmark:hover .ly-emblem-sheen::before,
.ly-brandmark:focus-visible .ly-emblem-sheen::before {
  left: 130%;
}
.ly-brandmark:hover .ly-emblem-ring,
.ly-brandmark:focus-visible .ly-emblem-ring {
  inset: -2px;
  border-color: rgba(233, 116, 81, 0.55);
}
.ly-brandmark:hover .ly-emblem-img,
.ly-brandmark:focus-visible .ly-emblem-img {
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(233, 116, 81, 0.45),
    0 0 22px rgba(233, 116, 81, 0.3);
}
.ly-brandmark:focus-visible {
  outline: 2px solid #f5a47c;
  outline-offset: 4px;
  border-radius: 12px;
}

/* The disc is dark by design, so it needs a light-theme seat rather than a
   recolour — a hairline and a soft shadow keep it from floating. */
[data-theme='light'] .ly-emblem-img {
  box-shadow:
    0 2px 10px rgba(143, 61, 33, 0.22),
    0 0 0 1px rgba(143, 61, 33, 0.18);
}
[data-theme='light'] .ly-brandmark:hover .ly-emblem-img {
  box-shadow:
    0 6px 18px rgba(143, 61, 33, 0.28),
    0 0 0 1px rgba(201, 90, 55, 0.5),
    0 0 20px rgba(233, 116, 81, 0.22);
}

@media (max-width: 900px) {
  .ly-emblem {
    width: 38px;
    height: 38px;
  }
  .ly-brandmark {
    gap: 8px;
  }
}
@media (max-width: 400px) {
  .ly-emblem {
    width: 34px;
    height: 34px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ly-emblem,
  .ly-emblem-img,
  .ly-emblem-ring,
  .ly-emblem-sheen::before {
    transition: none !important;
  }
  .ly-brandmark:hover .ly-emblem-sheen::before {
    left: -120%;
  }
}

/* Several stylesheets size `.brand img` directly (global-lydian-branding.css,
   lydian-home.css, responsive.css) — sensible when the brand was a bare mark,
   but here the image sits inside .ly-emblem and must fill it exactly, or the
   sheen and ring sweep outside the disc. The wrapper owns the size now. */
.ly-brandmark .ly-emblem-img,
.brand .ly-emblem-img {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  max-width: none;
  /* Those same rules also forced border-radius: 0 and object-fit: contain,
     which left the source render's square plate visible behind the disc.
     Measured on the computed style, not guessed. */
  border-radius: 50% !important;
  object-fit: cover !important;
}
/* Belt and braces: clip anything that still paints into the corners. */
.ly-emblem {
  overflow: hidden;
}
.ly-emblem picture {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
}
/* The ring lives outside the clipped disc, so it needs its own layer. */
.ly-emblem-ring {
  z-index: 3;
}

/* ══════════════════════════════════════════════════════════════════════
   CHAT QUICK ACCESS — the constellation, in miniature

   A core, two rings and two satellites. It is the same idea as the hero, at
   16px, and it is the only decorative loop in the header: everything else in
   this build moves only in response to a real event. Kept slow (14s / 9s) so
   it reads as orbital drift rather than a spinner, and it stops entirely for
   reduced-motion.
   ══════════════════════════════════════════════════════════════════════ */
.ly-orbit-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px 0 10px;
  border-radius: 11px;
  text-decoration: none;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.94);
  background: linear-gradient(135deg, rgba(233, 116, 81, 0.16) 0%, rgba(201, 90, 55, 0.1) 100%);
  border: 1px solid rgba(233, 116, 81, 0.42);
  font-size: 14px;
  font-weight: 650;
  letter-spacing: 0.01em;
  transition:
    border-color 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.ly-orbit-cta:hover,
.ly-orbit-cta:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(233, 116, 81, 0.85);
  background: linear-gradient(135deg, rgba(233, 116, 81, 0.28) 0%, rgba(201, 90, 55, 0.18) 100%);
  box-shadow: 0 8px 22px rgba(201, 90, 55, 0.28);
  outline: none;
}
.ly-orbit-cta:focus-visible {
  outline: 2px solid #f5a47c;
  outline-offset: 3px;
}

.ly-orbit-cta-viz {
  position: relative;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  display: inline-block;
}
.ly-orbit-core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  border-radius: 50%;
  background: #f5a47c;
  box-shadow: 0 0 6px rgba(245, 164, 124, 0.9);
}
.ly-orbit-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  border: 1px solid rgba(233, 116, 81, 0.4);
  transform: translate(-50%, -50%);
}
.ly-orbit-ring i {
  position: absolute;
  top: -2px;
  left: 50%;
  width: 3.5px;
  height: 3.5px;
  margin-left: -1.75px;
  border-radius: 50%;
  background: #ffd9c6;
  box-shadow: 0 0 5px rgba(245, 164, 124, 0.95);
}
.ly-orbit-ring--1 {
  width: 13px;
  height: 13px;
  animation: ly-orbit-spin 9s linear infinite;
}
.ly-orbit-ring--2 {
  width: 21px;
  height: 21px;
  border-color: rgba(233, 116, 81, 0.26);
  animation: ly-orbit-spin 14s linear infinite reverse;
}
@keyframes ly-orbit-spin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
.ly-orbit-cta:hover .ly-orbit-ring--1 {
  animation-duration: 3.2s;
}
.ly-orbit-cta:hover .ly-orbit-ring--2 {
  animation-duration: 5s;
}

[data-theme='light'] .ly-orbit-cta {
  color: #7a3216;
  background: linear-gradient(135deg, rgba(233, 116, 81, 0.14) 0%, rgba(201, 90, 55, 0.08) 100%);
  border-color: rgba(201, 90, 55, 0.45);
}
[data-theme='light'] .ly-orbit-cta:hover {
  color: #5c2513;
  border-color: rgba(201, 90, 55, 0.8);
}
[data-theme='light'] .ly-orbit-ring i {
  background: #c95a37;
}

/* The label is the first thing to go: adding this button cost 85px and put the
   header 85px over the viewport at 1280. Icon-only keeps it, and the target
   stays 44px. */
@media (max-width: 1560px) {
  .ly-orbit-cta {
    padding: 0;
    width: 44px;
    height: 44px;
    justify-content: center;
    border-radius: 12px;
  }
  .ly-orbit-cta-label {
    display: none;
  }
}
@media (max-width: 400px) {
  .ly-orbit-cta {
    width: 40px;
    height: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ly-orbit-ring--1,
  .ly-orbit-ring--2 {
    animation: none !important;
  }
  .ly-orbit-cta {
    transition: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   TABLET HEADER (769–1023px)

   Measured at 900px: the desktop nav is still expanded (177..712) while the
   hamburger stays hidden until 768, so .nav-right runs to 976 on a 900px
   viewport — the Sign In button sits 76px off-screen. The site's nav
   breakpoint is simply set one tier too low for the number of controls in the
   bar. Tablets get the drawer, same as phones.
   ══════════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1023px) {
  .header-2025 .nav-links {
    display: none !important;
  }
  .header-2025 #mobile-menu-btn {
    display: flex !important;
  }
  .header-2025 .btn-outline {
    padding: 0.5rem 0.85rem !important;
    font-size: 13px !important;
  }
}