:root {
      color-scheme: dark;
      --page: #171522;
      --surface: #211e31;
      --surface-2: #2b283d;
      --surface-3: #353148;
      --text: #ffffff;
      --muted: #c5c1d5;
      --accent: #ebff2f;
      --accent-dark: #111408;
      --border: #4a455e;
      --danger: #ff6b6b;
      --success: #6ee783;
      --shadow: 0 18px 45px rgba(0, 0, 0, 0.32);
      --radius: 18px;
      --content: 1180px;
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
      scroll-padding-top: 92px;
      background: var(--page);
    }

    body {
      min-width: 280px;
      margin: 0;
      background:
        radial-gradient(circle at 85% 0, rgba(235, 255, 47, 0.09), transparent 30rem),
        linear-gradient(180deg, #1c1928 0, var(--page) 35rem);
      color: var(--text);
      font-family: Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
      font-size: 1rem;
      line-height: 1.65;
    }

    body.dialog-open {
      overflow: hidden;
    }

    img,
    iframe {
      display: block;
      max-width: 100%;
    }

    img {
      height: auto;
    }

    a {
      color: var(--accent);
      text-underline-offset: 0.2em;
    }

    a:hover {
      text-decoration-thickness: 2px;
    }

    button,
    a {
      -webkit-tap-highlight-color: transparent;
    }

    button {
      font: inherit;
    }

    :focus-visible {
      outline: 3px solid var(--accent);
      outline-offset: 4px;
    }

    .skip-link {
      position: fixed;
      top: 0.75rem;
      left: 0.75rem;
      z-index: 1000;
      padding: 0.75rem 1rem;
      border-radius: 0.5rem;
      background: var(--accent);
      color: var(--accent-dark);
      font-weight: 800;
      transform: translateY(-160%);
      transition: transform 0.2s ease;
    }

    .skip-link:focus {
      transform: translateY(0);
    }

    .container {
      width: min(100% - 2rem, var(--content));
      margin-inline: auto;
    }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 100;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      background: rgba(23, 21, 34, 0.94);
      backdrop-filter: blur(14px);
    }

    .header-inner {
      display: flex;
      min-height: 74px;
      align-items: center;
      gap: 1rem;
    }

    .brand {
      display: inline-flex;
      flex: 0 0 auto;
      align-items: center;
      color: var(--text);
      text-decoration: none;
    }

    .brand img {
      width: 190px;
      max-height: 54px;
      object-fit: contain;
      object-position: left center;
    }

    .primary-navigation {
      min-width: 0;
      margin-left: auto;
    }

    .primary-navigation ul {
      display: flex;
      margin: 0;
      padding: 0;
      align-items: center;
      gap: 0.25rem;
      list-style: none;
    }

    .primary-navigation a {
      display: inline-flex;
      min-height: 44px;
      align-items: center;
      padding: 0.55rem 0.75rem;
      border-radius: 0.65rem;
      color: var(--muted);
      font-size: 0.92rem;
      font-weight: 750;
      text-decoration: none;
    }

    .primary-navigation a:hover,
    .primary-navigation a:focus-visible {
      background: var(--surface-3);
      color: var(--text);
    }

    .header-action {
      flex: 0 0 auto;
    }

    .button {
      display: inline-flex;
      min-height: 48px;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      padding: 0.75rem 1.15rem;
      border: 2px solid transparent;
      border-radius: 0.75rem;
      cursor: pointer;
      font-weight: 850;
      line-height: 1.2;
      text-align: center;
      text-decoration: none;
      transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
    }

    .button:hover {
      transform: translateY(-1px);
    }

    .button-primary {
      border-color: var(--accent);
      background: var(--accent);
      color: var(--accent-dark);
    }

    .button-primary:hover {
      background: #f2ff72;
      color: #090b05;
    }

    .button-secondary {
      border-color: var(--accent);
      background: transparent;
      color: var(--text);
    }

    .button-secondary:hover {
      background: var(--accent);
      color: var(--accent-dark);
    }

    .button-quiet {
      border-color: var(--border);
      background: var(--surface-2);
      color: var(--text);
    }

    .button-quiet:hover {
      border-color: var(--accent);
      color: var(--accent);
    }

    main {
      overflow: hidden;
    }

    .section {
      padding-block: clamp(3.5rem, 7vw, 6.5rem);
      scroll-margin-top: 90px;
    }

    .section-compact {
      padding-block: clamp(2.5rem, 5vw, 4.5rem);
    }

    .section-tinted {
      border-block: 1px solid rgba(255, 255, 255, 0.08);
      background: rgba(43, 40, 61, 0.48);
    }

    .eyebrow {
      margin: 0 0 0.75rem;
      color: var(--accent);
      font-size: 0.82rem;
      font-weight: 900;
      letter-spacing: 0.13em;
      text-transform: uppercase;
    }

    h1,
    h2,
    h3 {
      margin-top: 0;
      color: var(--text);
      font-family: "Arial Narrow", "Roboto Condensed", Inter, Arial, sans-serif;
      line-height: 1.12;
      text-wrap: balance;
    }

    h1 {
      max-width: 850px;
      margin-bottom: 1.25rem;
      font-size: clamp(2.4rem, 7vw, 5rem);
      letter-spacing: -0.045em;
    }

    h2 {
      margin-bottom: 1rem;
      font-size: clamp(1.9rem, 4.5vw, 3rem);
      letter-spacing: -0.025em;
    }

    h3 {
      margin-bottom: 0.65rem;
      font-size: clamp(1.2rem, 3vw, 1.55rem);
    }

    p {
      margin-top: 0;
      margin-bottom: 1rem;
    }

    .lead {
      max-width: 760px;
      color: #e3e0ec;
      font-size: clamp(1.05rem, 2vw, 1.25rem);
    }

    .section-heading {
      max-width: 780px;
      margin-bottom: 2rem;
    }

    .section-heading p {
      color: var(--muted);
    }

    .hero {
      padding-block: clamp(3rem, 7vw, 6.5rem);
    }

    .hero-grid {
      display: grid;
      align-items: center;
      gap: clamp(2rem, 6vw, 5rem);
    }

    .hero-actions {
      display: flex;
      margin-top: 1.75rem;
      flex-wrap: wrap;
      gap: 0.75rem;
    }

    .hero-media {
      position: relative;
      overflow: hidden;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--surface);
      box-shadow: var(--shadow);
    }

    .hero-media img {
      width: 100%;
      object-fit: cover;
    }

    .hero-media::after {
      position: absolute;
      inset: auto 0 0;
      height: 35%;
      background: linear-gradient(transparent, rgba(0, 0, 0, 0.58));
      content: "";
      pointer-events: none;
    }

    .fact-panel {
      margin-top: 2rem;
      padding: clamp(1.25rem, 4vw, 2rem);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--surface);
      box-shadow: var(--shadow);
    }

    .facts {
      display: grid;
      margin: 0;
      gap: 0;
    }

    .fact {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 1rem;
      padding-block: 0.8rem;
      border-bottom: 1px dashed #5c566f;
    }

    .fact:last-child {
      border-bottom: 0;
    }

    .fact dt {
      color: var(--muted);
    }

    .fact dd {
      margin: 0;
      color: var(--text);
      font-weight: 800;
      text-align: right;
    }

    .demo-card {
      display: grid;
      overflow: hidden;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--surface);
      box-shadow: var(--shadow);
    }

    .demo-preview {
      position: relative;
      min-height: 280px;
      background: #0b0a10;
    }

    .demo-preview img {
      width: 100%;
      height: 100%;
      min-height: 280px;
      aspect-ratio: 16 / 9;
      object-fit: cover;
      filter: brightness(0.58);
    }

    .demo-preview-content {
      position: absolute;
      inset: 0;
      display: grid;
      place-content: center;
      padding: 1.25rem;
      text-align: center;
    }

    .demo-preview-content .button {
      box-shadow: 0 8px 28px rgba(235, 255, 47, 0.2);
    }

    .demo-copy {
      padding: clamp(1.5rem, 5vw, 3rem);
    }

    .demo-copy p {
      color: var(--muted);
    }

    .demo-links {
      display: flex;
      margin-top: 1.5rem;
      flex-wrap: wrap;
      gap: 0.75rem;
    }

    .status-note {
      display: flex;
      align-items: flex-start;
      gap: 0.65rem;
      margin-top: 1rem;
      color: var(--muted);
      font-size: 0.92rem;
    }

    .status-note::before {
      flex: 0 0 auto;
      width: 0.65rem;
      height: 0.65rem;
      margin-top: 0.42rem;
      border-radius: 50%;
      background: var(--success);
      content: "";
      box-shadow: 0 0 0 4px rgba(110, 231, 131, 0.12);
    }

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

    .gallery-card {
      min-width: 0;
      margin: 0;
      overflow: hidden;
      border: 1px solid var(--border);
      border-radius: 1rem;
      background: var(--surface);
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    }

    .gallery-card a {
      position: relative;
      display: block;
      overflow: hidden;
      color: var(--text);
      text-decoration: none;
    }

    .gallery-card img {
      width: 100%;
      aspect-ratio: 16 / 10;
      object-fit: cover;
      transition: transform 0.25s ease, filter 0.25s ease;
    }

    .gallery-card a:hover img {
      transform: scale(1.025);
      filter: brightness(1.08);
    }

    .gallery-card a::after {
      position: absolute;
      right: 0.75rem;
      bottom: 0.75rem;
      padding: 0.4rem 0.65rem;
      border-radius: 999px;
      background: rgba(0, 0, 0, 0.75);
      color: #fff;
      content: "View";
      font-size: 0.78rem;
      font-weight: 800;
    }

    .gallery-card figcaption {
      padding: 0.8rem 1rem;
      color: var(--muted);
      font-size: 0.9rem;
    }

    .content-grid {
      display: grid;
      gap: 1.25rem;
    }

    .content-card {
      padding: clamp(1.25rem, 4vw, 2rem);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--surface);
    }

    .content-card p:last-child {
      margin-bottom: 0;
    }

    .steps {
      display: grid;
      gap: 1.25rem;
      counter-reset: steps;
    }

    .step {
      display: grid;
      overflow: hidden;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--surface);
      counter-increment: steps;
    }

    .step-media {
      min-height: 220px;
      background: var(--surface-3);
    }

    .step-media img {
      width: 100%;
      height: 100%;
      min-height: 220px;
      aspect-ratio: 16 / 10;
      object-fit: cover;
    }

    .step-copy {
      position: relative;
      padding: clamp(1.5rem, 5vw, 2.5rem);
    }

    .step-copy::before {
      display: inline-flex;
      min-width: 5.3rem;
      min-height: 2rem;
      margin-bottom: 1rem;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
      background: var(--accent);
      color: var(--accent-dark);
      content: "Step " counter(steps);
      font-size: 0.82rem;
      font-weight: 900;
      text-transform: uppercase;
    }

    .step-copy p {
      color: var(--muted);
    }

    .feature-list {
      display: grid;
      margin: 1.5rem 0 0;
      padding: 0;
      gap: 1rem;
      list-style: none;
    }

    .feature-list li {
      padding: 1.2rem;
      border: 1px solid var(--border);
      border-radius: 0.9rem;
      background: rgba(53, 49, 72, 0.55);
    }

    .feature-list strong {
      color: var(--accent);
    }

    .support-grid {
      display: grid;
      gap: 1.25rem;
    }

    .support-links {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
    }

    dialog {
      width: min(1100px, calc(100% - 1.5rem));
      max-width: none;
      max-height: calc(100dvh - 1.5rem);
      margin: auto;
      padding: 0;
      overflow: hidden;
      border: 1px solid #5d576f;
      border-radius: 1rem;
      background: #111019;
      color: var(--text);
      box-shadow: 0 30px 90px rgba(0, 0, 0, 0.7);
    }

    dialog::backdrop {
      background: rgba(5, 4, 9, 0.88);
      backdrop-filter: blur(5px);
    }

    .dialog-header {
      display: flex;
      min-height: 64px;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      padding: 0.75rem 1rem;
      border-bottom: 1px solid var(--border);
      background: var(--surface);
    }

    .dialog-header h2 {
      margin: 0;
      font-size: 1.2rem;
    }

    .icon-button {
      display: inline-grid;
      width: 44px;
      height: 44px;
      flex: 0 0 auto;
      place-items: center;
      border: 1px solid var(--border);
      border-radius: 50%;
      background: var(--surface-3);
      color: var(--text);
      cursor: pointer;
      font-size: 1.6rem;
      line-height: 1;
    }

    .icon-button:hover {
      border-color: var(--accent);
      color: var(--accent);
    }

    .demo-frame-wrap {
      position: relative;
      min-height: min(72dvh, 720px);
      background: #08070c;
    }

    .demo-frame {
      width: 100%;
      height: min(72dvh, 720px);
      border: 0;
      background: #08070c;
    }

    .demo-loading {
      position: absolute;
      inset: 0;
      z-index: 1;
      display: grid;
      place-content: center;
      gap: 1rem;
      padding: 2rem;
      background: #111019;
      text-align: center;
    }

    .demo-loading[hidden] {
      display: none;
    }

    .loader {
      width: 42px;
      height: 42px;
      margin-inline: auto;
      border: 4px solid rgba(255, 255, 255, 0.2);
      border-top-color: var(--accent);
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
    }

    .demo-dialog-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      padding: 0.8rem 1rem;
      border-top: 1px solid var(--border);
      background: var(--surface);
      color: var(--muted);
      font-size: 0.9rem;
    }

    .lightbox-dialog {
      width: min(1180px, calc(100% - 1.5rem));
      background: #09080d;
    }

    .lightbox-stage {
      position: relative;
      display: grid;
      min-height: min(75dvh, 760px);
      place-items: center;
      padding: 1rem 4.5rem;
    }

    .lightbox-stage img {
      max-width: 100%;
      max-height: min(72dvh, 720px);
      object-fit: contain;
    }

    .lightbox-control {
      position: absolute;
      top: 50%;
      width: 48px;
      height: 48px;
      border: 1px solid var(--border);
      border-radius: 50%;
      background: rgba(23, 21, 34, 0.92);
      color: var(--text);
      cursor: pointer;
      font-size: 1.6rem;
      transform: translateY(-50%);
    }

    .lightbox-control:hover {
      border-color: var(--accent);
      color: var(--accent);
    }

    .lightbox-prev {
      left: 0.75rem;
    }

    .lightbox-next {
      right: 0.75rem;
    }

    .lightbox-caption {
      min-height: 54px;
      margin: 0;
      padding: 0.9rem 1rem;
      border-top: 1px solid var(--border);
      color: var(--muted);
      text-align: center;
    }

    .site-footer {
      padding-block: 2rem;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      background: #111019;
    }

    .footer-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1.5rem;
    }

    .footer-inner p {
      margin: 0;
      color: var(--muted);
      font-size: 0.9rem;
    }

    .back-to-top {
      font-weight: 800;
      white-space: nowrap;
    }

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

    @media (min-width: 760px) {
      .hero-grid {
        grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
      }

      .facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 2rem;
      }

      .fact:nth-last-child(-n + 2) {
        border-bottom: 0;
      }

      .demo-card {
        grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
        align-items: stretch;
      }

      .gallery-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }

      .content-grid,
      .support-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .step {
        grid-template-columns: minmax(280px, 0.82fr) minmax(0, 1.18fr);
        align-items: stretch;
      }

      .step:nth-child(even) .step-media {
        order: 2;
      }

      .feature-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 900px) {
      .primary-navigation {
        order: 3;
        width: 100%;
        margin: 0;
        overflow-x: auto;
        scrollbar-width: thin;
      }

      .primary-navigation ul {
        width: max-content;
        min-width: 100%;
      }

      .header-inner {
        min-height: auto;
        padding-block: 0.65rem;
        flex-wrap: wrap;
      }

      .primary-navigation a {
        min-height: 40px;
      }

      html {
        scroll-padding-top: 132px;
      }

      .section {
        scroll-margin-top: 130px;
      }
    }

    @media (max-width: 620px) {
      .container {
        width: min(100% - 1.25rem, var(--content));
      }

      .brand img {
        width: 145px;
      }

      .header-action {
        margin-left: auto;
      }

      .header-action .button {
        min-height: 42px;
        padding: 0.55rem 0.8rem;
        font-size: 0.86rem;
      }

      .primary-navigation a {
        padding-inline: 0.65rem;
        font-size: 0.85rem;
      }

      .hero {
        padding-top: 2.5rem;
      }

      .hero-actions,
      .demo-links {
        display: grid;
      }

      .hero-actions .button,
      .demo-links .button {
        width: 100%;
      }

      .gallery-grid {
        grid-template-columns: 1fr;
      }

      .fact {
        grid-template-columns: 1fr;
        gap: 0.2rem;
      }

      .fact dd {
        text-align: left;
      }

      .lightbox-stage {
        min-height: 60dvh;
        padding: 3.5rem 0.5rem;
      }

      .lightbox-control {
        top: auto;
        bottom: 0.5rem;
        transform: none;
      }

      .demo-dialog-footer,
      .footer-inner {
        align-items: flex-start;
        flex-direction: column;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      html {
        scroll-behavior: auto;
      }

      *,
      *::before,
      *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }
    }

/* Secondary pages and cross-site navigation */
.primary-navigation a[aria-current="page"] { background: var(--surface-3); color: var(--text); }
.inner-hero { padding-block: clamp(3rem, 7vw, 6rem); }
.inner-hero-grid { display:grid; grid-template-columns: minmax(0, 1.1fr) minmax(290px, .8fr); gap:clamp(1.5rem,5vw,4.5rem); align-items:center; }
.inner-hero h1 {font-size:clamp(2.35rem,5.5vw,4.4rem)}
.inner-hero .lead { margin-bottom:1.35rem; }
.breadcrumbs { display:flex; gap:.55rem; align-items:center; flex-wrap:wrap; margin:0 0 1.4rem; color:var(--muted); font-size:.9rem; }
.breadcrumbs a {color:var(--muted);text-decoration:none}
.breadcrumbs a:hover {color:var(--accent);text-decoration:underline}
.inner-hero-media { position:relative; padding:.6rem; border:1px solid var(--border); border-radius:var(--radius); background:linear-gradient(140deg,#363247,#211e31); box-shadow:var(--shadow); }
.inner-hero-media img { width:100%; aspect-ratio: 5 / 4; object-fit:cover; object-position:center; border-radius:calc(var(--radius) - .45rem); }
.inner-hero-media .media-label {position:absolute;bottom:1.35rem;left:1.35rem;right:1.35rem; display:inline-block; width:fit-content; max-width:calc(100% - 2.7rem); background:rgba(18,15,28,.92); border:1px solid var(--border); border-radius:99px; font-size:.83rem; font-weight:800; color:var(--text); padding:.4rem .85rem; }
.hero-tags {display:flex; flex-wrap:wrap; gap:.55rem; margin:1.45rem 0 0; padding:0; list-style:none;}
.hero-tags li { padding:.35rem .7rem; border:1px solid var(--border);border-radius:999px; color:var(--muted); background:rgba(43,40,61,.8);font-size:.84rem;}
.page-notice {display:flex; gap:1rem; padding:1.2rem 1.35rem; background:rgba(235,255,47,.06);border:1px solid rgba(235,255,47,.34);border-radius:1rem; color:var(--muted);}
.page-notice strong {color:var(--text)}
.page-notice .notice-icon {width:2.25rem;height:2.25rem;flex:0 0 auto;display:grid;place-items:center;border-radius:.75rem;background:var(--accent);color:var(--accent-dark);font-weight:900}
.page-notice p:last-child {margin:0}
.listing-grid, .slot-grid, .process-grid {display:grid;gap:1.25rem;}
.listing-grid {grid-template-columns:repeat(2,minmax(0,1fr));margin-top:2rem;}
.listing-card, .slot-card, .process-card { min-width:0; padding:clamp(1.25rem,3.25vw,2rem); border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); }
.listing-card {display:flex; flex-direction:column;gap:1rem}
.listing-card h3, .slot-card h3 {font-size:1.75rem; margin:0}
.listing-card p, .slot-card p {color:var(--muted)}
.listing-card p:last-child, .slot-card p:last-child {margin:0}
.listing-card-top {display:flex;gap:1rem;align-items:flex-start; justify-content:space-between;}
.status-pill {display:inline-flex; align-items:center; gap:.45rem; padding:.33rem .65rem; border-radius:99px; background:#353148;color:#e8e4f3;font-size:.78rem;font-weight:800;line-height:1.35}
.status-pill::before {content:'';width:.45rem;height:.45rem;border-radius:50%;background:var(--accent);flex:0 0 auto}
.card-meta {display:grid;gap:0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin:0}
.card-meta div {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap:1rem;padding:.65rem 0;border-bottom:1px dashed var(--border)}
.card-meta div:last-child {border-bottom:none}
.card-meta dt {color:var(--muted)}
.card-meta dd {margin:0;text-align:right;font-weight:750}
.card-actions {display:flex;flex-wrap:wrap;align-items:center;gap:.8rem;margin-top:auto;padding-top:.25rem}
.card-actions .button {min-height:44px}
.card-actions .text-link {font-weight:750;font-size:.92rem}
.process-grid {grid-template-columns:repeat(4,minmax(0,1fr));margin-top:1.6rem}
.process-card {position:relative}
.step-number {display:inline-grid;place-items:center;width:2.4rem;height:2.4rem;margin-bottom:1.15rem;border-radius:.7rem;background:var(--accent);color:var(--accent-dark);font-weight:900}
.process-card h3 {font-size:1.2rem}
.process-card p {color:var(--muted);font-size:.96rem;margin:0}
.faq-list {display:grid;gap:.8rem;max-width:920px}
.faq-list details {border:1px solid var(--border);border-radius:.9rem;background:var(--surface);padding:1rem 1.25rem}
.faq-list summary {cursor:pointer;list-style:none;font-weight:800;padding-right:2rem;position:relative}
.faq-list summary::-webkit-details-marker {display:none}
.faq-list summary::after {content:'+';position:absolute;right:0;top:0;font-size:1.5rem;line-height:1;color:var(--accent)}
.faq-list details[open] summary::after {content:'−'}
.faq-list details p {margin:.8rem 0 0;color:var(--muted)}
.crosslink-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem}
.crosslink-card {display:flex;flex-direction:column;align-items:flex-start;gap:.75rem; padding:clamp(1.4rem,3.5vw,2.2rem);border:1px solid var(--border);border-radius:var(--radius);background:linear-gradient(135deg,#2b283d,#211e31);}
.crosslink-card h3 {margin:0}
.crosslink-card p {color:var(--muted);margin:0 0 .4rem}
.crosslink-card .button {margin-top:auto}
.footer-links {display:flex;flex-wrap:wrap;gap:.4rem 1.25rem;align-items:center}
.footer-links a {font-size:.88rem;color:var(--muted)}
.footer-links a:hover {color:var(--accent)}
.slot-grid {grid-template-columns:repeat(3,minmax(0,1fr));margin-top:1.6rem}
.slot-card {display:flex;flex-direction:column;gap:1rem}
.slot-card[hidden] {display:none !important}
.slot-graphic {position:relative; display:flex; min-height:130px; align-items:flex-end; padding:1.1rem; border:1px solid rgba(255,255,255,.14); border-radius:.9rem; overflow:hidden; background:linear-gradient(125deg,#344449,#2b2c40 55%,#41405a);}
.slot-graphic::before {position:absolute;content:'✦';right:1.2rem;top:-1.7rem;font-size:7rem;color:rgba(235,255,47,.13);line-height:1;transform:rotate(18deg)}
.slot-graphic .graphic-name {position:relative;z-index:1;font-family:'Arial Narrow',Inter,Arial,sans-serif;font-size:1.5rem;font-weight:900;line-height:1.1;letter-spacing:-.02em;text-shadow:0 2px 15px rgba(0,0,0,.7);}
.slot-graphic.variant-2 {background:linear-gradient(135deg,#44402b,#30283a 58%,#532d32)}
.slot-graphic.variant-3 {background:linear-gradient(135deg,#223d3d,#28364b 58%,#2a2745)}
.slot-graphic.variant-4 {background:linear-gradient(135deg,#3a324b,#253b34 58%,#1b2939)}
.slot-graphic.variant-5 {background:linear-gradient(135deg,#4b342e,#28363b 58%,#262c44)}
.slot-graphic.variant-6 {background:linear-gradient(135deg,#24404b,#363451 58%,#523d30)}
.slot-overline {font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;font-weight:900;color:var(--accent)}
.slot-card h3 {font-size:1.45rem}
.slot-card .slot-desc {flex:1}
.slot-tags {display:flex;gap:.4rem;flex-wrap:wrap}
.slot-tags span {border-radius:999px;border:1px solid var(--border);padding:.2rem .5rem;font-size:.79rem;color:var(--muted)}
.slot-card .button {margin-top:auto}
.compare-scroll {max-width:100%;overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius)}
.compare-table {border-collapse:collapse;width:100%;min-width:720px}
.compare-table th, .compare-table td {padding:1rem 1.25rem;text-align:left;border-bottom:1px solid var(--border);vertical-align:top}
.compare-table th {background:var(--surface-3);font-size:.86rem;color:var(--text)}
.compare-table td {background:var(--surface);color:var(--muted)}
.compare-table td:first-child {color:var(--text);font-weight:800}
.compare-table tbody tr:last-child td {border-bottom:none}
.search-control {display:flex;align-items:center;flex-wrap:wrap;gap:1rem;margin:0 0 1.3rem;}
.search-control label {font-weight:800}
.search-control input {min-height:46px; width:min(100%,360px);padding:.65rem .85rem;border:1px solid #817b93;border-radius:.65rem;background:var(--surface);color:var(--text);font:inherit;}
.search-control input::placeholder {color:#b2aec2}
.search-control .search-count {font-size:.9rem;color:var(--muted)}
.search-empty {padding:1.25rem;border:1px dashed var(--border);border-radius:.9rem;color:var(--muted)}
@media (max-width:1100px) {
 .primary-navigation {order:3; width:100%; margin:0; overflow-x:auto; scrollbar-width:thin}
 .primary-navigation ul {width:max-content;min-width:100%}
 .header-inner {min-height:auto;padding-block:.65rem;flex-wrap:wrap}
 .primary-navigation a {min-height:40px}
}
@media (max-width:850px){ .process-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .slot-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .inner-hero-grid{grid-template-columns:1fr} .inner-hero-media{max-width:560px} }
@media (max-width:620px){ .listing-grid,.slot-grid,.process-grid,.crosslink-grid{grid-template-columns:1fr} .inner-hero-media img{aspect-ratio:16/10} .card-meta div{grid-template-columns:1fr;gap:.12rem} .card-meta dd{text-align:left} .page-notice{padding:1rem} .search-control{align-items:stretch;flex-direction:column;gap:.55rem} .search-control input{width:100%} }

