:root {
      --bg:        #fafaf6;
      --bg-2:      #f3f2ec;
      --surface:   #ffffff;
      --line:      #e8e5dd;
      --line-2:    #d8d3c7;
      --ink:       #0c0c0a;
      --ink-2:     #2a2a26;
      --ink-dim:   #6b6b63;
      --ink-mute:  #9d9c92;

      --accent:    #5b4fe5;
      --accent-2:  #ec4899;
      --accent-soft: #efedfd;
      --danger:    #e94e3a;
      --danger-soft:#fdeae6;
      --ok:        #18a558;
      --ok-soft:   #e6f5ed;

      --shadow-sm: 0 1px 2px rgba(12,12,10,0.04), 0 1px 1px rgba(12,12,10,0.03);
      --shadow-md: 0 2px 4px rgba(12,12,10,0.04), 0 8px 24px -8px rgba(12,12,10,0.08);
      --shadow-lg: 0 4px 8px rgba(12,12,10,0.04), 0 24px 60px -20px rgba(12,12,10,0.18);
      --shadow-xl: 0 8px 16px rgba(12,12,10,0.04), 0 40px 120px -24px rgba(12,12,10,0.25);

      --sans:  "Switzer", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
      --serif: "Instrument Serif", "Times New Roman", serif;
      --mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }
    html, body {
      background: var(--bg); color: var(--ink); font-family: var(--sans);
      -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
      font-feature-settings: "ss01", "cv01", "kern";
    }
    body { overflow-x: hidden; }
    a { color: inherit; text-decoration: none; }
    button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; padding: 0; }
    img, svg { display: block; max-width: 100%; }
    ::selection { background: var(--accent); color: #fff; }

    .container { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
    @media (max-width: 600px) { .container { padding: 0 20px; } }

    .mono { font-family: var(--mono); }
    .serif { font-family: var(--serif); font-style: italic; }

    h1, h2, h3, h4 { font-weight: 500; letter-spacing: -0.035em; line-height: 1.0; }
    p { color: var(--ink-dim); line-height: 1.5; }

    /* ═══════════════ NAV ═══════════════ */
    .nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 50;
      background: rgba(250, 250, 246, 0.62);
      border-bottom: 1px solid rgba(216, 211, 199, 0.42);
      backdrop-filter: blur(18px) saturate(1.2);
      -webkit-backdrop-filter: blur(18px) saturate(1.2);
    }
    .nav-inner {
      display: flex; align-items: center; justify-content: space-between;
      height: 54px;
      padding-top: 8px;
    }
    .logo {
      display: flex; align-items: center; gap: 8px;
      font-size: 16px; font-weight: 600; letter-spacing: -0.025em;
    }
    .logo-icon {
      width: 26px;
      height: 26px;
      object-fit: contain;
      flex: 0 0 auto;
    }
    .logo-mark {
      width: 22px; height: 22px;
      background: var(--ink);
      border-radius: 6px;
      position: relative;
      display: flex; align-items: center; justify-content: center;
    }
    .logo-mark::before {
      content: ""; width: 7px; height: 7px; border-radius: 50%;
      background: var(--accent);
    }
    .logo-mark::after {
      content: ""; position: absolute; top: -3px; right: -3px;
      width: 6px; height: 6px; border-radius: 50%;
      background: var(--accent);
      box-shadow: 0 0 0 3px var(--bg);
    }
    .nav-cta { display: flex; align-items: center; gap: 6px; }
    .nav-control {
      box-sizing: border-box;
      min-width: 36px;
      height: 36px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 0 12px;
      border: 1px solid var(--line-2);
      border-radius: 10px;
      background: rgba(255,255,255,0.74);
      color: var(--ink);
      box-shadow: var(--shadow-sm);
      font-size: 13px;
      font-weight: 600;
      white-space: nowrap;
    }
    .nav-github {
      padding: 0 10px;
      color: var(--ink-dim);
    }
    .nav-github svg:first-child {
      color: var(--ink);
    }
    .nav-github svg:nth-child(2) {
      color: #6d5be8;
      fill: rgba(109,91,232,0.12);
    }
    .nav-menu {
      position: relative;
      height: 36px;
      display: inline-flex;
      align-items: center;
    }
    .nav-menu summary {
      box-sizing: border-box;
      width: 36px;
      min-width: 36px;
      max-width: 36px;
      height: 36px;
      min-height: 36px;
      max-height: 36px;
      flex-direction: column;
      gap: 4px;
      cursor: pointer;
      list-style: none;
      padding: 0;
      line-height: 1;
      margin: 0;
      appearance: none;
    }
    .nav-menu summary::-webkit-details-marker { display: none; }
    .nav-menu summary span {
      display: block;
      flex: 0 0 2px;
      width: 16px; height: 2px; border-radius: 99px;
      background: var(--ink);
    }
    .nav-menu-panel {
      position: absolute;
      right: 0; top: calc(100% + 8px);
      width: 178px;
      padding: 8px;
      border: 1px solid var(--line-2);
      border-radius: 12px;
      background: rgba(255,255,255,0.94);
      box-shadow: var(--shadow-lg);
      backdrop-filter: blur(18px);
      display: grid;
      gap: 2px;
    }
    .nav-menu-panel a {
      padding: 9px 10px;
      border-radius: 8px;
      color: var(--ink-dim);
      font-size: 13px;
      font-weight: 500;
    }
    .nav-menu-panel a:hover {
      background: var(--bg-2);
      color: var(--ink);
    }
    .nav-cta .pill {
      font-size: 11px; padding: 4px 10px; border-radius: 999px;
      background: var(--accent-soft); color: var(--accent);
      font-family: var(--mono); font-weight: 500;
      margin-right: 6px;
    }
    /* ═══════════════ HERO ═══════════════ */
    .hero {
      padding: 54px 0 56px;
      position: relative;
      overflow: hidden;
      width: 100vw;
      width: 100dvw;
      margin-left: calc(50% - 50vw);
      margin-left: calc(50% - 50dvw);
    }
    .hero > .container {
      width: 100vw;
      width: 100dvw;
      max-width: none;
      padding-left: 32px;
      padding-right: 32px;
    }
    @media (min-width: 721px) {
      .hero {
        min-height: auto;
      }
    }
    .hero::before {
      content: ""; position: absolute; inset: 0;
      background:
        radial-gradient(ellipse 700px 360px at 20% 0%, rgba(91,79,229,0.06), transparent 65%),
        radial-gradient(ellipse 600px 360px at 90% 30%, rgba(236,72,153,0.04), transparent 60%);
      pointer-events: none;
    }
    .hero-content {
      position: relative;
      text-align: center;
      max-width: 980px;
      margin: 0 auto;
    }
    .hero-pill {
      display: inline-flex; align-items: center; gap: 10px;
      padding: 5px 5px 5px 12px; border: 1px solid var(--line-2);
      background: var(--surface);
      border-radius: 999px;
      font-size: 12.5px; color: var(--ink-dim);
      box-shadow: var(--shadow-sm);
      margin-bottom: 22px;
    }
    .hero-pill .new {
      font-family: var(--mono); font-size: 10px;
      background: var(--ink); color: var(--bg);
      padding: 3px 8px; border-radius: 999px;
      letter-spacing: 0.04em;
    }
    .hero-pill .arrow { font-size: 13px; color: var(--ink-mute); margin-left: 4px; }

    h1.hero-title {
      font-size: clamp(46px, 5.9vw, 82px);
      font-weight: 500;
      line-height: 1.08;
      letter-spacing: -0.045em;
      max-width: none;
      margin: 0 auto;
      padding-bottom: 0.08em;
      white-space: nowrap;
    }
    h1.hero-title .ital {
      font-family: var(--serif);
      font-style: italic;
      font-weight: 400;
      letter-spacing: -0.025em;
      color: var(--ink-2);
    }
    h1.hero-title .gradient,
    h1.hero-title .ital.gradient {
      background: linear-gradient(120deg, var(--accent) 0%, var(--accent-2) 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    h1.hero-title .hero-agent-word {
      color: #6d5be8;
      font-family: var(--sans);
      font-style: normal;
      font-weight: 500;
      letter-spacing: -0.045em;
    }

    .hero-sub {
      margin-top: 2px;
      font-size: 16px;
      max-width: min(760px, 100%);
      margin-left: auto; margin-right: auto;
      color: var(--ink-dim);
      line-height: 1.5;
      white-space: nowrap;
    }
    .hero-sub .open-source {
      background: linear-gradient(120deg, var(--accent) 0%, var(--accent-2) 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      font-weight: 600;
    }

    .hero-continuation {
      position: relative;
      text-align: center;
      max-width: 720px;
      margin: 4px auto 0;
    }

    .hero-scene {
      --hero-panel-height: 330px;
      position: relative;
      width: min(1080px, 100%);
      margin: 18px auto 0;
      display: grid;
      grid-template-columns: 320px minmax(430px, 620px);
      align-items: stretch;
      justify-content: center;
      gap: 72px;
    }

    .platform-stack {
      align-self: stretch;
      width: 320px;
      height: var(--hero-panel-height);
      transform: none;
      display: grid;
      grid-template-rows: 64px minmax(0, 1fr);
      gap: 14px;
    }
    .feature-rail {
      position: relative;
      min-height: 64px;
      overflow: hidden;
      border: 1px solid var(--line-2);
      border-radius: 16px;
      background: rgba(255,255,255,0.72);
      box-shadow: var(--shadow-md);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      isolation: isolate;
    }
    .feature-rotator {
      position: relative;
      height: 64px;
      overflow: hidden;
    }
    .feature-pulse {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 0 14px;
      color: var(--ink);
      font-size: 15px;
      font-weight: 500;
      letter-spacing: 0;
      line-height: 1;
      opacity: 0;
      visibility: hidden;
      transform: translateY(10px);
      animation: feature-cycle 27.5s infinite;
      animation-delay: calc(var(--feature-index) * 2.5s);
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
    }
    .feature-pulse > span:nth-child(2) {
      flex: 0 1 auto;
      min-width: max-content;
      overflow: visible;
      text-overflow: clip;
      white-space: nowrap;
    }
    .feature-icon,
    .feature-check {
      width: 22px;
      height: 22px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
    }
    .feature-icon {
      background: linear-gradient(135deg, rgba(112,88,255,0.13), rgba(12,149,211,0.12));
      color: var(--accent);
    }
    .feature-check {
      width: 18px;
      height: 18px;
      background: var(--ok-soft);
      color: var(--ok);
    }
    @keyframes feature-cycle {
      0% { opacity: 0; visibility: hidden; transform: translateY(10px); }
      1.2%, 7.9% { opacity: 1; visibility: visible; transform: translateY(0); }
      9.1%, 100% { opacity: 0; visibility: hidden; transform: translateY(-10px); }
    }

    .feature-showcase {
      --feature-glow: rgba(91,79,229,0.12);
      --feature-ink: var(--accent);
      position: relative;
      align-self: stretch;
      min-height: 0;
      height: var(--hero-panel-height);
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(150px, 0.86fr);
      gap: 22px;
      align-items: center;
      padding: 22px 22px 46px;
      border: 1px solid var(--line-2);
      border-radius: 16px;
      background:
        radial-gradient(ellipse 80% 90% at 100% 0%, var(--feature-glow), transparent 62%),
        rgba(255,255,255,0.78);
      box-shadow: var(--shadow-lg);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      overflow: hidden;
    }
    .feature-tone-token { --feature-glow: rgba(91,79,229,0.14); --feature-ink: #5b4fe5; }
    .feature-tone-shield { --feature-glow: rgba(24,165,88,0.13); --feature-ink: #18a558; }
    .feature-tone-secret { --feature-glow: rgba(236,72,153,0.13); --feature-ink: #d9468f; }
    .feature-tone-audit { --feature-glow: rgba(12,149,211,0.13); --feature-ink: #0c95d3; }
    .feature-tone-skill { --feature-glow: rgba(245,158,11,0.13); --feature-ink: #b45309; }
    .feature-tone-mcp { --feature-glow: rgba(20,184,166,0.13); --feature-ink: #0f766e; }
    .feature-tone-siem { --feature-glow: rgba(220,38,38,0.12); --feature-ink: #b91c1c; }
    .feature-showcase::before {
      content: "";
      position: absolute;
      inset: 10px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,0.64);
      pointer-events: none;
    }
    .feature-copy {
      position: relative;
      z-index: 2;
      min-width: 0;
    }
    .feature-plugin-row {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 24px;
      margin-bottom: 22px;
      color: var(--ink);
      font-size: 13px;
      font-weight: 560;
      letter-spacing: 0;
      line-height: 1.2;
    }
    .feature-plugin {
      overflow: hidden;
      min-width: 0;
      white-space: nowrap;
    }
    .feature-plugin-badge {
      border: 1px solid color-mix(in srgb, var(--feature-ink) 24%, white);
      border-radius: 999px;
      background: color-mix(in srgb, var(--feature-ink) 10%, white);
      color: var(--feature-ink);
      padding: 4px 7px;
      font-family: var(--mono);
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      line-height: 1;
    }
    .feature-showcase .feature-icon {
      background: color-mix(in srgb, var(--feature-ink) 14%, white);
      color: var(--feature-ink);
    }
    .feature-showcase h2 {
      max-width: 15ch;
      color: var(--ink);
      font-size: 24px;
      font-weight: 760;
      letter-spacing: 0;
      line-height: 1.08;
      min-height: 2.6em;
    }
    .feature-showcase p {
      max-width: 27ch;
      margin-top: 10px;
      color: var(--ink-2);
      font-size: 15px;
      line-height: 1.22;
      letter-spacing: 0;
      min-height: 3.1em;
    }
    .feature-visual-image {
      width: 100%;
      min-width: 0;
    }
    .feature-visual-image img {
      display: block;
      width: 100%;
      max-width: 286px;
      margin-left: auto;
      border-radius: 14px;
      box-shadow: var(--shadow-md);
    }
    .slot-text {
      display: inline;
    }
    .slot-word {
      display: inline-block;
      overflow: hidden;
      vertical-align: bottom;
      padding: 0.04em 0 0.16em;
      perspective: 900px;
    }
    .slot-word + .slot-word {
      margin-left: 0.25em;
    }
    .slot-word > span {
      display: inline-block;
      transform-origin: 50% 86%;
      animation: slot-rise 1280ms cubic-bezier(.16, 1, .3, 1) both;
      animation-delay: calc(180ms + (var(--slot-index) * 115ms));
      will-change: transform, opacity, filter;
    }
    @keyframes slot-rise {
      0% {
        opacity: 0;
        transform: translateY(118%) rotateX(-82deg) scale(0.92);
        filter: blur(8px);
      }
      42% {
        opacity: 1;
        filter: blur(0);
      }
      66% {
        opacity: 1;
        transform: translateY(-16%) rotateX(14deg) scale(1.035);
        filter: blur(0);
      }
      82% {
        transform: translateY(5%) rotateX(-5deg) scale(0.992);
      }
      100% {
        opacity: 1;
        transform: translateY(0) rotateX(0deg) scale(1);
        filter: blur(0);
      }
    }
    .feature-visual {
      position: relative;
      z-index: 2;
      min-height: 136px;
      display: grid;
      place-items: center;
    }
    .feature-token-window,
    .feature-mask-window,
    .feature-audit-window,
    .feature-mini-approval {
      width: 100%;
      max-width: 210px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: rgba(255,255,255,0.88);
      box-shadow: var(--shadow-md);
    }
    .feature-window-top {
      display: flex;
      align-items: center;
      gap: 5px;
      height: 27px;
      padding: 0 10px;
      border-bottom: 1px solid var(--line);
      background: rgba(243,242,236,0.76);
      border-radius: 12px 12px 0 0;
    }
    .feature-window-top span {
      width: 7px;
      height: 7px;
      border-radius: 999px;
      background: var(--line-2);
    }
    .feature-window-top span:nth-child(1) { background: #ff8a78; }
    .feature-window-top span:nth-child(2) { background: #f0bf4c; }
    .feature-window-top span:nth-child(3) { background: #36c56b; }
    .feature-token-window {
      padding-bottom: 14px;
    }
    .feature-token-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 13px 14px 0;
      color: var(--ink-dim);
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0;
      text-transform: uppercase;
    }
    .feature-token-row strong {
      color: var(--ink);
      font-family: var(--sans);
      font-size: 24px;
      font-weight: 760;
      letter-spacing: 0;
    }
    .feature-token-row.compressed strong {
      color: var(--feature-ink);
    }
    .feature-token-meter {
      height: 10px;
      margin: 14px;
      overflow: hidden;
      border-radius: 999px;
      background: var(--bg-2);
      border: 1px solid var(--line);
    }
    .feature-token-meter span {
      display: block;
      width: 50%;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--feature-ink), var(--accent-2));
    }
    .feature-savings-badge {
      position: absolute;
      right: 2px;
      top: 2px;
      display: grid;
      place-items: center;
      width: 58px;
      height: 58px;
      border-radius: 999px;
      background: var(--ink);
      color: var(--bg);
      font-size: 18px;
      font-weight: 800;
      box-shadow: var(--shadow-md);
      transform: rotate(8deg);
    }
    .feature-mini-approval {
      max-width: 250px;
      padding: 12px;
      transform: rotate(-1.5deg);
    }
    .feature-mini-approval .gs-card-subject {
      font-size: 13.5px;
    }
    .feature-mini-approval .gs-card-cmd {
      font-size: 12px;
    }
    .feature-mini-approval .gs-card-actions button {
      font-size: 11.5px;
      padding: 7px;
    }
    .feature-mask-window,
    .feature-audit-window {
      padding-bottom: 12px;
    }
    .feature-mask-window code {
      display: block;
      margin: 12px 12px 0;
      padding: 8px 9px;
      border-radius: 7px;
      background: var(--ink);
      color: var(--bg);
      font-family: var(--mono);
      font-size: 9.5px;
      line-height: 1.35;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .feature-mask-window code b {
      color: #ff8a78;
      font-weight: 500;
    }
    .feature-redacted {
      width: fit-content;
      margin: 12px 12px 0 auto;
      padding: 5px 8px;
      border-radius: 999px;
      background: var(--ok-soft);
      color: var(--ok);
      font-family: var(--mono);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0;
      text-transform: uppercase;
    }
    .feature-audit-row {
      display: grid;
      grid-template-columns: 8px minmax(0, 1fr) auto;
      gap: 8px;
      align-items: center;
      margin: 10px 12px 0;
      font-size: 11px;
    }
    .feature-audit-row span {
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: var(--ok);
    }
    .feature-audit-row:nth-child(5) span {
      background: var(--danger);
    }
    .feature-audit-row strong {
      min-width: 0;
      color: var(--ink);
      font-family: var(--mono);
      font-size: 11px;
      font-weight: 650;
      letter-spacing: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .feature-audit-row em {
      padding: 3px 6px;
      border-radius: 999px;
      background: var(--bg-2);
      color: var(--ink-mute);
      font-family: var(--mono);
      font-size: 8px;
      font-style: normal;
      font-weight: 700;
      letter-spacing: 0;
      text-transform: uppercase;
    }
    .feature-controls {
      position: absolute;
      left: 22px;
      right: 22px;
      bottom: 14px;
      z-index: 8;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }
    .feature-controls > button {
      width: 30px;
      height: 30px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--line-2);
      border-radius: 999px;
      background: rgba(255,255,255,0.84);
      color: var(--ink);
      box-shadow: var(--shadow-sm);
      cursor: pointer;
    }
    .feature-controls > button:hover {
      border-color: color-mix(in srgb, var(--feature-ink) 48%, var(--line-2));
      color: var(--feature-ink);
    }
    .feature-dots {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 2px;
    }
    .feature-dots button {
      position: relative;
      width: 18px;
      height: 18px;
      border-radius: 999px;
      background: transparent;
      cursor: pointer;
    }
    .feature-dots button::before {
      content: "";
      position: absolute;
      inset: 5px;
      border-radius: 999px;
      background: var(--line-2);
      transition: inset 0.2s ease, background 0.2s ease;
    }
    .feature-dots button.active {
      width: 32px;
    }
    .feature-dots button.active::before {
      inset: 5px 3px;
      background: var(--feature-ink);
    }
    .agent-rail {
      position: relative;
      width: 100%;
      min-height: 64px;
      overflow: hidden;
      border: 1px solid var(--line-2);
      border-radius: 16px;
      background: rgba(255,255,255,0.72);
      box-shadow: var(--shadow-md);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      cursor: pointer;
      text-align: left;
    }
    .agent-rail:hover {
      border-color: rgba(91,79,229,0.34);
      box-shadow: var(--shadow-md), 0 0 0 4px rgba(91,79,229,0.08);
    }
    .agent-rail:focus-visible {
      outline: 3px solid rgba(91,79,229,0.3);
      outline-offset: 3px;
    }
    .agent-rail::before {
      content: none;
    }
    .agent-rail-hint {
      position: absolute;
      right: 10px;
      top: 50%;
      z-index: 2;
      transform: translateY(-50%);
      display: inline-flex;
      align-items: center;
      min-height: 28px;
      padding: 0 9px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: rgba(255,255,255,0.92);
      color: var(--ink-dim);
      font-family: var(--mono);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      box-shadow: var(--shadow-sm);
    }
    .agent-marquee {
      height: 64px;
      overflow: hidden;
      mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 74%, transparent 100%);
      -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 74%, transparent 100%);
    }
    .agent-track {
      height: 100%;
      display: flex;
      align-items: center;
      gap: 10px;
      width: max-content;
      animation: agent-scroll 68s linear infinite;
      transform: translateX(0);
    }
    .agent-chip {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      height: 42px;
      padding: 0 11px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: rgba(255,255,255,0.82);
      color: var(--ink);
      font-size: 13px;
      font-weight: 650;
      letter-spacing: 0;
      line-height: 1;
      white-space: nowrap;
      transform-origin: left center;
      box-shadow: var(--shadow-sm);
      flex: 0 0 auto;
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
    }
    .agent-claude { --agent-color: #e76f45; }
    .agent-codex { --agent-color: #18a558; --agent-hue: 88deg; }
    .agent-cursor { --agent-color: #6d5be8; }
    .agent-gemini { --agent-color: #8f6df2; }
    .agent-cline { --agent-color: #0c95d3; --agent-hue: 165deg; }
    .agent-opencode { --agent-color: #f0a128; --agent-hue: 335deg; }
    .agent-windsurf { --agent-color: #20a89d; }
    .agent-antigravity { --agent-color: #ff6b9a; }
    .agent-agentforce { --agent-color: #1789ff; }
    .agent-vertex { --agent-color: #34a853; }
    .agent-copilot { --agent-color: #7c3aed; }
    .agent-mark {
      width: 30px;
      height: 30px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      background:
        radial-gradient(circle at 35% 20%, rgba(255,255,255,0.88), transparent 55%),
        color-mix(in srgb, var(--agent-color, var(--accent)) 16%, white);
      color: var(--agent-color, var(--accent));
      font-family: var(--mono);
      font-size: 11px;
      font-weight: 700;
      flex: 0 0 auto;
      overflow: hidden;
      padding: 3px;
    }
    .agent-mark img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
    .agent-codex .agent-mark img,
    .agent-opencode .agent-mark img {
      filter: sepia(1) saturate(1.6) hue-rotate(var(--agent-hue)) brightness(0.86);
    }
    .agent-chip em {
      padding: 2px 5px;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: var(--bg-2);
      color: var(--ink-mute);
      font-family: var(--mono);
      font-size: 8px;
      font-style: normal;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }
    @keyframes agent-scroll {
      from { transform: translateX(0); }
      to { transform: translateX(-50%); }
    }

    .agent-modal {
      position: fixed;
      inset: 0;
      z-index: 100;
      display: grid;
      place-items: center;
      padding: clamp(16px, 4vw, 32px);
      background: rgba(12, 12, 10, 0.52);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }
    .agent-modal-panel {
      width: min(780px, calc(100vw - 32px));
      max-height: min(760px, calc(100dvh - 56px));
      overflow: auto;
      border: 1px solid rgba(255,255,255,0.32);
      border-radius: 16px;
      background:
        radial-gradient(ellipse 360px 180px at 12% 0%, rgba(91,79,229,0.11), transparent 64%),
        rgba(250,250,246,0.97);
      box-shadow: var(--shadow-xl);
      padding: 22px;
    }
    .agent-modal-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 18px;
      margin-bottom: 18px;
    }
    .agent-modal-head span {
      display: inline-flex;
      width: fit-content;
      margin-bottom: 9px;
      padding: 5px 8px;
      border-radius: 999px;
      background: var(--accent-soft);
      color: var(--accent);
      font-family: var(--mono);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }
    .agent-modal-head h2 {
      max-width: 520px;
      font-size: clamp(28px, 4vw, 44px);
      line-height: 0.98;
      letter-spacing: -0.045em;
    }
    .agent-modal-close {
      flex: 0 0 auto;
      width: 38px;
      height: 38px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--line-2);
      border-radius: 999px;
      background: rgba(255,255,255,0.92);
      color: var(--ink);
      font-size: 26px;
      line-height: 1;
      box-shadow: var(--shadow-sm);
    }
    .agent-modal-close:hover {
      border-color: var(--ink);
    }
    .agent-modal-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
      gap: 12px;
    }
    .agent-modal-card {
      min-height: 104px;
      display: grid;
      grid-template-columns: 46px minmax(0, 1fr);
      align-items: start;
      column-gap: 12px;
      row-gap: 6px;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: rgba(255,255,255,0.82);
      box-shadow: var(--shadow-sm);
    }
    .agent-modal-card .agent-mark {
      grid-row: span 2;
      width: 46px;
      height: 46px;
    }
    .agent-modal-card strong {
      min-width: 0;
      overflow-wrap: anywhere;
      font-size: 15px;
      font-weight: 750;
      letter-spacing: -0.02em;
      line-height: 1.12;
    }
    .agent-modal-card em {
      width: fit-content;
      color: var(--ink-mute);
      font-family: var(--mono);
      font-size: 10px;
      font-style: normal;
      font-weight: 700;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

    .platform-card {
      display: grid;
      gap: 6px;
      padding: 12px;
      border: 1px solid var(--line-2);
      border-radius: 16px;
      background: rgba(255,255,255,0.76);
      box-shadow: var(--shadow-lg);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
    }
    .platform-kicker {
      padding: 0 4px 5px;
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--ink-mute);
    }
    .platform-card a,
    .platform-card .platform-link,
    .platform-card .soon {
      display: flex;
      align-items: center;
      gap: 9px;
      width: 100%;
      min-height: 34px;
      padding: 0 10px;
      border: 0;
      border-radius: 10px;
      background: transparent;
      color: var(--ink-dim);
      font-size: 13px;
      font-weight: 600;
      font-family: inherit;
      text-align: left;
      cursor: pointer;
    }
    .platform-card .soon {
      color: var(--ink-mute);
      filter: grayscale(1);
      cursor: default;
      user-select: none;
    }
    .platform-card a em,
    .platform-card .platform-link em,
    .platform-card .soon em {
      margin-left: auto;
      padding: 2px 6px;
      border-radius: 999px;
      background: var(--bg-2);
      color: var(--ink-mute);
      border: 1px solid var(--line);
      font-family: var(--mono);
      font-size: 9px;
      font-style: normal;
      font-weight: 500;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }
    .platform-card a em,
    .platform-card .platform-link em {
      background: var(--accent-soft);
      color: var(--accent);
      border-color: rgba(112,88,255,0.16);
    }
    .platform-card a:hover,
    .platform-card .platform-link:hover {
      background: var(--bg-2);
      color: var(--ink);
    }
    .platform-card svg {
      color: #6d5be8;
    }
    .install-command-panel {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px;
      align-items: start;
      padding: 10px;
      border: 1px solid rgba(112,88,255,0.18);
      border-radius: 8px;
      background: rgba(247,246,255,0.82);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.72);
    }
    .install-command-panel code {
      min-width: 0;
      overflow: visible;
      overflow-wrap: anywhere;
      white-space: normal;
      padding: 8px 9px;
      border-radius: 6px;
      background: rgba(255,255,255,0.88);
      color: var(--ink-dim);
      border: 1px solid rgba(112,88,255,0.12);
      font-family: var(--mono);
      font-size: 11px;
      line-height: 1.45;
    }
    .install-command-panel button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      min-height: 38px;
      min-width: 72px;
      border: 1px solid rgba(112,88,255,0.2);
      border-radius: 6px;
      background: #fff;
      color: var(--ink);
      font-family: inherit;
      font-size: 12px;
      font-weight: 800;
      cursor: pointer;
    }
    .install-command-panel button svg {
      color: currentColor;
    }
    .platform-card .install-command-panel {
      grid-template-columns: 1fr;
    }
    .platform-card .install-command-panel button {
      width: 100%;
    }
    @media (max-width: 520px) {
      .install-command-panel {
        grid-template-columns: 1fr;
      }
      .install-command-panel button {
        width: 100%;
      }
    }

    @media (min-width: 1600px) {
      .hero {
        min-height: auto;
        padding-top: 44px;
        padding-bottom: 84px;
      }
      .container {
        max-width: 1720px;
      }
      .nav-inner {
        max-width: 1720px;
      }
      h1.hero-title {
        font-size: clamp(86px, 4.2vw, 112px);
      }
      .hero-sub {
        font-size: 19px;
        margin-top: 4px;
      }
      .hero-scene {
        --hero-panel-height: 390px;
        width: min(1300px, 86vw);
        grid-template-columns: 380px minmax(560px, 700px);
        gap: 96px;
        margin-top: 58px;
        align-items: stretch;
      }
      .platform-stack {
        width: 380px;
        transform: none;
        grid-template-rows: 74px minmax(0, 1fr);
      }
      .agent-rail {
        min-height: 74px;
      }
      .agent-marquee {
        height: 74px;
      }
      .agent-chip {
        height: 46px;
        font-size: 14px;
        padding: 0 12px;
      }
      .agent-mark {
        width: 34px;
        height: 34px;
      }
      .platform-card {
        padding: 18px;
        gap: 10px;
      }
      .feature-showcase {
        height: var(--hero-panel-height);
        grid-template-columns: minmax(0, 1fr) minmax(210px, 0.86fr);
        padding: 30px 30px 56px;
      }
      .feature-plugin-row {
        margin-bottom: 28px;
        font-size: 15px;
      }
      .feature-showcase h2 {
        font-size: 30px;
        min-height: 2.6em;
      }
      .feature-showcase p {
        max-width: 29ch;
        font-size: 17px;
        line-height: 1.22;
        min-height: 3.1em;
      }
      .feature-token-window,
      .feature-mask-window,
      .feature-audit-window,
      .feature-mini-approval {
        max-width: 270px;
      }
      .platform-kicker {
        font-size: 12px;
      }
      .platform-card a,
      .platform-card .platform-link {
        min-height: 44px;
        font-size: 17px;
        gap: 12px;
      }
      .platform-card svg {
        width: 20px;
        height: 20px;
      }
      .gs-wrap {
        max-width: min(1120px, calc((100svh - 300px) * 1.5185));
      }
      .gs-card {
        width: 300px;
        padding: 16px 17px;
      }
      .gs-card-subject {
        font-size: 18px;
      }
      .gs-card-cmd {
        font-size: 14px;
        padding: 9px 12px;
      }
      .gs-card-actions button {
        font-size: 15px;
        padding: 11px;
      }
      .hero-actions .btn {
        min-height: 54px;
        padding: 0 26px;
        font-size: 17px;
      }
      .hero-continuation {
        margin-top: 32px;
      }
      .hero-fine {
        font-size: 13px;
      }
    }

    .hero-actions {
      margin-top: 24px;
      display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
    }

    .btn {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 12px 20px; border-radius: 10px;
      font-size: 14px; font-weight: 500;
      letter-spacing: -0.005em;
      transition: all 0.18s ease;
      border: 1px solid transparent;
      white-space: nowrap;
    }
    .btn-primary {
      background: var(--ink); color: var(--bg);
      box-shadow: 0 2px 0 rgba(255,255,255,0.06) inset, 0 1px 2px rgba(0,0,0,0.06);
    }
    .btn-primary:hover { background: var(--accent); transform: translateY(-1px); box-shadow: var(--shadow-md), 0 0 0 4px var(--accent-soft); }
    .btn-ghost {
      background: var(--surface); color: var(--ink);
      border-color: var(--line-2);
    }
    .btn-ghost:hover { border-color: var(--ink); background: var(--surface); transform: translateY(-1px); }
    .btn .arrow { transition: transform 0.18s; }
    .btn:hover .arrow { transform: translateX(2px); }

    .video-modal {
      position: fixed;
      inset: 0;
      z-index: 100;
      display: grid;
      place-items: center;
      padding: 28px;
      background: rgba(12, 12, 10, 0.54);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }
    .video-modal-panel {
      position: relative;
      width: min(960px, 100%);
      aspect-ratio: 16 / 9;
      border-radius: 12px;
      overflow: hidden;
      background: #050505;
      box-shadow: var(--shadow-xl);
    }
    .video-modal-panel iframe {
      width: 100%;
      height: 100%;
      border: 0;
      display: block;
    }
    .video-modal-close {
      position: absolute;
      top: 10px;
      right: 10px;
      z-index: 2;
      width: 34px;
      height: 34px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.9);
      color: var(--ink);
      font-size: 24px;
      line-height: 1;
      box-shadow: var(--shadow-md);
    }

    .hero-fine {
      margin-top: 14px;
      font-family: var(--mono);
      font-size: 11.5px;
      color: var(--ink-mute);
      letter-spacing: 0.01em;
    }

    /* ─── HERO PRODUCT MOCKUP ──────────────────── */
    .product-stage {
      margin: 64px auto 0;
      position: relative;
      max-width: 1100px;
      padding-bottom: 72px;
    }
    .product-stage::before {
      content: ""; position: absolute;
      left: -10%; right: -10%; top: 15%; bottom: 0;
      background:
        radial-gradient(ellipse 70% 50% at 50% 100%, rgba(91,79,229,0.10) 0%, transparent 70%);
      pointer-events: none; z-index: -1;
      filter: blur(20px);
    }

    .dash {
      background: var(--surface);
      border: 1px solid var(--line-2);
      border-radius: 14px;
      box-shadow:
        0 1px 0 rgba(255,255,255,0.6) inset,
        var(--shadow-xl);
      overflow: hidden;
      position: relative;
    }
    .dash-chrome {
      background: linear-gradient(180deg, #f5f3ed 0%, #ebe9e1 100%);
      border-bottom: 1px solid var(--line);
      padding: 10px 14px;
      display: flex; align-items: center; gap: 12px;
    }
    .dash-chrome .lights { display: flex; gap: 6px; }
    .dash-chrome .lights span {
      width: 11px; height: 11px; border-radius: 50%; background: var(--line-2);
    }
    .dash-chrome .lights span:nth-child(1) { background: #ff5d56; }
    .dash-chrome .lights span:nth-child(2) { background: #ffbd2e; }
    .dash-chrome .lights span:nth-child(3) { background: #27c93f; }
    .dash-chrome .url {
      flex: 1; max-width: 380px; margin: 0 auto;
      background: var(--bg);
      border: 1px solid var(--line);
      border-radius: 6px;
      padding: 5px 12px;
      font-family: var(--mono); font-size: 11.5px;
      color: var(--ink-dim);
      display: flex; align-items: center; gap: 8px;
    }
    .dash-chrome .url::before {
      content: "🔒"; font-size: 10px; opacity: 0.5;
    }
    .dash-chrome .right-spacer { width: 50px; }

    .dash-body {
      display: grid;
      grid-template-columns: 220px 1fr 320px;
      min-height: 540px;
    }
    @media (max-width: 980px) {
      .dash-body { grid-template-columns: 1fr; }
      .dash-side, .dash-detail { display: none; }
    }

    .dash-side {
      border-right: 1px solid var(--line);
      padding: 18px 12px;
      background: #fcfbf6;
      display: flex; flex-direction: column;
      gap: 2px;
    }
    .dash-side .org {
      display: flex; align-items: center; gap: 10px;
      padding: 8px 10px; margin-bottom: 14px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--surface);
    }
    .dash-side .org .avatar {
      width: 24px; height: 24px; border-radius: 6px;
      background: linear-gradient(135deg, var(--accent), var(--accent-2));
      display: flex; align-items: center; justify-content: center;
      color: #fff; font-size: 12px; font-weight: 600;
    }
    .dash-side .org .meta { display: flex; flex-direction: column; line-height: 1.15; }
    .dash-side .org .name { font-size: 13px; font-weight: 500; }
    .dash-side .org .plan { font-size: 10.5px; color: var(--ink-mute); }
    .dash-side .group-label {
      font-family: var(--mono); font-size: 10px;
      letter-spacing: 0.12em; text-transform: uppercase;
      color: var(--ink-mute);
      padding: 12px 10px 6px;
    }
    .dash-side a {
      padding: 7px 10px;
      border-radius: 6px;
      font-size: 13px;
      color: var(--ink-dim);
      display: flex; align-items: center; gap: 10px;
      transition: all 0.12s;
    }
    .dash-side a:hover { background: var(--bg-2); color: var(--ink); }
    .dash-side a.active { background: var(--ink); color: var(--bg); }
    .dash-side a.active .badge { background: var(--accent); color: #fff; }
    .dash-side a .ico {
      width: 14px; height: 14px; opacity: 0.7;
    }
    .dash-side a .badge {
      margin-left: auto;
      font-family: var(--mono); font-size: 10px;
      padding: 2px 6px; border-radius: 999px;
      background: var(--bg-2); color: var(--ink-dim);
    }

    .dash-main {
      padding: 22px 24px;
      display: flex; flex-direction: column;
      gap: 18px;
      min-width: 0;
    }
    .dash-h {
      display: flex; align-items: center; justify-content: space-between;
    }
    .dash-h h2 {
      font-size: 22px; font-weight: 500; letter-spacing: -0.025em;
    }
    .dash-h .filters {
      display: flex; gap: 6px;
    }
    .dash-h .filters .chip {
      font-family: var(--mono); font-size: 11px;
      padding: 4px 9px; border: 1px solid var(--line);
      border-radius: 6px; color: var(--ink-dim);
    }
    .dash-h .filters .chip.active {
      background: var(--ink); color: var(--bg); border-color: var(--ink);
    }

    .activity {
      display: flex; flex-direction: column;
      border: 1px solid var(--line);
      border-radius: 10px;
      overflow: hidden;
      background: var(--surface);
    }
    .activity-row {
      display: grid;
      grid-template-columns: 16px 80px 90px 1fr 90px;
      gap: 14px;
      padding: 12px 16px;
      align-items: center;
      font-size: 13px;
      border-bottom: 1px solid var(--line);
      transition: background 0.15s;
    }
    .activity-row:last-child { border-bottom: none; }
    .activity-row:hover { background: var(--bg-2); }
    .activity-row .dot {
      width: 8px; height: 8px; border-radius: 50%; background: var(--ok);
    }
    .activity-row .who { font-family: var(--mono); font-size: 11.5px; color: var(--ink-dim); }
    .activity-row .tool {
      font-family: var(--mono); font-size: 11px;
      padding: 2px 7px; border-radius: 5px;
      background: var(--bg-2); color: var(--ink-2);
      width: fit-content;
    }
    .activity-row .cmd {
      font-family: var(--mono); font-size: 12px; color: var(--ink);
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      min-width: 0;
    }
    .activity-row .cmd .quiet { color: var(--ink-mute); }
    .activity-row .verdict {
      font-family: var(--mono); font-size: 10.5px;
      padding: 3px 8px; border-radius: 999px;
      letter-spacing: 0.04em;
      text-align: center;
      font-weight: 500;
    }
    .v-allow { background: var(--ok-soft); color: var(--ok); }
    .v-masked { background: var(--accent-soft); color: var(--accent); }
    .v-held { background: var(--danger-soft); color: var(--danger); }
    .activity-row.held {
      background: linear-gradient(90deg, var(--danger-soft) 0%, transparent 60%);
    }
    .activity-row.held .dot {
      background: var(--danger);
      box-shadow: 0 0 0 4px rgba(233,78,58,0.18);
      animation: pulse 2s infinite;
    }
    .activity-row.held .cmd { color: var(--danger); font-weight: 500; }
    @keyframes pulse {
      0%, 100% { box-shadow: 0 0 0 0 rgba(233,78,58,0.5); }
      50% { box-shadow: 0 0 0 8px rgba(233,78,58,0); }
    }

    .dash-stats {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
    }
    .stat {
      padding: 14px 16px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: var(--surface);
    }
    .stat .lbl {
      font-family: var(--mono); font-size: 10.5px;
      color: var(--ink-mute);
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }
    .stat .v {
      font-size: 22px; font-weight: 500; letter-spacing: -0.02em; margin-top: 4px;
    }
    .stat .delta {
      display: inline-block;
      margin-left: 6px;
      font-family: var(--mono); font-size: 11px;
      color: var(--ok);
    }

    .dash-detail {
      border-left: 1px solid var(--line);
      padding: 22px 22px;
      background: linear-gradient(180deg, var(--bg-2) 0%, transparent 30%);
      display: flex; flex-direction: column;
      gap: 16px;
    }
    .detail-tag {
      font-family: var(--mono); font-size: 10px;
      letter-spacing: 0.16em; text-transform: uppercase;
      color: var(--danger);
      display: inline-flex; align-items: center; gap: 6px;
    }
    .detail-tag::before {
      content: ""; width: 6px; height: 6px; background: var(--danger); border-radius: 50%;
      box-shadow: 0 0 0 3px rgba(233,78,58,0.15);
    }
    .detail-h3 { font-size: 18px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.25; }
    .detail-cmd {
      font-family: var(--mono); font-size: 12px;
      background: var(--ink); color: var(--bg);
      padding: 10px 12px; border-radius: 6px;
      word-break: break-all;
    }
    .detail-cmd .red { color: #ff8a78; }
    .detail-meta {
      display: flex; flex-direction: column;
      font-size: 12.5px; gap: 6px;
    }
    .detail-meta .row {
      display: flex; justify-content: space-between;
      padding: 6px 0;
      border-bottom: 1px dashed var(--line);
    }
    .detail-meta .row:last-child { border-bottom: none; }
    .detail-meta .k { color: var(--ink-mute); font-family: var(--mono); font-size: 11px; }
    .detail-meta .v { color: var(--ink); font-weight: 500; }
    .detail-actions {
      margin-top: auto;
      display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    }
    .detail-actions button {
      padding: 10px;
      font-size: 13px; font-weight: 500;
      border-radius: 8px;
      border: 1px solid var(--line-2);
    }
    .detail-actions .deny { background: var(--surface); color: var(--ink); }
    .detail-actions .deny:hover { border-color: var(--danger); color: var(--danger); }
    .detail-actions .approve { background: var(--ink); color: var(--bg); border-color: var(--ink); }
    .detail-actions .approve:hover { background: var(--accent); border-color: var(--accent); }

    /* Floating live activity (above dashboard, mimics iOS dynamic island) */
    .dynamic-island {
      position: absolute;
      top: -32px; right: 24px;
      background: var(--ink); color: #fff;
      border-radius: 999px;
      padding: 8px 16px 8px 12px;
      display: flex; align-items: center; gap: 10px;
      font-size: 12.5px;
      box-shadow: var(--shadow-lg);
      z-index: 4;
      animation: float-in 0.6s ease-out 0.4s backwards;
    }
    @keyframes float-in {
      from { opacity: 0; transform: translateY(-12px); }
      to { opacity: 1; transform: none; }
    }
    .dynamic-island .ico {
      width: 22px; height: 22px;
      border-radius: 50%; background: var(--danger);
      display: flex; align-items: center; justify-content: center;
      font-weight: 600; font-size: 12px; color: #fff;
      flex-shrink: 0;
    }
    .dynamic-island .label { font-family: var(--mono); font-size: 11px; color: rgba(255,255,255,0.6); }
    .dynamic-island strong { font-weight: 500; }

    /* Floating notification */
    .float-notif {
      position: absolute;
      bottom: 24px; right: -16px;
      width: 280px;
      background: var(--surface);
      border: 1px solid var(--line-2);
      border-radius: 14px;
      padding: 14px;
      box-shadow: var(--shadow-lg);
      z-index: 4;
      animation: float-in 0.6s ease-out 0.7s backwards;
    }
    @media (max-width: 1080px) { .float-notif { display: none; } }
    .float-notif .top {
      display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
    }
    .float-notif .top .app-ico {
      width: 22px; height: 22px; border-radius: 5px;
      background: var(--ink);
      display: flex; align-items: center; justify-content: center;
    }
    .float-notif .top .app-ico::after {
      content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
    }
    .float-notif .top .app-name { font-size: 11.5px; font-weight: 600; }
    .float-notif .top .when { margin-left: auto; font-size: 11px; color: var(--ink-mute); font-family: var(--mono); }
    .float-notif .title { font-size: 13.5px; font-weight: 500; margin-bottom: 3px; }
    .float-notif .body { font-size: 12.5px; color: var(--ink-dim); line-height: 1.4; }
    .float-notif .acts { display: flex; gap: 6px; margin-top: 10px; }
    .float-notif .acts button { flex: 1; padding: 8px; font-size: 12px; font-weight: 500; border-radius: 7px; }
    .float-notif .acts .a { background: var(--ink); color: var(--bg); }
    .float-notif .acts .d { background: var(--bg-2); color: var(--ink); border: 1px solid var(--line); }

    /* ═══════════════ TRUST ═══════════════ */
    .trust {
      padding: 48px 0;
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      background: var(--bg-2);
      width: 100vw;
      width: 100dvw;
      margin-left: calc(50% - 50vw);
      margin-left: calc(50% - 50dvw);
    }
    .trust-inner {
      display: flex; align-items: center; justify-content: center;
      gap: 12px; flex-wrap: wrap;
    }
    .trust-label {
      font-family: var(--mono); font-size: 11px;
      letter-spacing: 0.14em; text-transform: uppercase;
      color: var(--ink-mute);
      margin-right: 8px;
    }
    .trust-logos {
      display: flex; align-items: center; gap: 40px; flex-wrap: wrap;
      font-size: 17px; font-weight: 600; letter-spacing: -0.025em;
      color: var(--ink-dim);
    }
    .trust-logos span { opacity: 0.85; transition: opacity 0.15s; }
    .trust-logos span:hover { opacity: 1; color: var(--ink); }

    /* ═══════════════ SECTIONS ═══════════════ */
    section { padding: 100px 0; position: relative; }
    .section-head { text-align: center; max-width: 720px; margin: 0 auto 60px; }
    .section-eyebrow {
      display: inline-block;
      font-family: var(--mono); font-size: 11px;
      letter-spacing: 0.16em; text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 18px;
      padding: 4px 12px;
      background: var(--accent-soft);
      border-radius: 999px;
    }
    .section-head h2 {
      font-size: clamp(36px, 4.8vw, 64px);
      letter-spacing: -0.04em;
      line-height: 1.0;
    }
    .section-head h2 .ital {
      font-family: var(--serif); font-style: italic;
      font-weight: 400; color: var(--ink-dim);
      letter-spacing: -0.02em;
    }
    .section-head p {
      margin-top: 20px;
      font-size: 17.5px;
      color: var(--ink-dim);
      line-height: 1.5;
    }

    /* ═══════════════ BENTO ═══════════════ */
    .bento {
      display: grid;
      grid-template-columns: 1.6fr 1fr 1fr;
      grid-template-rows: auto auto;
      gap: 14px;
    }
    @media (max-width: 980px) { .bento { grid-template-columns: 1fr 1fr; } }
    @media (max-width: 640px)  { .bento { grid-template-columns: 1fr; } }

    .bento-cell {
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 26px;
      overflow: hidden;
      position: relative;
      display: flex; flex-direction: column;
      min-height: 260px;
      transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
    }
    .bento-cell:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-md);
      border-color: var(--line-2);
    }
    .bento-cell h3 { font-size: 22px; font-weight: 500; letter-spacing: -0.025em; }
    .bento-cell p {
      font-size: 14.5px;
      color: var(--ink-dim);
      margin-top: 8px;
      max-width: 38ch;
      line-height: 1.5;
    }
    .bento-cell .tag {
      font-family: var(--mono); font-size: 11px;
      color: var(--accent); letter-spacing: 0.06em;
      text-transform: uppercase;
      margin-bottom: 10px;
    }

    .bento-cell.feature-1 { grid-column: span 2; grid-row: span 1; }
    .bento-cell.feature-2 { grid-column: span 1; grid-row: span 1; }
    .bento-cell.feature-3 { grid-column: span 1; grid-row: span 1; }
    .bento-cell.feature-4 { grid-column: span 1; grid-row: span 1; }
    .bento-cell.feature-5 { grid-column: span 1; grid-row: span 1; }
    @media (max-width: 980px) {
      .bento-cell.feature-1 { grid-column: span 2; }
      .bento-cell { grid-column: span 1; }
    }
    @media (max-width: 640px) { .bento-cell { grid-column: span 1 !important; } }

    /* Bento illustrations */
    .ill-harnesses {
      margin-top: 20px;
      display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
      max-width: 460px;
    }
    .ill-harness {
      display: flex; align-items: center; gap: 10px;
      padding: 10px 12px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--bg);
      font-size: 13px; font-weight: 500;
      transition: all 0.15s;
    }
    .ill-harness:hover { border-color: var(--accent); }
    .ill-harness .live {
      width: 6px; height: 6px; border-radius: 50%; background: var(--ok);
      margin-left: auto;
    }
    .ill-harness .glyph {
      width: 22px; height: 22px; border-radius: 5px;
      display: flex; align-items: center; justify-content: center;
      font-family: var(--mono); font-size: 11px; font-weight: 600; color: #fff;
    }
    .ill-harness .g-claude { background: #c97e3a; }
    .ill-harness .g-cursor { background: #1a1a17; }
    .ill-harness .g-codex { background: #10a37f; }
    .ill-harness .g-gemini { background: linear-gradient(135deg, #4f8aff, #b16cff); }

    .ill-mask {
      margin-top: 18px;
      background: var(--bg);
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 12px 14px;
      font-family: var(--mono); font-size: 12px;
      line-height: 1.75;
      color: var(--ink-2);
    }
    .ill-mask .strike {
      background: var(--ink); color: var(--ink); border-radius: 3px;
      padding: 0 6px;
      letter-spacing: -1px;
    }
    .ill-mask .ok { color: var(--ok); }
    .ill-mask .label {
      font-family: var(--mono); font-size: 10px; color: var(--ink-mute);
      letter-spacing: 0.1em; text-transform: uppercase;
      margin-bottom: 8px;
    }

    .ill-chart {
      margin-top: 18px;
      height: 100px; position: relative;
      display: flex; align-items: flex-end; gap: 4px;
    }
    .ill-chart .bar {
      flex: 1;
      background: linear-gradient(180deg, var(--accent) 0%, var(--accent-soft) 100%);
      border-radius: 3px;
      min-height: 4px;
    }
    .ill-chart .bar.peak {
      background: linear-gradient(180deg, var(--danger) 0%, var(--danger-soft) 100%);
    }

    .ill-policy {
      margin-top: 18px;
      background: var(--ink); color: var(--bg);
      border-radius: 8px;
      padding: 14px 16px;
      font-family: var(--mono); font-size: 12px;
      line-height: 1.7;
    }
    .ill-policy .key { color: #b9f6ca; }
    .ill-policy .str { color: #ffcc80; }
    .ill-policy .com { color: rgba(255,255,255,0.4); }

    .ill-phone {
      margin: 18px auto 0;
      width: 158px;
      background: var(--ink);
      border-radius: 24px;
      padding: 7px;
      box-shadow: var(--shadow-md);
    }
    .ill-phone-screen {
      background: var(--bg);
      border-radius: 18px;
      padding: 14px 10px 16px;
      min-height: 180px;
      position: relative;
    }
    .ill-phone-screen::before {
      content: ""; position: absolute; left: 50%; top: 6px;
      transform: translateX(-50%);
      width: 50px; height: 12px; background: var(--ink); border-radius: 8px;
    }
    .ill-phone-notif {
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 10px;
      margin-top: 18px;
    }
    .ill-phone-notif .t { font-size: 11px; font-weight: 600; margin-bottom: 3px; }
    .ill-phone-notif .b { font-size: 10.5px; color: var(--ink-dim); line-height: 1.35; }
    .ill-phone-notif .a {
      margin-top: 8px;
      display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
    }
    .ill-phone-notif .a button {
      padding: 5px; font-size: 10px; border-radius: 6px;
    }
    .ill-phone-notif .a .approve { background: var(--ink); color: var(--bg); }
    .ill-phone-notif .a .deny { background: var(--bg-2); color: var(--ink-dim); }

    /* ═══════════════ STEPS ═══════════════ */
    .steps {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 14px;
    }
    @media (max-width: 880px) { .steps { grid-template-columns: 1fr; } }
    .step {
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 30px;
      display: flex; flex-direction: column;
      gap: 12px;
      position: relative;
      transition: all 0.25s;
    }
    .step:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-md);
      border-color: var(--line-2);
    }
    .step .num {
      font-family: var(--mono); font-size: 12px;
      color: var(--ink-mute); letter-spacing: 0.06em;
      padding: 4px 10px;
      background: var(--bg-2);
      border-radius: 999px;
      width: fit-content;
    }
    .step h3 {
      font-size: 22px; font-weight: 500; letter-spacing: -0.025em;
      margin-top: 6px;
    }
    .step p { font-size: 14.5px; line-height: 1.55; color: var(--ink-dim); }
    .step .cmd {
      margin-top: 8px;
      padding: 10px 14px;
      background: var(--ink); color: var(--bg);
      border-radius: 8px;
      font-family: var(--mono); font-size: 11.5px;
      display: flex; align-items: center; gap: 8px;
    }
    .step .cmd::before { content: "$"; color: var(--accent); }

    /* ═══════════════ QUOTE ═══════════════ */
    .quote-block {
      padding: 100px 0;
      background: var(--bg-2);
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }
    .quote-inner {
      max-width: 880px; margin: 0 auto; text-align: center;
    }
    .quote-stars {
      color: var(--accent);
      letter-spacing: 0.2em;
      font-size: 16px;
      margin-bottom: 24px;
    }
    .quote-body {
      font-size: clamp(28px, 3.5vw, 42px);
      line-height: 1.2; letter-spacing: -0.025em;
      color: var(--ink); font-weight: 500;
    }
    .quote-body .accent { color: var(--accent); font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.015em; }
    .quote-by {
      margin-top: 28px;
      display: inline-flex; align-items: center; gap: 14px;
    }
    .quote-avatar {
      width: 44px; height: 44px; border-radius: 50%;
      background: linear-gradient(135deg, var(--accent), var(--accent-2));
      display: flex; align-items: center; justify-content: center;
      color: #fff; font-weight: 600;
    }
    .quote-meta { text-align: left; }
    .quote-meta .name { font-size: 14.5px; font-weight: 500; }
    .quote-meta .role { font-size: 12.5px; color: var(--ink-dim); font-family: var(--mono); }

    /* ═══════════════ PRICING ═══════════════ */
    .pricing-tabs {
      width: fit-content;
      margin: -28px auto 30px;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 4px;
      padding: 4px;
      border: 1px solid var(--line-2);
      border-radius: 12px;
      background: rgba(255,255,255,0.78);
      box-shadow: var(--shadow-sm);
    }
    .pricing-tabs button {
      min-width: 118px;
      min-height: 38px;
      padding: 0 14px;
      border-radius: 8px;
      color: var(--ink-dim);
      font-size: 13px;
      font-weight: 600;
    }
    .pricing-tabs button.active {
      background: var(--ink);
      color: var(--bg);
      box-shadow: var(--shadow-sm);
    }
    .pricing {
      display: grid;
      grid-template-columns: 1.05fr 1.05fr 1fr;
      gap: 16px;
      align-items: stretch;
    }
    .pricing.pricing-single {
      max-width: 680px;
      margin: 0 auto;
      grid-template-columns: 1fr;
    }
    .pricing.pricing-duo {
      max-width: 1140px;
      margin: 0 auto;
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    @media (max-width: 1080px) {
      .pricing,
      .pricing.pricing-duo {
        max-width: 680px;
        grid-template-columns: 1fr;
      }
    }
    .pricing-group {
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 24px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      position: relative;
      transition: all 0.25s;
    }
    .pricing-group:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
    .pricing-group.featured {
      border-color: var(--line);
      background:
        radial-gradient(ellipse 80% 60% at 100% 0%, var(--accent-soft) 0%, transparent 50%),
        var(--surface);
    }
    .pricing-group-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
      padding-bottom: 14px;
      border-bottom: 1px solid var(--line);
    }
    .pricing-group .tname {
      font-family: var(--mono); font-size: 11px;
      color: var(--ink-mute); letter-spacing: 0.12em;
      text-transform: uppercase;
    }
    .pricing-group h3 {
      margin-top: 10px;
      font-size: 23px;
      font-weight: 500;
      letter-spacing: -0.03em;
      line-height: 1.05;
    }
    .pricing-chip,
    .plan-tag {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: fit-content;
      border-radius: 999px;
      white-space: nowrap;
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }
    .pricing-chip {
      padding: 5px 9px;
      background: var(--accent-soft);
      color: var(--accent);
      font-weight: 600;
    }
    .pricing-group.featured .pricing-chip {
      background: var(--ink);
      color: var(--bg);
    }
    .pricing-plan {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px 14px;
      align-items: start;
      margin: 2px auto 0;
      padding: 15px 12px;
      border: 1px solid rgba(20,20,18,0.08);
      border-radius: 10px;
      width: min(100%, 630px);
      text-align: left;
      cursor: pointer;
      background: rgba(255,255,255,0.72);
      color: inherit;
      box-shadow: var(--shadow-sm);
      transition: border-color 0.18s, background 0.18s, box-shadow 0.18s, transform 0.18s;
    }
    .pricing-plan:hover {
      background: rgba(255,255,255,0.68);
      border-color: rgba(20,20,18,0.12);
      box-shadow: var(--shadow-sm);
    }
    .pricing-plan:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 3px;
    }
    .pricing-plan.recommended {
      border-color: rgba(20,20,18,0.08);
    }
    .pricing-plan.selected {
      border-color: rgba(112,88,255,0.45);
      background:
        radial-gradient(circle at 100% 0%, rgba(112,88,255,0.13), transparent 42%),
        rgba(255,255,255,0.86);
      box-shadow: 0 0 0 3px rgba(112,88,255,0.1), var(--shadow-sm);
    }
    .pricing-plan h4 {
      font-size: 16px;
      font-weight: 520;
      letter-spacing: -0.02em;
      line-height: 1.15;
      display: flex;
      align-items: center;
      gap: 7px;
      flex-wrap: wrap;
      color: var(--ink-dim);
      transition: color 0.18s, font-weight 0.18s;
    }
    .pricing-plan.selected h4 {
      color: var(--ink);
      font-weight: 700;
    }
    .inline-plan-tag {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 3px 7px;
      border-radius: 999px;
      background: rgba(112,88,255,0.12);
      color: var(--accent);
      font-family: var(--mono);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }
    .inline-plan-tag.common {
      background: var(--ok-soft);
      color: var(--ok);
    }
    .pricing-plan p {
      margin-top: 4px;
      color: var(--ink-dim);
      font-size: 13px;
      line-height: 1.35;
    }
    .pricing-plan p + .plan-tag {
      margin-top: 9px;
    }
    .plan-price {
      color: var(--ink-dim);
      font-size: 18px;
      font-weight: 560;
      letter-spacing: -0.03em;
      text-align: right;
      white-space: nowrap;
      max-width: 15ch;
      transition: color 0.18s, font-weight 0.18s;
    }
    .pricing-plan.selected .plan-price {
      color: var(--ink);
      font-weight: 700;
    }
    .plan-price span {
      margin-left: 3px;
      color: var(--ink-dim);
      font-family: var(--mono);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0;
    }
    .plan-price.stacked-price {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 4px;
    }
    .plan-price.stacked-price small {
      color: var(--ink-mute);
      font-family: var(--mono);
      font-size: 10.5px;
      font-weight: 500;
      letter-spacing: 0;
    }
    .plan-links {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      justify-self: end;
      white-space: nowrap;
    }
    .plan-links a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 30px;
      padding: 0 10px;
      border: 1px solid var(--line-2);
      border-radius: 8px;
      color: var(--ink);
      background: rgba(255,255,255,0.72);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: -0.01em;
    }
    .plan-links a:hover {
      border-color: var(--ink);
      background: var(--bg-2);
    }
    .plan-subprice {
      grid-column: 1 / -1;
      justify-self: end;
      margin-top: -4px;
      color: var(--ink-mute);
      font-family: var(--mono);
      font-size: 11px;
    }
    .plan-tag {
      grid-column: 1 / -1;
      padding: 4px 8px;
      background: var(--bg-2);
      border: 1px solid var(--line);
      color: var(--ink-dim);
    }
    .plan-tag.managed {
      background: var(--ok-soft);
      border-color: rgba(24,165,88,0.18);
      color: var(--ok);
    }
    .pricing-cta {
      margin-top: auto;
      padding: 11px;
      border-radius: 8px;
      width: min(100%, 630px);
      align-self: center;
      text-align: center;
      font-size: 13.5px;
      font-weight: 500;
      transition: all 0.18s;
      border: 1px solid var(--line-2);
      white-space: nowrap;
    }
    .pricing-cta:hover { border-color: var(--ink); background: var(--bg-2); }
    .pricing-cta.primary {
      background: var(--ink);
      color: var(--bg);
      border-color: var(--ink);
    }
    .pricing-cta.primary:hover { background: var(--accent); border-color: var(--accent); }
    .pricing-note {
      max-width: 780px;
      margin: 22px auto 0;
      text-align: center;
      color: var(--ink-dim);
      font-size: 13px;
      line-height: 1.5;
    }
    @media (max-width: 600px) {
      .pricing-tabs {
        width: 100%;
        grid-template-columns: 1fr;
      }
      .pricing-tabs button {
        width: 100%;
      }
      .pricing-group { padding: 20px; }
      .pricing-group-head { flex-direction: column; }
      .pricing-plan { grid-template-columns: 1fr; }
      .plan-price { text-align: left; }
      .plan-subprice { justify-self: start; }
    }

    /* ═══════════════ CTA ═══════════════ */
    .cta-block {
      padding: 130px 0;
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    .cta-block::before {
      content: ""; position: absolute; inset: 0;
      background:
        radial-gradient(ellipse 60% 60% at 50% 50%, var(--accent-soft) 0%, transparent 60%);
      pointer-events: none;
    }
    .cta-block h2 {
      font-size: clamp(44px, 7vw, 92px);
      letter-spacing: -0.04em;
      line-height: 0.95;
      max-width: 18ch;
      margin: 0 auto;
      position: relative;
    }
    .cta-block h2 .accent { color: var(--accent); font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.02em; }
    .cta-block p {
      margin-top: 24px; font-size: 18px;
      max-width: 50ch; margin-left: auto; margin-right: auto;
      position: relative;
    }
    .cta-block .row {
      margin-top: 36px;
      display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
      position: relative;
    }

    /* ═══════════════ FOOTER ═══════════════ */
    footer {
      padding: 64px 0 32px;
      border-top: 1px solid var(--line);
      background: var(--bg-2);
    }
    .foot {
      display: grid;
      grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
      gap: 36px;
    }
    @media (max-width: 880px) { .foot { grid-template-columns: 1fr 1fr; } }
    .foot .col h4 {
      font-family: var(--mono); font-size: 11px;
      letter-spacing: 0.12em; text-transform: uppercase;
      color: var(--ink-mute);
      margin-bottom: 14px;
      font-weight: 500;
    }
    .foot .col a {
      display: block;
      font-size: 13.5px; color: var(--ink-dim);
      margin-bottom: 8px;
      transition: color 0.15s;
    }
    .foot .col a:hover { color: var(--ink); }
    .foot-imprint {
      font-size: 13.5px; color: var(--ink-dim); line-height: 1.5;
      max-width: 280px; margin-top: 14px;
    }
    .foot-bottom {
      margin-top: 48px; padding-top: 22px;
      border-top: 1px solid var(--line);
      display: flex; justify-content: space-between;
      flex-wrap: wrap; gap: 12px;
      font-family: var(--mono); font-size: 11.5px; color: var(--ink-mute);
    }
    .foot-legal-links {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
    }
    .foot-legal-links a:hover { color: var(--ink); }

    /* ═══════════════ FLOW DIAGRAM ═══════════════ */
    .flow {
      position: relative;
      max-width: 1180px;
      margin: 64px auto 0;
      padding: 0 0 40px;
      height: 580px;
      display: grid;
      grid-template-columns: 200px 1fr 340px;
      gap: 0;
    }
    @media (max-width: 1100px) {
      .flow { grid-template-columns: 180px 1fr 300px; height: 540px; }
    }
    @media (max-width: 880px) {
      .flow {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        height: auto;
        gap: 24px;
      }
      .flow-center { min-height: 320px; }
    }
    .flow::before {
      content: ""; position: absolute;
      left: -10%; right: -10%; top: 10%; bottom: 0;
      background: radial-gradient(ellipse 70% 50% at 50% 50%, rgba(91,79,229,0.10) 0%, transparent 70%);
      filter: blur(24px);
      pointer-events: none; z-index: 0;
    }

    /* LEFT - agents, evenly spread */
    .flow-left {
      display: flex; flex-direction: column; gap: 11px;
      padding: 0;
      position: relative; z-index: 2;
      justify-content: center;
    }
    .flow-agent {
      display: flex; align-items: center; gap: 11px;
      padding: 9px 12px;
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: 11px;
      font-size: 12.5px;
      box-shadow: var(--shadow-sm);
      position: relative;
    }
    .flow-agent::after {
      content: ""; position: absolute; right: -7px; top: 50%;
      width: 7px; height: 7px; border-radius: 50%;
      background: var(--accent);
      box-shadow: 0 0 8px var(--accent);
      transform: translateY(-50%) scale(0);
      animation: agent-emit 5.6s ease-in-out infinite;
    }
    .flow-agent:nth-child(1)::after { animation-delay: 0.0s; }
    .flow-agent:nth-child(2)::after { animation-delay: 0.7s; }
    .flow-agent:nth-child(3)::after { animation-delay: 1.4s; }
    .flow-agent:nth-child(4)::after { animation-delay: 2.1s; }
    .flow-agent:nth-child(5)::after { animation-delay: 2.8s; }
    .flow-agent:nth-child(6)::after { animation-delay: 3.5s; }
    .flow-agent:nth-child(7)::after { animation-delay: 4.2s; }
    @keyframes agent-emit {
      0%, 100% { transform: translateY(-50%) scale(0); opacity: 0; }
      5% { transform: translateY(-50%) scale(1); opacity: 1; }
      16% { transform: translateY(-50%) scale(0.5); opacity: 0; }
    }
    .flow-agent .ico {
      width: 26px; height: 26px; border-radius: 7px;
      display: flex; align-items: center; justify-content: center;
      background: #fff; border: 1px solid var(--line);
      flex-shrink: 0;
    }
    .flow-agent .name { font-weight: 500; white-space: nowrap; }
    .flow-agent .live {
      margin-left: auto;
      width: 6px; height: 6px; border-radius: 50%; background: var(--ok);
      animation: live-pulse 1.8s infinite;
    }
    @keyframes live-pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.35; }
    }

    /* CENTER - Leash core */
    .flow-center { position: relative; overflow: visible; z-index: 1; }
    .flow-hub {
      position: absolute; left: 50%; top: 50%;
      transform: translate(-50%, -50%); z-index: 5;
    }
    .flow-hub-mark {
      position: absolute; bottom: calc(100% + 28px); left: 50%;
      transform: translateX(-50%);
      display: flex; flex-direction: column; align-items: center; gap: 3px;
      white-space: nowrap;
    }
    .flow-hub-mark .wm { font-weight: 600; font-size: 14px; letter-spacing: -0.02em; color: var(--ink); }
    .flow-hub-mark .tp {
      font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em;
      text-transform: uppercase; color: var(--ink-mute);
    }
    .flow-hub-mark .tp b { color: var(--accent); font-weight: 600; }

    .flow-hub-core {
      width: 132px; height: 132px;
      border-radius: 34px;
      background: radial-gradient(circle at 34% 26%, #322c63 0%, #14132b 52%, #0a0a14 100%);
      display: flex; align-items: center; justify-content: center;
      position: relative; overflow: hidden;
      box-shadow:
        0 30px 70px -18px rgba(91,79,229,0.55),
        inset 0 1px 0 rgba(255,255,255,0.14),
        0 0 0 1px rgba(255,255,255,0.05);
      animation: hub-breathe 4.5s ease-in-out infinite;
    }
    @keyframes hub-breathe {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.035); }
    }
    .flow-hub-core::before {
      content: ""; position: absolute; inset: -25%;
      background: conic-gradient(from 0deg,
        rgba(124,108,255,0) 0deg,
        rgba(124,108,255,0) 255deg,
        rgba(124,108,255,0.55) 340deg,
        rgba(124,108,255,0) 360deg);
      animation: hub-rotate 3.4s linear infinite;
    }
    .flow-hub-core::after {
      content: ""; position: absolute; inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
      background-size: 15px 15px;
      -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 28%, transparent 72%);
      mask-image: radial-gradient(circle at 50% 50%, #000 28%, transparent 72%);
    }
    @keyframes hub-rotate { from { transform: rotate(0); } to { transform: rotate(360deg); } }
    .flow-hub-logo {
      position: relative; z-index: 2;
      display: flex; align-items: center; justify-content: center;
      filter: drop-shadow(0 2px 10px rgba(124,108,255,0.7));
    }
    .flow-hub-label {
      position: absolute;
      top: calc(100% + 14px); left: 50%; transform: translateX(-50%);
      font-family: var(--mono); font-size: 10px;
      letter-spacing: 0.14em; text-transform: uppercase;
      color: var(--ink-mute);
      white-space: nowrap;
      display: inline-flex; align-items: center; gap: 6px;
    }
    .flow-hub-label::before {
      content: ""; width: 5px; height: 5px; border-radius: 50%;
      background: var(--accent);
      animation: live-pulse 1.4s infinite;
    }
    .flow-hub-ring {
      position: absolute; left: 50%; top: 50%;
      transform: translate(-50%, -50%);
      border: 1px solid var(--accent);
      border-radius: 42px;
      width: 132px; height: 132px;
      opacity: 0;
      animation: ring-expand 3.2s ease-out infinite;
    }
    .flow-hub-ring:nth-child(2) { animation-delay: 1.05s; }
    .flow-hub-ring:nth-child(3) { animation-delay: 2.1s; }
    @keyframes ring-expand {
      0%   { width: 132px; height: 132px; opacity: 0.4; }
      100% { width: 340px; height: 340px; opacity: 0; }
    }
    .flow-hub-orbit {
      position: absolute; left: 50%; top: 50%;
      width: 188px; height: 188px; margin: -94px 0 0 -94px;
      animation: hub-rotate 13s linear infinite;
      pointer-events: none; z-index: 4;
    }
    .flow-hub-orbit span {
      position: absolute; top: -3px; left: 50%; margin-left: -3px;
      width: 7px; height: 7px; border-radius: 50%;
      background: var(--accent-2); box-shadow: 0 0 9px var(--accent-2);
    }
    .flow-hub-orbit span:nth-child(2) {
      top: auto; bottom: -3px;
      background: var(--accent); box-shadow: 0 0 9px var(--accent);
    }
    /* watchdog sentinel */
    .flow-sentinel {
      position: absolute; left: -4%; bottom: 2%;
      z-index: 6;
      animation: sentinel-bob 3.4s ease-in-out infinite;
      filter: drop-shadow(0 8px 14px rgba(12,12,10,0.18));
    }
    @keyframes sentinel-bob {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-7px); }
    }
    .flow-sentinel .eye {
      transform-box: fill-box; transform-origin: center;
      animation: sentinel-blink 4.2s infinite;
    }
    @keyframes sentinel-blink {
      0%, 93%, 100% { transform: scaleY(1); }
      96% { transform: scaleY(0.12); }
    }

    /* Chips - input (left→core) and output (core→right) */
    .flow-chip {
      position: absolute;
      display: inline-flex; align-items: center; gap: 6px;
      padding: 5px 11px;
      background: var(--surface);
      border: 1px solid var(--line-2);
      border-radius: 999px;
      font-family: var(--mono); font-size: 11px;
      white-space: nowrap;
      box-shadow: var(--shadow-sm);
      opacity: 0;
      z-index: 3;
    }
    .flow-chip::before {
      content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--ink-mute);
      flex-shrink: 0;
    }
    .flow-chip.in {
      color: var(--ink-dim);
      animation: chip-in var(--dur, 3s) linear infinite;
      animation-delay: var(--delay, 0s);
    }
    @keyframes chip-in {
      0%   { left: -12%; top: var(--y); opacity: 0; transform: scale(0.9); }
      14%  { opacity: 1; transform: scale(1); }
      74%  { left: 40%; top: 50%; opacity: 1; transform: scale(0.94); }
      90%  { left: 46%; top: 50%; opacity: 0; transform: scale(0.5); }
      100% { left: 46%; top: 50%; opacity: 0; }
    }
    .flow-chip.out {
      font-weight: 500;
      animation: chip-out var(--dur, 1.8s) cubic-bezier(.25,.6,.2,1) infinite;
      animation-delay: var(--delay, 0s);
    }
    .flow-chip.held { border-color: rgba(233,78,58,0.5); color: var(--danger); background: var(--danger-soft); }
    .flow-chip.held::before { background: var(--danger); }
    .flow-chip.mask { border-color: rgba(91,79,229,0.5); color: var(--accent); background: var(--accent-soft); }
    .flow-chip.mask::before { background: var(--accent); }
    .flow-chip.allow { border-color: rgba(24,165,88,0.5); color: var(--ok); background: var(--ok-soft); }
    .flow-chip.allow::before { background: var(--ok); }
    @keyframes chip-out {
      0%   { left: 44%; top: 50%; opacity: 0; transform: scale(0.4); }
      16%  { left: 50%; top: 50%; opacity: 1; transform: scale(1); }
      100% { left: 118%; top: var(--ty); opacity: 0; transform: scale(0.92); }
    }

    .flow-mark-input {
      position: absolute; left: 12px; top: 14px;
      font-family: var(--mono); font-size: 10px;
      letter-spacing: 0.14em; text-transform: uppercase;
      color: var(--ink-mute); z-index: 2;
    }
    .flow-mark-output-top {
      position: absolute; right: 12px; top: 14px;
      font-family: var(--mono); font-size: 10px;
      letter-spacing: 0.14em; text-transform: uppercase;
      color: var(--danger); z-index: 2;
      display: inline-flex; align-items: center; gap: 6px;
    }
    .flow-mark-output-top::before {
      content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--danger);
    }
    .flow-mark-output-bot {
      position: absolute; right: 12px; bottom: 14px;
      font-family: var(--mono); font-size: 10px;
      letter-spacing: 0.14em; text-transform: uppercase;
      color: var(--ok); z-index: 2;
      display: inline-flex; align-items: center; gap: 6px;
    }
    .flow-mark-output-bot::before {
      content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--ok);
    }

    /* RIGHT - approval card + live decision feed */
    .flow-right {
      position: relative;
      padding: 0;
      display: flex; flex-direction: column;
      gap: 12px;
      justify-content: center;
      z-index: 4;
    }
    .approval-desktop {
      background: var(--surface);
      border: 1px solid var(--line-2);
      border-radius: 12px;
      overflow: hidden;
      box-shadow: var(--shadow-lg);
      animation: card-bump 6s ease infinite;
    }
    @keyframes card-bump {
      0%, 26%, 100% { transform: translateY(0); }
      12%, 16% { transform: translateY(-3px); box-shadow: var(--shadow-xl); }
    }
    .approval-desktop .chrome {
      background: var(--bg-2);
      padding: 8px 12px;
      border-bottom: 1px solid var(--line);
      display: flex; align-items: center; gap: 8px;
      font-family: var(--mono); font-size: 11px; color: var(--ink-mute);
    }
    .approval-desktop .chrome .lights { display: flex; gap: 5px; }
    .approval-desktop .chrome .lights span {
      width: 9px; height: 9px; border-radius: 50%; background: var(--line-2);
    }
    .approval-desktop .chrome .agent-mini {
      margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--ink-dim);
    }
    .approval-desktop .chrome .agent-mini .mi {
      width: 17px; height: 17px; border-radius: 4px; background: #fff; border: 1px solid var(--line);
      display: flex; align-items: center; justify-content: center;
    }
    .approval-desktop .body { padding: 16px 18px; }
    .approval-desktop .tag {
      font-family: var(--mono); font-size: 10px;
      letter-spacing: 0.14em; text-transform: uppercase;
      color: var(--danger);
      display: inline-flex; align-items: center; gap: 6px;
      margin-bottom: 12px;
    }
    .approval-desktop .tag::before {
      content: ""; width: 6px; height: 6px; background: var(--danger); border-radius: 50%;
      box-shadow: 0 0 0 3px rgba(233,78,58,0.18);
      animation: live-pulse 1.4s infinite;
    }
    .approval-desktop .subject {
      font-size: 16px; font-weight: 500;
      letter-spacing: -0.02em; line-height: 1.3;
      margin-bottom: 10px; min-height: 42px;
    }
    .approval-desktop .cmd {
      font-family: var(--mono); font-size: 11.5px;
      background: var(--ink); color: var(--bg);
      padding: 8px 12px; border-radius: 6px; margin-bottom: 14px;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .approval-desktop .cmd .red { color: #ff8a78; }
    .approval-desktop .actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .approval-desktop .actions button {
      padding: 10px; font-size: 12.5px; font-weight: 600;
      border-radius: 8px; border: 1px solid transparent;
      letter-spacing: -0.005em;
    }
    .approval-desktop .actions .deny {
      background: var(--danger-soft); color: var(--danger);
      border-color: rgba(233,78,58,0.22);
    }
    .approval-desktop .actions .deny:hover { background: var(--danger); color: #fff; }
    .approval-desktop .actions .approve {
      background: var(--ok); color: #fff;
      box-shadow: 0 2px 10px -2px rgba(24,165,88,0.55);
    }
    .approval-desktop .actions .approve:hover { filter: brightness(1.06); }

    /* live decision feed */
    .feed {
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: 12px;
      box-shadow: var(--shadow-md);
      overflow: hidden;
    }
    .feed-head {
      display: flex; align-items: center; gap: 8px;
      padding: 9px 12px; border-bottom: 1px solid var(--line);
      font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
      text-transform: uppercase; color: var(--ink-mute);
    }
    .feed-head .live-dot {
      width: 6px; height: 6px; border-radius: 50%; background: var(--ok);
      animation: live-pulse 1.4s infinite;
    }
    .feed-head .cnt { margin-left: auto; color: var(--ink-dim); }
    .feed-list { display: flex; flex-direction: column; }
    .feed-item {
      display: grid; grid-template-columns: 22px 1fr auto; gap: 9px;
      align-items: center;
      padding: 8px 12px;
      border-bottom: 1px solid var(--line);
      animation: feed-in 0.45s ease;
    }
    .feed-item:last-child { border-bottom: none; }
    @keyframes feed-in {
      from { opacity: 0; transform: translateY(-10px); }
      to { opacity: 1; transform: none; }
    }
    .feed-item .fi {
      width: 22px; height: 22px; border-radius: 5px; background: #fff;
      border: 1px solid var(--line);
      display: flex; align-items: center; justify-content: center;
    }
    .feed-item .ft {
      color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      font-family: var(--mono); font-size: 11px;
    }
    .feed-item .fv {
      font-family: var(--mono); font-size: 9px; font-weight: 600;
      padding: 2px 7px; border-radius: 999px; letter-spacing: 0.04em;
    }
    .fv-held { background: var(--danger-soft); color: var(--danger); }
    .fv-blocked { background: var(--danger-soft); color: var(--danger); }
    .fv-masked { background: var(--accent-soft); color: var(--accent); }
    .fv-allowed { background: var(--ok-soft); color: var(--ok); }

    /* ═══════════════ RULES SECTION ═══════════════ */
    .rules-section { padding: 60px 0 100px; }
    .rules-section .section-head { margin-bottom: 40px; text-align: left; max-width: 880px; }
    .rules-section .section-head h2 { max-width: none; }
    .rules-head-row {
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: end;
      gap: 24px;
    }
    .rules-mode-toggle {
      display: inline-grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 4px;
      padding: 4px;
      border: 1px solid var(--line-2);
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.78);
      box-shadow: var(--shadow-sm);
    }
    .rules-mode-toggle button {
      min-width: 96px;
      min-height: 38px;
      padding: 0 14px;
      border-radius: 8px;
      color: var(--ink-dim);
      font-size: 13px;
      font-weight: 600;
    }
    .rules-mode-toggle button.active {
      background: var(--ink);
      color: var(--bg);
      box-shadow: var(--shadow-sm);
    }
    .rules-dash {
      margin-top: 22px;
      background: var(--surface);
      border: 1px solid var(--line-2);
      border-radius: 14px;
      overflow: hidden;
      box-shadow: var(--shadow-lg);
    }
    .rules-dash .chrome {
      background: linear-gradient(180deg, #f5f3ed 0%, #ebe9e1 100%);
      border-bottom: 1px solid var(--line);
      padding: 10px 14px;
      display: flex; align-items: center; gap: 12px;
    }
    .rules-dash .chrome .lights { display: flex; gap: 6px; }
    .rules-dash .chrome .lights span {
      width: 11px; height: 11px; border-radius: 50%; background: var(--line-2);
    }
    .rules-dash .chrome .lights span:nth-child(1) { background: #ff5d56; }
    .rules-dash .chrome .lights span:nth-child(2) { background: #ffbd2e; }
    .rules-dash .chrome .lights span:nth-child(3) { background: #27c93f; }
    .rules-dash .chrome .url {
      flex: 1; max-width: 380px; margin: 0 auto;
      background: var(--bg);
      border: 1px solid var(--line);
      border-radius: 6px;
      padding: 5px 12px;
      font-family: var(--mono); font-size: 11.5px;
      color: var(--ink-dim);
      display: flex; align-items: center; gap: 8px;
    }
    .rules-dash .chrome .url::before { content: "🔒"; font-size: 10px; opacity: 0.5; }
    .rules-dash.personal-surface {
      max-width: 1080px;
      margin-left: auto;
      margin-right: auto;
    }
    .rules-dash.personal-surface .chrome .url {
      max-width: 260px;
      justify-content: center;
      font-weight: 600;
      color: var(--ink);
    }
    .rules-dash.personal-surface .chrome .url::before { content: ""; display: none; }
    .rules-body {
      display: grid;
      grid-template-columns: 220px 1fr 340px;
      min-height: 580px;
    }
    .personal-surface .rules-body {
      grid-template-columns: minmax(0, 1fr);
      min-height: auto;
    }
    .personal-surface .rules-main {
      padding: 24px;
    }
    .personal-surface .rules-list {
      max-height: 390px;
      overflow: auto;
    }
    .work-agents-body {
      display: grid;
      grid-template-columns: 230px minmax(0, 1fr);
      min-height: 580px;
      background: #fff;
    }
    .work-agents-side {
      border-right: 1px solid var(--line);
      padding: 26px 14px;
      background: #fcfbf6;
      display: flex;
      flex-direction: column;
      gap: 28px;
    }
    .work-agents-brand {
      display: flex;
      align-items: center;
      gap: 11px;
      padding: 0 12px;
      color: var(--ink);
      font-size: 22px;
      font-weight: 700;
      letter-spacing: -0.035em;
    }
    .work-agents-brand img {
      width: 28px;
      height: 28px;
      object-fit: contain;
    }
    .work-agents-side nav {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .work-agents-side a {
      min-height: 42px;
      padding: 0 12px;
      border-radius: 10px;
      color: var(--ink-dim);
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 14px;
      font-weight: 650;
      letter-spacing: -0.015em;
    }
    .work-agents-side a.active {
      background: var(--bg-2);
      color: var(--ink);
    }
    .work-agents-side a .ico {
      width: 17px;
      height: 17px;
      flex-shrink: 0;
    }
    .work-agents-side a strong {
      margin-left: auto;
      min-width: 20px;
      height: 20px;
      padding: 0 6px;
      border-radius: 999px;
      background: var(--ink);
      color: #fff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-family: var(--mono);
      font-size: 10px;
      font-weight: 700;
    }
    .work-agents-main {
      padding: 58px 44px;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 22px;
    }
    .work-agents-head {
      padding-bottom: 22px;
      border-bottom: 1px solid var(--line);
    }
    .work-agents-head h2 {
      margin: 0 0 6px;
      font-size: clamp(34px, 3.8vw, 48px);
      font-weight: 760;
      letter-spacing: -0.055em;
      line-height: 0.95;
    }
    .work-agents-head p {
      color: var(--ink-mute);
      font-size: 15.5px;
    }
    .work-summary-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
    }
    .work-summary-card {
      min-height: 108px;
      padding: 16px 16px 14px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background:
        radial-gradient(circle at 100% 0%, rgba(91, 79, 229, 0.08), transparent 48%),
        #fff;
      box-shadow: var(--shadow-sm);
    }
    .work-summary-card span {
      display: block;
      color: var(--ink-mute);
      font-family: var(--mono);
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }
    .work-summary-card strong {
      display: block;
      margin-top: 10px;
      color: var(--ink);
      font-size: 30px;
      font-weight: 760;
      letter-spacing: -0.055em;
      line-height: 1;
    }
    .work-summary-card p {
      margin-top: 8px;
      color: var(--ink-dim);
      font-size: 12px;
      font-weight: 650;
      line-height: 1.3;
    }
    .work-agent-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 16px;
    }
    .work-agent-card {
      min-height: 214px;
      padding: 22px 22px 24px;
      border: 1px solid transparent;
      border-radius: 16px;
      background: var(--bg-2);
      display: flex;
      flex-direction: column;
      gap: 18px;
    }
    .work-agent-card.selected {
      border-color: rgba(91, 79, 229, 0.36);
      background: #fff;
      box-shadow: 0 18px 54px rgba(30, 28, 20, 0.08);
    }
    .work-agent-top {
      display: flex;
      align-items: center;
      gap: 13px;
    }
    .work-agent-icon {
      width: 50px;
      height: 50px;
      border: 1px solid var(--line);
      border-radius: 11px;
      background: #fff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .work-agent-icon img {
      width: 28px;
      height: 28px;
      object-fit: contain;
    }
    .work-agent-top h3 {
      margin: 0;
      font-size: 19px;
      font-weight: 760;
      letter-spacing: -0.035em;
      line-height: 1;
    }
    .work-agent-top p {
      margin-top: 4px;
      color: var(--ink-mute);
      font-family: var(--mono);
      font-size: 12px;
      font-weight: 650;
    }
    .work-agent-metrics {
      display: flex;
      gap: 32px;
      margin-top: 2px;
    }
    .work-agent-metrics strong {
      display: block;
      color: var(--ink);
      font-size: 25px;
      font-weight: 760;
      letter-spacing: -0.04em;
      line-height: 1;
    }
    .work-agent-metrics span {
      display: block;
      margin-top: 4px;
      color: var(--ink-mute);
      font-size: 12px;
      font-weight: 650;
    }
    .work-agent-note {
      color: var(--ink-mute);
      font-size: 12px;
      font-weight: 650;
      line-height: 1.35;
      min-height: 16px;
    }
    .work-agent-status {
      margin-top: auto;
      height: 28px;
      border-radius: 999px;
      background: var(--ok-soft);
      color: #057a54;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 0 12px;
      font-size: 13px;
      font-weight: 760;
    }
    .work-agent-status span {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #21bf86;
    }
    .work-users-card {
      border: 1px solid var(--line);
      border-radius: 16px;
      background: #fff;
      overflow: hidden;
      box-shadow: 0 18px 54px rgba(30, 28, 20, 0.07);
    }
    .work-users-head {
      padding: 24px 24px 14px;
    }
    .work-users-head h3 {
      margin: 0;
      color: var(--ink);
      font-size: 25px;
      font-weight: 760;
      letter-spacing: -0.045em;
      line-height: 1;
    }
    .work-users-head p {
      margin-top: 7px;
      color: var(--ink-mute);
      font-size: 14px;
      font-weight: 650;
    }
    .work-user-row {
      margin: 0 24px 24px;
      padding: 14px;
      border-radius: 14px;
      background: var(--bg-2);
      display: flex;
      align-items: center;
      gap: 13px;
    }
    .work-user-avatar {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: #dfe7ff;
      color: #355bd6;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-family: var(--mono);
      font-size: 13px;
      font-weight: 700;
      flex-shrink: 0;
    }
    .work-user-row strong {
      display: block;
      color: var(--ink);
      font-size: 15px;
      font-weight: 760;
      letter-spacing: -0.02em;
    }
    .work-user-row p {
      margin-top: 3px;
      color: var(--ink-mute);
      font-family: var(--mono);
      font-size: 11.5px;
      font-weight: 650;
    }
    .rules-side {
      border-right: 1px solid var(--line);
      padding: 18px 12px;
      background: #fcfbf6;
      display: flex; flex-direction: column;
      gap: 2px;
    }
    .rules-side .org {
      display: flex; align-items: center; gap: 10px;
      padding: 8px 10px; margin-bottom: 14px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--surface);
    }
    .rules-side .org .avatar {
      width: 24px; height: 24px; border-radius: 6px;
      background: linear-gradient(135deg, var(--accent), var(--accent-2));
      display: flex; align-items: center; justify-content: center;
      color: #fff; font-size: 12px; font-weight: 600;
    }
    .rules-side .org .meta { display: flex; flex-direction: column; line-height: 1.15; }
    .rules-side .org .name { font-size: 13px; font-weight: 500; }
    .rules-side .org .plan { font-size: 10.5px; color: var(--ink-mute); }
    .rules-side .group-label {
      font-family: var(--mono); font-size: 10px;
      letter-spacing: 0.12em; text-transform: uppercase;
      color: var(--ink-mute);
      padding: 12px 10px 6px;
    }
    .rules-side a {
      padding: 7px 10px;
      border-radius: 6px;
      font-size: 13px;
      color: var(--ink-dim);
      display: flex; align-items: center; gap: 10px;
      transition: all 0.12s;
    }
    .rules-side a:hover { background: var(--bg-2); color: var(--ink); }
    .rules-side a.active { background: var(--ink); color: var(--bg); }
    .rules-side a.active .badge { background: var(--accent); color: #fff; }
    .rules-side a .ico { width: 14px; height: 14px; opacity: 0.7; flex-shrink: 0; }
    .rules-side a .badge {
      margin-left: auto;
      font-family: var(--mono); font-size: 10px;
      padding: 2px 6px; border-radius: 999px;
      background: var(--bg-2); color: var(--ink-dim);
    }
    .rules-main {
      padding: 22px 24px;
      display: flex; flex-direction: column;
      gap: 16px;
      min-width: 0;
    }
    .rules-main .h {
      display: flex; align-items: center; justify-content: space-between;
    }
    .rules-main .h h2 {
      font-size: 22px; font-weight: 500; letter-spacing: -0.025em;
    }
    .rules-main .h .new-rule {
      padding: 6px 12px;
      background: var(--ink); color: var(--bg);
      font-size: 12px; font-weight: 500;
      border-radius: 7px;
      display: inline-flex; align-items: center; gap: 6px;
    }
    .rules-search { display: flex; gap: 8px; }
    .rules-search input {
      flex: 1;
      padding: 7px 12px;
      border: 1px solid var(--line);
      border-radius: 7px;
      font-family: var(--sans); font-size: 12.5px;
      background: var(--bg);
      color: var(--ink-dim);
    }
    .rules-search input::placeholder { color: var(--ink-mute); }
    .rules-search .chip {
      padding: 6px 11px;
      font-family: var(--mono); font-size: 11px;
      border: 1px solid var(--line);
      border-radius: 7px;
      color: var(--ink-dim);
      background: var(--bg);
    }
    .rules-search .chip.active {
      background: var(--ink); color: var(--bg); border-color: var(--ink);
    }
    .rules-list {
      display: flex; flex-direction: column;
      border: 1px solid var(--line);
      border-radius: 10px;
      overflow: hidden;
      background: var(--surface);
    }
    .rule-row {
      display: grid;
      grid-template-columns: 24px 1fr 100px 90px 32px;
      gap: 14px;
      padding: 14px 16px;
      align-items: center;
      font-size: 13px;
      border-bottom: 1px solid var(--line);
      cursor: pointer;
      transition: background 0.15s;
    }
    .rule-row:last-child { border-bottom: none; }
    .rule-row:hover { background: var(--bg-2); }
    .rule-row.active {
      background: var(--accent-soft);
      border-left: 3px solid var(--accent);
      padding-left: 13px;
    }
    .rule-row .switch {
      width: 24px; height: 14px; border-radius: 999px;
      background: var(--ok);
      position: relative;
      flex-shrink: 0;
    }
    .rule-row .switch::after {
      content: ""; position: absolute;
      right: 1.5px; top: 1.5px;
      width: 11px; height: 11px; border-radius: 50%;
      background: #fff;
    }
    .rule-row .switch.off { background: var(--line-2); }
    .rule-row .switch.off::after { left: 1.5px; right: auto; }
    .rule-row .info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .rule-row .info .name {
      font-size: 13.5px; font-weight: 500; color: var(--ink);
      letter-spacing: -0.015em;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .rule-row .info .desc {
      font-size: 11.5px; color: var(--ink-mute);
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .rule-row .action {
      font-family: var(--mono); font-size: 10.5px;
      padding: 3px 8px; border-radius: 5px;
      letter-spacing: 0.04em;
      text-align: center;
      font-weight: 500;
    }
    .a-block { background: var(--danger-soft); color: var(--danger); }
    .a-approve { background: rgba(255,180,77,0.15); color: #c47b1a; }
    .a-mask { background: var(--accent-soft); color: var(--accent); }
    .rule-row .trig {
      font-family: var(--mono); font-size: 11px;
      color: var(--ink-dim);
      text-align: right;
    }
    .rule-row .trig .num { color: var(--ink); font-weight: 500; }
    .rule-row .more {
      color: var(--ink-mute);
      font-family: var(--mono);
      font-size: 14px;
      text-align: center;
    }
    .rules-stats {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
    }
    .rules-stat {
      padding: 12px 14px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: var(--surface);
    }
    .rules-stat .lbl {
      font-family: var(--mono); font-size: 10.5px;
      color: var(--ink-mute); letter-spacing: 0.06em;
      text-transform: uppercase;
    }
    .rules-stat .v {
      font-size: 20px; font-weight: 500; letter-spacing: -0.02em; margin-top: 4px;
    }
    .rules-stat .v .delta {
      font-family: var(--mono); font-size: 10.5px; color: var(--ok); margin-left: 4px;
    }
    .rules-feature-cards {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
      margin-top: -6px;
      margin-bottom: 18px;
    }
    .rules-feature-card {
      min-height: 172px;
      padding: 22px 24px;
      border: 1px solid rgba(20, 20, 18, 0.11);
      border-radius: 12px;
      background:
        radial-gradient(circle at 18% 0%, rgba(112, 88, 255, 0.11), transparent 32%),
        linear-gradient(180deg, #fff 0%, rgba(250,250,246,0.82) 100%);
      box-shadow: 0 18px 50px rgba(30, 28, 20, 0.06);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    }
    .rules-feature-card:hover {
      transform: translateY(-3px);
      border-color: rgba(20, 20, 18, 0.2);
      box-shadow: 0 24px 60px rgba(30, 28, 20, 0.1);
    }
    .rules-feature-card .kicker {
      width: fit-content;
      margin-bottom: 18px;
      padding: 5px 9px;
      border-radius: 999px;
      background: var(--accent-soft);
      color: var(--accent);
      font-family: var(--mono);
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }
    .rules-feature-card h3 {
      margin-bottom: 9px;
      font-size: clamp(20px, 2vw, 26px);
      font-weight: 650;
      letter-spacing: -0.035em;
      line-height: 1.02;
    }
    .rules-feature-card p {
      max-width: 31ch;
      font-size: 14px;
      line-height: 1.4;
      color: var(--ink-dim);
    }
    .rules-surface-heading {
      margin: 72px auto 22px;
      text-align: center;
    }
    .rules-surface-heading span {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: var(--ink);
      font-size: clamp(28px, 3.1vw, 44px);
      font-weight: 600;
      line-height: 1;
      letter-spacing: -0.045em;
    }
    .desktop-mock {
      display: grid;
      grid-template-columns: 230px minmax(0, 1fr);
      min-height: 610px;
      background: #f1f3f1;
    }
    .desktop-nav {
      padding: 32px 16px;
      background: rgba(255,255,255,0.68);
      border-right: 1px solid var(--line);
    }
    .desktop-brand {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 8px 14px 24px;
      font-size: 22px;
      font-weight: 750;
      letter-spacing: -0.035em;
    }
    .desktop-brand img {
      width: 28px;
      height: 28px;
    }
    .desktop-nav-item {
      height: 42px;
      padding: 0 14px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      color: #404651;
      font-size: 15px;
      font-weight: 650;
      letter-spacing: -0.01em;
    }
    .desktop-nav-item.active {
      background: #f1f2f4;
      color: var(--ink);
    }
    .desktop-overview {
      padding: 50px 38px 34px;
      min-width: 0;
    }
    .desktop-top {
      display: flex;
      justify-content: space-between;
      gap: 24px;
      padding-bottom: 28px;
      border-bottom: 1px solid rgba(20,20,18,0.12);
    }
    .desktop-top h2 {
      font-size: clamp(36px, 4.2vw, 48px);
      line-height: 0.95;
      letter-spacing: -0.055em;
    }
    .desktop-top p {
      margin-top: 8px;
      color: var(--ink-mute);
      font-size: 17px;
    }
    .desktop-top span {
      align-self: flex-start;
      padding: 9px 13px;
      border-radius: 999px;
      background: var(--ok-soft);
      color: var(--ok);
      font-size: 12px;
      font-weight: 800;
      white-space: nowrap;
    }
    .desktop-agents {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      margin-top: 24px;
    }
    .desktop-agent {
      min-height: 106px;
      padding: 18px;
      border: 1px solid rgba(20,20,18,0.1);
      border-radius: 14px;
      background: rgba(255,255,255,0.62);
      display: grid;
      grid-template-columns: 42px 1fr;
      align-items: center;
      gap: 14px;
    }
    .desktop-agent.active {
      background: #eaf6fb;
      border-color: rgba(11, 111, 170, 0.06);
    }
    .desktop-agent.soft {
      background: #f0f7f2;
    }
    .desktop-agent .agent-icon {
      width: 42px;
      height: 42px;
      border-radius: 10px;
      background: rgba(255,255,255,0.62);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .desktop-agent .agent-icon img {
      max-width: 26px;
      max-height: 26px;
    }
    .desktop-agent h3 {
      font-size: 16px;
      font-weight: 750;
      letter-spacing: -0.025em;
      line-height: 1.1;
    }
    .desktop-agent p {
      margin-top: 3px;
      color: var(--ink-mute);
      font-size: 12px;
      font-weight: 650;
      line-height: 1.2;
    }
    .desktop-agent strong {
      display: inline-flex;
      margin-top: 10px;
      padding: 5px 10px;
      border-radius: 999px;
      background: var(--ok-soft);
      color: var(--ok);
      font-size: 12px;
      font-weight: 800;
      line-height: 1;
    }
    .desktop-event {
      margin-top: 24px;
      padding: 18px;
      border: 1px solid rgba(20,20,18,0.11);
      border-radius: 14px;
      background: rgba(255,255,255,0.72);
      display: grid;
      grid-template-columns: 44px 1fr;
      gap: 16px;
      box-shadow: 0 20px 60px rgba(30,28,20,0.06);
    }
    .event-icon {
      width: 44px;
      height: 44px;
      border-radius: 10px;
      background: #f5f6f6;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .event-icon img {
      width: 25px;
      height: 25px;
    }
    .event-head {
      display: flex;
      justify-content: space-between;
      gap: 14px;
      align-items: flex-start;
    }
    .event-head h3 {
      font-size: 17px;
      letter-spacing: -0.025em;
    }
    .event-head p {
      margin-top: 3px;
      color: var(--ink-mute);
      font-size: 13px;
      font-weight: 650;
    }
    .event-head span {
      padding: 8px 12px;
      border-radius: 999px;
      background: var(--ok-soft);
      color: var(--ok);
      font-size: 12px;
      font-weight: 800;
    }
    .event-project {
      width: fit-content;
      margin-top: 12px;
      padding: 8px 12px;
      border: 1px solid var(--line);
      border-radius: 10px;
      color: var(--ink-mute);
      font-family: var(--mono);
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }
    .event-project strong {
      color: var(--ink-dim);
      margin-left: 6px;
    }
    .event-command {
      margin-top: 14px;
      font-size: 18px;
      font-weight: 750;
      letter-spacing: -0.035em;
      line-height: 1.2;
      word-break: break-word;
    }
    .event-tags {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 14px;
    }
    .event-tags span {
      padding: 7px 10px;
      border-radius: 999px;
      background: #f2f2ee;
      color: var(--ink-dim);
      font-family: var(--mono);
      font-size: 11px;
      text-transform: uppercase;
    }
    .rules-detail {
      border-left: 1px solid var(--line);
      padding: 22px 22px;
      background: linear-gradient(180deg, var(--bg-2) 0%, transparent 30%);
      display: flex; flex-direction: column;
      gap: 14px;
      min-width: 0;
    }
    .rules-detail .breadcrumb {
      font-family: var(--mono); font-size: 10.5px;
      color: var(--ink-mute);
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }
    .rules-detail h3 {
      font-size: 19px; font-weight: 500; letter-spacing: -0.025em;
      line-height: 1.2;
    }
    .rules-detail .by {
      font-size: 12px; color: var(--ink-mute);
      font-family: var(--mono);
    }
    .rules-detail .yaml {
      background: var(--ink); color: var(--bg);
      border-radius: 8px;
      padding: 12px 14px;
      font-family: var(--mono); font-size: 11.5px;
      line-height: 1.7;
    }
    .rules-detail .yaml .key { color: #b9f6ca; }
    .rules-detail .yaml .str { color: #ffcc80; }
    .rules-detail .yaml .com { color: rgba(255,255,255,0.4); }
    .rules-feature-list {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }
    .rules-feature-list span {
      padding: 8px 10px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: rgba(255,255,255,0.62);
      color: var(--ink-dim);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: -0.01em;
    }
    .rules-detail .recent { display: flex; flex-direction: column; gap: 6px; }
    .rules-detail .recent-h {
      font-family: var(--mono); font-size: 10.5px;
      letter-spacing: 0.1em; text-transform: uppercase;
      color: var(--ink-mute);
      margin-bottom: 4px;
    }
    .rules-detail .recent-item {
      display: flex; justify-content: space-between;
      padding: 7px 0;
      border-bottom: 1px dashed var(--line);
      font-family: var(--mono); font-size: 11px;
    }
    .rules-detail .recent-item:last-child { border-bottom: none; }
    .rules-detail .recent-item .who { color: var(--ink); }
    .rules-detail .recent-item .when { color: var(--ink-mute); }
    .rules-detail .recent-item .verdict {
      font-family: var(--mono); font-size: 10px;
      padding: 2px 6px; border-radius: 4px;
      background: var(--danger-soft); color: var(--danger);
      margin-left: 8px;
    }
    @media (max-width: 980px) {
      .rules-head-row { grid-template-columns: 1fr; align-items: flex-start; }
      .rules-feature-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .rules-dash {
        --dash-scale: calc((100vw - 32px) / 980px);
        overflow: hidden;
      }
      .rules-dash .chrome {
        min-width: 980px;
        transform: scale(var(--dash-scale));
        transform-origin: top left;
        margin-bottom: calc((36px * var(--dash-scale)) - 36px);
      }
      .rules-dash.personal-surface,
      .rules-dash.work-surface {
        height: calc((640px + 36px) * var(--dash-scale));
      }
      .rules-dash.personal-surface .chrome,
      .rules-dash.personal-surface .desktop-mock,
      .rules-dash.work-surface .chrome,
      .rules-dash.work-surface .work-agents-body {
        width: 980px;
      }
      .rules-dash.personal-surface .desktop-mock,
      .rules-dash.work-surface .work-agents-body {
        transform: scale(var(--dash-scale));
        transform-origin: top left;
      }
      .desktop-mock {
        grid-template-columns: 230px minmax(0, 1fr);
        min-height: 640px;
      }
      .desktop-nav {
        display: block;
      }
      .desktop-agents {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
      .work-agents-body {
        grid-template-columns: 230px minmax(0, 1fr);
        min-height: 640px;
      }
      .work-agents-side {
        display: flex;
      }
      .work-agents-main {
        padding: 58px 44px;
      }
      .work-summary-grid,
      .work-agent-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }
    }
    @media (max-width: 640px) {
      .agent-modal {
        padding: 14px;
        place-items: end stretch;
      }
      .agent-modal-panel {
        max-height: calc(100dvh - 28px);
        padding: 18px;
        border-radius: 14px;
      }
      .agent-modal-head {
        align-items: flex-start;
      }
      .agent-modal-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .agent-modal-card {
        min-height: 96px;
      }
      .rules-feature-cards { grid-template-columns: 1fr; }
      .rules-feature-card { min-height: 154px; }
      .rules-search { flex-wrap: wrap; }
      .rules-search input { flex-basis: 100%; }
      .rule-row {
        grid-template-columns: 24px 1fr 82px;
        gap: 10px;
      }
      .rule-row .trig,
      .rule-row .more {
        display: none;
      }
    }

    /* ═══════════════ GUARD SCENE ═══════════════ */
    .gs-wrap {
      position: relative;
      max-width: 510px;
      margin: 0;
      transform: none;
    }
    .gs-stage { position: relative; width: 100%; }
    .gs-svg { width: 100%; height: auto; display: block; overflow: visible; }
    .gs-svg text { text-rendering: geometricPrecision; }

    /* floating approval card */
    .gs-card {
      position: absolute; top: 4%; right: -15%;
      width: 253px;
      background: #fff;
      border: 1px solid var(--line-2);
      border-radius: 16px;
      padding: 12px 13px;
      box-shadow: var(--shadow-xl);
      z-index: 5;
      animation: gs-float 5.5s ease-in-out infinite;
    }
    .gs-stage > .gs-card {
      display: none;
    }
    @media (max-width: 720px) {
      .container { padding: 0 16px; }
      .nav-inner {
        height: 56px;
        padding-top: 0;
      }
      .logo {
        gap: 6px;
        font-size: 14px;
      }
      .logo-icon {
        width: 24px;
        height: 24px;
      }
      .nav-cta {
        gap: 5px;
      }
      .nav-control {
        height: 34px;
        min-width: 34px;
        padding: 0 10px;
        font-size: 12px;
      }
      .nav-docs {
        display: none;
      }
      .nav-github span {
        display: none;
      }
      .nav-menu,
      .nav-menu summary {
        width: 34px;
        min-width: 34px;
        max-width: 34px;
        height: 34px;
        min-height: 34px;
        max-height: 34px;
      }
      .hero {
        padding-top: 78px;
        padding-bottom: 44px;
        overflow-x: clip;
        overflow-y: visible;
      }
      .hero-pill { margin-bottom: 18px; }
      h1.hero-title {
        font-size: clamp(38px, 13.2vw, 51px);
        line-height: 1.04;
        white-space: normal;
        letter-spacing: -0.05em;
      }
      h1.hero-title .hero-agent-word {
        display: block;
      }
      .hero-sub {
        margin-top: 6px;
        font-size: 14px;
        max-width: 28ch;
        white-space: normal;
        line-height: 1.35;
      }
      .hero-scene {
        --hero-panel-height: 286px;
        width: 100%;
        margin-top: 46px;
        display: grid;
        grid-template-columns: 1fr;
        gap: 16px;
      }
      .platform-stack {
        width: min(375px, 100%);
        height: var(--hero-panel-height);
        grid-template-rows: 50px minmax(0, 1fr);
        transform: none;
        margin: 0 auto 18px;
        gap: 12px;
      }
      .agent-rail {
        min-height: 50px;
        border-radius: 14px;
      }
      .agent-marquee {
        height: 50px;
      }
      .agent-track {
        gap: 7px;
        animation-duration: 56s;
      }
      .agent-chip {
        height: 34px;
        gap: 6px;
        padding: 0 8px;
        font-size: 11px;
      }
      .agent-mark {
        width: 24px;
        height: 24px;
        border-radius: 7px;
      }
      .platform-card {
        transform: none;
        max-width: none;
        margin: 0;
        padding: 14px;
        gap: 8px;
      }
      .platform-card a,
      .platform-card .platform-link,
      .platform-card .soon {
        min-height: 36px;
        font-size: 13px;
      }
      .feature-showcase {
        order: 2;
        width: min(480px, calc(100vw - 32px));
        max-width: calc(100vw - 32px);
        height: 430px;
        min-height: 0;
        grid-template-columns: 1fr;
        gap: 16px;
        margin: 0 auto;
        padding: 20px 18px 50px;
        justify-self: center;
      }
      .feature-plugin-row {
        margin-bottom: 16px;
        font-size: 13px;
      }
      .feature-showcase h2 {
        max-width: none;
        font-size: 27px;
        min-height: 1.1em;
      }
      .feature-showcase p {
        max-width: 30ch;
        font-size: 16px;
        line-height: 1.24;
        min-height: 3.7em;
      }
      .feature-visual-image img {
        max-width: 238px;
        margin-right: auto;
      }
      .feature-visual {
        min-height: 112px;
      }
      .feature-token-window,
      .feature-mask-window,
      .feature-audit-window,
      .feature-mini-approval {
        max-width: 280px;
      }
      .gs-wrap {
        order: 3;
        width: min(450px, 118vw);
        max-width: none;
        margin: 6px 50% 26px;
        transform: translateX(-50%);
      }
      .gs-svg {
        overflow: visible;
      }
      .gs-buddy text {
        font-size: 25px;
        font-weight: 850;
        fill: #3f3e39;
      }
      .gs-card {
        display: none;
      }
      .hero-continuation {
        margin-top: 4px;
      }
      .hero-actions {
        margin-top: 0;
      }
      .hero-actions .btn {
        min-height: 44px;
        padding: 0 16px;
      }
      .hero-actions .btn-docs {
        min-width: 112px;
      }
      .hero-fine {
        max-width: 30ch;
        margin-left: auto;
        margin-right: auto;
        line-height: 1.45;
      }
    }
    @media (max-width: 430px) {
      .agent-modal-grid {
        grid-template-columns: 1fr;
      }
      .agent-modal-card {
        min-height: 82px;
      }
    }
    .gs-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
    .gs-card-badge {
      width: 22px; height: 22px; border-radius: 6px; background: #fff;
      border: 1px solid var(--line);
      display: flex; align-items: center; justify-content: center;
    }
    .gs-card-app { font-size: 13.8px; font-weight: 600; letter-spacing: -0.01em; }
    .gs-card-when { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--ink-mute); }
    .gs-card-subject {
      font-size: 15px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.25;
      margin: 6px 0 8px; color: var(--ink);
    }
    .gs-card-cmd {
      font-family: var(--mono); font-size: 13.5px;
      background: var(--ink); color: var(--bg);
      padding: 6px 9px; border-radius: 7px; margin-bottom: 9px;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .gs-card-cmd .r { color: #ff8a78; }
    .gs-card-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
    .gs-card-actions button {
      padding: 7px; font-size: 13.2px; font-weight: 600; border-radius: 8px;
      border: 1px solid transparent; letter-spacing: -0.005em;
    }
    .gs-card-actions .deny { background: var(--danger-soft); color: var(--danger); border-color: rgba(233,78,58,0.2); }
    .gs-card-actions .deny:hover { background: var(--danger); color: #fff; }
    .gs-card-actions .approve { background: var(--ok); color: #fff; box-shadow: 0 2px 10px -2px rgba(24,165,88,0.5); }
    .gs-card-actions .approve:hover { filter: brightness(1.05); }

    /* ── animations (motion-safe) ── */
    @media (prefers-reduced-motion: no-preference) {
      .gs-dog   { animation: gs-bob 4.4s ease-in-out infinite; }
      .gs-head  { animation: gs-headtilt 6s ease-in-out infinite; }
      .gs-tail  { animation: gs-wag 1.0s ease-in-out infinite; transform-box: fill-box; }
      .gs-ear   { animation: gs-ear 5s ease-in-out infinite; transform-box: fill-box; }
      .gs-eyelid rect { animation: gs-blink 5.2s infinite; transform-box: fill-box; }
      .gs-blink-b { animation: gs-blink 6s infinite; transform-box: fill-box; }
      .gs-naughty { animation: gs-strain 3.0s ease-in-out infinite; transform-box: fill-box; }
      .gs-leash-taut { animation: gs-vibrate 0.18s linear infinite; }
      .gs-spark { animation: gs-flicker 2.4s ease-in-out infinite; transform-box: fill-box; }
      .gs-alert { animation: gs-pop 3.0s ease-in-out infinite; transform-box: fill-box; }
    }
    @keyframes gs-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
    @keyframes gs-bob2 { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
    @keyframes gs-headtilt { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(-2.5deg); } }
    @keyframes gs-wag { 0%,100% { transform: rotate(-9deg); } 50% { transform: rotate(12deg); } }
    @keyframes gs-ear { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(-6deg); } }
    @keyframes gs-blink { 0%,93%,100% { transform: scaleY(0); } 96% { transform: scaleY(1); } }
    @keyframes gs-strain {
      0%,55%,100% { transform: rotate(0deg) translate(0,0); }
      28% { transform: rotate(-8deg) translate(-4px,-2px); }
    }
    @keyframes gs-vibrate { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-1px); } }
    @keyframes gs-flicker { 0%,100% { transform: scale(0.92); opacity: 0.55; } 50% { transform: scale(1.08); opacity: 1; } }
    @keyframes gs-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
    @keyframes gs-pop {
      0%,55%,100% { transform: scale(0); opacity: 0; }
      30% { transform: scale(1); opacity: 1; }
    }

    @media (min-width: 1600px) {
      .gs-wrap {
        max-width: min(900px, calc((100svh - 300px) * 1.34));
        transform: none;
      }
      .gs-card {
        width: 325px;
        padding: 16px 18px;
      }
      .gs-card-subject {
        font-size: 16px;
      }
      .gs-card-cmd {
        font-size: 13px;
        padding: 8px 11px;
      }
      .gs-card-actions button {
        font-size: 13px;
        padding: 9px;
      }
    }

    /* Final responsive hero tuning: keep laptop layout as the base, let wide screens breathe. */
    .hero-scene {
      transform: translateY(-5%);
    }
    .gs-card {
      top: -1%;
      animation: none;
    }
    .gs-blink-b,
    .gs-eyelid rect {
      animation: none !important;
    }
    .gs-eyelid {
      display: none;
    }
    .gs-spark {
      display: none;
    }

    @media (min-width: 721px) and (max-width: 1599px) {
      .hero-content {
        padding-top: 8vh;
      }
      .hero-scene {
        margin-top: clamp(52px, 7vh, 78px);
        transform: none;
      }
      .platform-stack {
        transform: none;
      }
      .hero-continuation {
        margin-top: 28px;
      }
    }

    @media (min-width: 981px) and (max-width: 1280px) and (max-height: 760px) {
      .hero-content {
        padding-top: 3vh;
      }
      h1.hero-title {
        font-size: clamp(42px, 5.1vw, 60px);
      }
      .hero-scene {
        --hero-panel-height: 310px;
        margin-top: 48px;
        transform: none;
      }
      .platform-stack {
        transform: none;
      }
      .gs-wrap {
        transform: none;
      }
      .feature-showcase {
        padding: 18px 18px 44px;
        gap: 12px;
      }
      .feature-showcase h2 {
        font-size: 22px;
      }
      .feature-showcase p {
        font-size: 15px;
      }
      .gs-card {
        top: 2%;
        right: -17%;
        width: 238px;
        padding: 11px 12px;
      }
      .gs-card-app {
        font-size: 12.5px;
      }
      .gs-card-subject {
        font-size: 13.5px;
      }
      .gs-card-cmd {
        font-size: 12.4px;
        padding: 6px 9px;
      }
      .gs-card-actions button {
        font-size: 12.2px;
        padding: 6px;
      }
      .hero-continuation {
        margin-top: 18px;
      }
    }

    @media (min-width: 1600px) {
      .hero {
        min-height: auto;
      }
      .hero-content {
        padding-top: 7vh;
      }
      .hero-sub {
        margin-top: 4px;
      }
      .hero-scene {
        margin-top: 58px;
        transform: none;
      }
      .platform-card {
        transform: none;
      }
      .platform-stack {
        transform: none;
      }
      .gs-card {
        top: 10%;
        right: -13%;
        width: 385px;
        padding: 20px 21px;
      }
      .gs-card-subject {
        font-size: 20.7px;
      }
      .gs-card-cmd {
        font-size: 17px;
        padding: 10px 12px;
      }
      .gs-card-actions button {
        font-size: 17.2px;
        padding: 12px;
      }
    }

    @media (min-width: 1281px) and (max-height: 760px) {
      .hero-content {
        padding-top: 3vh;
      }
      h1.hero-title {
        font-size: clamp(58px, 4.4vw, 78px);
      }
      .hero-sub {
        margin-top: 4px;
      }
      .hero-scene {
        --hero-panel-height: 330px;
        margin-top: 52px;
        transform: none;
      }
      .platform-stack {
        transform: none;
      }
      .gs-wrap {
        transform: none;
      }
      .feature-showcase {
        padding: 20px 20px 46px;
      }
      .feature-showcase h2 {
        font-size: 25px;
      }
      .feature-showcase p {
        font-size: 17px;
      }
      .gs-card {
        top: 5%;
        right: -15%;
        width: 303px;
        padding: 14px 15px;
      }
      .gs-card-subject {
        font-size: 15px;
      }
      .gs-card-cmd {
        font-size: 13px;
        padding: 7px 10px;
      }
      .gs-card-actions button {
        font-size: 12.8px;
        padding: 8px;
      }
    }

    @media (min-width: 1281px) and (max-width: 1599px) and (max-height: 640px) {
      h1.hero-title {
        font-size: clamp(48px, 4.2vw, 64px);
      }
      .hero-scene {
        --hero-panel-height: 300px;
        margin-top: 44px;
        transform: none;
      }
      .platform-stack {
        transform: none;
      }
      .feature-showcase {
        padding: 18px 18px 42px;
      }
      .feature-showcase h2 {
        font-size: 22px;
      }
      .feature-showcase p {
        font-size: 15px;
      }
      .gs-card {
        top: 2%;
        right: -15%;
        width: 264px;
        padding: 12px 13px;
      }
    }

    /* Account and auth surfaces */
    .account-page {
      min-height: 100vh;
      background:
        radial-gradient(ellipse 760px 440px at 86% 4%, rgba(141, 185, 244, 0.38), transparent 64%),
        radial-gradient(ellipse 680px 380px at 10% 0%, rgba(201, 217, 255, 0.72), transparent 68%),
        linear-gradient(180deg, #ffffff 0%, #f4f7ff 50%, #ffffff 100%);
      padding: 10px clamp(18px, 4vw, 54px) 30px;
    }
    .account-nav {
      max-width: 1240px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      min-height: 50px;
      padding-bottom: 8px;
    }
    .account-brand {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      font-weight: 700;
      letter-spacing: -0.02em;
    }
    .account-brand img {
      width: 34px;
      height: 34px;
      border-radius: 10px;
    }
    .account-brand-copy {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .account-brand-copy strong {
      font-size: 17px;
    }
    .account-brand-copy small {
      padding: 4px 7px;
      border-radius: 999px;
      background: #eef2ff;
      color: #514f5d;
      font-size: 9px;
      font-weight: 760;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }
    .account-nav-links .nav-control {
      height: 34px;
      min-width: 0;
      box-shadow: none;
    }
    .account-nav-button {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      min-height: 39px;
      padding: 9px 15px;
      border: 1px solid #e2e3d6;
      border-radius: 11px;
      background: #fff;
      color: #33332a;
      font-size: 14px;
      font-weight: 600;
    }
    .account-nav-button.dark {
      border-color: #16160f;
      background: #16160f;
      color: #fcfdf7;
    }
    .account-nav-user {
      display: grid;
      gap: 1px;
      min-width: 0;
      max-width: 220px;
      padding: 0 8px;
      color: var(--ink);
      text-align: right;
    }
    .account-nav-user strong,
    .account-nav-user small {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .account-nav-user strong {
      font-size: 13px;
      font-weight: 850;
      line-height: 1.1;
    }
    .account-nav-user small {
      color: var(--ink-dim);
      font-size: 11px;
      font-weight: 650;
    }
    .account-hero {
      max-width: 820px;
      margin: 76px auto 34px;
      text-align: center;
    }
    .account-hero.compact {
      margin-top: 18vh;
    }
    .account-kicker {
      display: inline-flex;
      margin-bottom: 14px;
      padding: 5px 10px;
      border-radius: 999px;
      background: var(--accent-soft);
      color: var(--accent);
      font: 600 11px/1 var(--mono);
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }
    .account-hero h1,
    .personal-console h1 {
      font-size: clamp(42px, 6vw, 72px);
      line-height: 0.98;
      letter-spacing: -0.045em;
    }
    .account-hero h1 span {
      color: var(--ink-dim);
      font-family: var(--serif);
      font-style: italic;
      font-weight: 400;
      letter-spacing: -0.02em;
    }
    .account-hero p {
      max-width: 680px;
      margin: 18px auto 0;
      font-size: 17px;
    }
    .account-grid,
    .azure-layout,
    .console-grid {
      max-width: 1120px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
      gap: 16px;
      align-items: start;
    }
    .account-panel,
    .console-panel {
      border: 1px solid rgba(17,17,17,0.12);
      border-radius: 18px;
      background: rgba(255,255,255,0.88);
      box-shadow: 0 18px 48px -34px rgba(45,22,231,0.36);
      padding: 22px;
    }
    .account-tabs {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4px;
      padding: 4px;
      border: 1px solid var(--line-2);
      border-radius: 10px;
      background: var(--surface);
      margin-bottom: 18px;
    }
    .account-tabs button {
      min-height: 42px;
      border-radius: 7px;
      font-weight: 700;
      color: var(--ink-dim);
    }
    .account-tabs button.active {
      background: var(--ink);
      color: var(--surface);
      box-shadow: var(--shadow-sm);
    }
    .plan-picker {
      display: grid;
      gap: 10px;
    }
    .plan-picker button {
      min-height: 76px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 18px;
      padding: 15px 16px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      text-align: left;
    }
    .plan-picker button.selected {
      border-color: rgba(91,79,229,0.55);
      box-shadow: 0 0 0 3px rgba(91,79,229,0.11), var(--shadow-md);
    }
    .plan-picker strong,
    .plan-picker small {
      display: block;
    }
    .plan-picker strong {
      font-size: 15px;
      letter-spacing: -0.015em;
    }
    .plan-picker small {
      margin-top: 4px;
      color: var(--ink-dim);
      line-height: 1.35;
      font-size: 13px;
    }
    .plan-picker em {
      flex: 0 0 auto;
      color: var(--ink);
      font-style: normal;
      font-weight: 800;
      white-space: nowrap;
    }
    .auth-actions {
      display: grid;
      gap: 10px;
      margin-top: 18px;
    }
    .auth-button,
    .signout-button,
    .console-link,
    .disabled-action {
      min-height: 44px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 0 16px;
      border: 1px solid var(--line-2);
      border-radius: 10px;
      background: #fff;
      font-weight: 800;
      font-size: 14px;
      box-shadow: var(--shadow-sm);
    }
    .auth-button.primary {
      border-color: var(--ink);
      background: var(--ink);
      color: var(--surface);
    }
    .disabled-action {
      opacity: 0.56;
      cursor: not-allowed;
      width: 100%;
      margin-top: 16px;
    }
    .account-error {
      margin-top: 14px;
      padding: 12px 14px;
      border-radius: 8px;
      background: var(--danger-soft);
      color: #9d1d12;
      font-weight: 700;
      font-size: 13px;
      line-height: 1.4;
    }
    .account-error.neutral {
      border: 1px solid #dedfd2;
      background: #f8f8f2;
      color: #54544a;
    }
    .account-flow {
      display: grid;
      gap: 14px;
    }
    .flow-row {
      display: grid;
      grid-template-columns: 34px 1fr;
      gap: 12px;
      align-items: start;
      padding-bottom: 14px;
      border-bottom: 1px solid var(--line);
    }
    .flow-row:last-child {
      padding-bottom: 0;
      border-bottom: 0;
    }
    .flow-row svg {
      width: 34px;
      height: 34px;
      padding: 8px;
      border-radius: 10px;
      background: var(--accent-soft);
      color: var(--accent);
    }
    .flow-row strong,
    .flow-row span {
      display: block;
    }
    .flow-row span {
      margin-top: 4px;
      color: var(--ink-dim);
      line-height: 1.4;
      font-size: 13px;
    }
    .personal-console {
      max-width: 1120px;
      margin: 76px auto 0;
    }
    .console-head {
      display: flex;
      justify-content: space-between;
      gap: 24px;
      align-items: flex-start;
      margin-bottom: 24px;
    }
    .console-head p {
      margin-top: 10px;
    }
    .console-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .console-panel.wide {
      grid-column: span 2;
    }
    .console-panel-head {
      display: flex;
      align-items: center;
      gap: 9px;
      margin-bottom: 12px;
    }
    .console-panel-head h2,
    .azure-steps h2 {
      font-size: 18px;
      letter-spacing: -0.02em;
    }
    .console-panel p {
      font-size: 14px;
    }
    .model-key-form {
      display: grid;
      gap: 10px;
      margin-top: 14px;
    }
    .model-key-form select,
    .model-key-form input {
      width: 100%;
      min-height: 42px;
      border: 1px solid var(--line-2);
      border-radius: 8px;
      padding: 0 12px;
      background: #fff;
      color: var(--ink);
      font: inherit;
      font-size: 13px;
    }
    .model-key-form button {
      min-height: 42px;
      border: 1px solid var(--ink);
      border-radius: 8px;
      background: var(--ink);
      color: var(--surface);
      font-weight: 800;
    }
    .model-key-form button:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
    .model-key-label {
      color: var(--ink-dim);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }
    .provider-key-help {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      width: fit-content;
      color: #3410f6;
      font-size: 12px;
      font-weight: 760;
      text-decoration: none;
    }
    .package-provider-setup,
    .managed-plan-note {
      margin-top: 16px;
      padding: 16px;
      border: 1px solid #d9d5ca;
      border-radius: 14px;
      background: #faf9f5;
    }
    .package-provider-setup > p,
    .managed-plan-note p {
      margin: 6px 0 0;
      color: #595867;
      font-size: 14px;
      line-height: 1.5;
    }
    .managed-plan-note {
      display: grid;
      grid-template-columns: 24px minmax(0, 1fr);
      gap: 10px;
      background: #f0edff;
      border-color: #cfc6ff;
      color: #3410f6;
    }
    .evaluation-provider-panel {
      grid-column: span 2;
    }
    .evaluation-mode-card {
      display: grid;
      gap: 10px;
      padding: 15px;
      border: 1px solid #d9d5ca;
      border-radius: 14px;
      background: #faf9f5;
    }
    .evaluation-mode-card.managed {
      background: #f0edff;
      border-color: #cfc6ff;
    }
    .evaluation-mode-status {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .evaluation-mode-status span {
      margin-left: auto;
      padding: 4px 8px;
      border-radius: 999px;
      background: #ffffff;
      color: #3410f6;
      font-size: 11px;
      font-weight: 850;
    }
    .connected-model-key,
    .provider-required {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 9px 11px;
      border-radius: 9px;
      background: #e5f8ed;
      color: #166534;
      font-size: 12px;
    }
    .provider-required {
      background: #fff1e8;
      color: #9a3412;
    }
    .evaluation-mode-secondary {
      width: fit-content;
      min-height: 38px;
      padding: 0 13px;
      border: 1px solid #3410f6;
      border-radius: 9px;
      background: #ffffff;
      color: #3410f6;
      font: inherit;
      font-size: 12px;
      font-weight: 800;
    }
    .leash-ai-upgrade {
      display: grid;
      grid-template-columns: 22px minmax(0, 1fr) auto;
      gap: 10px;
      align-items: center;
      margin-top: 14px;
      padding: 14px;
      border-radius: 14px;
      background: #111111;
      color: #ffffff;
    }
    .leash-ai-upgrade p {
      margin: 4px 0 0;
      color: rgba(255, 255, 255, 0.68);
      font-size: 12px;
      line-height: 1.45;
    }
    .leash-ai-upgrade button {
      min-height: 38px;
      padding: 0 13px;
      border: 0;
      border-radius: 9px;
      background: #ffffff;
      color: #111111;
      font: inherit;
      font-size: 12px;
      font-weight: 850;
    }
    .settings-hint {
      margin-top: 10px;
      color: var(--ink-dim);
      line-height: 1.4;
    }
    .personal-outcome-list {
      display: grid;
      gap: 10px;
      margin-top: 10px;
    }
    .personal-outcome-card {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 14px;
      align-items: start;
      padding: 13px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: rgba(255,255,255,0.88);
    }
    .personal-outcome-card strong {
      display: block;
      line-height: 1.15;
    }
    .personal-outcome-card p {
      margin-top: 5px;
      color: var(--ink-dim);
      font-size: 13px;
      line-height: 1.35;
    }
    .personal-outcome-card code {
      display: inline-block;
      max-width: 100%;
      margin-top: 8px;
      padding: 5px 7px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      border: 1px solid var(--line);
      border-radius: 7px;
      background: var(--bg-2);
      color: var(--ink-dim);
      font: 700 11px/1.2 var(--mono);
    }
    .personal-outcome-card > span {
      padding: 6px 8px;
      border-radius: 999px;
      background: var(--accent-soft);
      color: var(--accent);
      font: 800 10px/1 var(--mono);
      text-transform: uppercase;
      white-space: nowrap;
    }
    .settings-list {
      display: grid;
      gap: 10px;
    }
    .settings-list div {
      display: flex;
      justify-content: space-between;
      gap: 18px;
      padding: 11px 0;
      border-bottom: 1px solid var(--line);
      font-size: 14px;
    }
    .settings-list div:last-child {
      border-bottom: 0;
    }
    .settings-list span {
      color: var(--ink-dim);
    }
    .settings-list strong {
      text-align: right;
    }
    .console-link {
      width: 100%;
      margin-top: 16px;
    }
    .console-panel textarea {
      width: 100%;
      min-height: 120px;
      resize: vertical;
      padding: 12px;
      border: 1px solid var(--line-2);
      border-radius: 8px;
      background: #fff;
      color: var(--ink);
      font: 500 14px/1.45 var(--sans);
      margin-bottom: 12px;
    }
    .callback-spinner {
      margin: 22px auto 0;
      color: var(--ok);
    }
    .callback-retry {
      margin-top: 22px;
      width: min(240px, 100%);
    }
    .azure-page code,
    .azure-page pre {
      font-family: var(--mono);
      font-size: 12px;
    }
    .azure-layout.small {
      margin-top: 16px;
    }
    .azure-steps ol {
      display: grid;
      gap: 12px;
      margin: 16px 0 0 20px;
      color: var(--ink-2);
      line-height: 1.5;
    }
    .azure-steps li::marker {
      color: var(--accent);
      font-weight: 800;
    }
    .azure-config pre {
      overflow-x: auto;
      margin-top: 14px;
      padding: 14px;
      border-radius: 8px;
      border: 1px solid var(--line);
      background: #fbfbf8;
      color: var(--ink-2);
      line-height: 1.6;
    }
    .azure-page .console-panel-head svg,
    .console-panel-head svg {
      color: var(--accent);
    }

    @media (max-width: 860px) {
      .account-page {
        padding: 20px 16px 48px;
      }
      .account-nav {
        align-items: flex-start;
      }
      .account-nav-links {
        flex-wrap: wrap;
        justify-content: flex-end;
      }
      .account-hero {
        margin-top: 54px;
        text-align: left;
      }
      .account-hero p {
        margin-left: 0;
      }
      .account-grid,
      .azure-layout,
      .console-grid {
        grid-template-columns: 1fr;
      }
      .console-panel.wide {
        grid-column: span 1;
      }
      .console-head {
        display: grid;
      }
      .personal-console {
        margin-top: 54px;
      }
      .plan-picker button,
      .settings-list div {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
      }
      .settings-list strong {
        text-align: left;
      }
    }

    /* Compliance page */
    .compliance-page {
      min-height: 100vh;
      background: #f3f5e9;
      color: #16160f;
      font-family: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
    }
    .compliance-nav {
      position: sticky;
      top: 0;
    }
    .compliance-page section {
      padding: 0;
    }
    .compliance-page .compliance-hero {
      max-width: 920px;
      margin: 0 auto;
      padding: 58px 24px 26px;
      text-align: center;
    }
    .compliance-hero h1 {
      margin: 10px auto 0;
      max-width: 760px;
      color: #16160f;
      font-size: clamp(42px, 5.8vw, 70px);
      font-weight: 800;
      line-height: 0.98;
      letter-spacing: 0;
    }
    .compliance-hero p {
      max-width: 610px;
      margin: 14px auto 0;
      color: #54544a;
      font-size: 18px;
      font-weight: 500;
      line-height: 1.45;
    }
    .compliance-hero .pl-kicker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      justify-content: center;
    }
    .compliance-page .compliance-grid {
      max-width: 1120px;
      margin: 0 auto;
      padding: 0 24px 70px;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 14px;
    }
    .compliance-card {
      min-height: 198px;
      padding: 18px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 22px;
      border: 1px solid #e7e8dc;
      border-radius: 13px;
      background: #fcfdf7;
      box-shadow: 0 26px 64px -34px rgba(40,40,20,.24);
    }
    @media (min-width: 1181px) {
      .compliance-card:first-child {
        grid-column: span 2;
      }
      .trust-fact-card:last-child {
        grid-column: span 2;
      }
    }
    .compliance-card-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
    }
    .compliance-card h2 {
      max-width: 170px;
      margin: 0;
      color: #16160f;
      font-size: clamp(20px, 2vw, 25px);
      font-weight: 800;
      line-height: 1.02;
      letter-spacing: 0;
    }
    .compliance-card p {
      margin-top: 8px;
      font-size: 14px;
      line-height: 1.45;
      color: #54544a;
    }
    .compliance-card span:not(.compliance-status) {
      display: block;
      color: #33332a;
      font-size: 12px;
      font-weight: 900;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }
    .compliance-status {
      flex: 0 0 auto;
      min-height: 34px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      padding: 0 10px;
      border-radius: 999px;
      border: 1px solid transparent;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      white-space: nowrap;
    }
    .compliance-status.aligned {
      background: #e2f1eb;
      color: #087042;
      border-color: rgba(24,165,88,0.16);
    }
    .compliance-status.progress {
      background: #fff4d9;
      color: #8a5a00;
      border-color: rgba(197,140,33,0.22);
    }
    .compliance-page .trust-hero {
      max-width: 980px;
      padding-bottom: 34px;
    }
    .trust-hero-actions {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 24px;
    }
    .trust-hero-actions a,
    .trust-contact > a {
      min-height: 46px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      border: 1px solid #16160f;
      border-radius: 12px;
      background: #16160f;
      color: #fff;
      padding: 0 18px;
      font-size: 14px;
      font-weight: 800;
    }
    .trust-hero-actions a.secondary {
      background: #fff;
      color: #16160f;
    }
    .compliance-page .trust-callout {
      width: min(calc(100% - 48px), 1120px);
      display: flex;
      align-items: flex-start;
      gap: 14px;
      margin: 0 auto 18px;
      border: 1px solid #e7d49b;
      border-radius: 16px;
      background: #fffaf0;
      padding: 18px 20px;
      color: #5f480d;
    }
    .trust-callout svg { flex: 0 0 auto; margin-top: 2px; }
    .trust-callout strong { color: #322604; font-size: 15px; }
    .trust-callout p { margin: 4px 0 0; font-size: 14px; line-height: 1.5; }
    .trust-fact-grid { padding-top: 0; }
    .trust-fact-card {
      min-height: 280px;
      justify-content: flex-start;
    }
    .trust-fact-icon,
    .trust-detail-icon {
      width: 44px;
      height: 44px;
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      border-radius: 13px;
      background: #ece9ff;
      color: #4335c9;
    }
    .trust-fact-card h2 { max-width: none; margin-top: 8px; }
    .trust-fact-card a {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      margin-top: 14px;
      color: #4335c9;
      font-size: 13px;
      font-weight: 800;
    }
    .trust-detail-grid {
      width: min(calc(100% - 48px), 1120px);
      display: grid;
      grid-template-columns: .9fr 1.1fr;
      gap: 16px;
      margin: 0 auto 16px;
    }
    .trust-detail-grid > article {
      border: 1px solid #e7e8dc;
      border-radius: 18px;
      background: #fcfdf7;
      padding: clamp(22px, 3vw, 34px);
      box-shadow: 0 26px 64px -40px rgba(40,40,20,.28);
    }
    .trust-detail-grid > article > span,
    .trust-contact span {
      display: block;
      margin-top: 18px;
      color: #4335c9;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .12em;
      text-transform: uppercase;
    }
    .trust-detail-grid h2,
    .trust-contact h2 {
      margin: 8px 0 16px;
      color: #16160f;
      font-size: clamp(27px, 3vw, 38px);
      line-height: 1.05;
      letter-spacing: -.025em;
    }
    .trust-detail-grid ul { display: grid; gap: 10px; margin: 0; padding-left: 20px; }
    .trust-detail-grid li { color: #54544a; font-size: 14px; line-height: 1.5; }
    .trust-evidence-list { display: grid; }
    .trust-evidence-list a {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      border-top: 1px solid #e7e8dc;
      padding: 12px 2px;
      color: #16160f;
    }
    .trust-evidence-list a > span { display: grid; gap: 2px; }
    .trust-evidence-list strong { font-size: 14px; }
    .trust-evidence-list small { color: #68685e; font-size: 12px; line-height: 1.4; }
    .compliance-page .trust-contact {
      width: min(calc(100% - 48px), 1120px);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 28px;
      margin: 0 auto 70px;
      border-radius: 20px;
      background: linear-gradient(120deg, #201740, #4f3fd5);
      padding: clamp(26px, 4vw, 44px);
      color: #fff;
    }
    .trust-contact span { margin: 0; color: #d8d2ff; }
    .trust-contact h2 { max-width: 680px; color: #fff; }
    .trust-contact p { max-width: 720px; margin: 0; color: #e2dfff; font-size: 14px; line-height: 1.55; }
    .trust-contact > a { flex: 0 0 auto; background: #fff; color: #201740; border-color: #fff; }
    .coverage-page {
      min-height: 100vh;
      background: #f3f5e9;
      color: #16160f;
      font-family: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
    }
    .coverage-hero,
    .coverage-section,
    .coverage-detected,
    .coverage-boundary {
      width: min(calc(100% - 48px), 1160px);
      margin-inline: auto;
    }
    .coverage-hero {
      padding: 68px 0 50px;
      text-align: center;
    }
    .coverage-hero > span,
    .coverage-section-heading span,
    .coverage-detected > div:first-child > span,
    .coverage-boundary > span {
      color: #4335c9;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .13em;
      text-transform: uppercase;
    }
    .coverage-hero > span {
      display: inline-flex;
      align-items: center;
      gap: 7px;
    }
    .coverage-hero h1 {
      max-width: 880px;
      margin: 14px auto;
      font-size: clamp(46px, 6.8vw, 82px);
      font-weight: 800;
      line-height: .98;
      letter-spacing: -.05em;
    }
    .coverage-hero > p {
      max-width: 720px;
      margin: 0 auto;
      color: #5b5b50;
      font-size: 18px;
      line-height: 1.55;
    }
    .coverage-legend {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 24px;
    }
    .coverage-legend span {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      border: 1px solid #dedfd3;
      border-radius: 999px;
      background: #fff;
      padding: 9px 13px;
      font-size: 13px;
      font-weight: 700;
    }
    .coverage-section { padding-bottom: 62px; }
    .coverage-section-heading {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 28px;
      margin-bottom: 22px;
    }
    .coverage-section-heading h2,
    .coverage-detected h2,
    .coverage-boundary h2 {
      margin: 6px 0 0;
      font-size: clamp(31px, 4vw, 48px);
      line-height: 1.02;
      letter-spacing: -.035em;
    }
    .coverage-section-heading p {
      max-width: 540px;
      margin: 0;
      color: #66665c;
      font-size: 14px;
      line-height: 1.5;
    }
    .coverage-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 14px;
    }
    .coverage-card {
      min-height: 330px;
      display: flex;
      flex-direction: column;
      border: 1px solid #e2e3d8;
      border-radius: 18px;
      background: #fff;
      padding: 20px;
      box-shadow: 0 24px 52px -38px rgba(30,30,20,.35);
    }
    .coverage-card-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
    }
    .coverage-agent-icon {
      width: 54px;
      height: 54px;
      display: grid;
      place-items: center;
      border: 1px solid #e7e7df;
      border-radius: 15px;
      background: #fafaf6;
    }
    .coverage-agent-icon img { width: 38px; height: 38px; object-fit: contain; }
    .coverage-status {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      border-radius: 999px;
      padding: 7px 9px;
      font-size: 10px;
      font-weight: 900;
      text-transform: uppercase;
    }
    .coverage-status.protected { background: #e4f5ed; color: #087047; }
    .coverage-card h2 { margin: 22px 0 8px; font-size: 24px; letter-spacing: -.025em; }
    .coverage-card > strong { color: #4335c9; font-size: 13px; }
    .coverage-card > small { margin-top: 5px; color: #77766b; font-size: 11.5px; }
    .coverage-card > p { margin: auto 0 0; padding-top: 22px; color: #59594f; font-size: 13px; line-height: 1.55; }
    .coverage-detected {
      display: grid;
      grid-template-columns: .9fr 1.1fr;
      gap: 32px;
      align-items: center;
      margin-bottom: 64px;
      border-radius: 22px;
      background: #171621;
      padding: clamp(28px, 5vw, 52px);
      color: #fff;
    }
    .coverage-detected p { color: #c5c3ce; line-height: 1.55; }
    .coverage-detected a,
    .coverage-boundary a {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      margin-top: 12px;
      color: #c7c0ff;
      font-size: 14px;
      font-weight: 800;
    }
    .coverage-detected-list {
      display: grid;
      gap: 10px;
    }
    .coverage-detected-list > div {
      display: grid;
      grid-template-columns: 52px 1fr auto;
      align-items: center;
      gap: 12px;
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 14px;
      background: rgba(255,255,255,.06);
      padding: 11px 14px;
    }
    .coverage-detected-list img { width: 40px; height: 40px; object-fit: contain; filter: grayscale(1); opacity: .74; }
    .coverage-detected-list span { display: grid; gap: 2px; }
    .coverage-detected-list strong { font-size: 14px; }
    .coverage-detected-list small { color: #aaa8b2; font-size: 11px; }
    .coverage-detected-list svg { color: #8f8d98; }
    .coverage-boundary {
      max-width: 900px;
      margin-bottom: 72px;
      text-align: center;
    }
    .coverage-boundary > div {
      width: 52px;
      height: 52px;
      display: grid;
      place-items: center;
      margin: 0 auto 16px;
      border-radius: 16px;
      background: #e9e6ff;
      color: #4335c9;
    }
    .coverage-boundary p { color: #5b5b50; font-size: 15px; line-height: 1.6; }
    .coverage-boundary a { color: #4335c9; }
    .legal-page {
      min-height: 100vh;
      padding: 22px clamp(18px, 4vw, 54px) 64px;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.94), rgba(250,250,246,0.99)),
        radial-gradient(ellipse 760px 360px at 18% 0%, rgba(91,79,229,0.1), transparent 66%),
        radial-gradient(ellipse 620px 340px at 86% 12%, rgba(24,165,88,0.08), transparent 68%);
    }
    .legal-doc {
      max-width: 840px;
      margin: 64px auto 0;
      padding: clamp(24px, 4vw, 48px);
      border: 1px solid rgba(15,18,25,0.1);
      border-radius: 12px;
      background: rgba(255,255,255,0.86);
      box-shadow: 0 24px 70px rgba(15,18,25,0.08);
    }
    .legal-doc .account-kicker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 16px;
    }
    .legal-doc h1 {
      margin-bottom: 16px;
      font-size: clamp(42px, 6vw, 68px);
      line-height: 0.98;
      letter-spacing: -0.05em;
    }
    .legal-updated {
      color: var(--ink-mute);
      font-size: 14px;
      font-weight: 600;
    }
    .legal-doc section { padding: 30px 0 0; }

    .marketplace-page {
      min-height: 100vh;
      background: var(--bg);
      color: var(--ink);
      padding: 24px 32px 90px;
    }
    .marketplace-nav {
      position: static;
      max-width: 1180px;
      margin: 0 auto;
      padding: 0;
      background: transparent;
      border: 0;
    }
    .marketplace-hero,
    .plugin-product-hero,
    .upload-panel {
      max-width: 1180px;
      margin: 54px auto 0;
    }
    .marketplace-hero {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 360px;
      gap: 40px;
      align-items: end;
      padding: 54px 0 26px;
    }
    .marketplace-hero h1,
    .plugin-product-hero h1 {
      max-width: 820px;
      font-size: clamp(44px, 6vw, 78px);
      line-height: 1.02;
      letter-spacing: -0.035em;
      margin: 0;
    }
    .marketplace-hero p,
    .plugin-product-hero p {
      max-width: 720px;
      margin-top: 18px;
      font-size: 20px;
      color: var(--ink-dim);
    }
    .marketplace-upload-card,
    .plugin-install-panel,
    .plugin-product-main,
    .upload-panel,
    .marketplace-card {
      border: 1px solid var(--line);
      background: rgba(255,255,255,.82);
      box-shadow: var(--shadow-sm);
    }
    .marketplace-upload-card {
      display: grid;
      gap: 12px;
      padding: 22px;
      border-radius: 8px;
    }
    .marketplace-upload-card a,
    .plugin-install-panel a {
      display: inline-flex;
      width: fit-content;
      border-radius: 999px;
      padding: 10px 14px;
      background: var(--ink);
      color: var(--bg);
      font-weight: 700;
    }
    .marketplace-search {
      max-width: 1180px;
      margin: 12px auto 30px;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: center;
      gap: 12px;
      min-height: 58px;
      border: 1px solid var(--line-2);
      border-radius: 999px;
      background: #fff;
      padding: 8px 8px 8px 18px;
      box-shadow: var(--shadow-md);
    }
    .marketplace-search input {
      min-width: 0;
      border: 0;
      outline: 0;
      color: var(--ink);
      font: inherit;
      font-size: 16px;
      background: transparent;
    }
    .marketplace-search button {
      min-height: 42px;
      border-radius: 999px;
      padding: 0 18px;
      background: var(--ink);
      color: var(--bg);
      font-weight: 700;
    }
    .marketplace-section {
      max-width: 1180px;
      margin: 0 auto;
      padding: 58px 0 0;
    }
    .marketplace-section .section-head {
      text-align: left;
      max-width: 680px;
      margin: 0 0 24px;
    }
    .marketplace-section .section-head h2 {
      font-size: clamp(34px, 4.6vw, 58px);
    }
    .marketplace-top-grid,
    .marketplace-grid {
      display: grid;
      gap: 14px;
    }
    .marketplace-top-grid {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }
    .marketplace-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .marketplace-card {
      display: grid;
      gap: 15px;
      min-height: 230px;
      padding: 20px;
      border-radius: 8px;
      transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
    }
    .marketplace-card:hover {
      transform: translateY(-2px);
      border-color: rgba(91,79,229,.34);
      box-shadow: var(--shadow-md);
    }
    .marketplace-card.compact {
      min-height: 252px;
    }
    .marketplace-card-head {
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
    }
    .marketplace-icon {
      width: 58px;
      height: 58px;
      display: grid;
      place-items: center;
      overflow: hidden;
      flex: 0 0 auto;
      border: 1px solid rgba(22,22,20,.08);
      border-radius: 16px;
      background: #fff;
      color: var(--accent);
      font-weight: 800;
      box-shadow: 0 10px 26px rgba(22,22,20,.08);
    }
    .marketplace-icon.large {
      width: 94px;
      height: 94px;
      border-radius: 22px;
      font-size: 24px;
    }
    .marketplace-icon img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .marketplace-card-title {
      display: grid;
      gap: 4px;
      min-width: 0;
    }
    .marketplace-card-title strong {
      font-size: 17px;
      line-height: 1.08;
      color: var(--ink);
      font-family: var(--mono);
      overflow-wrap: anywhere;
    }
    .marketplace-card-copy {
      display: grid;
      gap: 10px;
      min-width: 0;
    }
    .marketplace-author {
      color: var(--ink-dim);
      font-weight: 700;
      line-height: 1.2;
    }
    .marketplace-card-visual {
      grid-column: 1 / -1;
      display: block;
      overflow: hidden;
      align-self: end;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fffdf8;
      box-shadow: var(--shadow-sm);
    }
    .marketplace-card-visual img {
      display: block;
      width: 100%;
      height: auto;
    }
    .marketplace-statline {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
    .marketplace-statline em {
      border-radius: 999px;
      padding: 6px 9px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,.72);
      color: var(--ink-2);
      font-size: 11px;
      font-style: normal;
      font-weight: 700;
      line-height: 1;
    }
    .marketplace-card-copy span {
      color: var(--ink-2);
      line-height: 1.45;
    }
    .marketplace-description {
      font-size: 15px;
    }
    .plugin-product-hero {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 24px;
      align-items: center;
      padding: 34px 0 18px;
    }
    .plugin-product-page .marketing-nav.sticky {
      margin-left: -32px;
      margin-right: -32px;
      padding-left: 32px;
      padding-right: 32px;
    }
    .plugin-product-page {
      padding-top: 0;
    }
    .plugin-product-page .plugin-product-hero {
      margin-top: 28px;
    }
    .plugin-product-page .plugin-product-hero h1 {
      font-size: clamp(42px, 5vw, 68px);
      line-height: 1;
      overflow-wrap: anywhere;
    }
    .plugin-product-page .plugin-product-hero p {
      margin-top: 14px;
    }
    .plugin-product-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 20px;
    }
    .plugin-product-meta span,
    .plugin-product-meta a {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border-radius: 999px;
      padding: 7px 10px;
      background: var(--surface);
      border: 1px solid var(--line);
      color: var(--ink-2);
      font-size: 13px;
      font-weight: 700;
      text-decoration: none;
    }
    .plugin-product-display-name {
      margin-top: 12px !important;
      color: var(--ink-mute) !important;
      font-size: 15px !important;
      font-family: var(--mono);
    }
    .plugin-product-grid {
      max-width: 1180px;
      margin: 8px auto 0;
      display: grid;
      grid-template-columns: minmax(0, 1fr) 320px;
      gap: 18px;
      padding: 0;
    }
    .plugin-product-main,
    .plugin-install-panel,
    .upload-panel {
      border-radius: 8px;
      padding: 24px;
    }
    .plugin-product-main h2,
    .plugin-product-main h3,
    .upload-panel h2 {
      margin: 0 0 12px;
    }
    .plugin-product-main h3 {
      margin-top: 28px;
    }
    .plugin-permissions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    .plugin-permissions span {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border-radius: 999px;
      padding: 8px 10px;
      background: var(--ok-soft);
      color: #0f7a45;
      font-size: 13px;
      font-weight: 700;
    }
    .plugin-install-panel {
      display: grid;
      align-content: start;
      gap: 12px;
    }
    .install-handoff {
      max-width: 1020px;
      margin: 80px auto 0;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 28px;
      align-items: start;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: rgba(255,255,255,.82);
      box-shadow: var(--shadow-md);
      padding: 34px;
    }
    .install-handoff h1 {
      max-width: 780px;
      margin: 0;
      font-size: clamp(38px, 5vw, 64px);
      line-height: 1.04;
      letter-spacing: -0.035em;
    }
    .install-handoff p {
      max-width: 720px;
      margin-top: 16px;
      font-size: 18px;
    }
    .install-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 24px;
    }
    .install-primary,
    .install-secondary {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 44px;
      border-radius: 999px;
      padding: 0 16px;
      font-weight: 750;
    }
    .install-primary {
      background: var(--ink);
      color: var(--bg);
    }
    .install-secondary {
      border: 1px solid var(--line-2);
      background: var(--surface);
      color: var(--ink);
    }
    .install-note {
      font-size: 14px !important;
      color: var(--ink-dim) !important;
    }
    .upload-panel {
      display: grid;
      grid-template-columns: 360px minmax(0, 1fr);
      gap: 28px;
    }
    .upload-form {
      display: grid;
      gap: 12px;
    }
    .upload-form label {
      display: grid;
      gap: 6px;
      color: var(--ink-2);
      font-weight: 700;
    }
    .upload-form input {
      min-height: 44px;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 0 12px;
      background: var(--bg-2);
      color: var(--ink-dim);
      font: inherit;
    }
    .upload-icon-dropzone {
      position: relative;
      display: grid;
      grid-template-columns: 58px minmax(0, 1fr);
      align-items: center;
      gap: 14px;
      min-height: 86px;
      border: 1px dashed var(--line-2);
      border-radius: 8px;
      padding: 14px;
      background: var(--bg-2);
      color: var(--ink-2);
    }
    .upload-icon-dropzone strong,
    .upload-icon-dropzone small {
      display: block;
    }
    .upload-icon-dropzone small {
      margin-top: 3px;
      color: var(--ink-dim);
      font-size: 12px;
      font-weight: 650;
      line-height: 1.35;
    }
    .upload-icon-dropzone input {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
    }
    .upload-icon-preview {
      width: 58px;
      height: 58px;
      border: 1px solid rgba(22,22,20,.1);
      border-radius: 16px;
      background:
        linear-gradient(135deg, rgba(25,176,104,.18), rgba(91,79,229,.14)),
        #fff;
      box-shadow: 0 10px 24px rgba(22,22,20,.06);
    }
    .upload-form button {
      min-height: 44px;
      border-radius: 999px;
      background: var(--ink);
      color: var(--bg);
      font-weight: 700;
    }
    .upload-form button:disabled {
      cursor: wait;
      opacity: .55;
    }
    .upload-icon-fieldset {
      display: grid;
      gap: 12px;
      margin: 0;
      border: 0;
      padding: 0;
    }
    .upload-icon-fieldset legend {
      margin-bottom: 6px;
      color: var(--ink-2);
      font-weight: 700;
    }
    .upload-icon-choice {
      display: grid;
      grid-template-columns: 74px minmax(0, 1fr);
      align-items: center;
      gap: 14px;
    }
    .upload-icon-preview {
      display: grid;
      place-items: center;
      overflow: hidden;
      font-size: 34px;
    }
    .upload-icon-preview img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .upload-emoji-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
    }
    .upload-emoji-grid button {
      width: 40px;
      min-height: 40px;
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 0;
      background: var(--bg-2);
      color: var(--ink);
      font-size: 21px;
    }
    .upload-emoji-grid button.selected {
      border-color: var(--accent);
      background: var(--accent-soft);
      box-shadow: 0 0 0 2px rgba(91,79,229,.12);
    }
    .upload-icon-dropzone {
      grid-template-columns: 1fr;
      min-height: 70px;
      cursor: pointer;
    }
    .upload-clear-image {
      justify-self: start;
      min-height: 34px !important;
      border: 1px solid var(--line) !important;
      padding: 0 14px;
      background: var(--bg-2) !important;
      color: var(--ink-2) !important;
    }
    .upload-message {
      margin: 0;
      border-radius: 8px;
      padding: 10px 12px;
      font-weight: 700;
    }
    .upload-message.error { background: #fff0f0; color: #9f2d2d; }
    .upload-message.success { background: #e8f6ee; color: #167449; }

    @media (max-width: 900px) {
      .marketplace-page { padding: 18px 18px 70px; }
      .plugin-product-page {
        padding-top: 0;
      }
      .plugin-product-page .marketing-nav.sticky {
        margin-left: -18px;
        margin-right: -18px;
        padding-left: 18px;
        padding-right: 18px;
      }
      .marketplace-hero,
      .plugin-product-grid,
      .upload-panel {
        grid-template-columns: 1fr;
      }
      .marketplace-top-grid,
      .marketplace-grid {
        grid-template-columns: 1fr;
      }
      .plugin-product-hero {
        grid-template-columns: 1fr;
        padding-top: 22px;
      }
      .plugin-product-page .plugin-product-hero {
        margin-top: 18px;
      }
      .install-handoff {
        grid-template-columns: 1fr;
        padding: 22px;
        margin-top: 42px;
      }
    }
    .legal-doc h2 {
      margin-bottom: 10px;
      font-size: clamp(24px, 3vw, 32px);
      letter-spacing: -0.04em;
    }
    .legal-doc p,
    .legal-doc li {
      color: var(--ink-dim);
      font-size: 16px;
      line-height: 1.62;
    }
    .legal-doc ul {
      display: grid;
      gap: 8px;
      padding-left: 20px;
    }
    .legal-doc a {
      color: var(--accent);
      font-weight: 700;
    }
    .legal-actions {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 16px;
    }
    .legal-button {
      min-height: 44px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0 16px;
      border-radius: 10px;
      background: var(--ink);
      color: var(--bg) !important;
      font-weight: 800;
    }
    .legal-button.secondary {
      background: transparent;
      color: var(--ink) !important;
      border: 1px solid var(--line-2);
    }
    .subprocessor-doc { max-width: 1120px; }
    .subprocessor-table {
      display: grid;
      overflow: hidden;
      margin-top: 26px;
      border: 1px solid #e2e3d8;
      border-radius: 14px;
    }
    .subprocessor-row {
      display: grid;
      grid-template-columns: .72fr .95fr 1.5fr;
      gap: 18px;
      border-top: 1px solid #e7e8dc;
      padding: 15px 16px;
      color: #57574d;
      font-size: 13px;
      font-weight: 500;
      line-height: 1.5;
    }
    .subprocessor-row:first-child { border-top: 0; }
    .subprocessor-row.header {
      background: #f3f1ff;
      color: #4335c9;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: .11em;
      text-transform: uppercase;
    }
    .subprocessor-row strong { color: #1f1f18; font-size: 14px; }
    @media (max-width: 1180px) {
      .compliance-page .compliance-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
      .coverage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 760px) {
      .compliance-page .compliance-grid {
        grid-template-columns: 1fr;
      }
      .trust-detail-grid { grid-template-columns: 1fr; }
      .compliance-page .trust-contact { align-items: flex-start; flex-direction: column; }
      .coverage-grid,
      .coverage-detected { grid-template-columns: 1fr; }
      .coverage-card { min-height: 280px; }
      .coverage-section-heading { align-items: flex-start; flex-direction: column; }
    }
    @media (max-width: 900px) {
      .compliance-page {
        padding: 0;
      }
      .account-nav-links {
        flex-direction: column;
        align-items: flex-start;
      }
      .compliance-nav {
        align-items: flex-start;
      }
      .compliance-nav > div {
        flex-wrap: wrap;
      }
      .compliance-page .compliance-hero {
        margin-top: 0;
        text-align: left;
      }
      .compliance-page .compliance-hero p {
        margin-left: 0;
      }
      .trust-hero-actions { justify-content: flex-start; }
      .compliance-page .trust-callout,
      .trust-detail-grid,
      .compliance-page .trust-contact { width: calc(100% - 32px); }
      .coverage-hero,
      .coverage-section,
      .coverage-detected,
      .coverage-boundary { width: calc(100% - 32px); }
      .compliance-card {
        min-height: 190px;
      }
      .legal-page {
        padding: 20px 16px 52px;
      }
      .legal-doc {
        margin-top: 42px;
        padding: 22px;
      }
      .subprocessor-row { grid-template-columns: 1fr; gap: 5px; }
      .subprocessor-row.header { display: none; }
    }

    /* Account sign-in/up flow */
    .signin-shell,
    .connected-console {
      width: min(1120px, 100%);
      margin: 14px auto 0;
    }
    .account-page:has(.connected-console) {
      padding-top: 12px;
    }
    .account-page:has(.connected-console) .account-nav {
      max-width: 1240px;
    }
    .account-page:has(.connected-console) .connected-console {
      width: min(1240px, 100%);
      margin-top: 12px;
    }
    .signin-shell {
      width: min(640px, 100%);
    }
    .signin-card {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: rgba(255,255,255,0.86);
      box-shadow: var(--shadow-md);
      padding: clamp(18px, 2.4vw, 26px);
    }
    .signin-card h1 {
      max-width: 620px;
      font-size: clamp(30px, 4vw, 46px);
      line-height: 1;
      letter-spacing: -0.045em;
    }
    .signin-card p {
      max-width: 640px;
      margin-top: 8px;
      font-size: 14px;
      line-height: 1.35;
    }
    .auth-mode-tabs {
      display: inline-grid;
      grid-template-columns: 1fr 1fr;
      gap: 4px;
      padding: 4px;
      margin-bottom: 14px;
      border: 1px solid var(--line-2);
      border-radius: 10px;
      background: var(--surface);
      box-shadow: var(--shadow-sm);
    }
    .auth-mode-tabs button {
      min-height: 36px;
      padding: 0 18px;
      border-radius: 7px;
      color: var(--ink-dim);
      font-weight: 800;
    }
    .auth-mode-tabs button.active {
      background: var(--ink);
      color: var(--surface);
    }
    .signin-card .account-tabs {
      margin-top: 28px;
      margin-bottom: 0;
    }
    .setup-block {
      margin-top: 16px;
    }
    .setup-label {
      margin-bottom: 9px;
      color: var(--ink-dim);
      font: 700 11px/1 var(--mono);
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }
    .plan-tag {
      display: inline-flex;
      margin-left: 8px;
      padding: 4px 7px;
      border-radius: 999px;
      background: var(--accent-soft);
      color: var(--accent);
      font: 800 10px/1 var(--mono);
      letter-spacing: 0.08em;
      text-transform: uppercase;
      vertical-align: middle;
    }
    .org-fields {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-top: 16px;
    }
    .org-fields label:first-child {
      grid-column: 1 / -1;
    }
    .org-fields label {
      display: grid;
      gap: 7px;
      color: var(--ink-dim);
      font: 700 11px/1 var(--mono);
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }
    .org-fields input,
    .org-fields select {
      min-height: 44px;
      border: 1px solid var(--line-2);
      border-radius: 8px;
      background: #fff;
      color: var(--ink);
      padding: 0 12px;
      font: 700 14px/1 var(--sans);
      text-transform: none;
      letter-spacing: 0;
    }
    .azure-helper-link {
      display: inline-flex;
      margin-top: 16px;
      color: var(--ink-dim);
      font-size: 13px;
      font-weight: 700;
    }
    .azure-helper-link:hover {
      color: var(--ink);
    }
    .local-mode-callout {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      margin-top: 16px;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--bg);
    }
    .local-mode-callout div {
      display: grid;
      gap: 3px;
    }
    .local-mode-callout strong {
      font-size: 14px;
      letter-spacing: -0.01em;
    }
    .local-mode-callout span {
      color: var(--ink-dim);
      font-size: 13px;
      line-height: 1.35;
    }
    .package-setup-shell {
      width: min(1120px, 100%);
      margin: clamp(0px, 0.6vw, 8px) auto 0;
      padding: 0;
    }
    .account-page:has(.package-setup-shell) {
      padding-top: 10px;
    }
    .account-page:has(.package-setup-shell) .account-nav {
      padding-bottom: 0;
    }
    .account-page:has(.connected-console) > .connected-console {
      padding: 0;
    }
    .ciso-metrics span,
    .activity-log span,
    .risk-list span {
      color: var(--ink-dim);
      font: 600 11px/1 var(--mono);
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }
    .ciso-metrics {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      margin-top: 18px;
    }
    .ciso-metrics div {
      min-height: 88px;
      display: grid;
      align-content: center;
      gap: 8px;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
    }
    .ciso-metrics strong {
      font-size: 30px;
      letter-spacing: -0.04em;
    }
    .preview-list,
    .activity-log,
    .risk-list,
    .link-stack {
      display: grid;
      gap: 10px;
      margin-top: 16px;
    }
    .preview-list span {
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 10px 0;
      border-bottom: 1px solid var(--line);
      color: var(--ink-2);
      font-size: 14px;
      font-weight: 650;
    }
    .preview-list span:last-child {
      border-bottom: 0;
    }
    .preview-list svg {
      color: var(--ok);
    }
    .connected-console h1 {
      font-size: clamp(38px, 5vw, 64px);
      line-height: 0.98;
      letter-spacing: -0.045em;
    }
    .console-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: flex-end;
    }
    .download-banner {
      display: flex;
      justify-content: space-between;
      gap: 22px;
      align-items: center;
      margin-bottom: 22px;
      padding: clamp(20px, 3vw, 28px);
      border: 1px solid rgba(91,79,229,0.24);
      border-radius: 8px;
      background:
        linear-gradient(135deg, rgba(255,255,255,0.96), rgba(246,245,255,0.92)),
        var(--surface);
      box-shadow: var(--shadow-md);
    }
    .download-banner h2 {
      font-size: clamp(24px, 3vw, 36px);
      line-height: 1.02;
      letter-spacing: -0.035em;
    }
    .download-banner p {
      max-width: 620px;
      margin-top: 10px;
      font-size: 14px;
    }
    .download-actions {
      display: flex;
      flex: 0 0 auto;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: flex-end;
    }
    .mac-install {
      display: grid;
      gap: 8px;
      min-width: min(100%, 360px);
    }
    .mac-install.compact {
      min-width: 0;
    }
    .mac-install > .auth-button,
    .mac-install > .console-link {
      width: 100%;
    }
    .account-price-card {
      margin-top: 16px;
      border-radius: 10px;
      background: #fcfdf7;
      box-shadow: 0 22px 56px -34px rgba(40,40,20,.28);
      padding: 18px;
    }
    .account-price-card > span {
      font-size: 11px;
    }
    .account-price-card h3 {
      margin-top: 8px;
      font-size: clamp(24px, 3vw, 34px);
      line-height: 1;
    }
    .account-price-card .ol-price-rule {
      margin: 12px 0;
    }
    .account-plan-list {
      display: grid;
      gap: 8px;
    }
    .account-price-card .ol-plan-row {
      min-height: 72px;
      margin-bottom: 0;
      padding: 12px 14px;
      border-color: #e2e3d6;
      box-shadow: var(--shadow-sm);
      transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
    }
    .account-price-card .ol-plan-row b {
      font-size: 16px;
    }
    .account-price-card .ol-plan-row small {
      margin-top: 3px;
      font-size: 12px;
      line-height: 1.25;
    }
    .account-price-card .ol-plan-row > strong {
      font-size: 21px;
    }
    .account-price-card .ol-plan-row:hover {
      border-color: rgba(20,20,18,0.16);
      background: rgba(255,255,255,0.86);
    }
    .account-price-card .ol-plan-row.selected {
      border-color: rgba(112,88,255,0.45);
      background:
        radial-gradient(circle at 100% 0%, rgba(112,88,255,0.13), transparent 42%),
        rgba(255,255,255,0.9);
      box-shadow: 0 0 0 3px rgba(112,88,255,0.1), var(--shadow-sm);
    }
    .download-pill-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      margin-top: 24px;
    }
    .download-pill-grid .mac-install {
      min-width: 0;
    }
    .download-pill-grid .mac-install > .auth-button,
    .download-pill {
      min-height: 54px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      width: 100%;
      padding: 0 16px;
      border: 1px solid #16160f;
      border-radius: 13px;
      background: #16160f;
      color: #fcfdf7;
      font-size: 15px;
      font-weight: 800;
      box-shadow: var(--shadow-sm);
    }
    .download-pill span {
      color: rgba(252,253,247,0.68);
      font-family: var(--mono);
      font-size: 11px;
      font-weight: 600;
    }
    .download-pill.light {
      border-color: #dedfd2;
      background: #fff;
      color: #16160f;
    }
    .desktop-onboarding-card {
      width: 100%;
      max-width: none;
      padding: clamp(28px, 4vw, 50px);
      overflow: hidden;
      border-color: rgba(52, 16, 246, 0.18);
      border-radius: 24px;
      background:
        radial-gradient(circle at 92% 5%, rgba(111, 154, 255, 0.23), transparent 34%),
        linear-gradient(145deg, #fff 0%, #f7f7ff 100%);
      box-shadow: 0 32px 80px -48px rgba(30, 25, 92, 0.4);
    }
    .desktop-onboarding-intro {
      max-width: 790px;
    }
    .desktop-onboarding-card h1 {
      max-width: 780px;
      margin: 12px 0 14px;
      font-size: clamp(38px, 5.5vw, 64px);
      line-height: 0.98;
    }
    .desktop-onboarding-card .desktop-onboarding-intro > p {
      max-width: 720px;
      color: #5c5c6c;
      font-size: 17px;
      line-height: 1.55;
    }
    .desktop-onboarding-steps {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      margin-top: 30px;
    }
    .desktop-onboarding-steps > div {
      min-height: 94px;
      display: grid;
      grid-template-columns: auto 1fr;
      align-items: start;
      gap: 11px;
      padding: 16px;
      border: 1px solid #e2e2ea;
      border-radius: 16px;
      background: rgba(255,255,255,0.72);
    }
    .desktop-onboarding-steps > div.current {
      border-color: rgba(52, 16, 246, 0.42);
      background: rgba(238, 236, 255, 0.82);
      box-shadow: 0 0 0 3px rgba(52, 16, 246, 0.07);
    }
    .desktop-onboarding-steps > div > span {
      width: 28px;
      height: 28px;
      display: grid;
      place-items: center;
      border: 1px solid #d8d8e2;
      border-radius: 50%;
      background: #fff;
      color: #777786;
      font: 800 12px/1 var(--mono);
    }
    .desktop-onboarding-steps > div.complete > span,
    .desktop-onboarding-steps > div.current > span {
      border-color: #3410f6;
      background: #3410f6;
      color: #fff;
    }
    .desktop-onboarding-steps > div > div {
      display: grid;
      gap: 5px;
    }
    .desktop-onboarding-steps strong {
      color: #171717;
      font-size: 15px;
    }
    .desktop-onboarding-steps small {
      color: #666674;
      font-size: 12px;
      line-height: 1.35;
    }
    .desktop-onboarding-downloads {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      margin-top: 20px;
    }
    .desktop-onboarding-downloads .mac-install,
    .post-auth-download-grid .mac-install {
      min-width: 0;
    }
    .mac-download-card {
      height: 100%;
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 14px;
      padding: 15px 18px;
      border: 1.5px solid #171717;
      border-radius: 17px;
      background: #111;
      color: #fff;
      text-decoration: none;
      transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
    }
    .mac-download-card span {
      display: grid;
      gap: 2px;
      font-size: 16px;
      font-weight: 850;
    }
    .mac-download-card small {
      font-size: 10px;
      letter-spacing: 0.09em;
      opacity: 0.62;
      text-transform: uppercase;
    }
    .mac-download-card:hover {
      background: #2d18de;
      border-color: #2d18de;
      transform: translateY(-1px);
    }
    .desktop-onboarding-download {
      min-height: 82px;
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 14px;
      padding: 15px 18px;
      border: 1.5px solid #171717;
      border-radius: 17px;
      background: rgba(255,255,255,0.86);
      color: #111;
      transition: transform 160ms ease, box-shadow 160ms ease;
    }
    .desktop-onboarding-download:hover {
      transform: translateY(-2px);
      box-shadow: 0 18px 28px -22px rgba(17,17,17,0.5);
    }
    .desktop-onboarding-download.dark {
      background: #111;
      color: #fff;
    }
    .desktop-onboarding-download span {
      display: grid;
      gap: 2px;
      font-size: 17px;
      font-weight: 850;
      letter-spacing: -0.02em;
    }
    .desktop-onboarding-download small {
      color: inherit;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.09em;
      opacity: 0.62;
      text-transform: uppercase;
    }
    .desktop-connection-wait {
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 14px;
      margin-top: 20px;
      padding: 18px;
      border: 1px solid rgba(52, 16, 246, 0.2);
      border-radius: 17px;
      background: rgba(238, 236, 255, 0.75);
    }
    .desktop-connection-icon {
      width: 44px;
      height: 44px;
      display: grid;
      place-items: center;
      border-radius: 13px;
      background: #3410f6;
      color: #fff;
    }
    .desktop-connection-wait > div:nth-child(2) {
      display: grid;
      gap: 4px;
    }
    .desktop-connection-wait strong {
      font-size: 15px;
    }
    .desktop-connection-wait p {
      max-width: 650px;
      margin: 0;
      color: #626270;
      font-size: 13px;
      line-height: 1.45;
    }
    .desktop-connection-wait > button {
      min-height: 40px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      padding: 0 14px;
      border: 1px solid #c9c7db;
      border-radius: 11px;
      background: #fff;
      color: #171717;
      font-size: 13px;
      font-weight: 800;
    }
    .desktop-connection-wait > button:disabled {
      opacity: 0.7;
    }
    .desktop-connection-wait .spinning {
      animation: desktop-connection-spin 800ms linear infinite;
    }
    @keyframes desktop-connection-spin {
      to { transform: rotate(360deg); }
    }
    .desktop-onboarding-mobile {
      display: grid;
      grid-template-columns: auto 1fr;
      align-items: start;
      gap: 12px;
      margin-top: 18px;
      padding: 15px 17px;
      border: 1px dashed #d5d5df;
      border-radius: 15px;
      color: #676775;
    }
    .desktop-onboarding-mobile > div {
      display: grid;
      gap: 3px;
    }
    .desktop-onboarding-mobile strong {
      color: #33333d;
      font-size: 14px;
    }
    .desktop-onboarding-mobile p {
      margin: 0;
      font-size: 12px;
      line-height: 1.45;
    }
    .post-auth-download-shell {
      width: min(920px, 100%);
    }
    .post-auth-download-card {
      width: 100%;
      max-width: none;
      padding: clamp(28px, 5vw, 56px);
      overflow: hidden;
      border: 1px solid rgba(52, 16, 246, 0.2);
      border-radius: 24px;
      background:
        radial-gradient(circle at 92% 8%, rgba(108, 151, 255, 0.28), transparent 36%),
        linear-gradient(145deg, #fff 0%, #f5f7ff 100%);
      box-shadow: 0 32px 80px -48px rgba(30, 25, 92, 0.42);
    }
    .post-auth-download-card h1 {
      max-width: 680px;
      margin: 12px 0 14px;
      font-size: clamp(38px, 6vw, 68px);
      line-height: 0.98;
      letter-spacing: -0.055em;
    }
    .post-auth-download-card > p {
      max-width: 650px;
      color: #565669;
      font-size: 17px;
      line-height: 1.55;
    }
    .post-auth-download-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
      margin-top: 28px;
    }
    .post-auth-download-button {
      min-height: 94px;
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 15px;
      padding: 18px 20px;
      border: 1.5px solid #171717;
      border-radius: 18px;
      background: rgba(255, 255, 255, 0.86);
      color: #111;
      transition: transform 160ms ease, box-shadow 160ms ease;
    }
    .post-auth-download-button:hover {
      transform: translateY(-2px);
      box-shadow: 0 18px 28px -22px rgba(17, 17, 17, 0.55);
    }
    .post-auth-download-button.dark {
      background: #111;
      color: #fff;
    }
    .post-auth-download-button.selected {
      box-shadow: 0 0 0 4px rgba(52, 16, 246, 0.16);
    }
    .post-auth-download-button span {
      display: grid;
      gap: 2px;
      font-size: 20px;
      font-weight: 850;
      letter-spacing: -0.025em;
    }
    .post-auth-download-button small {
      color: inherit;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.08em;
      opacity: 0.65;
      text-transform: uppercase;
    }
    .post-auth-download-note,
    .post-auth-account-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-top: 20px;
      color: #343444;
      font-size: 14px;
      font-weight: 750;
    }
    .post-auth-account-link {
      margin-left: 22px;
      color: #3410f6;
    }
    .plain-console-grid,
    .ciso-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
      margin-top: 20px;
    }
    .plain-console-grid .wide,
    .ciso-grid .wide {
      grid-column: span 2;
    }
    .activity-log div,
    .risk-list div {
      display: grid;
      grid-template-columns: 84px 1fr;
      gap: 12px;
      align-items: center;
      padding: 12px 0;
      border-bottom: 1px solid var(--line);
    }
    .activity-log div:last-child,
    .risk-list div:last-child {
      border-bottom: 0;
    }
    .activity-log strong,
    .risk-list strong {
      font-size: 14px;
      letter-spacing: -0.01em;
    }
    .risk-list div {
      grid-template-columns: 72px 1fr;
    }
    .risk-list em {
      grid-column: 2;
      color: var(--ink-dim);
      font-size: 13px;
      font-style: normal;
    }
    .risk-list .high span {
      color: #c4311c;
    }
    .ciso-metrics {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      margin-top: 0;
    }
    .ciso-metrics div {
      min-height: 96px;
      background: rgba(255,255,255,0.9);
      box-shadow: var(--shadow-sm);
    }
    .link-stack .console-link {
      margin-top: 0;
      justify-content: flex-start;
    }
    .device-list {
      display: grid;
      gap: 10px;
      margin-top: 14px;
    }
    .device-list div {
      min-height: 48px;
      display: grid;
      grid-template-columns: 22px 1fr auto;
      gap: 10px;
      align-items: center;
      padding: 10px 0;
      border-bottom: 1px solid var(--line);
      color: var(--ink-dim);
      font-size: 13px;
      font-weight: 700;
    }
    .device-list div:last-child {
      border-bottom: 0;
    }
    .device-list .connected {
      color: var(--ink);
    }
    .device-list .connected svg {
      color: var(--ok);
    }
    .device-list strong {
      color: var(--ink);
      text-align: right;
    }
    .web-notification-dock {
      position: fixed;
      right: 22px;
      bottom: 22px;
      z-index: 80;
      width: min(420px, calc(100vw - 32px));
      display: grid;
      gap: 10px;
      padding: 10px;
      border: 1px solid rgba(20,20,18,0.12);
      border-radius: 12px;
      background: rgba(252,253,247,0.94);
      box-shadow: 0 24px 70px -38px rgba(20,20,18,0.48), var(--shadow-sm);
      backdrop-filter: blur(12px);
    }
    .web-notification-head,
    .web-notification-card-head,
    .web-notification-actions,
    .web-notification-meta {
      display: flex;
      align-items: center;
    }
    .web-notification-head {
      justify-content: space-between;
      gap: 12px;
      padding: 2px 4px 0;
      color: var(--ink);
      font-size: 13px;
      font-weight: 850;
    }
    .web-notification-head span,
    .web-notification-card-head span {
      display: inline-flex;
      align-items: center;
      gap: 7px;
    }
    .web-notification-head small {
      color: var(--ink-dim);
      font: 700 11px/1 var(--mono);
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }
    .web-notification-card {
      display: grid;
      gap: 10px;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: rgba(255,255,255,0.92);
      box-shadow: var(--shadow-sm);
    }
    .web-notification-card.approval {
      border-color: rgba(112,88,255,0.24);
      background:
        radial-gradient(circle at 100% 0%, rgba(112,88,255,0.11), transparent 44%),
        rgba(255,255,255,0.94);
    }
    .web-notification-card.blocked {
      border-color: rgba(196,49,28,0.22);
      background:
        radial-gradient(circle at 100% 0%, rgba(196,49,28,0.08), transparent 44%),
        rgba(255,255,255,0.94);
    }
    .web-notification-card-head {
      justify-content: space-between;
      gap: 12px;
    }
    .web-notification-card-head strong {
      min-width: 0;
      color: var(--ink);
      font-size: 15px;
      line-height: 1.15;
      letter-spacing: -0.01em;
    }
    .web-notification-card-head span {
      flex: 0 0 auto;
      padding: 6px 9px;
      border-radius: 999px;
      background: var(--accent-soft);
      color: var(--accent);
      font: 850 11px/1 var(--mono);
      letter-spacing: 0.02em;
    }
    .web-notification-card.blocked .web-notification-card-head span {
      background: rgba(196,49,28,0.1);
      color: #9f2718;
    }
    .web-notification-card p,
    .web-notification-message {
      margin: 0;
      color: var(--ink-2);
      font-size: 13px;
      line-height: 1.38;
    }
    .web-notification-meta {
      flex-wrap: wrap;
      gap: 6px;
    }
    .web-notification-meta span {
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      padding: 6px 8px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: rgba(246,246,239,0.84);
      color: var(--ink-dim);
      font-size: 11px;
      font-weight: 800;
    }
    .web-notification-actions {
      justify-content: flex-end;
      gap: 8px;
    }
    .web-notification-actions button {
      min-height: 36px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      padding: 0 13px;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: #fff;
      color: var(--ink);
      font-size: 13px;
      font-weight: 850;
      box-shadow: var(--shadow-sm);
    }
    .web-notification-actions button:disabled {
      opacity: 0.6;
      cursor: progress;
    }
    .web-notification-actions .allow {
      border-color: #16160f;
      background: #16160f;
      color: #fcfdf7;
    }
    .web-notification-actions .deny {
      color: #9f2718;
    }
    .web-notification-actions .dismiss {
      background: var(--surface);
    }
    .web-notification-message {
      padding: 4px 6px 2px;
      font-weight: 750;
    }

    .web-client-shell {
      display: grid;
      grid-template-columns: 240px minmax(0, 1fr);
      gap: 22px;
      align-items: start;
      margin-top: 16px;
      padding: 16px;
      border: 1px solid rgba(17,17,17,0.1);
      border-radius: 28px;
      background: rgba(201,217,255,0.55);
      box-shadow: 0 28px 90px -58px rgba(45,22,231,0.7);
    }
    .web-client-nav {
      position: sticky;
      top: 18px;
      display: grid;
      align-content: start;
      gap: 18px;
      padding: 10px 4px;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
    }
    .web-nav-section {
      display: grid;
      gap: 6px;
    }
    .web-client-nav button {
      width: 100%;
      min-height: 48px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 0 14px;
      border: 1px solid transparent;
      border-radius: 14px;
      background: transparent;
      color: var(--ink-2);
      font-weight: 850;
      text-align: left;
    }
    .web-client-nav button span {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }
    .web-client-nav button strong {
      min-width: 22px;
      height: 22px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
      background: rgba(91,71,224,0.12);
      color: var(--accent);
      font: 850 12px/1 var(--mono);
    }
    .web-client-nav button.active {
      border-color: rgba(45,22,231,0.15);
      background: #ffffff;
      color: var(--ink);
      box-shadow: inset 4px 0 0 #2d16e7, 0 10px 24px rgba(45,22,231,0.10);
    }
    .web-client-nav button.cost { background: #ece8ff; color: #2d16e7; }
    .web-client-nav button.security,
    .web-client-nav button.active.security { background: #e6edff; color: #2d16e7; }
    .web-client-nav button.observability,
    .web-client-nav button.active.observability { background: #e3f3ff; color: #2059c8; }
    .web-client-nav button.utility,
    .web-client-nav button.active.utility { background: #f4edff; color: #6a31e1; }
    .web-client-nav button.active.cost {
      box-shadow: inset 0 0 0 1px currentColor;
    }
    .web-client-nav button.active.security,
    .web-client-nav button.active.observability,
    .web-client-nav button.active.utility {
      box-shadow: inset 0 0 0 1px currentColor;
    }
    .web-nav-group {
      display: grid;
      gap: 4px;
    }
    .web-nav-plugin {
      min-height: 38px !important;
      justify-content: flex-start !important;
      margin-left: 14px;
      padding-left: 14px !important;
      color: #4e4c59 !important;
      font-size: 13px;
      line-height: 1.2;
      border-left: 1px solid rgba(45,22,231,0.18) !important;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .web-nav-plugin.active {
      background: rgba(255,255,255,0.74) !important;
      color: #2d16e7 !important;
      border-color: #2d16e7 !important;
    }
    .web-client-main {
      min-width: 0;
      display: grid;
      gap: 16px;
    }
    .web-overview-strip,
    .web-plugin-detail-head,
    .web-section-head,
    .web-plugin-actions,
    .web-marketplace-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
    }
    .web-overview-strip {
      padding: 18px 20px;
    }
    .web-overview-strip h2,
    .web-plugin-detail-head h2 {
      font-size: clamp(24px, 2.6vw, 34px);
      line-height: 1.02;
      letter-spacing: -0.04em;
    }
    .web-plugin-detail { padding: 28px; }
    .web-plugin-detail-head { align-items: center; padding: 4px 2px 6px; }
    .web-plugin-title-lockup { display: flex; align-items: center; gap: 14px; min-width: 0; }
    .web-plugin-title-lockup > .web-plugin-icon { width: 54px; height: 54px; flex: 0 0 54px; }
    .web-plugin-heading-copy { display: grid; justify-items: start; gap: 7px; min-width: 0; }
    .web-plugin-heading-copy > small { color: var(--ink-mute); font: 850 10px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
    .web-plugin-heading-copy h2,
    .web-plugin-heading-copy p { margin: 0; }
    .web-plugin-heading-copy p { max-width: 690px; color: var(--ink-dim); line-height: 1.45; }
    .web-plugin-state {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 6px;
      border: 1px solid;
      border-radius: 999px;
    }
    .web-plugin-state.active { border-color: #acdcca; background: #e9f8f1; color: #087b5f; }
    .web-plugin-state.inactive { border-color: #efb1b1; background: #fff0f0; color: #b82424; }
    .web-plugin-state-label { display: flex; align-items: center; gap: 9px; padding-left: 7px; }
    .web-plugin-state-label strong { font-size: 13px; }
    .web-plugin-state-action {
      min-height: 34px;
      padding: 0 13px;
      border: 0;
      border-radius: 999px;
      background: #fff;
      color: inherit;
      font-size: 12px;
      font-weight: 850;
    }
    .web-plugin-state-action.disable { color: #b82424; }
    .web-plugin-state-action.disable:hover { background: #fff0f0; }
    .web-plugin-state-action.enable { border-color: #087b5f; background: #087b5f; color: #fff; }
    .web-plugin-state-action.enable:hover { background: #066d54; }
    .web-plugin-state-action:disabled { opacity: .55; }
    .web-plugin-detail-controls { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px; }
    .web-feature-status-control {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 42px;
      align-items: center;
      gap: 12px;
      min-width: 184px;
      min-height: 58px;
      padding: 9px 11px 9px 14px;
      border: 1px solid #d9dee8;
      border-radius: 14px;
      background: #fff;
      color: var(--ink);
      text-align: left;
      box-shadow: 0 8px 24px -20px rgba(16,19,24,.5);
    }
    .web-feature-status-control > span { display: grid; gap: 3px; }
    .web-feature-status-control small { color: var(--ink-mute); font-size: 10px; font-weight: 850; }
    .web-feature-status-control strong { font-size: 14px; }
    .web-feature-status-control i { position: relative; width: 42px; height: 24px; border-radius: 999px; background: #cfd5df; transition: background 160ms ease; }
    .web-feature-status-control i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 2px 7px rgba(16,19,24,.22); transition: transform 160ms ease; }
    .web-feature-status-control.active { border-color: #b7dfd1; background: #f1fbf7; }
    .web-feature-status-control.active i { background: #118a69; }
    .web-feature-status-control.active i::after { transform: translateX(18px); }
    .web-feature-status-control:hover { border-color: var(--accent); }
    .web-feature-status-control:disabled { cursor: wait; opacity: .62; }
    .web-ready-state.active { border-color: #acdcca !important; background: #e9f8f1 !important; color: #087b5f !important; }
    .web-ready-state.inactive { border-color: #efb1b1 !important; background: #fff0f0 !important; color: #b82424 !important; }
    .web-overview-strip p,
    .web-agent-overview-head p {
      margin-top: 4px;
      font-size: 14px;
      line-height: 1.35;
    }
    .web-plugin-meta {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 8px;
    }
    .web-plugin-meta span,
    .web-plugin-meta a,
    .web-section-head > span,
    .web-category-tag {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-height: 28px;
      padding: 0 10px;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: var(--surface);
      font: 850 12px/1 var(--mono);
      color: var(--ink-dim);
      text-decoration: none;
    }
    .web-plugin-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }
    .web-plugin-card {
      position: relative;
      display: grid;
      grid-template-columns: 48px 1fr auto;
      align-items: center;
      gap: 12px;
      min-height: 124px;
      padding: 18px;
      border: 1px solid rgba(17,17,17,0.12);
      border-radius: 18px;
      background: rgba(255,255,255,0.92);
      text-align: left;
    }
    .web-plugin-repo-link {
      position: absolute;
      top: 10px;
      right: 10px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,0.9);
      color: var(--ink);
    }
    .web-plugin-repo-link:hover,
    .web-plugin-repo-link:focus-visible {
      background: var(--surface);
      color: var(--accent);
    }
    .web-plugin-card.active {
      border-color: rgba(45,22,231,0.52);
      background: linear-gradient(145deg, #ffffff, #eef2ff);
      box-shadow: 0 18px 42px -28px rgba(45,22,231,0.85);
    }
    .web-plugin-card strong {
      font-size: 17px;
      font-weight: 900;
    }
    .web-plugin-card p {
      grid-column: 2 / 4;
      margin: -4px 0 0;
      color: #555461;
      font-size: 14px;
      line-height: 1.42;
    }
    .web-plugin-card em {
      justify-self: end;
      color: var(--ink-mute);
      font-style: normal;
      padding: 6px 9px;
      border-radius: 999px;
      background: #eef2ff;
      color: #2d16e7;
      font: 800 12px/1 var(--sans);
    }
    .web-plugin-icon {
      width: 48px;
      height: 48px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 14px;
      background: #e6edff;
      color: #2d16e7;
      font: 900 13px/1 var(--mono);
      flex: 0 0 auto;
    }
    .web-plugin-icon.security { background: #e6edff; color: #2d16e7; }
    .web-plugin-icon.observability { background: #e3f3ff; color: #2059c8; }
    .web-plugin-icon.utility { background: #f4edff; color: #6a31e1; }
    .web-category-tag.cost { background: rgba(91,71,224,0.14); color: var(--accent); border-color: transparent; }
    .web-category-tag.security { background: rgba(11,121,104,0.14); color: #087b69; border-color: transparent; }
    .web-category-tag.observability { background: rgba(42,99,216,0.14); color: #2a63d8; border-color: transparent; }
    .web-category-tag.utility { background: rgba(161,91,18,0.14); color: #a15b12; border-color: transparent; }
    .web-plugin-detail-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 18px;
      margin-top: 18px;
    }
    .web-plugin-tabs {
      display: grid;
      grid-template-columns: repeat(3, minmax(120px, 1fr));
      gap: 4px;
      width: min(100%, 560px);
      margin-top: 24px;
      padding: 5px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: #e9edf4;
    }
    .web-plugin-tabs button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      min-height: 42px;
      border: 0;
      border-radius: 10px;
      background: transparent;
      color: var(--ink-dim);
      font-weight: 900;
    }
    .web-plugin-tabs button.active { background: #fff; color: var(--accent); box-shadow: 0 3px 12px rgba(16,19,24,.1); }
    .web-plugin-tabs button span { display: inline-grid; min-width: 20px; height: 20px; place-items: center; border-radius: 999px; background: #dfe3ea; color: var(--ink-dim); font: 850 11px/1 var(--mono); }
    .web-plugin-tab-panel { margin-top: 16px; }
    .web-plugin-summary,
    .web-plugin-history-panel,
    .web-plugin-settings { min-width: 0; padding: 20px; border: 1px solid #dfe3ea; border-radius: 18px; background: #f4f6fa; }
    .web-plugin-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
    .web-plugin-panel-head h3 { margin: 3px 0 0; font-size: 22px; letter-spacing: -.025em; }
    .web-plugin-panel-head p { margin-top: 4px; color: var(--ink-dim); font-size: 13px; }
    .web-plugin-panel-head > span { display: inline-flex; padding: 6px 9px; border-radius: 999px; background: #e5e8ee; color: var(--ink-dim); font: 850 11px/1 var(--mono); }
    .web-plugin-panel-head > span.active { background: #dff4eb; color: #087b5f; }
    .web-plugin-summary-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
    .web-plugin-summary-metrics article { display: grid; gap: 5px; padding: 16px; border: 1px solid #dde2ea; border-radius: 14px; background: #fff; }
    .web-plugin-summary-metrics strong { font-size: 28px; line-height: 1; }
    .web-plugin-summary-metrics b { font-size: 12px; }
    .web-plugin-summary-metrics small { color: var(--ink-mute); font-size: 10px; }
    .web-plugin-summary-metrics .blocked strong { color: #bd2d3f; }
    .web-plugin-summary-metrics .passed strong { color: #0b8466; }
    .web-plugin-summary-metrics .waiting strong { color: #9a6700; }
    .web-plugin-summary-latest { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 12px; padding: 14px 16px; border: 1px solid #dde2ea; border-radius: 14px; background: #fff; }
    .web-plugin-summary-latest span { min-width: 0; }
    .web-plugin-summary-latest strong,
    .web-plugin-summary-latest small { display: block; }
    .web-plugin-summary-latest small { margin-top: 4px; color: var(--ink-mute); }
    .web-plugin-summary-latest em { padding: 6px 9px; border-radius: 999px; background: #e5f4ee; color: #087b5f; font: 850 11px/1 var(--mono); font-style: normal; white-space: nowrap; }
    .web-plugin-audit-table { overflow: hidden; border: 1px solid #dfe3ea; border-radius: 14px; background: #fff; }
    .web-plugin-audit-columns,
    .web-plugin-audit-row { display: grid; grid-template-columns: 122px minmax(140px,.72fr) minmax(240px,1.6fr) 118px 18px; align-items: center; gap: 12px; }
    .web-plugin-audit-columns { min-height: 38px; padding: 0 14px; border-bottom: 1px solid #dfe3ea; background: #edf0f5; color: var(--ink-mute); font-size: 9px; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; }
    .web-plugin-audit-row { width: 100%; min-height: 66px; padding: 10px 14px; border: 0; border-bottom: 1px solid #e7eaf0; background: #fff; color: inherit; text-align: left; }
    .web-plugin-audit-row:last-child { border-bottom: 0; }
    .web-plugin-audit-row:hover { background: #f7f8fb; }
    .web-plugin-audit-row > span { min-width: 0; }
    .web-plugin-audit-time strong,
    .web-plugin-audit-time small,
    .web-plugin-audit-action strong,
    .web-plugin-audit-action small { display: block; }
    .web-plugin-audit-time strong { font-size: 11px; }
    .web-plugin-audit-time small,
    .web-plugin-audit-action small { margin-top: 3px; color: var(--ink-mute); font-size: 10px; }
    .web-plugin-audit-agent { font-size: 12px; }
    .web-plugin-audit-action strong,
    .web-plugin-audit-action small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .web-plugin-settings { background: #f1f3f7; }
    .web-plugin-settings,
    .web-plugin-outcomes {
      min-width: 0;
      padding: 20px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: rgba(255,255,255,0.72);
    }
    .web-section-head strong {
      font-size: 18px;
      font-weight: 900;
    }
    .web-section-head p,
    .web-marketplace-row p {
      margin-top: 3px;
      font-size: 14px;
      color: var(--ink-dim);
    }
    .web-plugin-meta {
      justify-content: flex-start;
      margin-top: 12px;
    }
    .web-settings-fields {
      display: grid;
      gap: 14px;
      margin-top: 18px;
    }
    .web-advanced-settings {
      margin-top: 20px;
      border-top: 1px solid var(--line);
      padding-top: 16px;
    }
    .web-advanced-settings summary {
      width: fit-content;
      cursor: pointer;
      color: var(--ink);
      font-size: 14px;
      font-weight: 900;
    }
    .web-advanced-settings > p {
      max-width: 620px;
      margin-top: 7px;
      color: var(--ink-dim);
      font-size: 13px;
      line-height: 1.45;
    }
    .web-setting-field,
    .web-setting-toggle {
      display: grid;
      gap: 9px;
    }
    .web-setting-toggle {
      grid-template-columns: 1fr auto;
      align-items: center;
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--surface);
    }
    .web-setting-head {
      display: grid;
      justify-items: start;
      gap: 4px;
    }
    .web-setting-head strong,
    .web-setting-toggle strong {
      font-size: 14px;
      font-weight: 900;
    }
    .web-setting-head small,
    .web-setting-toggle small {
      color: var(--ink-dim);
      font-weight: 750;
      line-height: 1.45;
    }
    .web-setting-toggle > span {
      display: grid;
      justify-items: start;
      gap: 4px;
    }
    .web-setting-input,
    .web-rule-row textarea,
    .web-rule-row select {
      width: 100%;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      color: var(--ink);
      padding: 11px 12px;
      font: 800 14px/1.35 var(--sans);
    }
    .web-segmented,
    .web-choice-pills {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    .web-segmented label,
    .web-choice-pills label {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      min-height: 34px;
      padding: 0 11px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: var(--surface);
      font-weight: 850;
    }
    .web-response-slider {
      --response-index: 1;
      position: relative;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      width: min(100%, 390px);
      min-height: 48px;
      padding: 4px;
      border: 1px solid rgba(17,17,17,.12);
      border-radius: 999px;
      background: #ebeef5;
      box-shadow: inset 0 2px 5px rgba(17,17,17,.06);
      isolation: isolate;
    }
    .web-response-slider[data-level="allow"] { --response-index: 0; }
    .web-response-slider[data-level="ask"] { --response-index: 1; }
    .web-response-slider[data-level="block"] { --response-index: 2; }
    .web-response-slider::before {
      content: "";
      position: absolute;
      z-index: -1;
      inset: 4px auto 4px 4px;
      width: calc((100% - 8px) / 3);
      border-radius: 999px;
      background: #fff;
      box-shadow: 0 4px 13px rgba(17,17,17,.14);
      transform: translateX(calc(var(--response-index) * 100%));
      transition: transform 170ms ease, background 170ms ease;
    }
    .web-response-slider[data-level="ask"]::before { background: #ece9ff; }
    .web-response-slider[data-level="block"]::before { background: #ffe8e8; }
    .web-response-slider label {
      position: relative;
      display: grid;
      place-items: center;
      min-width: 0;
      cursor: pointer;
      color: #686672;
      font-size: 12px;
      font-weight: 850;
    }
    .web-response-slider label:has(input:checked) { color: #16141b; }
    .web-response-slider input { position: absolute; opacity: 0; pointer-events: none; }
    .web-response-slider label:not(:last-child)::after {
      content: "";
      position: absolute;
      right: 0;
      width: 1px;
      height: 14px;
      background: rgba(17,17,17,.1);
    }
    .web-response-slider.compact { min-height: 40px; width: 230px; }
    .web-response-slider.compact label { font-size: 11px; }
    .web-rule-list {
      display: grid;
      gap: 8px;
    }
    .web-rule-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 230px 38px;
      gap: 8px;
      align-items: start;
    }
    .web-rule-row button,
    .web-marketplace-row button,
    .web-plugin-actions button {
      min-height: 38px;
      padding: 0 14px;
      border-radius: 999px;
      background: var(--ink);
      color: var(--surface);
      font-weight: 900;
    }
    .web-rule-row button {
      width: 38px;
      padding: 0;
      background: var(--surface);
      color: var(--ink);
      border: 1px solid var(--line);
    }
    .web-plugin-actions {
      margin-top: 18px;
    }
    .web-plugin-actions span {
      color: var(--ink-dim);
      font-weight: 800;
    }
    .web-marketplace-list {
      display: grid;
      gap: 10px;
    }
    .web-marketplace-row {
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: rgba(255,255,255,0.72);
    }
    .web-marketplace-row > div {
      flex: 1;
      min-width: 0;
    }
    .web-marketplace-row strong {
      font-weight: 900;
    }
    .web-agent-overview-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 14px;
      padding: 18px 20px;
    }
    .web-agent-overview-head h2 {
      font-size: clamp(26px, 3vw, 34px);
      line-height: 1;
    }
    .web-cloud-pill {
      display: inline-flex;
      align-items: center;
      min-height: 30px;
      padding: 0 12px;
      border-radius: 999px;
      background: rgba(11,121,104,0.12);
      color: #087b69;
      font: 850 12px/1 var(--mono);
    }
    .web-connected-device {
      min-width: min(100%, 280px);
      display: grid;
      grid-template-columns: 34px minmax(0, 1fr) auto;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: rgba(255,255,255,0.78);
      box-shadow: var(--shadow-sm);
    }
    .web-connected-device-icon {
      width: 34px;
      height: 34px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
      background: rgba(11,121,104,0.12);
      color: #087b69;
    }
    .web-connected-device strong,
    .web-connected-device small {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .web-connected-device strong {
      font-size: 13px;
      font-weight: 900;
    }
    .web-connected-device small {
      margin-top: 2px;
      color: var(--ink-dim);
      font-size: 11px;
      font-weight: 750;
    }
    .web-connected-device em {
      padding: 6px 8px;
      border-radius: 999px;
      background: rgba(11,121,104,0.10);
      color: #087b69;
      font: 850 10px/1 var(--mono);
      font-style: normal;
      white-space: nowrap;
    }
    .web-agent-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      padding: 14px 0 0;
    }
    .web-agent-tile {
      display: grid;
      grid-template-columns: 42px minmax(0, 1fr);
      gap: 11px;
      align-items: center;
      min-height: 84px;
      padding: 12px;
      border: 1px solid transparent;
      border-radius: 16px;
      background: rgba(255,255,255,0.78);
    }
    .web-agent-tile.protected {
      border-color: rgba(45,22,231,0.12);
      background: linear-gradient(145deg, #ffffff, #e8efff);
    }
    .web-agent-tile.missing {
      border-color: var(--line);
      background: #f7f7f8;
    }
    .web-agent-icon {
      width: 42px;
      height: 42px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
      background: var(--surface);
      color: var(--accent);
      font: 900 12px/1 var(--mono);
    }
    .web-agent-icon img {
      width: 25px;
      height: 25px;
      object-fit: contain;
      filter: none;
    }
    .web-agent-icon.muted img {
      filter: grayscale(1);
      opacity: 0.62;
    }
    .web-agent-icon.muted {
      color: var(--ink-mute);
    }
    .web-agent-tile strong,
    .web-agent-tile small,
    .web-agent-tile em {
      display: block;
      min-width: 0;
    }
    .web-agent-tile strong {
      font-size: 15px;
      font-weight: 900;
      line-height: 1.05;
    }
    .web-agent-tile small {
      margin-top: 2px;
      color: var(--ink-dim);
      font-size: 12px;
      font-weight: 750;
      line-height: 1.18;
    }
    .web-agent-meta-row {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 6px;
    }
    .web-agent-tile em {
      width: fit-content;
      padding: 6px 9px;
      border-radius: 999px;
      background: rgba(11,121,104,0.12);
      color: #087b69;
      font: 850 11px/1 var(--mono);
      font-style: normal;
    }
    .web-agent-install-badge {
      width: 24px;
      height: 24px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: var(--surface);
      color: var(--ink-dim);
      font-style: normal;
    }
    .web-agent-install-badge.cloud {
      color: #2a63d8;
      background: #eef5ff;
    }
    .web-agent-monitor-switch {
      position: relative;
      width: 38px;
      height: 22px;
      display: inline-flex;
      align-items: center;
    }
    .web-agent-monitor-switch input {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }
    .web-agent-monitor-switch span {
      position: absolute;
      inset: 0;
      border-radius: 999px;
      background: #d9dde2;
      box-shadow: inset 0 0 0 1px rgba(15,17,21,0.1);
      cursor: pointer;
      transition: background .16s ease;
    }
    .web-agent-monitor-switch span::after {
      content: "";
      position: absolute;
      top: 3px;
      left: 3px;
      width: 16px;
      height: 16px;
      border-radius: 999px;
      background: var(--surface);
      box-shadow: 0 1px 4px rgba(0,0,0,.14);
      transition: transform .16s ease;
    }
    .web-agent-monitor-switch input:checked + span {
      background: #2d16e7;
    }
    .web-agent-monitor-switch input:checked + span::after {
      transform: translateX(16px);
    }
    .web-agent-monitor-switch input:disabled + span {
      cursor: not-allowed;
      opacity: .65;
    }
    .web-agent-tile.missing em {
      background: var(--surface);
      color: var(--ink);
    }

    @media (max-width: 900px) {
      .signin-shell,
      .connected-console {
        margin-top: 38px;
      }
      .package-setup-shell {
        margin-top: 0;
      }
      .signin-shell,
      .plain-console-grid,
      .ciso-grid,
      .ciso-metrics {
        grid-template-columns: 1fr;
      }
      .plain-console-grid .wide,
      .ciso-grid .wide {
        grid-column: span 1;
      }
      .evaluation-provider-panel {
        grid-column: span 1;
      }
      .leash-ai-upgrade {
        grid-template-columns: 22px minmax(0, 1fr);
      }
      .leash-ai-upgrade button {
        grid-column: 1 / -1;
      }
      .console-actions {
        justify-content: flex-start;
      }
      .web-connected-device {
        width: 100%;
        grid-template-columns: 34px minmax(0, 1fr);
      }
      .web-connected-device em {
        grid-column: 2;
        justify-self: start;
      }
      .personal-outcome-card {
        grid-template-columns: 1fr;
      }
      .personal-outcome-card > span {
        width: fit-content;
      }
      .local-mode-callout {
        align-items: stretch;
        flex-direction: column;
      }
      .local-mode-callout .console-link {
        width: 100%;
      }
      .download-pill-grid {
        grid-template-columns: 1fr;
      }
      .account-price-card .ol-plan-row {
        align-items: flex-start;
        flex-direction: column;
      }
      .account-price-card .ol-plan-row > strong {
        text-align: left;
      }
      .download-banner {
        display: grid;
        align-items: start;
      }
      .download-actions {
        justify-content: flex-start;
      }
      .web-notification-dock {
        right: 12px;
        bottom: 12px;
        width: calc(100vw - 24px);
      }
      .web-client-shell,
      .web-plugin-detail-grid,
      .web-plugin-grid,
      .web-agent-grid {
        grid-template-columns: 1fr;
      }
      .web-client-nav {
        position: static;
      }
      .web-overview-strip,
      .web-plugin-detail-head,
      .web-agent-overview-head,
      .web-marketplace-row {
        align-items: stretch;
        flex-direction: column;
      }
      .web-plugin-state { width: 100%; min-width: 0; }
      .web-plugin-state { justify-content: space-between; }
      .web-plugin-detail-controls { justify-content: flex-start; }
      .web-feature-status-control { width: min(100%, 260px); }
      .web-plugin-tabs { width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .web-plugin-summary-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .web-plugin-audit-columns { display: none; }
      .web-plugin-audit-row { grid-template-columns: 92px minmax(0,1fr) 16px; }
      .web-plugin-audit-agent { display: none; }
      .web-plugin-audit-action { grid-column: 2; }
      .web-plugin-audit-row > .web-outcome-status { grid-column: 2; width: fit-content; }
      .web-plugin-audit-row > svg { grid-column: 3; grid-row: 1 / span 2; }
      .web-rule-row {
        grid-template-columns: 1fr;
      }
      .web-rule-row button {
        width: 100%;
      }
      .org-fields,
      .ciso-metrics {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 900px) {
      .account-page:has(.connected-console) {
        padding: 12px 10px 40px;
      }
      .account-page:has(.connected-console) .account-nav {
        align-items: center;
        min-height: 58px;
        padding: 0 8px 8px;
      }
      .account-page:has(.connected-console) .account-nav-links {
        display: flex;
        width: auto;
        flex-direction: row;
        align-items: center;
      }
      .account-page:has(.connected-console) .account-nav-user {
        display: none;
      }
      .account-page:has(.connected-console) .account-nav-button {
        min-height: 36px;
        padding: 7px 11px;
        font-size: 12px;
      }
      .account-page:has(.connected-console) .web-client-shell {
        gap: 14px;
        padding: 12px;
        border-radius: 22px;
      }
      .web-client-nav {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding: 0 0 6px;
        scrollbar-width: none;
      }
      .web-client-nav::-webkit-scrollbar {
        display: none;
      }
      .web-nav-section {
        display: flex;
        flex: 0 0 auto;
        gap: 6px;
      }
      .web-nav-group {
        display: contents;
      }
      .web-client-nav button {
        width: auto;
        min-height: 42px;
        flex: 0 0 auto;
        padding: 0 13px;
        border: 1px solid rgba(45,22,231,0.12);
        background: rgba(255,255,255,0.66);
        white-space: nowrap;
      }
      .web-nav-plugin {
        min-height: 42px !important;
        margin-left: 0;
        border-left: 1px solid rgba(45,22,231,0.12) !important;
        padding: 0 13px !important;
      }
      .web-client-main {
        gap: 12px;
      }
      .web-overview-strip,
      .web-agent-overview-head {
        padding: 18px;
      }
    }

/* Redesign landing and plugin catalog */
.ol-redesign,
.pl-redesign {
  min-height: 100vh;
  background: #f3f5e9;
  color: #16160f;
  font-family: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
}

/* Final design lock: other-apps/new-main-web-design */
:root {
  --design-bg: #fffdf7;
  --design-ink: #22201a;
  --design-muted: #5c584a;
  --design-soft: #8b8674;
  --design-line: #ece7d6;
  --design-accent: #5b4df0;
  --design-accent-2: #8a4df0;
  --design-wash: #faf8ef;
  --design-yellow: #fff4d6;
  --design-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --design-sans: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.site-page,
.blog-redesign,
.pl-redesign,
.marketplace-page {
  min-height: 100vh;
  background: var(--design-bg);
  color: var(--design-ink);
  font-family: var(--design-sans);
  letter-spacing: 0;
}

.ol-redesign-header {
  position: sticky;
  top: 0;
  z-index: 50;
  max-width: none;
  margin: 0;
  padding: 18px clamp(16px, 4vw, 48px);
  border-bottom: 1px solid #f0ecdd;
  background: rgba(255, 253, 247, .94);
  backdrop-filter: blur(14px);
}

.marketing-nav {
  max-width: none;
}

.ol-redesign-brand {
  gap: 10px;
  color: var(--design-ink);
  font-size: 18px;
  font-weight: 700;
}

.ol-brand-icon {
  width: auto;
  height: auto;
  border: 0;
  background: transparent;
  font-size: 22px;
  box-shadow: none;
}

.ol-brand-icon img {
  display: none;
}

.ol-redesign-nav {
  gap: 8px;
}

.ol-redesign-nav a,
.ol-github-button {
  min-height: 38px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  padding: 8px 14px;
  color: var(--design-ink);
  font-size: 14px;
  font-weight: 600;
  box-shadow: none;
}

.ol-redesign-nav a:hover,
.ol-redesign-nav a.active,
.ol-github-button:hover {
  background: var(--design-yellow);
  color: var(--design-ink);
}

.ol-redesign-nav a.dark {
  background: var(--design-accent);
  color: #fff;
  padding: 9px 18px;
}

.ol-redesign-nav a.dark:hover {
  background: #4335c9;
  color: #fff;
}

.home-hero {
  display: block;
  max-width: 1120px;
  margin: 0 auto;
  padding: 64px clamp(16px, 4vw, 48px) 44px;
  text-align: center;
}

.home-hero h1,
.ol-pricing-redesign > header h2,
.blog-hero-redesign h1 {
  max-width: 900px;
  margin: 0 auto;
  color: var(--design-ink);
  font-size: clamp(44px, 6vw, 68px);
  line-height: .98;
  letter-spacing: 0;
  font-weight: 700;
}

.home-hero .accent {
  color: var(--design-accent-2);
}

.home-hero p {
  max-width: 740px;
  margin: 24px auto 0;
  color: var(--design-muted);
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.42;
}

.home-hero > strong {
  display: block;
  margin: 32px 0 20px;
  font-size: 16px;
}

.home-actions {
  justify-content: center;
  gap: 12px;
}

.home-actions a,
.home-actions button {
  min-height: 50px;
  border: 1.5px solid var(--design-line);
  border-radius: 13px;
  background: #fff;
  padding: 0 26px;
  color: var(--design-ink);
  font-weight: 700;
}

.home-actions .primary {
  border-color: var(--design-ink);
  background: var(--design-ink);
  color: #fffdf7;
}

.install-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
  max-width: 100%;
  margin: 18px auto 0;
  border: 1.5px solid var(--design-line);
  border-radius: 10px;
  background: #fff;
  padding: 9px 12px 9px 16px;
  color: var(--design-muted);
  font: 600 14px var(--design-mono);
}

.install-strip code {
  color: var(--design-ink);
}

.install-strip button {
  border: 0;
  border-radius: 7px;
  background: var(--design-ink);
  color: #fff;
  font: 700 11px var(--design-sans);
}

.platform-pills,
.home-stats {
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}

.platform-pills span,
.platform-pills a {
  min-height: 34px;
  border: 1.5px solid var(--design-line);
  border-radius: 999px;
  background: #fff;
  padding: 0 14px;
  color: var(--design-soft);
  font-size: 13px;
  font-weight: 700;
}

.platform-pills .active {
  border-color: var(--design-ink);
  color: var(--design-ink);
}

.home-stats span {
  color: var(--design-soft);
  font-size: 15px;
  font-weight: 700;
}

.registry-preview,
.ol-pricing-card,
.plugin-catalog-shell {
  max-width: 1120px;
  margin: 54px auto 0;
  border: 1.5px solid var(--design-line);
  border-radius: 24px;
  background: #fff;
  padding: clamp(18px, 3vw, 34px);
  box-shadow: 0 18px 60px -42px rgba(34, 32, 26, .45);
}

.registry-toolbar,
.pl-controls {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  gap: 18px;
  align-items: center;
}

.registry-search,
.pl-search {
  min-height: 56px;
  border: 1.5px solid var(--design-line);
  border-radius: 14px;
  background: #fff;
  padding: 0 18px;
  color: var(--design-soft);
  font-size: 19px;
  font-weight: 500;
}

.registry-filters,
.pl-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.registry-filters button,
.pl-filter-row button {
  min-height: 46px;
  border: 0;
  border-radius: 999px;
  background: var(--design-wash);
  padding: 0 18px;
  color: var(--design-ink);
  font-size: 17px;
  font-weight: 700;
}

.registry-filters button.active,
.pl-filter-row button.active {
  background: var(--design-accent);
  color: #fff;
}

.registry-grid,
.pl-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 22px;
}

.registry-card,
.plugin-card {
  min-height: 172px;
  border: 1.5px solid var(--design-line);
  border-radius: 14px;
  background: #fff;
  padding: 24px 22px;
  box-shadow: none;
}

.registry-card:hover,
.plugin-card:hover {
  border-color: var(--design-ink);
  transform: translateY(-1px);
}

.registry-card .author,
.plugin-card .author,
.plugin-author {
  color: #b4ad9d;
  font-size: 14px;
  font-weight: 700;
}

.registry-card h3,
.plugin-card h3 {
  color: var(--design-ink);
  font: 700 22px/1.12 var(--design-mono);
  letter-spacing: 0;
}

.registry-card p,
.plugin-card p {
  color: var(--design-muted);
  font-size: 17px;
  line-height: 1.48;
}

.registry-meta,
.plugin-card-meta {
  color: var(--design-soft);
  font-size: 14px;
  font-weight: 700;
}

.registry-tag,
.plugin-category {
  border-radius: 8px;
  background: #eefaf3;
  color: #178055;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.build-plugin-card {
  display: grid;
  place-items: center;
  min-height: 172px;
  border: 1.5px dashed var(--design-line);
  border-radius: 14px;
  background: var(--design-wash);
  text-align: center;
}

.author-section {
  max-width: 1120px;
  margin: 84px auto;
  padding: 0 clamp(16px, 4vw, 48px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 1fr);
  gap: 58px;
  align-items: center;
}

.author-section .pill,
.pricing-kicker,
.blog-kicker {
  width: fit-content;
  border-radius: 999px;
  background: var(--design-yellow);
  padding: 7px 14px;
  color: var(--design-ink);
  font-size: 13px;
  font-weight: 700;
}

.author-section h2,
.ol-pricing-redesign h2 {
  margin: 18px 0 16px;
  color: var(--design-ink);
  font-size: clamp(36px, 5vw, 48px);
  line-height: 1.05;
  letter-spacing: 0;
}

.author-section code {
  border: 1.5px dashed #bcb3ff;
  border-radius: 8px;
  background: #f7f5ff;
  padding: 0 8px;
  color: var(--design-accent);
  font-family: var(--design-mono);
}

.event-card {
  border: 1.5px solid var(--design-line);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}

.event-card div {
  padding: 14px 18px;
}

.event-card div + div {
  border-top: 1px solid var(--design-line);
  background: #f6f5ff;
}

.code-window {
  border-radius: 12px;
  background: var(--design-ink);
  color: #e8e5d8;
  padding: 22px 26px;
  font: 500 14px/1.65 var(--design-mono);
  box-shadow: 0 26px 64px -38px rgba(34, 32, 26, .6);
}

.ol-pricing-redesign,
.blog-hero-redesign,
.pl-hero {
  max-width: 1120px;
  margin: 0 auto;
  padding: 64px clamp(16px, 4vw, 48px);
}

.ol-pricing-redesign > header,
.blog-hero-redesign {
  text-align: center;
}

.ol-pricing-card {
  max-width: 880px;
  text-align: left;
}

.ol-plan-row {
  border: 1.5px solid var(--design-line);
  border-radius: 14px;
  background: #fff;
  padding: 20px 24px;
}

.ol-plan-row.featured {
  border-color: #c9c2f7;
  background: #f8f7ff;
}

.site-page main > .purple-cta,
.purple-cta {
  max-width: 1120px;
  margin: 96px auto;
  border-radius: 24px;
  background: linear-gradient(120deg, #5b4df0, #8a4df0);
  padding: clamp(30px, 5vw, 54px);
  color: #fff;
}

.purple-cta h2 {
  font-size: clamp(34px, 5vw, 52px);
  line-height: 1.05;
  letter-spacing: 0;
}

.purple-cta p {
  color: rgba(255,255,255,.72);
  font-size: 22px;
}

.ol-redesign-footer,
.pl-footer {
  border-top: 1px solid #f0ecdd;
  background: var(--design-bg);
  color: var(--design-muted);
}

.pl-hero h1,
.blog-article h1,
.plugin-view h1 {
  color: var(--design-ink);
  font-size: clamp(38px, 6vw, 64px);
  line-height: 1.02;
  letter-spacing: 0;
}

.pl-hero p,
.blog-hero-redesign p,
.blog-article p,
.plugin-view p {
  color: var(--design-muted);
}

.pl-kicker,
.mono-kicker {
  border-radius: 999px;
  background: var(--design-yellow);
  color: var(--design-ink);
  padding: 7px 14px;
  font: 700 13px var(--design-sans);
  letter-spacing: 0;
  text-transform: none;
}

.blog-featured,
.blog-grid-card,
.plugin-view,
.blog-article {
  border: 1.5px solid var(--design-line);
  border-radius: 24px;
  background: #fff;
  box-shadow: none;
}

.blog-article {
  max-width: 860px;
  margin: 48px auto 90px;
  padding: clamp(24px, 5vw, 56px);
}

.plugin-view {
  max-width: 1040px;
  margin: 48px auto 90px;
  padding: clamp(24px, 5vw, 46px);
}

@media (max-width: 900px) {
  .ol-redesign-header {
    padding: 14px 16px;
  }
  .ol-redesign-nav.open {
    display: grid;
    grid-template-columns: 1fr;
  }
  .home-hero {
    padding-top: 42px;
  }
  .home-hero h1,
  .ol-pricing-redesign > header h2,
  .blog-hero-redesign h1 {
    font-size: clamp(38px, 12vw, 56px);
  }
  .registry-toolbar,
  .pl-controls,
  .author-section {
    grid-template-columns: 1fr;
  }
  .registry-grid,
  .pl-grid {
    grid-template-columns: 1fr;
  }
  .registry-filters,
  .pl-filter-row {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 4px;
  }
  .registry-filters button,
  .pl-filter-row button {
    white-space: nowrap;
  }
  .purple-cta {
    margin: 56px 16px;
  }
}

@media (max-width: 560px) {
  .home-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
  .home-actions a,
  .home-actions button {
    width: 100%;
  }
  .install-strip {
    width: 100%;
    font-size: 12px;
  }
  .platform-pills {
    overflow-x: auto;
    justify-content: flex-start;
    padding-bottom: 4px;
  }
  .home-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .registry-preview,
  .ol-pricing-card,
  .plugin-catalog-shell {
    border-radius: 18px;
    margin-top: 34px;
  }
  .ol-plan-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* Fast overview and consumer notification center */
.web-activity-snapshot {
  display: grid;
  gap: 14px;
  padding: 20px;
  border: 1px solid rgba(17,17,17,.1);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(244,246,255,.92));
  box-shadow: 0 18px 48px -38px rgba(45,22,231,.55);
}
.web-snapshot-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; }
.web-snapshot-head h2 { margin: 3px 0 0; font-size: clamp(24px,2.7vw,34px); letter-spacing: -.04em; }
.web-snapshot-head p { margin-top: 4px; color: #686674; font-size: 13px; }
.web-outcome-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.web-outcome-metric {
  min-width: 0;
  display: grid;
  grid-template-columns: 38px minmax(0,1fr);
  align-items: start;
  gap: 11px;
  padding: 15px;
  border: 1px solid rgba(17,17,17,.08);
  border-radius: 16px;
  background: #fff;
}
.web-outcome-metric > span { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; }
.web-outcome-metric > div { display: grid; gap: 2px; min-width: 0; }
.web-outcome-metric strong { font-size: 27px; line-height: 1; letter-spacing: -.04em; }
.web-outcome-metric b { margin-top: 3px; font-size: 12px; line-height: 1.2; }
.web-outcome-metric small { color: #777582; font-size: 10px; line-height: 1.25; }
.web-outcome-metric.blocked > span { background: #ffe7e9; color: #bd202b; }
.web-outcome-metric.automatic > span { background: #e5f7ef; color: #087b69; }
.web-outcome-metric.manual > span { background: #ece9ff; color: #3a27d6; }
.web-outcome-metric.waiting > span { background: #fff1cf; color: #8a5a00; }
.web-snapshot-details { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(260px,.75fr); gap: 10px; }
.web-threat-summary, .web-agent-mix { min-width: 0; padding: 17px; border: 1px solid rgba(17,17,17,.08); border-radius: 16px; background: rgba(255,255,255,.92); }
.web-snapshot-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.web-snapshot-card-head h3 { margin: 0; font-size: 15px; }
.web-snapshot-card-head p { margin-top: 3px; color: #777582; font-size: 11px; }
.web-snapshot-card-head > svg { color: #4b2df4; }
.web-threat-list, .web-agent-mix-list { display: grid; gap: 12px; margin-top: 16px; }
.web-threat-row { display: grid; grid-template-columns: minmax(130px,.8fr) minmax(100px,1fr) minmax(180px,auto); align-items: center; gap: 12px; }
.web-threat-name { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.web-threat-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.web-threat-name span { color: #777582; font: 800 11px/1 var(--mono); }
.web-threat-bar { height: 7px; overflow: hidden; border-radius: 999px; background: #eeedf2; }
.web-threat-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#4b2df4,#8a6cff); }
.web-threat-results { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 5px; }
.web-threat-results span { padding: 4px 6px; border-radius: 999px; font-size: 9px; font-weight: 800; white-space: nowrap; }
.web-threat-results .blocked { background: #ffe7e9; color: #a91e29; }
.web-threat-results .automatic { background: #e5f7ef; color: #087b69; }
.web-threat-results .manual { background: #ece9ff; color: #3a27d6; }
.web-agent-mix-list > div { display: grid; grid-template-columns: 36px minmax(0,1fr) auto; align-items: center; gap: 10px; }
.web-agent-mix-icon { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 11px; background: #eef2ff; color: #3727ce; font-weight: 850; }
.web-agent-mix-icon img { width: 23px; height: 23px; object-fit: contain; }
.web-agent-mix-list > div > span:nth-child(2) { display: grid; gap: 2px; min-width: 0; }
.web-agent-mix-list strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.web-agent-mix-list small { color: #777582; font-size: 10px; }
.web-agent-mix-list b { min-width: 27px; height: 27px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: #ece9ff; color: #3a27d6; font-size: 11px; }
.web-snapshot-empty { min-height: 130px; display: grid; place-content: center; justify-items: center; gap: 5px; color: #159c77; text-align: center; }
.web-snapshot-empty span { max-width: 260px; color: #777582; font-size: 11px; }
@media (max-width: 1000px) {
  .web-outcome-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .web-snapshot-details { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .web-activity-snapshot { padding: 14px; }
  .web-outcome-metrics { grid-template-columns: 1fr; }
  .web-threat-row { grid-template-columns: 1fr; gap: 6px; }
  .web-threat-results { justify-content: flex-start; }
}
.account-header-notification-slot {
  position: relative;
  display: flex;
  align-items: center;
}
.account-notification-center { position: relative; }
.account-notification-trigger {
  position: relative;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(17,17,17,.12);
  border-radius: 999px;
  background: #fff;
  color: #111;
}
.account-notification-trigger > strong {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #4b2df4;
  color: #fff;
  font-size: 10px;
  line-height: 1;
}
.account-notification-menu {
  position: absolute;
  z-index: 80;
  top: calc(100% + 10px);
  right: 0;
  width: min(390px, calc(100vw - 28px));
  overflow: hidden;
  border: 1px solid rgba(17,17,17,.13);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(17,17,17,.2);
}
.account-notification-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 17px 18px;
  border-bottom: 1px solid rgba(17,17,17,.09);
}
.account-notification-menu-head > div { display: grid; gap: 2px; }
.account-notification-menu-head strong { font-size: 19px; }
.account-notification-menu-head small { color: #6c6a75; font-size: 12px; }
.account-notification-menu-head button {
  border: 0;
  background: transparent;
  color: #321ee8;
  font-weight: 750;
}
.account-notification-list { max-height: 470px; overflow-y: auto; }
.account-notification-list > button {
  width: 100%;
  display: grid;
  grid-template-columns: 38px minmax(0,1fr) 8px;
  align-items: center;
  gap: 11px;
  padding: 13px 16px;
  border: 0;
  border-bottom: 1px solid rgba(17,17,17,.07);
  background: #fff;
  color: #111;
  text-align: left;
}
.account-notification-list > button:hover { background: #f6f7fb; }
.account-notification-list > button.unread { background: #f1efff; }
.account-notification-list > button.unread:hover { background: #e8e4ff; }
.account-notification-agent {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: #e7edff;
  color: #2d16e7;
  font-weight: 850;
}
.account-notification-agent img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}
.account-notification-list > button > span:nth-child(2) { display: grid; gap: 4px; min-width: 0; }
.account-notification-list > button strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.account-notification-list > button small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #6c6a75; font-size: 11px; }
.account-notification-list > button i { width: 8px; height: 8px; border-radius: 999px; background: #4b2df4; }
.account-notification-empty { display: grid; justify-items: center; gap: 5px; padding: 32px 20px; text-align: center; }
.account-notification-empty svg { color: #159c77; }
.account-notification-empty small { color: #6c6a75; }
.web-data-loading {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 52px;
  padding: 10px 15px;
  border: 1px solid #dce3ff;
  border-radius: 16px;
  background: #f3f6ff;
  color: #17151e;
}
.web-data-loading > span:last-child { display: grid; gap: 2px; }
.web-data-loading strong { font-size: 13px; }
.web-data-loading small { color: #676575; font-size: 11px; }
.web-loading-spinner {
  width: 19px;
  height: 19px;
  border: 2px solid #cbd5ff;
  border-top-color: #321ee8;
  border-radius: 999px;
  animation: webOverviewSpin .7s linear infinite;
}
@keyframes webOverviewSpin { to { transform: rotate(360deg); } }
.web-agent-tile { position: relative; cursor: pointer; transition: transform 150ms ease, border-color 150ms ease; }
.web-agent-tile:hover { transform: translateY(-2px); border-color: rgba(45,22,231,.3); }
.web-agent-unread {
  position: absolute;
  top: 8px;
  right: 8px;
  min-width: 21px;
  height: 21px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #4b2df4;
  color: #fff;
  font-size: 10px;
  font-weight: 850;
}
.personal-outcome-card { width: 100%; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.personal-outcome-card:hover { border-color: rgba(45,22,231,.3); }
.personal-outcome-card.unread { border-color: #c7bfff; background: #f3f1ff; box-shadow: inset 4px 0 0 #4b2df4; }
.web-plugin-back.visible { display: inline-flex; align-items: center; gap: 6px; }
.web-history-heading {
  display: grid;
  grid-template-columns: 52px minmax(0,1fr) auto;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(17,17,17,.1);
}
.web-history-heading .account-kicker { margin-bottom: 5px; }
.web-history-heading h2, .web-outcome-detail h2 { margin: 0; font-size: clamp(28px,3vw,42px); letter-spacing: -.045em; }
.web-history-heading p { margin-top: 4px; color: #656370; }
.web-history-agent-icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: #eef2ff;
}
.web-history-agent-icon img { width: 31px; height: 31px; object-fit: contain; }
.web-unread-summary { padding: 7px 10px; border-radius: 999px; background: #eeebff; color: #321ee8; font-size: 12px; }
.web-empty-history { display: grid; justify-items: center; gap: 6px; padding: 42px 20px; text-align: center; color: #159c77; }
.web-empty-history p { color: #6c6a75; }
.web-outcome-detail-hero { display: grid; justify-items: start; gap: 10px; margin-top: 18px; max-width: 760px; }
.web-outcome-detail-hero p { color: #5c5a67; font-size: 16px; line-height: 1.55; }
.web-outcome-status { display: inline-flex; padding: 7px 10px; border-radius: 999px; font-size: 11px; font-weight: 850; text-transform: uppercase; letter-spacing: .05em; }
.web-outcome-status.stopped { background: #ffe7e7; color: #bd2020; }
.web-outcome-status.waiting { background: #fff1cf; color: #8a5a00; }
.web-outcome-status.safe { background: #e4f7ef; color: #087b69; }
.web-outcome-facts { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin-top: 25px; }
.web-outcome-facts > div, .web-outcome-explanation > div { display: grid; gap: 5px; padding: 15px; border: 1px solid rgba(17,17,17,.1); border-radius: 14px; background: #f8f9fc; }
.web-outcome-facts small, .web-outcome-explanation small { color: #6c6a75; font-size: 11px; }
.web-outcome-facts strong, .web-outcome-explanation strong { overflow-wrap: anywhere; font-size: 13px; }
.web-outcome-explanation { display: grid; gap: 10px; margin-top: 25px; }
.web-outcome-explanation h3 { margin: 0 0 2px; }
.web-history-page { padding: clamp(18px,3vw,30px); }
.web-history-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(17,17,17,.1);
}
.web-history-page-head h2 { margin: 0; font-size: clamp(31px,3.5vw,46px); letter-spacing: -.05em; }
.web-history-page-head p { max-width: 680px; margin-top: 6px; color: #62606d; font-size: 14px; }
.web-history-list { display: grid; gap: 10px; margin-top: 18px; }
.web-plugin-outcomes .web-history-list { margin-top: 14px; }
.web-plugin-outcomes .web-history-card { grid-template-columns: 38px minmax(0,1fr) minmax(120px,auto) 18px; gap: 12px; padding: 13px; }
.web-plugin-outcomes .web-history-result-icon { width: 38px; height: 38px; }
.web-plugin-outcomes .web-history-evidence,
.web-plugin-outcomes .web-history-time small { display: none; }
.web-plugin-outcomes .web-history-time { justify-items: end; text-align: right; }
.web-history-card {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: 44px minmax(0,1fr) minmax(160px,auto) 20px;
  align-items: start;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(17,17,17,.11);
  border-radius: 16px;
  background: #fff;
  color: #17151e;
  font: inherit;
  text-align: left;
  transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}
.web-history-card:hover { transform: translateY(-1px); border-color: rgba(45,22,231,.34); box-shadow: 0 12px 28px -24px rgba(17,17,17,.5); }
.web-history-card.unread { border-color: #c7bfff; background: linear-gradient(100deg,#f1efff,#fff 42%); box-shadow: inset 4px 0 0 #4b2df4; }
.web-history-result-icon { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 13px; }
.web-history-result-icon.stopped { background: #ffe5e7; color: #bd202b; }
.web-history-result-icon.waiting { background: #fff0cb; color: #8b5b00; }
.web-history-result-icon.safe { background: #e2f6ed; color: #087b69; }
.web-history-main { display: grid; gap: 7px; min-width: 0; }
.web-history-card-top { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.web-history-card-top > strong { font-size: 15px; font-weight: 850; line-height: 1.2; }
.web-history-summary { color: #575563; font-size: 13px; line-height: 1.42; }
.web-history-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; color: #777581; font-size: 11px; }
.web-history-meta b { color: #25232b; font-size: 12px; }
.web-inline-agent-name {
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  vertical-align: middle;
}
.web-inline-agent-name img {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  object-fit: contain;
}
.web-inline-agent-name > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.web-notification-meta .web-inline-agent-name,
.web-notification-meta .web-inline-agent-name > span {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.web-history-meta span::before { content: "•"; margin-right: 6px; color: #aaa8b0; }
.web-history-evidence { width: fit-content; max-width: 100%; display: grid; gap: 4px; margin-top: 2px; }
.web-history-evidence small { color: #777581; font-size: 10px; font-weight: 750; text-transform: uppercase; letter-spacing: .06em; }
.web-history-evidence code { max-width: 100%; overflow: hidden; padding: 6px 8px; border-radius: 8px; background: #f1f0eb; color: #56545e; font: 650 11px/1.3 var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.web-history-time { display: grid; justify-items: end; gap: 4px; text-align: right; white-space: nowrap; }
.web-history-time strong { color: #25232b; font-size: 12px; }
.web-history-time small { color: #777581; font-size: 10px; }
.web-history-time i { margin-top: 5px; padding: 4px 7px; border-radius: 999px; background: #4b2df4; color: #fff; font-size: 9px; font-style: normal; font-weight: 850; text-transform: uppercase; }
.web-history-open { align-self: center; color: #94919e; }
.web-history-loading { min-height: 220px; display: grid; place-content: center; justify-items: center; gap: 8px; text-align: center; }
.web-history-loading small { color: #777581; }
.web-history-loading.error button, .web-history-more { min-height: 42px; padding: 0 18px; border: 1px solid #111; border-radius: 999px; background: #111; color: #fff; font-weight: 800; }
.web-history-more { display: block; margin: 20px auto 0; }
.web-history-more:disabled { opacity: .55; }
.web-history-end, .web-history-inline-error { margin: 18px 0 0; color: #777581; text-align: center; font-size: 12px; }
.web-history-inline-error { color: #bd202b; }
.web-outcome-facts > div > span { color: #777581; font-size: 10px; line-height: 1.35; }
.web-outcome-facts.secondary { margin-top: 10px; }
@media (max-width: 700px) {
  .account-notification-menu { position: fixed; top: 72px; right: 14px; }
  .web-history-heading { grid-template-columns: 45px minmax(0,1fr); }
  .web-unread-summary { grid-column: 1 / -1; width: fit-content; }
  .web-outcome-facts { grid-template-columns: 1fr 1fr; }
  .web-history-page-head { align-items: flex-start; flex-direction: column; }
  .web-history-card { grid-template-columns: 40px minmax(0,1fr) 18px; }
  .web-history-result-icon { width: 40px; height: 40px; }
  .web-history-time { grid-column: 2 / -1; justify-items: start; text-align: left; white-space: normal; }
  .web-history-time i { position: absolute; top: 10px; right: 10px; }
}

/* Exact footer CTA from other-apps/new-main-web-design/Leash Landing.dc.html */
.site-page main > section.purple-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  width: auto;
  max-width: none;
  min-height: 0;
  margin: 0 48px 48px;
  border-radius: 20px;
  background: linear-gradient(120deg, #5b4df0, #8a4df0);
  padding: 48px 56px;
  color: #fff;
}

.site-page main > section.purple-cta h2 {
  margin: 0 0 8px;
  color: #fff;
  font-size: 32px;
  line-height: 1.12;
  letter-spacing: 0;
  font-weight: 800;
}

.site-page main > section.purple-cta p {
  margin: 0;
  color: #d8d3fb;
  font-size: 15.5px;
  line-height: 1.35;
  font-weight: 600;
}

.site-page main > section.purple-cta > div:last-child {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}

.site-page main > section.purple-cta a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  border: 1.5px solid rgba(255,255,255,.4);
  border-radius: 12px;
  background: transparent;
  padding: 13px 24px;
  color: #fff;
  font-size: 15.5px;
  line-height: 1;
  font-weight: 700;
  text-decoration: none;
}

.site-page main > section.purple-cta a:first-child {
  border-color: #fff;
  background: #fff;
  color: #4335c9;
}

@media (max-width: 760px) {
  .site-page main > section.purple-cta {
    flex-direction: column;
    align-items: flex-start;
    margin: 0 16px 40px;
    padding: 32px 24px;
  }
  .site-page main > section.purple-cta > div:last-child {
    flex-wrap: wrap;
  }
}

/* Personal account dashboard: consumer-facing navigation and Leash visual system. */
.account-page:has(.connected-console) {
  --account-blue: #2d16e7;
  --account-wash: #c9d9ff;
  --account-ink: #111111;
  --account-panel: #ffffff;
  --account-soft: #faf8ef;
  --account-line: #ece7d6;
  background: #fffdf7;
  color: var(--account-ink);
  min-height: 100dvh;
  padding: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  font-family: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

.account-page:has(.connected-console) button,
.account-page:has(.connected-console) input,
.account-page:has(.connected-console) select,
.account-page:has(.connected-console) textarea {
  font-family: inherit;
}

.account-page:has(.connected-console) .account-nav {
  width: 100%;
  max-width: none;
  min-height: 68px;
  padding: 10px clamp(16px, 1.8vw, 30px);
  border-bottom: 1px solid var(--account-line);
}

.account-page:has(.connected-console) > .connected-console {
  width: 100%;
  max-width: none;
  min-height: calc(100dvh - 68px);
  margin: 0;
}

.account-page:has(.connected-console) .account-brand img {
  width: 38px;
  height: 38px;
  border-radius: 11px;
}

.account-page:has(.connected-console) .account-brand-copy {
  display: flex;
  align-items: center;
  gap: 8px;
}

.account-page:has(.connected-console) .account-brand-copy strong {
  font-size: 18px;
  font-weight: 780;
}

.account-page:has(.connected-console) .account-brand-copy small {
  padding: 4px 7px;
  border-radius: 999px;
  background: #eef2ff;
  color: #514f5d;
  font-size: 10px;
  font-weight: 760;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.account-page:has(.connected-console) .web-client-shell {
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 0;
  min-height: calc(100dvh - 68px);
  margin-top: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--account-soft);
  box-shadow: none;
}

.account-page:has(.connected-console) .web-client-nav {
  position: sticky;
  top: 0;
  min-height: calc(100dvh - 68px);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 24px 16px 16px;
  border-radius: 0;
  border: 0;
  border-right: 1px solid var(--account-line);
  background: var(--account-panel);
  color: #22201a;
  max-height: calc(100dvh - 68px);
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(34, 32, 26, 0.2) transparent;
}

.account-page:has(.connected-console) .web-nav-caption {
  margin: 0 10px 6px;
  color: #8b8678;
  font-size: 11px;
  font-weight: 720;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.account-page:has(.connected-console) .web-nav-section {
  display: grid;
  gap: 5px;
}

.account-page:has(.connected-console) .web-nav-feature-group {
  display: grid;
  gap: 2px;
}

.account-page:has(.connected-console) .web-nav-protection-list {
  display: grid;
  gap: 3px;
  margin: 0 0 5px 18px;
  padding: 5px 0 5px 10px;
  border-left: 1px solid var(--account-line);
}

.account-page:has(.connected-console) .web-client-nav .web-nav-protection {
  min-height: 38px;
  padding: 0 9px;
  border-radius: 10px;
  color: #5c584a;
  font-size: 12px;
  font-weight: 620;
}

.account-page:has(.connected-console) .web-client-nav .web-nav-protection > span {
  gap: 8px;
  overflow: hidden;
}

.account-page:has(.connected-console) .web-client-nav .web-nav-protection svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  color: #a9bcff;
}

.account-page:has(.connected-console) .web-client-nav .web-nav-protection b {
  overflow: hidden;
  font: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-page:has(.connected-console) .web-client-nav .web-nav-protection i {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: #aaa69a;
}

.account-page:has(.connected-console) .web-client-nav .web-nav-protection i.on {
  background: #18a558;
  box-shadow: 0 0 0 3px rgba(24, 165, 88, 0.1);
}

.account-page:has(.connected-console) .web-client-nav .web-nav-protection:hover {
  background: #faf8ef;
  color: #22201a;
}

.account-page:has(.connected-console) .web-client-nav .web-nav-protection.active {
  background: #f1efff;
  color: #2d16e7;
  box-shadow: inset 2px 0 0 #5b4df0;
}

.account-page:has(.connected-console) .web-client-nav button {
  width: 100%;
  min-height: 48px;
  padding: 0 12px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #3a3730;
  font-size: 14px;
  font-weight: 680;
  letter-spacing: -0.01em;
}

.account-page:has(.connected-console) .web-client-nav button:hover {
  background: #faf8ef;
  color: #22201a;
}

.account-page:has(.connected-console) .web-client-nav button.active {
  border: 0;
  background: #f1efff;
  color: #2d16e7;
  box-shadow: inset 0 0 0 1px rgba(91, 77, 240, 0.16);
}

.account-page:has(.connected-console) .web-client-nav button.security {
  color: #0b7968;
}

.account-page:has(.connected-console) .web-client-nav button.cost {
  color: #5b47e0;
}

.account-page:has(.connected-console) .web-client-nav button.active.security {
  background: #e7f4ee;
  color: #0b7968;
  box-shadow: inset 0 0 0 1px rgba(11, 121, 104, 0.16);
}

.account-page:has(.connected-console) .web-client-nav button.active.cost {
  background: #eeeafd;
  color: #5b47e0;
  box-shadow: inset 0 0 0 1px rgba(91, 71, 224, 0.16);
}

.account-page:has(.connected-console) .web-client-nav button span {
  gap: 10px;
}

.account-page:has(.connected-console) .web-client-nav button span > svg {
  color: #a9bcff;
  stroke-width: 2;
}

.account-page:has(.connected-console) .web-client-nav button.active span > svg {
  color: var(--account-blue);
}

.account-page:has(.connected-console) .web-client-nav button strong {
  min-width: 24px;
  height: 24px;
  background: #f1efe6;
  color: #6d685c;
  font-family: inherit;
  font-size: 11px;
  font-weight: 760;
}

.account-page:has(.connected-console) .web-client-nav button.active strong {
  background: rgba(255, 255, 255, 0.78);
  color: currentColor;
}

.account-page:has(.connected-console) .web-nav-reassurance {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  margin-top: auto;
  padding: 13px 11px;
  border: 1px solid #ded9ca;
  border-radius: 14px;
  background: #faf8ef;
}

.account-page:has(.connected-console) .web-nav-reassurance > span {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--account-blue);
  color: #ffffff;
}

.account-page:has(.connected-console) .web-nav-reassurance div {
  display: grid;
  gap: 3px;
}

.account-page:has(.connected-console) .web-nav-reassurance strong {
  color: #22201a;
  font-size: 13px;
  font-weight: 760;
}

.account-page:has(.connected-console) .web-nav-reassurance small {
  color: #777267;
  font-size: 11px;
  font-weight: 540;
  line-height: 1.35;
}

.account-page:has(.connected-console) .web-nav-reassurance.offline {
  border-color: #efb1b1;
  background: #fff4f2;
}

.account-page:has(.connected-console) .web-nav-reassurance.offline > span {
  background: #b82424;
}

.account-page:has(.connected-console) .web-nav-reassurance.offline strong {
  color: #9f1f1f;
}

.account-page:has(.connected-console) .web-client-main {
  min-height: calc(100dvh - 68px);
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  padding: clamp(20px, 2vw, 34px);
}

.account-page:has(.connected-console) .web-client-main > .wide {
  grid-column: 1;
}

.account-page:has(.connected-console) .console-panel {
  border-color: var(--account-line);
  border-radius: 20px;
  background: var(--account-panel);
  box-shadow: 0 18px 45px -38px rgba(34, 32, 26, 0.38);
}

.account-page:has(.connected-console) .web-sync-message {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 0;
  padding: 14px 16px;
  border: 1px solid #efb1b1;
  border-radius: 14px;
  background: #fff4f2;
  color: #9f1f1f;
}

.account-page:has(.connected-console) .web-sync-message > svg {
  flex: 0 0 auto;
  margin-top: 1px;
}

.account-page:has(.connected-console) .web-sync-message span {
  display: grid;
  gap: 3px;
}

.account-page:has(.connected-console) .web-sync-message strong {
  font-size: 14px;
}

.account-page:has(.connected-console) .web-sync-message small {
  color: #865e5e;
  font-size: 12px;
  line-height: 1.4;
}

.account-page:has(.connected-console) .web-connected-device.offline {
  border-color: #efb1b1;
  background: #fff4f2;
}

.account-page:has(.connected-console) .web-overview-device-row {
  display: flex;
  justify-content: flex-end;
}

.account-page:has(.connected-console) .web-connected-device.offline .web-connected-device-art,
.account-page:has(.connected-console) .web-connected-device.offline em {
  background: #fde5e2;
  color: #9f1f1f;
}

.account-page:has(.connected-console) .web-connected-device {
  min-width: min(100%, 360px);
  grid-template-columns: 82px minmax(145px, 1fr) auto;
  gap: 13px;
  padding: 10px 12px 10px 8px;
  border-radius: 16px;
  overflow: hidden;
}

.account-page:has(.connected-console) .web-connected-device-art {
  width: 82px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(145deg, #f2efff, #e7edff);
}

.account-page:has(.connected-console) .web-connected-device-art img {
  width: 78px;
  height: 60px;
  object-fit: contain;
  filter: drop-shadow(0 7px 8px rgba(25, 20, 52, 0.16));
}

.account-page:has(.connected-console) .web-connected-device-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.account-page:has(.connected-console) .web-connected-device-copy small,
.account-page:has(.connected-console) .web-connected-device-copy strong,
.account-page:has(.connected-console) .web-connected-device-copy > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-page:has(.connected-console) .web-connected-device-copy small {
  margin: 0;
  color: #777267;
  font-size: 10px;
  font-weight: 760;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.account-page:has(.connected-console) .web-connected-device-copy strong {
  color: #22201a;
  font-size: 14px;
  font-weight: 780;
}

.account-page:has(.connected-console) .web-connected-device-copy > span {
  color: #777267;
  font-size: 11px;
  font-weight: 600;
}

.account-page:has(.connected-console) .web-agent-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.account-page:has(.connected-console) .web-protections-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}

.account-page:has(.connected-console) .web-protections-heading .account-kicker {
  margin-bottom: 9px;
  background: #e7edff;
  color: var(--account-blue);
}

.account-page:has(.connected-console) .web-protections-heading h2 {
  margin: 0;
  font-size: clamp(30px, 3vw, 42px);
  font-weight: 760;
  letter-spacing: -0.045em;
}

.account-page:has(.connected-console) .web-protections-heading p {
  margin: 6px 0 0;
  color: #575664;
  font-size: 14px;
}

.account-page:has(.connected-console) .web-protection-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.account-page:has(.connected-console) .web-protection-filters button {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  border: 1px solid rgba(17, 17, 17, 0.12);
  border-radius: 999px;
  background: #f5f6fa;
  color: #454450;
  font-size: 12px;
  font-weight: 680;
}

.account-page:has(.connected-console) .web-protection-filters button strong {
  color: #787684;
  font-size: 10px;
}

.account-page:has(.connected-console) .web-protection-filters button.active {
  border-color: #111111;
  background: #111111;
  color: #ffffff;
}

.account-page:has(.connected-console) .web-protection-filters button.active strong {
  color: rgba(255, 255, 255, 0.65);
}

.account-page:has(.connected-console) .web-plugin-card {
  border-radius: 18px;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.account-page:has(.connected-console) .web-plugin-card:hover {
  transform: translateY(-2px);
  border-color: rgba(45, 22, 231, 0.3);
}

.account-page:has(.connected-console) .web-plugin-back {
  display: none;
  min-height: 36px;
  margin: 0 0 14px;
  padding: 0 12px;
  border: 1px solid rgba(17, 17, 17, 0.12);
  border-radius: 999px;
  background: #f5f6fa;
  color: #454450;
  font-size: 12px;
  font-weight: 700;
}

@media (max-width: 900px) {
  .account-page:has(.connected-console) .web-client-shell {
    display: grid;
    grid-template-columns: 1fr;
    min-height: calc(100dvh - 58px);
    padding: 0;
  }

  .account-page:has(.connected-console) .web-client-nav {
    position: static;
    min-height: auto;
    display: flex;
    flex-direction: row;
    gap: 6px;
    padding: 8px;
    border-radius: 0;
    border-right: 0;
    border-bottom: 1px solid var(--account-line);
    overflow-x: auto;
  }

  .account-page:has(.connected-console) .web-nav-caption,
  .account-page:has(.connected-console) .web-nav-reassurance,
  .account-page:has(.connected-console) .web-nav-protection-list {
    display: none;
  }

  .account-page:has(.connected-console) .web-nav-section {
    display: flex;
    flex: 0 0 auto;
    gap: 4px;
  }

  .account-page:has(.connected-console) .web-client-nav button {
    width: auto;
    min-height: 42px;
    flex: 0 0 auto;
    padding: 0 12px;
    background: transparent;
    color: #3a3730;
  }

  .account-page:has(.connected-console) .web-client-main {
    min-height: 0;
    padding: 16px;
  }

  .account-page:has(.connected-console) .web-protections-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .account-page:has(.connected-console) .web-protection-filters {
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 3px;
  }

  .account-page:has(.connected-console) .web-protection-filters button {
    flex: 0 0 auto;
  }

  .account-page:has(.connected-console) .web-plugin-back {
    display: inline-flex;
    align-items: center;
  }
}

@media (max-width: 560px) {
  .account-page:has(.connected-console) .account-brand-copy small {
    display: none;
  }

  .account-page:has(.connected-console) .web-client-nav button span {
    gap: 7px;
  }

  .account-page:has(.connected-console) .web-client-nav button strong {
    display: none;
  }

  .account-page:has(.connected-console) .web-protections-heading h2 {
    font-size: 32px;
  }

  .account-page:has(.connected-console) .web-connected-device {
    width: 100%;
    grid-template-columns: 68px minmax(0, 1fr);
  }

  .account-page:has(.connected-console) .web-overview-device-row {
    justify-content: stretch;
  }

  .account-page:has(.connected-console) .web-connected-device-art {
    width: 68px;
    height: 56px;
  }

  .account-page:has(.connected-console) .web-connected-device-art img {
    width: 64px;
    height: 52px;
  }

  .account-page:has(.connected-console) .web-connected-device em {
    grid-column: 2;
    justify-self: start;
  }
}

/* Exact plugin-author section from other-apps/new-main-web-design/Leash Home.dc.html */
.site-page main > section.author-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
  align-items: center;
  gap: 56px;
  width: auto;
  max-width: 1360px;
  margin: 0 auto;
  padding: 24px clamp(16px, 4vw, 48px) 64px;
  box-sizing: border-box;
  overflow: visible;
}

.site-page main > section.author-band > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.site-page main > section.author-band .soft-pill {
  align-self: flex-start;
  margin: 0;
  padding: 6px 14px;
  border: 0;
  border-radius: 99px;
  background: #fff4d6;
  color: #22201a;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
}

.site-page main > section.author-band h2 {
  display: block;
  margin: 0;
  color: #22201a;
  font-size: 38px;
  line-height: 1.15;
  letter-spacing: 0;
  font-weight: 700;
}

.site-page main > section.author-band .event-select-label {
  display: inline-block;
  position: relative;
  vertical-align: baseline;
  margin: 0;
  max-width: 100%;
}

.account-page:has(.connected-console) .web-plugin-back.visible {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.site-page main > section.author-band .event-select-label > button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  margin: 0;
  border: 2px dashed #c9c2f7;
  border-radius: 12px;
  background: #f6f5ff;
  padding: 4px 14px;
  color: #4335c9;
  cursor: pointer;
  font: 600 26px "JetBrains Mono", monospace;
  line-height: 1.2;
  letter-spacing: 0;
  text-align: left;
}

.site-page main > section.author-band .event-select-label > button:hover {
  border-color: #5b4df0;
}

.site-page main > section.author-band .event-select-label > button span {
  flex: 0 0 auto;
  color: #8b8674;
  font-size: 13px;
  line-height: 1;
}

.site-page main > section.author-band .event-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  width: min(320px, 90vw);
  max-height: 280px;
  overflow-y: auto;
  border: 1.5px solid #ece7d6;
  border-radius: 14px;
  background: #fff;
  padding: 6px;
  box-shadow: 0 16px 40px rgba(34, 32, 26, .14);
  text-align: left;
  scrollbar-gutter: stable;
}

.site-page main > section.author-band .event-dropdown::-webkit-scrollbar {
  width: 10px;
}

.site-page main > section.author-band .event-dropdown::-webkit-scrollbar-track {
  background: transparent;
}

.site-page main > section.author-band .event-dropdown::-webkit-scrollbar-thumb {
  border: 2px solid #fff;
  border-radius: 99px;
  background: #c9c6bd;
}

.site-page main > section.author-band .event-dropdown button {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  padding: 9px 12px;
  color: #5c584a;
  cursor: pointer;
  font: 500 12.5px "JetBrains Mono", monospace;
  line-height: 1.35;
  letter-spacing: 0;
  text-align: left;
  white-space: nowrap;
}

.site-page main > section.author-band .event-dropdown button:hover {
  background: #faf8ef;
}

.site-page main > section.author-band .event-dropdown button.active {
  background: #efedff;
  color: #4335c9;
}

.site-page main > section.author-band .event-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 520px;
  overflow: hidden;
  border: 1.5px solid #ece7d6;
  border-radius: 14px;
  background: #fff;
}

.site-page main > section.author-band .event-card div {
  display: flex;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid #f0ecdd;
}

.site-page main > section.author-band .event-card div:last-child {
  border-bottom: 0;
  background: #f6f5ff;
}

.site-page main > section.author-band .event-card b {
  min-width: 76px;
  padding-top: 3px;
  color: #8b8674;
  font: 600 10.5px "JetBrains Mono", monospace;
  line-height: 1.2;
  letter-spacing: .14em;
}

.site-page main > section.author-band .event-card div:last-child b {
  color: #5b4df0;
}

.site-page main > section.author-band .event-card span {
  color: #22201a;
  font-size: 14px;
  line-height: 1.5;
}

.site-page main > section.author-band .event-card div:last-child span {
  font-weight: 500;
}

.site-page main > section.author-band p {
  margin: 0;
  color: #8b8674;
  font-size: 15px;
  line-height: 1.6;
}

.site-page main > section.author-band a {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  color: #5b4df0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
}

.site-page main > section.author-band a:hover {
  color: #4335c9;
}

.site-page main > section.author-band .author-code {
  max-width: 100%;
  overflow-x: auto;
  border: 0;
  border-radius: 16px;
  background: #22201a;
  padding: 24px 26px;
  box-sizing: border-box;
  color: #e8e5d8;
  font: 400 13.5px/1.75 "JetBrains Mono", monospace;
  box-shadow: 0 12px 36px rgba(34, 32, 26, .25);
}

.site-page main > section.author-band .code-window-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 14px;
}

.site-page main > section.author-band .code-window-bar span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.site-page main > section.author-band .code-window-bar span:nth-child(1) { background: #e5484d; }
.site-page main > section.author-band .code-window-bar span:nth-child(2) { background: #e8a13a; }
.site-page main > section.author-band .code-window-bar span:nth-child(3) { background: #22a06b; }

.site-page main > section.author-band .code-window-bar strong {
  margin-left: 10px;
  color: #8b8674;
  font: 600 11px "JetBrains Mono", monospace;
  letter-spacing: 0;
}

.site-page main > section.author-band .author-code pre,
.site-page main > section.author-band .author-code code {
  display: block;
  margin: 0;
  padding: 0;
  color: #e8e5d8;
  font: 400 13.5px/1.75 "JetBrains Mono", monospace;
  letter-spacing: 0;
  white-space: pre;
}

.site-page main > section.author-band .tok-purple { color: #b44df0; }
.site-page main > section.author-band .tok-blue { color: #4dc3f0; }
.site-page main > section.author-band .tok-orange { color: #e8a13a; }
.site-page main > section.author-band .tok-comment { color: #8b8674; }

@media (min-width: 1600px) {
  .site-page main > section.author-band {
    max-width: none;
    padding-right: 56px;
    padding-left: 56px;
  }
}

@media (max-width: 760px) {
  .site-page main > section.author-band {
    grid-template-columns: 1fr;
    padding: 20px 16px 56px;
  }

  .site-page main > section.author-band h2 {
    font-size: clamp(32px, 10vw, 38px);
  }

  .site-page main > section.author-band .event-select-label > button {
    font-size: clamp(20px, 6.2vw, 26px);
  }

  .site-page main > section.author-band .event-dropdown {
    width: min(320px, calc(100vw - 32px));
  }

  .site-page main > section.author-band .event-card div {
    flex-direction: column;
    gap: 6px;
  }
}

/* Exact footer CTA from other-apps/new-main-web-design/Leash Landing.dc.html */
.site-page main > section.purple-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  width: auto;
  max-width: none;
  min-height: 0;
  margin: 0 48px 48px;
  border-radius: 20px;
  background: linear-gradient(120deg, #5b4df0, #8a4df0);
  padding: 48px 56px;
  color: #fff;
}

.site-page main > section.purple-cta h2 {
  margin: 0 0 8px;
  color: #fff;
  font-size: 32px;
  line-height: 1.12;
  letter-spacing: 0;
  font-weight: 800;
}

.site-page main > section.purple-cta p {
  margin: 0;
  color: #d8d3fb;
  font-size: 15.5px;
  line-height: 1.35;
  font-weight: 600;
}

.site-page main > section.purple-cta > div:last-child {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}

.site-page main > section.purple-cta a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  border: 1.5px solid rgba(255,255,255,.4);
  border-radius: 12px;
  background: transparent;
  padding: 13px 24px;
  color: #fff;
  font-size: 15.5px;
  line-height: 1;
  font-weight: 700;
  text-decoration: none;
}

.site-page main > section.purple-cta a:first-child {
  border-color: #fff;
  background: #fff;
  color: #4335c9;
}

@media (max-width: 760px) {
  .site-page main > section.purple-cta {
    flex-direction: column;
    align-items: flex-start;
    margin: 0 16px 40px;
    padding: 32px 24px;
  }
  .site-page main > section.purple-cta > div:last-child {
    flex-wrap: wrap;
  }
}

/* Final bottom CTA override: match new-main-web-design */
.site-page main > section.purple-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(28px, 6vw, 72px);
  width: min(calc(100% - 96px), 1880px);
  max-width: min(calc(100% - 96px), 1880px);
  min-height: 210px;
  margin: 96px auto 78px;
  border-radius: 28px;
  background: linear-gradient(110deg, #5b4df0 0%, #8a4df0 100%);
  padding: 56px clamp(48px, 5vw, 84px);
  color: #fff;
}

.site-page main > section.purple-cta h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(40px, 4vw, 64px);
  line-height: 1.04;
  letter-spacing: 0;
  font-weight: 800;
}

.site-page main > section.purple-cta p {
  margin: 18px 0 0;
  color: rgba(255, 255, 255, .72);
  font-size: clamp(21px, 1.7vw, 30px);
  line-height: 1.25;
  font-weight: 600;
}

.site-page main > section.purple-cta > div:last-child {
  display: flex;
  align-items: center;
  gap: 20px;
}

.site-page main > section.purple-cta a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 220px;
  min-height: 66px;
  border: 2px solid rgba(255, 255, 255, .25);
  border-radius: 18px;
  color: #fff;
  padding: 0 30px;
  font-size: clamp(20px, 1.3vw, 26px);
  font-weight: 800;
  text-decoration: none;
}

.site-page main > section.purple-cta a:first-child {
  border-color: #fff;
  background: #fff;
  color: #5b4df0;
}

@media (max-width: 900px) {
  .site-page main > section.purple-cta {
    grid-template-columns: 1fr;
    width: calc(100% - 32px);
    max-width: calc(100% - 32px);
    min-height: 0;
    margin: 64px auto 54px;
    padding: 36px 28px;
  }
  .site-page main > section.purple-cta > div:last-child {
    flex-wrap: wrap;
  }
  .site-page main > section.purple-cta a {
    min-width: min(100%, 220px);
  }
}

/* Exact author-event dropdown and code snippet */
.author-band {
  overflow: visible;
}

.author-band h2 {
  overflow: visible;
}

.event-select-label {
  position: relative;
  z-index: 30;
  display: inline-flex;
  max-width: 100%;
}

.event-select-label > button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  width: min(100%, 552px);
  min-height: 70px;
  border: 2px dashed #c9c2f7;
  border-radius: 14px;
  background: #f7f5ff;
  padding: 4px 18px 8px 24px;
  color: #5b4df0;
  font: 800 41px/1.04 "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}

.event-select-label > button span {
  margin-left: auto;
  color: #8b8674;
  font: 800 16px/1 "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.event-dropdown {
  position: absolute;
  z-index: 40;
  top: calc(100% + 10px);
  left: 0;
  display: grid;
  gap: 0;
  width: 528px;
  max-width: min(528px, calc(100vw - 40px));
  max-height: 466px;
  overflow-y: scroll;
  scrollbar-gutter: stable;
  border: 1.5px solid #ece7d6;
  border-radius: 14px 14px 0 14px;
  background: #fff;
  padding: 16px 12px;
  box-shadow: 0 28px 60px -34px rgba(34, 32, 26, .45);
  scrollbar-color: #c9c6c0 transparent;
  scrollbar-width: auto;
}

.event-dropdown::-webkit-scrollbar {
  width: 14px;
}

.event-dropdown::-webkit-scrollbar-track {
  background: #f7f6f1;
}

.event-dropdown::-webkit-scrollbar-thumb {
  border: 3px solid #f7f6f1;
  border-radius: 999px;
  background: #c9c6c0;
}

.event-dropdown button {
  display: flex;
  align-items: center;
  min-height: 56px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  padding: 0 20px;
  color: #5c584a;
  font: 800 21px/1 "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0;
  text-align: left;
  cursor: pointer;
}

.event-dropdown button:hover,
.event-dropdown button.active {
  background: #efedff;
  color: #4335c9;
}

.author-code {
  border-radius: 18px;
  background: #22201a;
}

.code-window-bar {
  padding: 28px 36px 8px;
}

.code-window-bar strong {
  margin-left: 18px;
  color: #8b8674;
  font: 800 18px "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

.author-code pre {
  padding: 26px 44px 40px;
  font: 800 22px/1.7 "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace !important;
  letter-spacing: 0;
}

@media (max-width: 900px) {
  .event-select-label > button {
    width: 100%;
    min-height: 58px;
    font-size: clamp(27px, 8vw, 37px);
    padding-left: 14px;
  }
  .event-dropdown {
    width: min(528px, calc(100vw - 32px));
  }
  .event-dropdown button {
    font-size: 17px;
  }
  .author-code pre {
    padding: 22px 24px 30px;
    font-size: 15px !important;
  }
}

/* Final author section width: match the wide design canvas */
.site-page main > section.author-band {
  display: grid;
  grid-template-columns: minmax(520px, .92fr) minmax(620px, 1fr);
  align-items: center;
  gap: clamp(56px, 7vw, 96px);
  width: min(calc(100% - 96px), 1880px);
  max-width: min(calc(100% - 96px), 1880px);
  margin: 86px auto 118px;
  padding: 0;
  overflow: visible;
}

.site-page main > section.author-band .author-code {
  min-width: 0;
}

.site-page main > section.author-band .author-code pre {
  overflow-x: auto;
}

@media (max-width: 1100px) {
  .site-page main > section.author-band {
    grid-template-columns: 1fr;
    width: calc(100% - 32px);
    max-width: calc(100% - 32px);
    margin: 64px auto 86px;
  }
}

/* Author snippet + GitHub popup parity with new-main-web-design */
.site-nav .github-menu {
  position: relative;
  display: inline-flex;
}

.site-nav .github-pill {
  cursor: pointer;
}

.site-nav .github-pill.active {
  background: #fff4d6;
}

.site-nav .github-dropdown {
  position: absolute;
  z-index: 80;
  top: calc(100% + 10px);
  right: 0;
  display: grid;
  gap: 4px;
  width: min(410px, calc(100vw - 32px));
  border: 1.5px solid #ece7d6;
  border-radius: 16px;
  background: #fffdf7;
  padding: 10px;
  box-shadow: 0 24px 60px -32px rgba(34, 32, 26, .42);
}

.site-nav .github-dropdown::before {
  content: "";
  position: absolute;
  top: -6px;
  right: 34px;
  width: 10px;
  height: 10px;
  border-left: 1.5px solid #ece7d6;
  border-top: 1.5px solid #ece7d6;
  background: #fffdf7;
  transform: rotate(45deg);
}

.site-nav .github-dropdown a {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) minmax(38px, auto);
  align-items: center;
  gap: 10px;
  min-height: 58px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  padding: 9px 10px;
  color: #22201a;
  font-size: 13px;
}

.site-nav .github-dropdown a:hover {
  background: #faf8ef;
}

.site-nav .github-repo-icon {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--repo-tint);
  color: var(--repo-ink);
}

.site-nav .github-repo-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.site-nav .github-repo-copy strong,
.site-nav .github-repo-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-nav .github-repo-copy strong {
  font-size: 13px;
  font-weight: 800;
}

.site-nav .github-repo-copy small {
  color: #8b8674;
  font-size: 11px;
  font-weight: 600;
}

.site-nav .github-dropdown em {
  color: #8b8674;
  font-style: normal;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.site-nav .github-dropdown .github-all {
  grid-template-columns: 1fr;
  min-height: 42px;
  color: #5b4df0;
  font-weight: 800;
}

.author-band {
  grid-template-columns: minmax(0, .92fr) minmax(460px, 1fr);
  gap: clamp(42px, 8vw, 88px);
  padding-top: 70px;
}

.author-band h2 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  margin: 22px 0 22px;
  font-size: clamp(40px, 4.3vw, 58px);
  line-height: 1.02;
  letter-spacing: 0;
}

.event-select-label {
  position: relative;
  display: inline-flex;
  max-width: 100%;
}

.event-select-label select {
  width: min(100%, 580px);
  appearance: none;
  border: 2px dashed #c9c2f7;
  border-radius: 14px;
  background: #f7f5ff;
  padding: 2px 56px 6px 24px;
  color: #5b4df0;
  font: 800 clamp(31px, 3.4vw, 42px)/1.04 "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0;
  cursor: pointer;
}

.event-select-label::after {
  content: "▼";
  position: absolute;
  right: 20px;
  top: 50%;
  color: #8b8674;
  font-size: 18px;
  transform: translateY(-45%);
  pointer-events: none;
}

.event-card {
  border: 1.5px solid #ece7d6;
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
}

.event-card div {
  display: grid;
  grid-template-columns: 138px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 18px 24px;
}

.event-card div + div {
  border-top: 1.5px solid #ece7d6;
  background: #f6f5ff;
}

.event-card b {
  color: #8b8674;
  font: 700 13px/1.5 "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .22em;
}

.event-card div:last-child b {
  color: #5b4df0;
}

.event-card span {
  color: #22201a;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.45;
}

.author-band > div > p {
  margin: 28px 0 18px;
  color: #8b8674;
  font-size: 22px;
  line-height: 1.55;
}

.author-band > div > a {
  color: #5b4df0;
  font-size: 17px;
  font-weight: 800;
}

.author-code {
  overflow: hidden;
  border-radius: 20px;
  background: #22201a;
  color: #e8e5d8;
  box-shadow: 0 34px 80px -44px rgba(34, 32, 26, .58);
}

.code-window-bar {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 24px 32px 10px;
}

.code-window-bar span {
  width: 12px;
  height: 12px;
  border-radius: 999px;
}

.code-window-bar span:nth-child(1) { background: #ef4f4f; }
.code-window-bar span:nth-child(2) { background: #f2ac3f; }
.code-window-bar span:nth-child(3) { background: #2da66b; }

.code-window-bar strong {
  margin-left: 18px;
  color: #8b8674;
  font: 700 15px "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

.author-code pre {
  margin: 0;
  overflow-x: auto;
  background: transparent !important;
  color: #e8e5d8 !important;
  padding: 20px 34px 34px;
  font: 700 clamp(15px, 1.25vw, 20px)/1.7 "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace !important;
}

.tok-purple { color: #b65cff; }
.tok-blue { color: #27a7d8; }
.tok-orange { color: #f0a334; }
.tok-comment { color: #8b8674; }

@media (max-width: 900px) {
  .site-nav .github-menu {
    display: block;
  }
  .site-nav .github-dropdown {
    left: 0;
    right: auto;
  }
  .site-nav .github-dropdown::before {
    left: 34px;
    right: auto;
  }
  .author-band {
    grid-template-columns: 1fr;
    gap: 28px;
    padding-top: 48px;
  }
  .event-select-label select {
    font-size: clamp(28px, 9vw, 42px);
    padding-left: 12px;
    padding-right: 42px;
  }
  .event-card div {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* Exact install command pill from the new design */
.install-strip.hero-install {
  display: flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
  max-width: min(100%, 560px);
  min-height: 46px;
  border: 1.5px solid #ece7d6;
  border-radius: 10px;
  background: #fff;
  padding: 8px 10px 8px 16px;
  color: #8b8674;
  font: 600 13.5px "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

.install-strip.hero-install .muted-word {
  color: #8b8674;
  font-family: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 700;
}

.install-strip.hero-install > span:nth-child(2) {
  color: #8a4df0;
}

.install-strip.hero-install code {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: #5c584a;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.install-strip.hero-install button {
  flex: 0 0 auto;
  min-width: 48px;
  min-height: 28px;
  margin-left: 2px;
  border: 0;
  border-radius: 7px;
  background: #22201a;
  padding: 0 11px;
  color: #fffdf7;
  font: 700 11px "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

@media (max-width: 560px) {
  .install-strip.hero-install {
    width: 100%;
    gap: 8px;
    padding-left: 12px;
  }
}

/* Bottom CTA exact shape from new-main-web-design */
.purple-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(28px, 6vw, 72px);
  width: min(calc(100% - 96px), 1880px);
  max-width: min(calc(100% - 96px), 1880px);
  min-height: 210px;
  margin: 96px auto 78px;
  border-radius: 28px;
  background: linear-gradient(110deg, #5b4df0 0%, #8a4df0 100%);
  padding: 56px clamp(48px, 5vw, 84px);
  color: #fff;
}

.purple-cta h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(40px, 4vw, 64px);
  line-height: 1.04;
  letter-spacing: 0;
  font-weight: 800;
}

.purple-cta p {
  margin: 18px 0 0;
  color: rgba(255, 255, 255, .72);
  font-size: clamp(21px, 1.7vw, 30px);
  line-height: 1.25;
  font-weight: 600;
}

.purple-cta > div:last-child {
  display: flex;
  align-items: center;
  gap: 20px;
}

.purple-cta a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 220px;
  min-height: 66px;
  border: 2px solid rgba(255, 255, 255, .25);
  border-radius: 18px;
  color: #fff;
  padding: 0 30px;
  font-size: clamp(20px, 1.3vw, 26px);
  font-weight: 800;
  text-decoration: none;
}

.purple-cta a:first-child {
  border-color: #fff;
  background: #fff;
  color: #5b4df0;
}

@media (max-width: 900px) {
  .purple-cta {
    grid-template-columns: 1fr;
    width: calc(100% - 32px);
    min-height: 0;
    margin: 64px auto 54px;
    padding: 36px 28px;
  }
  .purple-cta > div:last-child {
    flex-wrap: wrap;
  }
  .purple-cta a {
    min-width: min(100%, 220px);
  }
}

/* Source-of-truth redesign: other-apps/new-main-web-design */
.site-page {
  background: #fffdf7;
  color: #22201a;
  font-family: var(--ol-sans);
  min-height: 100vh;
}
.site-nav {
  max-width: none;
  border-bottom: 1px solid #f0ecdd;
  padding: 18px clamp(16px, 4vw, 48px);
  background: #fffdf7;
}
.site-nav.sticky {
  background: rgba(255, 253, 247, .94);
  border-bottom: 1px solid #f0ecdd;
}
.site-brand {
  color: #22201a;
  font-size: 18px;
  font-weight: 700;
}
.site-brand > span:first-child {
  font-size: 22px;
  line-height: 1;
}
.site-mobile-actions {
  display: none;
  align-items: center;
  gap: 10px;
}
.site-nav nav a,
.site-menu {
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #22201a;
  font-size: 14px;
  font-weight: 600;
  min-height: 38px;
  padding: 8px 14px;
}
.site-nav nav a:hover,
.site-nav nav a.active {
  background: #fff4d6;
  color: #22201a;
}
.site-nav .github-pill {
  border: 1.5px solid #22201a;
  background: #fff;
}
.site-nav .start-pill {
  border-radius: 999px;
  background: #5b4df0;
  color: #fff;
  box-shadow: none;
  padding: 9px 18px;
}
.home-hero {
  gap: 18px;
  max-width: 980px;
  padding: 64px clamp(16px, 4vw, 48px) 40px;
}
.home-hero h1 {
  max-width: 900px;
  font-size: clamp(42px, 5.4vw, 60px);
  font-weight: 700;
  letter-spacing: 0;
}
.home-hero p {
  max-width: 680px;
  color: #5c584a;
}
.home-hero p strong {
  color: #22201a;
}
.hero-mini {
  margin-top: 10px;
  font-size: 16px;
}
.primary-action.dark {
  background: #22201a;
  color: #fff;
}
.primary-action small {
  color: #a5a1bd;
  font: 600 11px var(--ol-mono);
}
.secondary-action {
  border-color: #e5e0cd;
  background: #fff;
}
.hero-install {
  background: #faf8ef;
  border: 1.5px solid #ece7d6;
  color: #5c584a;
  padding: 10px 16px;
}
.hero-install .muted-word {
  color: #8b8674;
}
.hero-install code {
  color: #5c584a;
}
.platform-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
}
.platform-pills span,
.platform-pills a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1.5px solid #ece7d6;
  border-radius: 999px;
  background: #fff;
  color: #8b8674;
  padding: 7px 13px;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
}
.platform-pills .active {
  border-color: #22201a;
  color: #22201a;
}
.platform-pills b {
  color: #c4bfa8;
  font: 600 9px var(--ol-mono);
}
.home-stats {
  gap: 26px;
  color: #8b8674;
  font-size: 13.5px;
  font-weight: 600;
}
.home-registry {
  max-width: 1360px;
  padding-top: 0;
}
.home-registry-panel {
  border: 1.5px solid #ece7d6;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 10px 34px rgba(80, 68, 20, .07);
  padding: 28px;
}
.home-registry-tools,
.registry-topline {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.home-registry-tools .registry-search,
.registry-topline .registry-search {
  flex: 1 1 360px;
}
.registry-search {
  min-height: 58px;
  border-color: #ece7d6;
  border-radius: 12px;
}
.registry-search input::placeholder {
  color: #8b8674;
}
.registry-cats button {
  border-color: #ece7d6;
  background: #fff;
  color: #5c584a;
  font-size: 13px;
}
.registry-cats button.active {
  border-color: #5b4df0;
  background: #5b4df0;
  color: #fff;
}
.registry-grid.home-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 34px;
}
.home-plugin-card,
.home-build-card {
  min-height: 196px;
  border-color: #f0ecdd;
  border-radius: 14px;
  padding: 18px;
}
.home-plugin-author {
  color: #b3ad9a;
  font-size: 13px;
  font-weight: 700;
}
.home-plugin-row strong {
  color: #22201a;
  font-size: 14px;
}
.plugin-glyph {
  width: auto;
  height: auto;
  background: transparent;
  font: 400 22px var(--ol-sans);
}
.home-plugin-card p {
  color: #5c584a;
  font-size: 13.5px;
}
.home-plugin-meta {
  color: #8b8674;
  font-size: 12px;
}
.home-plugin-meta em {
  margin-left: auto;
  border-radius: 5px;
  padding: 3px 8px;
  font-size: 10.5px;
  font-style: normal;
  font-weight: 700;
}
.home-build-card {
  border-style: dashed;
  background: #faf8ef;
}
.home-build-card span {
  color: #22201a;
}
.author-band {
  grid-template-columns: 1fr 560px;
  gap: 56px;
  padding-top: 24px;
}
.author-band h2 code {
  display: inline-block;
  border: 1.5px dashed #c9c2f7;
  border-radius: 10px;
  background: #f6f5ff;
  color: #5b4df0;
  padding: 3px 10px;
  font-family: var(--ol-mono);
}
.event-card {
  border: 1.5px solid #ece7d6;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  margin: 8px 0 16px;
}
.event-card div {
  display: flex;
  gap: 18px;
  padding: 14px 18px;
}
.event-card div + div {
  border-top: 1px solid #f0ecdd;
  background: #f6f5ff;
}
.event-card b {
  min-width: 70px;
  color: #8b8674;
  font: 700 10.5px var(--ol-mono);
  letter-spacing: .18em;
}
.event-card span {
  color: #22201a;
  font-size: 14px;
  font-weight: 500;
}
.pricing-section {
  padding-top: 56px;
}
.pricing-section h1,
.pricing-section h2 {
  font-size: clamp(34px, 4.5vw, 52px);
}
.price-single.design-wide {
  width: min(100%, 581px);
}
.price-grid.design-grid {
  width: min(100%, 1180px);
}
.price-card {
  border-radius: 24px;
  padding: 36px clamp(20px, 4vw, 40px);
}
.price-card.private {
  background: linear-gradient(160deg, #f3f1ff, #faf9ff);
  border-color: #c9c2f7;
}
.price-row {
  width: 100%;
  align-items: center;
  border-radius: 16px;
  padding: 20px 24px;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.price-row.featured {
  border-color: #c9c2f7;
  background: linear-gradient(120deg, #f6f5ff, #fdfcff);
}
.price-row:hover {
  border-color: #c9c2f7;
  background: #fbfaff;
}
.price-row:focus-visible {
  outline: 3px solid rgba(91, 77, 240, .2);
  outline-offset: 3px;
}
.price-row.selected {
  border-color: #5b4df0;
  background: linear-gradient(120deg, #f6f5ff, #fff);
  box-shadow: inset 0 0 0 1px rgba(91, 77, 240, .22);
}
.price-row strong em {
  border-radius: 999px;
  background: #e8f6ee;
  color: #1c7a4d;
  margin-left: 8px;
  padding: 3px 9px;
  font: 700 10.5px var(--ol-mono);
  font-style: normal;
}
.price-row strong em.byok {
  background: #eef0fd;
  color: #4335c9;
}
.purple-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: none;
  margin: 16px clamp(16px, 4vw, 48px) 48px;
  border-radius: 20px;
  background: linear-gradient(120deg, #5b4df0, #8a4df0);
  color: #fff;
  padding: 48px 56px;
}
.purple-cta h2 {
  margin: 0 0 8px;
  font-size: clamp(32px, 4vw, 54px);
}
.purple-cta p {
  margin: 0;
  color: #d8d3fb;
  font-size: 18px;
}
.purple-cta > div:last-child {
  display: flex;
  gap: 12px;
}
.purple-cta a {
  border-radius: 12px;
  padding: 13px 24px;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,.4);
  font-weight: 700;
}
.purple-cta a:first-child {
  background: #fff;
  color: #4335c9;
  border-color: #fff;
}
.ol-redesign-footer {
  max-width: none;
  border-top: 1px solid #f0ecdd;
  padding: 26px clamp(16px, 4vw, 48px);
  font-size: 13.5px;
}
.registry-header {
  max-width: 1360px;
  padding-top: 44px;
}
.registry-header h1 {
  font-size: 40px;
}
.registry-layout {
  max-width: 1360px;
  grid-template-columns: minmax(340px, 440px) 1fr;
}
.registry-list button,
.registry-build {
  border-radius: 14px;
}
.registry-icon {
  background: transparent;
  font: 400 20px var(--ol-sans);
}
.registry-detail header > a {
  background: #22201a;
  color: #fff;
}
.registry-detail-icon {
  background: transparent;
  font-size: 38px;
}
.blog-hero-redesign {
  max-width: 1160px;
  padding-top: 52px;
  padding-bottom: 24px;
}
.blog-hero-redesign h1 {
  font-size: clamp(34px, 4.5vw, 48px);
}
.blog-featured {
  max-width: 1160px;
  margin: 0 auto;
  padding: 12px clamp(16px, 4vw, 48px) 8px;
}
.blog-featured a {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  border: 1.5px solid #ece7d6;
  border-radius: 20px;
  background: #fff;
  color: #22201a;
  overflow: hidden;
  box-shadow: 0 10px 34px rgba(80,68,20,.07);
}
.blocked-terminal {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  min-height: 220px;
  background: #22201a;
  padding: 36px;
  color: #8b8674;
  font: 500 14px var(--ol-mono);
}
.blocked-terminal b {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #e8e5d8;
}
.blocked-terminal em {
  border-radius: 5px;
  background: #e5484d;
  color: #fff;
  padding: 3px 8px;
  font-size: 10.5px;
  font-style: normal;
  font-weight: 700;
}
.blog-featured a > div:last-child {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: 36px;
}
.blog-featured h2 {
  margin: 0;
  font-size: 27px;
}
.blog-featured p,
.blog-post-card p {
  margin: 0;
}
.category-pill {
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 10.5px;
  font-weight: 700;
}
.category-pill.security { background: #e8f6ee; color: #1c7a4d; }
.category-pill.visibility { background: #eef0fd; color: #4335c9; }
.category-pill.cost { background: #fff4d6; color: #8a6a12; }
.category-pill.misc { background: #fbeee3; color: #a05a1c; }
.blog-author {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #8b8674;
  font-size: 12.5px;
  margin-top: auto;
}
.blog-author i {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff4d6;
  display: grid;
  place-items: center;
  font-style: normal;
  font-size: 11px;
}
.blog-post-grid {
  max-width: 1160px;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 16px;
  padding-top: 20px;
}
.blog-post-card {
  color: #22201a;
  border-radius: 16px;
  padding: 24px;
}
.blog-post-card h2 {
  font-size: 19px;
}
@media (max-width: 900px) {
  .site-mobile-actions { display: flex; }
  .site-nav nav {
    top: 68px;
    background: #fffdf7;
  }
  .site-nav nav a {
    padding: 12px 14px;
  }
  .registry-grid.home-grid,
  .registry-grid,
  .blog-post-grid {
    grid-template-columns: 1fr;
  }
  .author-band,
  .registry-layout,
  .price-grid.design-grid {
    grid-template-columns: 1fr;
  }
  .purple-cta {
    align-items: flex-start;
    flex-direction: column;
    padding: 34px 28px;
  }
  .purple-cta > div:last-child {
    flex-wrap: wrap;
  }
}
@media (max-width: 620px) {
  .home-hero {
    align-items: center;
    text-align: center;
  }
  .hero-actions,
  .platform-pills,
  .home-stats {
    justify-content: center;
  }
  .home-registry-panel {
    padding: 16px;
  }
  .event-card div {
    flex-direction: column;
    gap: 6px;
  }
  .price-row {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* New main-web design import */
:root {
  --ol-bg: #fffdf7;
  --ol-ink: #22201a;
  --ol-muted: #5c584a;
  --ol-soft: #8b8674;
  --ol-line: #ece7d6;
  --ol-line-strong: #c4bfa8;
  --ol-card: #ffffff;
  --ol-wash: #faf8ef;
  --ol-purple: #5b4df0;
  --ol-purple-dark: #4335c9;
  --ol-yellow: #fff4d6;
  --ol-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --ol-sans: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body {
  background: var(--ol-bg);
  color: var(--ol-ink);
  font-family: var(--ol-sans);
  letter-spacing: 0;
}

.site-page, .blog-redesign, .pl-redesign, .marketplace-page {
  min-height: 100vh;
  background: var(--ol-bg);
  color: var(--ol-ink);
  font-family: var(--ol-sans);
}

.site-nav {
  position: relative;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  max-width: 1360px;
  margin: 0 auto;
  padding: 18px clamp(16px, 4vw, 48px);
  background: color-mix(in srgb, var(--ol-bg) 92%, transparent);
  backdrop-filter: blur(14px);
}
.site-nav.sticky { position: sticky; top: 0; }
.site-brand { display: inline-flex; align-items: center; gap: 10px; font-size: 21px; font-weight: 700; }
.site-brand img { width: 30px; height: 30px; object-fit: contain; }
.site-nav nav { display: flex; align-items: center; gap: 8px; }
.site-nav nav a, .site-menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 8px 14px;
  border-radius: 999px;
  color: var(--ol-ink);
  font-size: 14px;
  font-weight: 600;
}
.site-nav nav a:hover, .site-nav nav a.active { background: var(--ol-yellow); }
.site-nav .github-pill { border: 1.5px solid var(--ol-line); background: #fff; }
.site-nav .github-pill svg:last-of-type { color: var(--ol-purple); fill: #ddd9fb; }
.site-nav .start-pill { background: var(--ol-purple); color: #fff; box-shadow: 0 10px 22px rgba(91,77,240,.18); }
.site-menu { display: none; border: 1.5px solid var(--ol-line); background: #fff; }

.home-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  max-width: 980px;
  margin: 0 auto;
  padding: 72px clamp(16px, 4vw, 48px) 34px;
  text-align: center;
}
.home-hero h1 {
  max-width: 900px;
  margin: 0;
  font-size: clamp(34px, 4.5vw, 60px);
  line-height: 1.05;
  letter-spacing: 0;
  font-weight: 700;
}
.home-hero h1 span {
  background: linear-gradient(120deg, #5b4df0, #b44df0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.home-hero p, .pricing-lede, .footer-cta p { max-width: 640px; margin: 0; color: var(--ol-muted); font-size: 19px; line-height: 1.55; }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.primary-action, .secondary-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 13px 26px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
}
.primary-action { background: var(--ol-purple); color: #fff; box-shadow: 0 14px 28px rgba(91,77,240,.18); }
.secondary-action { border: 1.5px solid #e5e0cd; background: #fff; color: var(--ol-ink); }
.terminal-line, .install-command {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 100%;
  padding: 13px 18px;
  border-radius: 12px;
  background: var(--ol-ink);
  color: #e8e5d8;
  font: 500 13.5px var(--ol-mono);
}
.terminal-line span, .install-command span { color: #8a4df0; }
.terminal-line code, .install-command code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; }
.terminal-line button, .install-command button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 6px;
  background: #3a3730;
  color: #fffdf7;
  font: 600 11px var(--ol-sans);
}
.home-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; color: var(--ol-soft); font-size: 14px; }

.home-registry, .registry-header, .registry-layout, .author-band, .pricing-section, .footer-cta, .blog-hero-redesign, .blog-post-grid, .blog-article, .plugin-view {
  max-width: 1360px;
  margin: 0 auto;
  padding-left: clamp(16px, 4vw, 48px);
  padding-right: clamp(16px, 4vw, 48px);
}
.home-registry { padding-top: 26px; padding-bottom: 64px; }
.registry-search {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 1.5px solid var(--ol-line);
  border-radius: 12px;
  background: #fff;
  padding: 0 16px;
}
.registry-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 13px 0;
  color: var(--ol-ink);
  font: 500 14.5px var(--ol-sans);
}
.registry-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.home-plugin-card, .home-build-card {
  min-height: 156px;
  border: 1.5px solid var(--ol-line);
  border-radius: 14px;
  background: #fff;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.home-plugin-card:hover, .home-build-card:hover, .registry-list button:hover, .registry-list button.active { border-color: var(--ol-purple); background: #f6f5ff; }
.home-plugin-row, .registry-item-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.home-plugin-row strong, .registry-item-head strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 700 13.5px var(--ol-mono);
}
.home-plugin-row em, .registry-item-head em, .registry-detail-title em {
  margin-left: auto;
  border-radius: 5px;
  padding: 3px 8px;
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
}
.plugin-glyph, .registry-icon, .registry-detail-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--ol-wash);
  color: var(--ol-purple);
  font: 800 16px var(--ol-mono);
}
.registry-detail-icon { width: 58px; height: 58px; border-radius: 16px; font-size: 28px; }
.plugin-glyph img, .registry-icon img, .registry-detail-icon img { width: 70%; height: 70%; object-fit: contain; }
.home-plugin-card p, .home-build-card p, .registry-list p { margin: 0; color: var(--ol-muted); font-size: 12.5px; line-height: 1.45; }
.home-plugin-meta, .registry-item-meta { margin-top: auto; display: flex; gap: 10px; align-items: center; color: var(--ol-soft); font-size: 12px; }
.home-build-card { align-items: center; justify-content: center; text-align: center; border-style: dashed; background: var(--ol-wash); }
.home-build-card span { color: var(--ol-purple); font-size: 24px; }
.registry-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; color: var(--ol-soft); font-size: 13px; }
.registry-foot a, .author-band a { display: inline-flex; align-items: center; gap: 6px; color: var(--ol-purple); font-weight: 700; }
.registry-pagination { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.registry-pagination button {
  width: 32px;
  height: 32px;
  border: 1.5px solid var(--ol-line);
  border-radius: 9px;
  background: #fff;
  color: var(--ol-ink);
  cursor: pointer;
  font-weight: 700;
}
.registry-pagination button:hover:not(:disabled) { border-color: var(--ol-purple); color: var(--ol-purple); }
.registry-pagination button:disabled { cursor: default; opacity: .4; }
.registry-pagination span { min-width: 38px; text-align: center; font-weight: 700; }

.author-band {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(320px, 1fr);
  gap: 24px;
  align-items: center;
  padding-top: 34px;
  padding-bottom: 72px;
}
.soft-pill {
  display: inline-flex;
  width: fit-content;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--ol-yellow);
  font-size: 13px;
  font-weight: 700;
}
.author-band h2, .pricing-section h1, .pricing-section h2, .footer-cta h2 { margin: 14px 0 10px; font-size: clamp(30px, 3vw, 42px); line-height: 1.1; letter-spacing: 0; font-weight: 700; }
.author-band p { margin: 0 0 16px; color: var(--ol-muted); font-size: 16.5px; line-height: 1.6; }
.author-band pre {
  margin: 0;
  overflow-x: auto;
  border-radius: 16px;
  background: var(--ol-ink);
  color: #e8e5d8;
  padding: 24px;
  font: 500 13.5px/1.75 var(--ol-mono);
}

.pricing-section { display: flex; flex-direction: column; align-items: center; gap: 18px; padding-top: 34px; padding-bottom: 72px; text-align: center; }
.price-toggle { display: inline-flex; padding: 4px; border: 1.5px solid var(--ol-line); border-radius: 999px; background: #fff; }
.price-toggle button { padding: 9px 18px; border-radius: 999px; font-weight: 700; }
.price-toggle button.active { background: var(--ol-purple); color: #fff; }
.price-single { width: min(100%, 520px); }
.price-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; width: min(100%, 980px); }
.price-card {
  display: flex;
  flex-direction: column;
  gap: 13px;
  border: 1.5px solid var(--ol-line);
  border-radius: 20px;
  background: #fff;
  padding: 24px;
  text-align: left;
  box-shadow: 0 10px 34px rgba(80,68,20,.07);
}
.price-card.featured { border-color: #c9c2f7; background: #f6f5ff; }
.price-card > span { color: var(--ol-soft); font: 700 11px var(--ol-mono); letter-spacing: .14em; }
.price-card h3 { margin: 0; font-size: 28px; letter-spacing: 0; font-weight: 700; }
.price-row { display: flex; justify-content: space-between; gap: 14px; width: 100%; border: 1.5px solid var(--ol-line); border-radius: 14px; background: #fff; padding: 14px; color: inherit; cursor: pointer; font: inherit; text-align: left; }
.price-row:hover { border-color: #c9c2f7; background: #fbfaff; }
.price-row:focus-visible { outline: 3px solid rgba(91, 77, 240, .2); outline-offset: 3px; }
.price-row.selected { border-color: #5b4df0; background: linear-gradient(120deg, #f6f5ff, #fff); box-shadow: inset 0 0 0 1px rgba(91, 77, 240, .22); }
.price-row.featured.selected { border-color: #5b4df0; }
.price-row p { margin: 3px 0 0; color: var(--ol-muted); font-size: 13px; line-height: 1.45; }
.price-row b { white-space: nowrap; font-size: 20px; }
.price-row small { color: var(--ol-soft); font-size: 12px; font-weight: 600; }
.price-card > a, .price-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 12px;
  background: var(--ol-ink);
  color: #fff;
  padding: 12px 18px;
  font-weight: 700;
}
.price-links { display: flex; gap: 8px; }
.price-links a { background: #fff; color: var(--ol-ink); border: 1.5px solid var(--ol-line); }

.pricing-comparison-grid {
  width: min(100%, 1240px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}
.pricing-billing-toggle {
  display: inline-flex;
  gap: 4px;
  border: 1px solid var(--ol-line);
  border-radius: 999px;
  background: #fff;
  padding: 4px;
}
.pricing-billing-toggle button {
  min-height: 40px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  padding: 0 16px;
  color: var(--ol-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.pricing-billing-toggle button.active { background: var(--ol-ink); color: #fff; }
.pricing-billing-toggle span {
  margin-left: 4px;
  color: #4b3fd6;
  font-size: 10px;
}
.pricing-billing-toggle button.active span { color: #d7d1ff; }
.pricing-comparison-card {
  gap: 18px;
  min-height: 620px;
  padding: 30px;
}
.pricing-comparison-card h3 {
  min-height: 68px;
  font-size: clamp(25px, 2vw, 32px);
  line-height: 1.08;
}
.pricing-comparison-card > p {
  margin: 0;
  color: var(--ol-muted);
  font-size: 15px;
  line-height: 1.55;
}
.pricing-primary-price {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  min-height: 70px;
}
.pricing-primary-price strong {
  color: var(--ol-ink);
  font-size: clamp(48px, 5vw, 68px);
  font-weight: 800;
  line-height: .88;
  letter-spacing: -.055em;
}
.pricing-primary-price small {
  max-width: 155px;
  padding-bottom: 5px;
  color: var(--ol-muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
}
.pricing-trial-box {
  display: grid;
  gap: 4px;
  border: 1px solid #d9d4ff;
  border-radius: 14px;
  background: rgba(255,255,255,.76);
  padding: 14px;
}
.pricing-trial-box strong {
  color: #4335c9;
  font-size: 14px;
}
.pricing-trial-box span {
  color: var(--ol-muted);
  font-size: 12.5px;
  line-height: 1.45;
}
.pricing-comparison-card ul {
  display: grid;
  gap: 10px;
  margin: 0 0 auto;
  padding: 0;
  list-style: none;
}
.pricing-comparison-card li {
  position: relative;
  padding-left: 22px;
  color: #33332a;
  font-size: 14px;
  line-height: 1.45;
}
.pricing-comparison-card li::before {
  position: absolute;
  top: .07em;
  left: 0;
  color: #4b3fd6;
  content: "✓";
  font-weight: 900;
}
.pricing-comparison-card > a {
  min-height: 50px;
}
.pricing-annual {
  min-height: 46px;
}
.pricing-annual strong {
  display: inline;
  color: var(--ol-ink);
  font-size: 18px;
}
.pricing-footnote {
  max-width: 760px;
  margin: 2px auto 0;
  color: var(--ol-muted);
  font-size: 13px;
  line-height: 1.5;
}

.web-team-growth-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 18px;
  border: 1px solid #d8d2ff;
  border-radius: 18px;
  background: linear-gradient(120deg, #f7f5ff, #eef6ff);
  padding: 20px 22px;
  color: #171526;
  box-shadow: 0 18px 44px -32px rgba(74, 57, 199, .5);
}
.web-team-growth-card > span:first-child {
  display: grid;
  gap: 5px;
  max-width: 760px;
}
.web-team-growth-card strong { font-size: 16px; }
.web-team-growth-card small { color: #686779; font-size: 13px; line-height: 1.5; }
.web-team-growth-card > span:last-child {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 5px;
  color: #4335c9;
  font-size: 14px;
  font-weight: 800;
}

@media (max-width: 980px) {
  .pricing-comparison-grid { grid-template-columns: 1fr; width: min(100%, 680px); }
  .pricing-comparison-card { min-height: 0; }
  .pricing-comparison-card h3 { min-height: 0; }
  .web-team-growth-card { align-items: flex-start; flex-direction: column; }
}

.footer-cta { display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 52px; padding-bottom: 58px; text-align: center; }
.ol-redesign-footer, .pl-footer {
  max-width: 1360px;
  margin: 0 auto;
  border-top: 1px solid var(--ol-line);
  padding: 22px clamp(16px, 4vw, 48px) 34px;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  color: var(--ol-muted);
  font-size: 13px;
}
.ol-redesign-footer nav, .pl-footer nav { display: flex; flex-wrap: wrap; gap: 14px; }
.ol-redesign-footer a:hover, .pl-footer a:hover { color: var(--ol-purple); }

.registry-header { display: flex; flex-direction: column; gap: 16px; padding-top: 44px; padding-bottom: 20px; }
.registry-header h1 { margin: 0; font-size: 40px; letter-spacing: 0; font-weight: 700; }
.registry-header p { margin: 6px 0 0; color: var(--ol-soft); }
.registry-cats { display: flex; flex-wrap: wrap; gap: 8px; }
.registry-cats button {
  border: 1.5px solid var(--ol-line);
  border-radius: 999px;
  background: #fff;
  padding: 9px 14px;
  color: var(--ol-muted);
  font-weight: 700;
}
.registry-cats button.active { border-color: var(--ol-purple); background: var(--ol-purple); color: #fff; }
.registry-layout { display: grid; grid-template-columns: minmax(320px, 440px) 1fr; gap: 22px; align-items: start; padding-bottom: 64px; }
.registry-list { display: flex; flex-direction: column; gap: 10px; }
.registry-list button, .registry-build {
  width: 100%;
  border: 1.5px solid var(--ol-line);
  border-radius: 14px;
  background: #fff;
  padding: 14px 16px;
  text-align: left;
}
.registry-build { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; border-style: dashed; background: var(--ol-wash); }
.registry-build span { color: var(--ol-purple); font-size: 22px; }
.registry-empty { border: 1.5px dashed var(--ol-line); border-radius: 14px; padding: 22px; color: var(--ol-soft); text-align: center; }
.registry-detail, .plugin-view {
  border: 1.5px solid var(--ol-line);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 10px 34px rgba(80,68,20,.07);
  overflow: hidden;
}
.registry-detail header, .plugin-view header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 26px 30px;
  border-bottom: 1px solid #f0ecdd;
}
.registry-detail header > a { margin-left: auto; border: 1.5px solid var(--ol-line); border-radius: 12px; padding: 10px 16px; font-weight: 700; }
.registry-detail-title { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.registry-detail h2, .plugin-view h1 { margin: 0; font: 700 24px var(--ol-mono); letter-spacing: 0; }
.registry-detail header p, .plugin-view-meta { margin: 4px 0 0; color: var(--ol-soft); font-size: 13px; }
.registry-detail-body { display: flex; flex-direction: column; gap: 16px; padding: 26px 30px; }
.registry-detail-body > p { max-width: 720px; margin: 0; color: var(--ol-muted); font-size: 15.5px; line-height: 1.65; }
.hook-box { display: flex; gap: 12px; max-width: 720px; border: 1.5px solid var(--ol-line); border-radius: 14px; padding: 13px 16px; }
.hook-box.can { background: #f6f5ff; }
.hook-box span { min-width: 88px; color: var(--ol-soft); font: 700 10.5px var(--ol-mono); letter-spacing: .14em; }
.hook-box strong { color: var(--ol-purple-dark); font: 700 13px var(--ol-mono); }
.registry-detail-actions { display: flex; gap: 10px; }
.registry-detail-actions a { border-radius: 12px; padding: 11px 18px; background: var(--ol-ink); color: #fff; font-weight: 700; }
.registry-detail-actions a + a { background: #fff; color: var(--ol-ink); border: 1.5px solid var(--ol-line); }

.blog-hero-redesign { display: flex; flex-direction: column; gap: 14px; padding-top: 56px; padding-bottom: 26px; }
.pl-kicker, .mono-kicker { width: fit-content; color: var(--ol-soft); font: 700 11px var(--ol-mono); letter-spacing: .14em; text-transform: uppercase; }
.blog-hero-redesign h1, .blog-article h1 { margin: 0; max-width: 820px; font-size: clamp(36px, 5vw, 60px); line-height: 1.05; letter-spacing: 0; font-weight: 700; }
.blog-hero-redesign p { max-width: 680px; margin: 0; color: var(--ol-muted); font-size: 18px; line-height: 1.6; }
.blog-post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding-bottom: 72px; }
.blog-post-card {
  border: 1.5px solid var(--ol-line);
  border-radius: 18px;
  background: #fff;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.blog-post-card h2 { margin: 0; font-size: 24px; line-height: 1.16; letter-spacing: 0; font-weight: 700; }
.blog-post-card p { margin: 0; color: var(--ol-muted); font-size: 14px; line-height: 1.55; }
.blog-post-meta { display: flex; gap: 10px; flex-wrap: wrap; color: var(--ol-soft); font-size: 13px; }
.blog-post-slug, .blog-article-slug { color: var(--ol-purple); font: 700 12px var(--ol-mono); }
.blog-card-keywords, .blog-keyword-row { display: flex; flex-wrap: wrap; gap: 6px; }
.blog-card-keywords span, .blog-keyword-row span {
  border-radius: 999px;
  background: var(--ol-wash);
  padding: 5px 9px;
  color: var(--ol-muted);
  font-size: 12px;
}
.blog-post-card a, .blog-back { display: inline-flex; align-items: center; gap: 6px; color: var(--ol-purple); font-weight: 700; }
.blog-article {
  max-width: 800px;
  padding-top: 46px;
  padding-bottom: 86px;
}
.blog-article > * + * { margin-top: 18px; }
.blog-article p { color: var(--ol-muted); font-size: 16px; line-height: 1.75; }
.blog-article h2 { margin-top: 34px; font-size: 25px; letter-spacing: 0; font-weight: 700; }
.blog-article .blog-visual { border-radius: 16px; border: 1.5px solid var(--ol-line); background: #fff; }

.plugin-view {
  max-width: 980px;
  margin-top: 44px;
  margin-bottom: 72px;
  padding: 0;
}
.plugin-view .blog-back { margin: 20px 30px 0; }
.plugin-view header h1 { font-size: clamp(30px, 4vw, 42px); font-family: var(--ol-mono); }
.plugin-view header p { margin: 8px 0 0; color: var(--ol-muted); font-size: 16px; line-height: 1.55; }
.plugin-view-meta { display: flex; flex-wrap: wrap; gap: 10px; }
.plugin-view-meta a { display: inline-flex; align-items: center; gap: 5px; color: var(--ol-purple); }
.plugin-view-grid { display: grid; grid-template-columns: 1fr 300px; gap: 22px; padding: 30px; }
.plugin-view-grid article h2, .plugin-view-grid article h3 { margin: 0 0 12px; letter-spacing: 0; font-weight: 700; }
.plugin-view-grid article p { margin: 0 0 22px; color: var(--ol-muted); line-height: 1.7; }
.plugin-permissions { display: flex; flex-wrap: wrap; gap: 8px; }
.plugin-permissions span { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--ol-line); border-radius: 999px; padding: 8px 11px; color: var(--ol-muted); font-size: 13px; }
.plugin-view-grid aside {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1.5px solid var(--ol-line);
  border-radius: 16px;
  background: var(--ol-wash);
  padding: 16px;
  height: fit-content;
}
.plugin-view-grid aside > a { border-radius: 12px; background: var(--ol-ink); color: #fff; padding: 11px 14px; text-align: center; font-weight: 700; }
.plugin-view-grid aside > a + a { background: #fff; color: var(--ol-ink); border: 1.5px solid var(--ol-line); }

.plugin-view-grid aside > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  line-height: 1;
}

.plugin-view-grid aside > a svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}

@media (max-width: 900px) {
  .site-menu { display: inline-flex; }
  .site-nav nav {
    display: none;
    position: absolute;
    top: 66px;
    left: 16px;
    right: 16px;
    flex-direction: column;
    align-items: stretch;
    border: 1.5px solid var(--ol-line);
    border-radius: 16px;
    background: #fff;
    padding: 10px;
    box-shadow: 0 18px 44px rgba(80,68,20,.12);
  }
  .site-nav nav.open { display: flex; }
  .site-nav nav a { justify-content: flex-start; border-radius: 12px; }
  .registry-grid, .blog-post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .author-band, .registry-layout, .plugin-view-grid, .price-grid { grid-template-columns: 1fr; }
  .registry-detail { position: static; }
}

@media (max-width: 620px) {
  .home-hero { align-items: flex-start; text-align: left; padding-top: 42px; }
  .hero-actions, .home-stats { justify-content: flex-start; }
  .registry-grid, .blog-post-grid { grid-template-columns: 1fr; }
  .registry-detail header, .plugin-view header { align-items: flex-start; flex-direction: column; }
  .registry-detail header > a { margin-left: 0; }
  .terminal-line, .install-command { align-items: stretch; flex-direction: column; }
  .ol-redesign-footer, .pl-footer { flex-direction: column; }
}

.ol-redesign { position: relative; overflow: hidden; }
.ol-glow {
  position: absolute;
  top: -240px;
  left: 50%;
  width: min(1200px, 110vw);
  height: 560px;
  transform: translateX(-50%);
  background: radial-gradient(58% 60% at 50% 42%, rgba(150,128,255,.32), rgba(236,72,153,.10) 55%, rgba(243,245,233,0) 76%);
  pointer-events: none;
}

.ol-redesign-header,
.pl-header {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1280px;
  margin: 0 auto;
  padding: 18px 34px;
}

.pl-header {
  position: sticky;
  top: 0;
  max-width: none;
  background: rgba(243,245,233,.92);
  border-bottom: 1px solid #e2e3d6;
  backdrop-filter: blur(12px);
}
.marketing-nav.sticky {
  position: sticky;
  top: 0;
  max-width: none;
  background: rgba(243,245,233,.92);
  border-bottom: 1px solid #e2e3d6;
  backdrop-filter: blur(12px);
}

.ol-redesign-brand,
.pl-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #16160f;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0;
  text-decoration: none;
}
.ol-brand-icon {
  display: block;
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.ol-redesign-nav,
.pl-header nav,
.compliance-nav > div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ol-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border: 1px solid #e2e3d6;
  border-radius: 13px;
  background: #fff;
  color: #16160f;
  cursor: pointer;
}

.ol-redesign-nav a,
.ol-github-button,
.pl-header nav a,
.compliance-nav > div a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 39px;
  padding: 9px 15px;
  border: 1px solid #e2e3d6;
  border-radius: 11px;
  background: #fff;
  color: #33332a;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.ol-github-menu {
  position: relative;
  display: inline-flex;
}
.ol-github-button {
  cursor: pointer;
  min-width: 82px;
}
.ol-github-button.active,
.ol-github-button:hover {
  border-color: #d5cffe;
  background: #fbfaff;
}

.ol-redesign-nav a.dark,
.pl-header nav a.dark,
.compliance-nav > div a.dark {
  border-color: #16160f;
  background: #16160f;
  color: #fcfdf7;
}
.ol-github-icon {
  width: 15px;
  height: 15px;
  fill: currentColor;
  flex: 0 0 auto;
}
.ol-github-star {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  margin-left: -2px;
}
.ol-github-dropdown {
  position: absolute;
  z-index: 30;
  top: calc(100% + 9px);
  right: 0;
  display: grid;
  gap: 4px;
  width: 410px;
  padding: 10px;
  border: 1px solid #e2e3d6;
  border-radius: 14px;
  background: #fcfdf7;
  box-shadow: 0 24px 60px -32px rgba(22,22,15,.42);
}
.ol-github-dropdown::before {
  content: "";
  position: absolute;
  top: -6px;
  right: 34px;
  width: 10px;
  height: 10px;
  border-left: 1px solid #e2e3d6;
  border-top: 1px solid #e2e3d6;
  background: #fcfdf7;
  transform: rotate(45deg);
}
.ol-redesign-nav .ol-github-dropdown a {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) minmax(34px, auto);
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 9px 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  font-size: 13px;
}
.ol-redesign-nav .ol-github-dropdown a:hover {
  background: #f1f0e8;
}
.ol-github-repo-icon {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--repo-tint);
  color: var(--repo-ink);
}
.ol-github-repo-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.ol-github-repo-copy strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 800;
}
.ol-github-repo-copy small {
  overflow: hidden;
  color: #8f8f82;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ol-github-dropdown em {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  justify-content: flex-end;
  min-width: 34px;
  color: #7a7a6c;
  font-style: normal;
  font-variant-numeric: tabular-nums;
}

.ol-redesign-nav a.active,
.pl-header nav a.active {
  border-color: #d5cffe;
  background: #eceafc;
  color: #6d5ef5;
}

.ol-redesign-main {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(310px, .82fr) 1.42fr;
  gap: 46px;
  align-items: start;
  max-width: 1280px;
  margin: 0 auto;
  padding: 14px 34px 56px;
}

.ol-hero-copy {
  max-width: 560px;
  padding: 10px 0 0;
}
.ol-hero-copy h1 {
  margin: 0;
  color: #16160f;
  font-size: clamp(46px, 5.1vw, 74px);
  font-weight: 800;
  line-height: .97;
  letter-spacing: 0;
}
.ol-hero-copy h1 span { color: #6d5ef5; }
.ol-hero-copy p {
  max-width: 27ch;
  margin: 20px 0 0;
  color: #54544a;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.32;
}
.ol-hero-copy p strong {
  display: inline-block;
  margin-top: 6px;
  color: #6d5ef5;
  font: inherit;
}

.ol-mini-flow {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  --reel-focus-y: 0px;
  --reel-step-size: 50px;
  width: max-content;
  max-width: 100%;
  height: 42px;
  margin-top: 22px;
  isolation: isolate;
}

.ol-mini-reel {
  position: relative;
  flex: 0 0 auto;
  width: var(--reel-width);
  max-width: min(var(--reel-width), calc((100vw - 76px) / 2));
  height: 42px;
  overflow: hidden;
  border-radius: 16px;
  transition: width 260ms cubic-bezier(.16, 1, .3, 1), max-width 260ms cubic-bezier(.16, 1, .3, 1);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.ol-mini-reel::after {
  display: none;
}

.ol-mini-reel-track {
  display: grid;
  gap: 8px;
  transform: translateY(calc(var(--reel-focus-y) - (var(--reel-stop) * var(--reel-step-size))));
  transition: transform 540ms cubic-bezier(.12,.92,.18,1);
}

.ol-mini-reel-item {
  display: inline-flex;
  align-items: center;
  width: 100%;
  opacity: 1;
}

.ol-mini-reel.categories {
  --reel-width: 154px;
}

.ol-mini-reel.categories .ol-mini-reel-track {
  transition-duration: 220ms;
}

.ol-agent-ticker {
  position: relative;
  flex: 0 0 auto;
  width: 285px;
  max-width: min(285px, calc(100vw - 76px));
  height: 42px;
  overflow: hidden;
  border-radius: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
}

.ol-agent-ticker-track {
  display: flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  animation: ol-agent-ticker 13s linear infinite;
}

.ol-agent-ticker:hover .ol-agent-ticker-track {
  animation-play-state: paused;
}

@keyframes ol-agent-ticker {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-50% - 4px)); }
}

.ol-agent-ticker-item {
  gap: 8px;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  height: 42px;
  padding: 0 9px 0 7px;
  border: 0;
  border-radius: 12px;
  background: #fff;
  color: #26261f;
  cursor: pointer;
  font-size: 16px;
  font-weight: 800;
  box-shadow: 0 1px 0 rgba(22,22,15,.06), 0 8px 18px -16px rgba(22,22,15,.34);
  transition: opacity 120ms linear, transform 120ms linear;
}

.ol-agent-ticker-item:hover {
  box-shadow: 0 1px 0 rgba(91,79,229,.1), 0 10px 20px -16px rgba(91,79,229,.34);
}

.ol-agent-ticker-item img {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.ol-agent-ticker-item strong {
  min-width: 0;
  white-space: nowrap;
}

.ol-mini-flow-plugin {
  gap: 8px;
  min-height: 42px;
  padding: 0 11px;
  border-radius: 12px;
  border: 0;
  background: var(--tint);
  color: var(--ink);
  font-size: 17px;
  font-weight: 800;
  overflow: hidden;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 8%, transparent), 0 8px 18px -16px rgba(22,22,15,.28);
  transition: opacity 120ms linear, transform 120ms linear;
}

.ol-mini-flow-plugin strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ol-primary {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 28px;
  padding: 14px 26px;
  border-radius: 12px;
  background: #16160f;
  color: #fcfdf7;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

.ol-mini-label,
.pl-kicker {
  display: block;
  color: #9a9a88;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: .14em;
}

.ol-hero-copy .ol-mini-label { margin-top: 28px; margin-bottom: 10px; }
.ol-download-label {
  display: flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
}
.ol-download-label span {
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 14px;
  letter-spacing: 0;
  transform: translateY(-1px);
}

.ol-downloads,
.ol-trust-row,
.ol-preview-meta,
.pl-stats,
.pl-card-top,
.pl-card-name-row,
.pl-card-bottom {
  display: flex;
  align-items: center;
}

.ol-downloads { flex-wrap: wrap; gap: 8px; }
.ol-downloads a,
.ol-downloads button,
.ol-downloads span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border: 1px solid #dedfd2;
  border-radius: 10px;
  background: #fff;
  color: #33332a;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
}
.ol-downloads button {
  cursor: pointer;
}
.ol-downloads a:hover,
.ol-downloads button:hover {
  border-color: #c9bef6;
  background: #fbfaff;
}
.ol-downloads span.disabled {
  cursor: not-allowed;
  filter: grayscale(1);
  opacity: .42;
}
.ol-downloads em {
  color: #9a9a88;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 9px;
  font-style: normal;
}

.ol-trust-row {
  flex-wrap: wrap;
  gap: 11px;
  margin-top: 30px;
  color: #7a7a6c;
  font-size: 12.5px;
}
.ol-trust-row button {
  color: #7a7a6c;
  font: inherit;
  font-weight: inherit;
  text-decoration: none;
}
.ol-trust-row button:hover {
  color: #33332a;
}
.ol-trust-row i,
.ol-preview-meta i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #c9c9b8;
}

.ol-hero-stack { display: flex; flex-direction: column; gap: 18px; }
.ol-panel {
  border: 1px solid #e7e8dc;
  border-radius: 22px;
  background: #fcfdf7;
  box-shadow: 0 1px 0 rgba(0,0,0,.02), 0 26px 64px -30px rgba(40,40,20,.24);
  padding: 18px;
}

.ol-pipeline {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 4px 4px 2px;
}
.ol-pipe-box {
  flex: 0 0 156px;
  padding: 11px 12px;
  border: 1px solid #ecede0;
  border-radius: 14px;
  background: #fff;
}
.ol-pipe-box.plugins {
  flex-basis: 260px;
  padding: 18px 20px;
  border-radius: 20px;
}
.ol-agent-grid { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.ol-agent-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid #e8e9dd;
  border-radius: 11px;
  background: #f8f8f2;
}
.ol-agent-chip img { width: 32px; height: 32px; object-fit: contain; }
.ol-view-all-agents {
  margin-top: 10px;
  padding: 0;
  color: #6d5ef5;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.ol-view-all-agents:hover {
  color: #16160f;
}
.ol-agent-modal {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(18,20,12,.34);
  backdrop-filter: blur(10px);
}
.ol-agent-modal-panel {
  width: min(620px, calc(100vw - 32px));
  max-height: calc(100dvh - 48px);
  overflow: auto;
  padding: 22px;
  border: 1px solid #e7e8dc;
  border-radius: 22px;
  background: #fcfdf7;
  box-shadow: 0 28px 80px -30px rgba(22,22,15,.48);
}
.ol-agent-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}
.ol-agent-modal-head h2 {
  margin: 8px 0 0;
  color: #16160f;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0;
}
.ol-agent-modal-close {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid #dedfd2;
  border-radius: 11px;
  background: #fff;
  color: #33332a;
}
.ol-agent-modal-close:hover {
  border-color: #c9bef6;
  background: #fbfaff;
}
.ol-agent-modal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}
.ol-agent-modal-card {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  min-width: 0;
  padding: 10px;
  border: 1px solid #e8e9dd;
  border-radius: 13px;
  background: #fff;
}
.ol-agent-modal-card.soon {
  grid-template-columns: 38px minmax(0, 1fr) auto;
  background: #f7f7f1;
  color: #9a9a88;
}
.ol-agent-modal-card.soon img {
  filter: grayscale(1);
  opacity: .62;
}
.ol-agent-modal-card span {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid #e8e9dd;
  border-radius: 11px;
  background: #f8f8f2;
}
.ol-agent-modal-card img {
  width: 31px;
  height: 31px;
  object-fit: contain;
}
.ol-agent-modal-card strong {
  min-width: 0;
  overflow: hidden;
  color: #33332a;
  font-size: 13px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ol-agent-modal-card em {
  padding: 4px 7px;
  border-radius: 999px;
  background: #e9f6ef;
  color: #0b7968;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.ol-agent-modal-card.soon em {
  background: #ecece2;
  color: #8a897b;
}

.ol-flow-line {
  position: relative;
  flex: 1 1 26px;
  min-width: 26px;
  height: 2px;
  align-self: center;
  background: linear-gradient(90deg, #e4e2f6, #eae3f2);
  overflow: hidden;
}
.ol-flow-line.reverse { background: linear-gradient(90deg, #eae3f2, #e4e2f6); }
.ol-flow-line i {
  position: absolute;
  top: -3px;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #6d5ef5;
  box-shadow: 0 0 6px rgba(109,94,245,.6);
  animation: ol-flow 2.4s linear infinite;
}
.ol-flow-line i:nth-child(2) { animation-delay: .9s; }
.ol-flow-line.reverse i:first-child { background: #ec4899; animation-delay: .72s; }
.ol-flow-line.reverse i:nth-child(2) { animation-delay: 1.62s; }

@keyframes ol-flow {
  0% { left: 0; opacity: 0; }
  14%, 86% { opacity: 1; }
  100% { left: calc(100% - 7px); opacity: 0; }
}
@keyframes ol-flow-vertical {
  0% { top: 0; opacity: 0; }
  14%, 86% { opacity: 1; }
  100% { top: calc(100% - 7px); opacity: 0; }
}
@keyframes ol-pulse {
  0%, 100% { box-shadow: 0 14px 32px rgba(62,70,42,.08), 0 0 0 0 rgba(109,94,245,.14); }
  50% { box-shadow: 0 14px 32px rgba(62,70,42,.08), 0 0 0 13px rgba(109,94,245,0); }
}
.ol-hub {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.ol-hub > span {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius: 18px;
  border: 1px solid #deddf6;
  background: linear-gradient(150deg, #ffffff, #f2f0ff);
  animation: ol-pulse 3s ease-in-out infinite;
  overflow: visible;
}
.ol-hub .ol-brand-icon {
  width: 42px;
  height: 42px;
}
.ol-hub strong { font-size: 12.5px; }

.ol-pipe-plugin {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-top: 8px;
  min-height: 48px;
  padding: 10px 15px;
  border: 1px solid var(--tint);
  border-radius: 12px;
  background: var(--tint);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  font-weight: 800;
  text-decoration: none;
  text-align: left;
  cursor: pointer;
}
.ol-pipe-plugin.active {
  border-color: color-mix(in srgb, var(--ink) 42%, var(--tint));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 42%, var(--tint));
}
.ol-pipe-plugin svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

.ol-catalog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 13px;
}
.ol-catalog-head h2 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: 0; }
.ol-catalog-head p { margin-top: 3px; color: #9a9a88; font-family: "JetBrains Mono", monospace; font-size: 11px; }
.ol-catalog-head a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 15px;
  border-radius: 10px;
  background: #16160f;
  color: #fcfdf7;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.ol-search-box {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  margin-bottom: 13px;
  padding: 11px 14px;
  border: 1px solid #dedfd2;
  border-radius: 11px;
  background: #fff;
  color: #9a9a88;
  font-size: 13.5px;
}
.ol-search-box:focus-within {
  border-color: #c9bef6;
  box-shadow: 0 0 0 3px rgba(109,94,245,.10);
}
.ol-search-box input {
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  color: #33332a;
  font: inherit;
  font-weight: 500;
  outline: 0;
}
.ol-search-box input::placeholder { color: #9a9a88; opacity: 1; }
.ol-search-suggestions {
  position: absolute;
  z-index: 10;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  display: grid;
  gap: 4px;
  padding: 6px;
  border: 1px solid #dedfd2;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 18px 40px -24px rgba(22,22,15,.36);
}
.ol-search-suggestions button {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 10px;
  border-radius: 9px;
  color: #33332a;
  text-align: left;
}
.ol-search-suggestions button:hover {
  background: #f5f5ee;
}
.ol-search-suggestions span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--tint);
  color: var(--ink);
}
.ol-search-suggestions strong {
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ol-search-suggestions em {
  color: #9a9a88;
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  font-style: normal;
  text-transform: uppercase;
}
.ol-preview-chips,
.pl-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.ol-preview-chips button,
.pl-chips button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 13px;
  border: 1px solid #dedfd2;
  border-radius: 999px;
  background: #fff;
  color: #3a3a30;
  font-size: 13px;
  font-weight: 700;
}
.ol-preview-chips button {
  border-color: color-mix(in srgb, var(--ink) 20%, #dedfd2);
  background: var(--tint);
  color: var(--ink);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease;
}
.ol-preview-chips button svg {
  flex: 0 0 auto;
  color: var(--ink);
}
.ol-preview-chips button span {
  min-width: 0;
}
.ol-preview-chips button.active,
.pl-chips button.active {
  border-color: var(--accent, #16160f);
  background: var(--accent, #16160f);
  color: #fcfdf7;
}
.ol-preview-chips button.active {
  border-color: color-mix(in srgb, var(--ink) 74%, #ffffff);
  background: linear-gradient(180deg, color-mix(in srgb, var(--tint) 86%, #fff), var(--tint));
  color: var(--ink);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--ink) 28%, transparent),
    0 0 0 3px color-mix(in srgb, var(--tint) 58%, transparent),
    0 10px 20px -16px color-mix(in srgb, var(--ink) 48%, transparent);
  transform: translateY(-1px);
}
.ol-preview-chips em,
.pl-chips em { font-size: 11px; font-style: normal; opacity: .62; }
.ol-preview-chips em {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 10%, #fff);
  opacity: 1;
}
.ol-preview-chips button.active em {
  background: var(--ink);
  color: #fff;
}

.ol-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.ol-preview-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 166px;
  padding: 16px;
  border: 1px solid #ecede0;
  border-radius: 13px;
  background: #fff;
  color: #16160f;
  overflow: hidden;
  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease,
    background .18s ease;
}
.ol-preview-main {
  position: relative;
  z-index: 1;
  display: grid;
  flex: 1;
  grid-template-columns: 46px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  column-gap: 14px;
  row-gap: 12px;
  min-height: 132px;
  color: inherit;
  text-decoration: none;
}
.ol-preview-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 38%;
  background:
    radial-gradient(circle at 22% 0%, color-mix(in srgb, var(--tint) 44%, transparent), transparent 58%),
    linear-gradient(180deg, color-mix(in srgb, var(--tint) 28%, transparent), transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}
.ol-preview-card:hover,
.ol-preview-card:focus-visible {
  border-color: color-mix(in srgb, var(--ink) 22%, #ecede0);
  background: color-mix(in srgb, var(--tint) 7%, #fff);
  box-shadow: 0 16px 34px -28px color-mix(in srgb, var(--ink) 38%, rgba(22,22,15,.34));
  transform: translateY(-2px);
}
.ol-preview-card:hover::before,
.ol-preview-card:focus-visible::before {
  opacity: 1;
}
.ol-preview-card:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--ink) 18%, transparent);
  outline-offset: 3px;
}
.ol-preview-repo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--ink) 18%, #e8e7da);
  background: rgba(255,255,255,.86);
  color: #16160f;
}
.ol-preview-repo:hover,
.ol-preview-repo:focus-visible {
  background: var(--tint);
  color: var(--ink);
  outline: none;
}
.ol-preview-icon {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--tint);
  color: var(--ink);
  grid-row: 1;
}
.ol-preview-icon img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}
.ol-preview-icon span {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
}
.ol-preview-card strong {
  position: relative;
  z-index: 1;
  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
  line-height: 1.08;
  letter-spacing: -0.02em;
  word-break: break-word;
  overflow-wrap: anywhere;
  align-self: center;
}
.ol-preview-card p {
  position: relative;
  z-index: 1;
  grid-column: 1 / -1;
  flex: 1;
  color: #54544a;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.34;
}
.ol-preview-meta {
  position: relative;
  z-index: 1;
  grid-column: 1 / -1;
  gap: 7px;
  color: #7a7a6c;
  font-size: 12px;
  font-weight: 700;
}
.ol-preview-meta b { color: #33332a; }
.ol-preview-actions {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
}
.ol-preview-actions em {
  margin-left: auto;
  padding: 3px 6px;
  border-radius: 6px;
  background: var(--tint);
  color: var(--ink);
  font-family: "JetBrains Mono", monospace;
  font-size: 8.5px;
  font-style: normal;
  text-transform: uppercase;
}
.ol-empty-search {
  margin-top: 14px;
  padding: 22px;
  border: 1px dashed #dedfd2;
  border-radius: 13px;
  color: #7a7a6c;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
}

.ol-feature-band {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 34px 46px;
}
.ol-feature-band article {
  padding: 20px;
  border: 1px solid #e7e8dc;
  border-radius: 18px;
  background: rgba(252,253,247,.72);
}
.ol-feature-band svg { color: #6d5ef5; }
.ol-feature-band h2 { margin: 12px 0 7px; font-size: 18px; font-weight: 800; letter-spacing: 0; }
.ol-feature-band p { color: #54544a; font-size: 14px; }

.ol-social-section {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(260px, .72fr) 1.28fr;
  gap: 18px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 34px 34px;
}
.ol-social-head {
  align-self: stretch;
  padding: 24px;
  border: 1px solid #e7e8dc;
  border-radius: 22px;
  background: #ffff9a;
  box-shadow: 0 26px 64px -34px rgba(40,40,20,.2);
}
.ol-social-head h2 {
  max-width: 12ch;
  margin: 11px 0 10px;
  color: #16160f;
  font-size: clamp(30px, 3.2vw, 46px);
  font-weight: 800;
  line-height: .98;
  letter-spacing: 0;
}
.ol-social-head p {
  max-width: 31ch;
  color: #54544a;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.42;
}
.ol-social-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.ol-social-grid.has-posts {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.ol-social-card {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  gap: 15px 14px;
  min-height: 230px;
  padding: 22px;
  border: 1px solid #e7e8dc;
  border-radius: 22px;
  background: #fcfdf7;
  color: #16160f;
  text-decoration: none;
  box-shadow: 0 26px 64px -34px rgba(40,40,20,.2);
}
.ol-social-card.is-post {
  min-height: 196px;
  padding: 18px;
  gap: 13px 12px;
}
.ol-social-card:hover {
  border-color: #d5cffe;
  transform: translateY(-1px);
}
.ol-social-mark {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: #16160f;
  color: #fcfdf7;
  font-size: 20px;
  font-weight: 800;
}
.ol-social-mark.linkedin {
  background: #dfeaf8;
  color: #2a63d8;
  font-family: ui-sans-serif, system-ui, sans-serif;
}
.ol-social-meta {
  display: grid;
  align-content: center;
  gap: 3px;
  min-width: 0;
}
.ol-social-meta strong {
  font-size: 20px;
  font-weight: 800;
}
.ol-social-meta em {
  color: #9a9a88;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-style: normal;
}
.ol-social-card p {
  grid-column: 1 / -1;
  color: #54544a;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.42;
}
.ol-social-card.is-post p {
  font-size: 14px;
  line-height: 1.45;
}
.ol-social-link {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  padding: 10px 13px;
  border: 1px solid #dedfd2;
  border-radius: 10px;
  background: #fff;
  color: #33332a;
  font-size: 13px;
  font-weight: 800;
}

.ol-pricing-redesign {
  position: relative;
  z-index: 2;
  max-width: 1280px;
  margin: 0 auto;
  padding: 40px 34px 80px;
}
.ol-pricing-title { margin-bottom: 30px; text-align: center; }
.ol-pricing-title span { color: #9a9a88; font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .18em; }
.ol-pricing-title h2 { margin: 12px 0 10px; font-size: clamp(32px, 3.4vw, 50px); font-weight: 800; letter-spacing: 0; }
.ol-pricing-title p { color: #7a7a6c; font-size: 17px; }
.ol-segment {
  display: flex;
  gap: 4px;
  width: fit-content;
  margin: 0 auto 34px;
  padding: 5px;
  border: 1px solid #e2e3d6;
  border-radius: 14px;
  background: #fff;
}
.ol-segment button { padding: 10px 28px; border-radius: 10px; font-size: 15px; font-weight: 700; }
.ol-segment button.active { background: #16160f; color: #fcfdf7; }
.ol-price-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  max-width: 1280px;
  margin: 0 auto;
}
.ol-price-card {
  padding: 28px;
  border: 1px solid #e7e8dc;
  border-radius: 22px;
  background: #fcfdf7;
  box-shadow: 0 26px 64px -30px rgba(40,40,20,.2);
}
.ol-price-card > span { color: #9a9a88; font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .16em; }
.ol-price-card h3 { margin: 8px 0 16px; font-size: 22px; font-weight: 800; letter-spacing: 0; }
.ol-price-card h3 em { padding: 3px 7px; border-radius: 999px; background: #eceafc; color: #4b3fd6; font-family: "JetBrains Mono", monospace; font-size: 9px; font-style: normal; letter-spacing: .06em; vertical-align: middle; }
.ol-price-card strong { display: block; margin-bottom: 10px; font-size: 30px; }
.ol-price-card p { min-height: 64px; color: #54544a; font-size: 14px; }
.ol-price-card a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
  padding: 14px;
  border: 1.5px solid #dedfd2;
  border-radius: 13px;
  background: #fff;
  color: #16160f;
  font-size: 15px;
  font-weight: 700;
}
.ol-redesign-footer,
.pl-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 28px 34px;
  border-top: 1px solid #e2e3d6;
  color: #7a7a6c;
  font-size: 13px;
}
.ol-redesign-footer nav,
.pl-footer nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px 16px;
}

.pl-redesign main { max-width: 1280px; margin: 0 auto; }
.blog-redesign {
  min-height: 100vh;
  background: #f3f5e9;
  color: #16160f;
  font-family: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
}
.blog-nav {
  position: sticky;
  top: 0;
}
.blog-hero-redesign {
  max-width: 1280px;
  margin: 0 auto;
  padding: 58px 34px 30px;
}
.blog-hero-redesign .pl-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.blog-hero-redesign h1 {
  max-width: 760px;
  margin: 12px 0 14px;
  color: #16160f;
  font-size: clamp(42px, 5vw, 72px);
  font-weight: 800;
  line-height: .97;
  letter-spacing: 0;
}
.blog-hero-redesign p {
  max-width: 610px;
  color: #54544a;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.45;
}
.blog-post-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 34px 80px;
}
.blog-post-card {
  display: flex;
  min-height: 360px;
  flex-direction: column;
  padding: 24px;
  border: 1px solid #e7e8dc;
  border-radius: 22px;
  background: #fcfdf7;
  box-shadow: 0 26px 64px -34px rgba(40,40,20,.24);
}
.blog-post-card:hover {
  border-color: #c9bef6;
  box-shadow: 0 28px 70px -34px rgba(109,94,245,.34);
}
.blog-post-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  color: #9a9a88;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.blog-post-slug,
.blog-article-slug {
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
  margin-bottom: 12px;
  padding: 5px 8px;
  border: 1px solid #dedfd2;
  border-radius: 9px;
  background: #f3f3ea;
  color: #6d5ef5;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.blog-post-card h2 {
  margin: 0 0 14px;
  color: #16160f;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: clamp(22px, 2vw, 29px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: 0;
}
.blog-post-card p {
  margin: 0 0 13px;
  color: #54544a;
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.44;
}
.blog-card-keywords,
.blog-keyword-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.blog-card-keywords {
  margin: 2px 0 18px;
}
.blog-card-keywords span,
.blog-keyword-row span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 8px;
  border: 1px solid #e2e3d6;
  border-radius: 999px;
  background: #f8f8ef;
  color: #777767;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
}
.blog-post-card a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  margin-top: auto;
  padding: 10px 13px;
  border: 1px solid #dedfd2;
  border-radius: 10px;
  background: #fff;
  color: #33332a;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}
.blog-post-card a:hover {
  border-color: #16160f;
  color: #16160f;
}
.blog-article {
  max-width: 820px;
  margin: 0 auto;
  padding: 46px 34px 92px;
}
.blog-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 30px;
  color: #6d5ef5;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}
.blog-article .pl-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.blog-article-slug {
  margin-top: 16px;
  margin-bottom: 16px;
}
.blog-article h1 {
  margin: 0 0 18px;
  color: #16160f;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: clamp(38px, 5vw, 68px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: 0;
}
.blog-article .article-meta {
  justify-content: flex-start;
  gap: 14px;
  margin: 0 0 26px;
}
.blog-article p {
  margin: 0 0 18px;
  color: #54544a;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.58;
}
.blog-article-lede {
  color: #33332a !important;
  font-size: 21px !important;
  font-weight: 700 !important;
}
.blog-keyword-row {
  margin: 18px 0 34px;
}
.blog-visual {
  margin: 34px 0 18px;
  padding: 18px;
  border: 1px solid #e1e2d5;
  border-radius: 22px;
  background: #ffff9a;
  box-shadow: 0 24px 60px -36px rgba(40,40,20,.26);
}
.blog-visual-canvas {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}
.blog-visual-step {
  position: relative;
  display: grid;
  min-height: 112px;
  align-content: center;
  gap: 11px;
  padding: 16px;
  border: 1px solid rgba(22,22,15,.12);
  border-radius: 16px;
  background: rgba(252,253,247,.76);
  color: #16160f;
}
.blog-visual-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -13px;
  width: 13px;
  height: 3px;
  background: linear-gradient(90deg, #6d5ef5, #19bdf1);
  transform: translateY(-50%);
}
.blog-visual-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #6d5ef5;
  color: #fff;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 900;
}
.blog-visual-step strong {
  color: #16160f;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 14px;
  line-height: 1.25;
}
.blog-visual figcaption {
  margin-top: 12px;
  color: #54544a;
  font-size: 14px;
  font-weight: 700;
}
.blog-article section {
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid #dedfd2;
}
.blog-article h2 {
  margin: 0 0 12px;
  color: #16160f;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0;
}
.pl-hero { padding: 48px 34px 32px; }
.pl-hero-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 32px;
}
.pl-hero h1 {
  margin: 10px 0 12px;
  color: #16160f;
  font-size: clamp(36px, 4vw, 58px);
  font-weight: 800;
  line-height: .96;
  letter-spacing: 0;
}
.pl-hero p { max-width: 44ch; color: #54544a; font-size: 16px; line-height: 1.5; }
.pl-stats { gap: 20px; flex-shrink: 0; }
.pl-stats span { text-align: center; }
.pl-stats strong { display: block; color: #16160f; font-size: 28px; letter-spacing: 0; }
.pl-stats span:first-child strong { color: #6d5ef5; }
.pl-stats em {
  display: block;
  margin-top: 2px;
  color: #9a9a88;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  font-style: normal;
  letter-spacing: .1em;
}
.pl-stats > i { width: 1px; height: 36px; background: #dedfd2; }
.pl-stats a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border: 1px solid #dedfd2;
  border-radius: 12px;
  background: #fff;
  color: #33332a;
  font-size: 14px;
  font-weight: 700;
}
.pl-search {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 0 16px;
  border: 1.5px solid #dedfd2;
  border-radius: 14px;
  background: #fff;
  color: #9a9a88;
}
.pl-search input {
  flex: 1;
  min-width: 0;
  padding: 14px 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #16160f;
  font: inherit;
  font-size: 15px;
}
.pl-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 0 34px 24px;
}
.pl-chips button { cursor: pointer; }
.pl-sort { display: flex; align-items: center; gap: 10px; }
.pl-sort span { color: #7a7a6c; font-size: 13px; }
.pl-sort button {
  padding: 8px 13px;
  border: 1px solid #dedfd2;
  border-radius: 9px;
  background: #fff;
  color: #33332a;
  font-size: 13px;
  font-weight: 700;
}
.pl-sort button.active { border-color: #16160f; background: #16160f; color: #fcfdf7; }
.pl-body { padding: 0 34px 80px; }
.pl-results-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  color: #9a9a88;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
}
.pl-results-head button { color: #6d5ef5; font-family: "Hanken Grotesk", sans-serif; font-size: 13px; font-weight: 700; }
.pl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 20px; }
.pl-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 238px;
  padding: 26px;
  border: 1px solid #ecede0;
  border-radius: 20px;
  background: #fcfdf7;
  color: #16160f;
  text-decoration: none;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.pl-card:hover { border-color: #d0d1c4; box-shadow: 0 14px 36px -22px rgba(40,40,20,.38); transform: translateY(-1px); }
.pl-card-link {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 20px;
  min-height: 186px;
  color: inherit;
  text-decoration: none;
}
.pl-repo-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid #dfdfd2;
  background: rgba(255,255,255,.86);
  color: #16160f;
}
.pl-repo-link + .pl-card-category {
  margin-left: 0;
}
.pl-repo-link:hover,
.pl-repo-link:focus-visible {
  border-color: color-mix(in srgb, var(--ink) 32%, #dfdfd2);
  background: var(--tint);
  color: var(--ink);
  outline: none;
}
.pl-card-top { align-items: flex-start; justify-content: space-between; }
.pl-card-name-row { min-width: 0; gap: 18px; }
.pl-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 58px;
  height: 58px;
  border-radius: 16px;
  background: var(--tint);
  color: var(--ink);
}
.pl-card-icon img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}
.pl-card-icon span {
  font-family: "JetBrains Mono", monospace;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0;
}
.pl-card strong {
  display: block;
  color: #16160f;
  font-family: "JetBrains Mono", monospace;
  font-size: clamp(19px, 1.25vw, 24px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  overflow-wrap: anywhere;
}
.pl-card-category {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 7px 13px;
  border-radius: 10px;
  background: var(--tint);
  color: var(--ink);
  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.pl-card p {
  flex: 1;
  color: #54544a;
  font-size: clamp(18px, 1.25vw, 23px);
  font-weight: 500;
  line-height: 1.34;
}
.pl-card-bottom { gap: 9px; color: #aaa99b; font-size: 17px; font-weight: 600; }
.pl-card-bottom b { color: #77776a; font-weight: 650; }
.pl-card-bottom i { width: 5px; height: 5px; border-radius: 50%; background: #d9d8ca; }
.pl-empty {
  display: grid;
  place-items: center;
  padding: 80px 20px;
  text-align: center;
}
.pl-empty svg { color: #9a9a88; margin-bottom: 16px; }
.pl-empty h2 { font-size: 20px; font-weight: 800; letter-spacing: 0; }
.pl-empty p { margin: 8px 0 24px; color: #7a7a6c; font-size: 14px; }
.pl-empty button { padding: 12px 24px; border-radius: 12px; background: #16160f; color: #fff; font-size: 15px; font-weight: 700; }
.pl-footer a { color: #6d5ef5; }

.ol-price-single {
  max-width: 680px;
  margin: 0 auto;
}
.ol-price-card.redesign {
  padding: 28px 28px 20px;
}
.ol-price-card.redesign > span,
.si-card > .si-logo + h2 + p,
.si-muted {
  color: #7a7a6c;
}
.ol-price-card.redesign > span {
  display: block;
  margin-bottom: 6px;
  font-size: 10px;
  letter-spacing: .16em;
}
.ol-price-card.redesign h3 {
  margin: 0 0 22px;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.025em;
}
.ol-price-rule {
  height: 1px;
  margin-bottom: 18px;
  background: #ecede0;
}
.ol-plan-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  margin-bottom: 12px;
  padding: 14px 16px;
  border: 1px solid #ecede0;
  border-radius: 12px;
  background: #fff;
  color: #16160f;
  text-align: left;
}
.ol-plan-row.compact {
  padding: 14px 16px;
}
.ol-plan-row span:first-child {
  display: grid;
  gap: 7px;
}
.ol-plan-row b {
  font-size: 15px;
}
.ol-plan-row b em {
  display: inline-flex;
  margin-left: 8px;
  padding: 4px 9px;
  border-radius: 999px;
  background: #eceafc;
  color: #4b3fd6;
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  font-style: normal;
  letter-spacing: .06em;
}
.ol-plan-row b em.green {
  background: #ddeee7;
  color: #0b7968;
}
.ol-plan-row small {
  color: #54544a;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.45;
}
.ol-plan-row > strong {
  flex: 0 0 auto;
  display: block;
  margin-bottom: 0;
  color: #16160f;
  font-size: 22px;
  text-align: right;
}
.ol-plan-row > strong small {
  display: inline;
  margin-left: 4px;
  color: #7a7a6c;
  font-size: 13px;
}
.ol-mini-actions {
  display: flex !important;
  flex: 0 0 auto;
  grid-template-columns: none !important;
  gap: 10px !important;
}
.ol-mini-actions a {
  display: inline-flex;
  padding: 7px 13px;
  border: 1px solid #dedfd2;
  border-radius: 9px;
  background: #fff;
  color: #33332a;
  font-size: 13px;
  font-weight: 700;
  margin-top: 0;
}
.ol-plan-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 20px;
  padding: 15px;
  border-radius: 13px;
  font-size: 15px;
  font-weight: 600;
}
.ol-plan-cta.dark {
  background: #16160f;
  color: #fcfdf7;
}
.ol-plan-cta.light {
  border: 1.5px solid #dedfd2;
  background: #fff;
  color: #16160f;
}

.si-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f3f5e9;
  color: #16160f;
  font-family: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
}
.si-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 40px;
  border-bottom: 1px solid #dedfd2;
  background: #f3f5e9;
}
.si-tabs button {
  margin-right: 28px;
  padding: 16px 0;
  border-bottom: 2px solid transparent;
  color: #7a7a6c;
  font-size: 15px;
  font-weight: 500;
}
.si-tabs button.active {
  border-color: #6d5ef5;
  color: #16160f;
  font-weight: 800;
}
.si-tabs a {
  display: inline-flex;
  gap: 5px;
  margin-left: auto;
  padding: 8px;
  border-radius: 8px;
  color: #7a7a6c;
}
.si-tabs a span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
}
.si-form-area {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 28px 40px 64px;
}
.si-card {
  width: 100%;
  max-width: 480px;
  padding: 32px 28px;
  border: 1px solid #e7e8dc;
  border-radius: 22px;
  background: #fcfdf7;
  box-shadow: 0 26px 64px -30px rgba(40,40,20,.24);
  animation: si-in .22s ease both;
}
.si-auth-card {
  max-width: 520px;
}

@media (max-width: 680px) {
  .desktop-onboarding-card {
    padding: 26px 18px;
    border-radius: 20px;
  }
  .desktop-onboarding-card h1 {
    font-size: 38px;
  }
  .desktop-onboarding-card .desktop-onboarding-intro > p {
    font-size: 15px;
  }
  .desktop-onboarding-steps,
  .desktop-onboarding-downloads {
    grid-template-columns: 1fr;
  }
  .desktop-onboarding-steps > div {
    min-height: 0;
  }
  .desktop-connection-wait {
    grid-template-columns: auto 1fr;
  }
  .desktop-connection-wait > button {
    grid-column: 1 / -1;
    width: 100%;
  }
  .post-auth-download-card {
    padding: 28px 20px;
    border-radius: 20px;
  }
  .post-auth-download-grid {
    grid-template-columns: 1fr;
  }
  .post-auth-download-note,
  .post-auth-account-link {
    display: flex;
    margin-left: 0;
  }
}
@keyframes si-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.si-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
}
.si-logo > div {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: linear-gradient(150deg,#7e6bff,#5b47e0);
}
.si-logo img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}
.si-logo span {
  font-size: 17px;
  font-weight: 800;
}
.si-audience-toggle {
  display: inline-flex;
  gap: 4px;
  margin: 0 0 18px;
  padding: 4px;
  border: 1px solid #dedfd2;
  border-radius: 11px;
  background: #fff;
}
.si-audience-toggle button {
  padding: 7px 12px;
  border-radius: 8px;
  color: #7a7a6c;
  font-size: 12px;
  font-weight: 850;
}
.si-audience-toggle button.active {
  background: #16160f;
  color: #fcfdf7;
}
.si-card h2 {
  margin: 0 0 6px;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.si-card p {
  margin: 0 0 24px;
  color: #7a7a6c;
  font-size: 14px;
}
.si-sso {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  margin-bottom: 10px;
  padding: 13px 16px;
  border: 1px solid #dedfd2;
  border-radius: 12px;
  background: #fff;
  color: #16160f;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}
.si-sso svg {
  flex: 0 0 auto;
}
.si-sso:hover {
  border-color: #a0a090;
  background: #f7f8f2;
}
.si-sso:disabled {
  opacity: .58;
  cursor: not-allowed;
}
.si-sso:disabled:hover {
  border-color: #dedfd2;
  background: #fff;
}
.si-provider-list {
  display: grid;
  gap: 10px;
}
.si-or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
}
.si-or i {
  flex: 1;
  height: 1px;
  background: #ecede0;
}
.si-or span {
  color: #9a9a88;
  font-size: 13px;
}
.si-card label {
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
  color: #54544a;
  font-size: 13px;
  font-weight: 700;
}
.si-card input {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid #dedfd2;
  border-radius: 11px;
  background: #fff;
  color: #16160f;
  font: inherit;
  font-size: 15px;
  outline: 0;
}
.si-primary,
.si-secondary {
  width: 100%;
  padding: 14px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
}
.si-primary {
  margin: 10px 0 14px;
  background: #16160f;
  color: #fff;
}
.si-secondary {
  border: 1px solid #dedfd2;
  color: #7a7a6c;
  font-size: 13px;
  font-weight: 500;
  text-decoration: underline;
}
.si-inline {
  text-align: center;
  color: #7a7a6c;
  font-size: 14px;
}
.si-inline button {
  margin-left: 6px;
  padding: 6px 14px;
  border: 1px solid #dedfd2;
  border-radius: 8px;
  background: #fff;
  color: #16160f;
  font-weight: 600;
}
.si-plan-row {
  display: block;
  width: 100%;
  margin-bottom: 10px;
  padding: 14px 16px;
  border: 1px solid #ecede0;
  border-radius: 12px;
  background: #fff;
  color: #16160f;
  text-align: left;
}
.si-plan-row:hover,
.si-plan-row.selected {
  border-color: #c9bef6;
  background: linear-gradient(135deg,#f4f2fe,#fcfdf7);
}
.si-plan-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.si-plan-row-head > span {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.si-plan-row b {
  font-size: 15px;
}
.si-plan-row em {
  display: inline-flex;
  margin-left: 0;
  padding: 3px 7px;
  border-radius: 999px;
  background: #eceafc;
  color: #4b3fd6;
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  font-style: normal;
}
.si-plan-row em.green {
  background: #e2f1eb;
  color: #0f6b54;
}
.si-plan-row small {
  display: block;
  color: #7a7a6c;
  font-size: 13px;
}
.si-plan-row strong {
  flex: 0 0 auto;
  color: #16160f;
  font-size: 18px;
  text-align: right;
}
.si-plan-row strong small {
  display: block;
  font-size: 11px;
}
.si-card.centered {
  padding: 40px 28px;
  text-align: center;
}
.si-check {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: #e2f1eb;
  color: #12876b;
  font-size: 30px;
  font-weight: 800;
}
.si-org-found {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding: 14px 16px;
  border-radius: 12px;
  background: #ecede0;
}
.si-org-found > b {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #6d5ef5;
  color: #fff;
}
.si-org-found span {
  display: grid;
  gap: 2px;
}
.si-org-found small {
  color: #7a7a6c;
}
.si-reset {
  color: #7a7a6c;
  font-size: 13px;
  text-decoration: underline;
}
.si-back {
  padding: 0 20px 28px;
  color: #9a9a88;
  text-align: center;
  font-size: 13px;
}
.si-back a {
  color: #6d5ef5;
}

@media (max-width: 900px) {
  .ol-redesign-main { grid-template-columns: 1fr; gap: 26px; padding: 6px 20px 44px; }
  .ol-social-section,
  .ol-feature-band,
  .ol-price-grid,
  .blog-post-grid { grid-template-columns: 1fr; }
  .ol-pipeline { flex-direction: column; align-items: stretch; gap: 12px; }
  .ol-flow-line {
    display: block;
    flex: 0 0 42px;
    width: 2px;
    min-width: 2px;
    height: 42px;
    align-self: center;
    background: linear-gradient(180deg, #e4e2f6, #eae3f2);
  }
  .ol-flow-line.reverse {
    background: linear-gradient(180deg, #eae3f2, #e4e2f6);
  }
  .ol-flow-line i {
    top: 0;
    left: -3px;
    animation-name: ol-flow-vertical;
  }
  .ol-flow-line.reverse i:first-child {
    background: #ec4899;
  }
  .ol-hub {
    flex-direction: column;
    justify-content: center;
    width: 100%;
    text-align: center;
  }
  .ol-pipe-box { flex-basis: auto; }
  .ol-pipe-box.plugins {
    text-align: center;
  }
  .ol-pipe-box.plugins .ol-mini-label {
    text-align: center;
  }
  .ol-pipe-plugin {
    justify-content: center;
    max-width: 260px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
  .pl-hero-row { flex-direction: column; align-items: flex-start; }
  .blog-visual-canvas { grid-template-columns: 1fr 1fr; }
  .blog-visual-step:nth-child(2)::after { display: none; }
}

@media (max-width: 560px) {
  .ol-redesign-header,
  .pl-header { padding: 14px 18px; gap: 12px; }
  .marketing-nav {
    align-items: center;
    flex-wrap: wrap;
  }
  .ol-redesign-brand {
    font-size: 26px;
  }
  .ol-brand-icon {
    width: 38px;
    height: 38px;
  }
  .ol-nav-toggle {
    display: inline-flex;
    margin-left: auto;
  }
  .ol-redesign-nav {
    display: none;
    flex-basis: 100%;
    width: 100%;
    padding: 8px 0 0;
    gap: 8px;
  }
  .ol-redesign-nav.open {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .ol-redesign-nav a {
    min-height: 50px;
    justify-content: center;
    padding: 11px 12px;
    font-size: 16px;
  }
  .ol-github-menu {
    display: block;
    min-width: 0;
  }
  .ol-github-button {
    width: 100%;
    min-height: 50px;
    justify-content: center;
    padding: 11px 12px;
    font-size: 16px;
  }
  .ol-github-dropdown {
    left: 0;
    right: auto;
    width: min(86vw, 280px);
  }
  .ol-github-dropdown::before {
    right: auto;
    left: 34px;
  }
  .ol-redesign-nav a.dark {
    grid-column: 1 / -1;
  }
  .pl-header nav a:not(.dark) { display: none; }
  .ol-redesign-main { gap: 18px; padding-bottom: 30px; }
  .ol-hero-copy {
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 2px;
    text-align: center;
  }
  .ol-hero-copy h1 { font-size: 50px; }
  .ol-hero-copy p {
    max-width: none;
    margin-top: 14px;
    font-size: 23px;
  }
  .ol-mini-flow {
    margin-left: auto;
    margin-right: auto;
    height: 38px;
    gap: 8px;
    margin-top: 12px;
    --reel-step-size: 46px;
  }
  .ol-mini-reel {
    max-width: min(var(--reel-width), calc((100vw - 48px) / 2));
  }
  .ol-mini-reel {
    height: 38px;
  }
  .ol-agent-ticker {
    width: 261px;
    max-width: min(261px, calc(100vw - 48px));
    height: 38px;
  }
  .ol-mini-reel::after {
    height: 38px;
  }
  .ol-agent-ticker-item {
    height: 38px;
    gap: 7px;
    padding: 0 8px 0 6px;
    border-radius: 11px;
    font-size: 14px;
  }
  .ol-agent-ticker-item img {
    width: 26px;
    height: 26px;
  }
  .ol-mini-flow-plugin {
    min-height: 38px;
    padding: 0 9px;
    font-size: 15px;
  }
  .ol-primary { margin-top: 22px; }
  .ol-hero-copy .ol-mini-label { margin-top: 22px; }
  .ol-download-label {
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
  }
  .ol-trust-row {
    justify-content: center;
  }
  .ol-downloads {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
    width: min(100%, 320px);
    margin-left: auto;
    margin-right: auto;
  }
  .ol-downloads > * {
    grid-column: span 2;
  }
  .ol-downloads a,
  .ol-downloads button,
  .ol-downloads span {
    justify-content: center;
    min-width: 0;
    padding-left: 8px;
    padding-right: 8px;
    white-space: nowrap;
  }
  .ol-downloads > :nth-child(4) {
    grid-column: 2 / span 2;
    margin-left: 0;
  }
  .ol-downloads > :nth-child(5) {
    grid-column: 4 / span 2;
    margin-left: 0;
  }
  .ol-trust-row { display: none; }
  .ol-catalog-head {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .ol-catalog-head p { display: none; }
  .ol-search-box input {
    text-overflow: ellipsis;
  }
  .ol-preview-grid {
    grid-template-columns: 1fr;
  }
  .ol-preview-card {
    grid-template-columns: 48px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    min-height: 0;
    padding: 14px;
  }
  .ol-preview-card strong {
    min-width: 0;
    word-break: normal;
    overflow-wrap: break-word;
  }
  .ol-preview-card p {
    grid-column: 2;
    margin: -5px 0 0;
    font-size: 14px;
  }
  .ol-preview-meta {
    grid-column: 2;
  }
  .ol-social-section,
  .ol-feature-band,
  .ol-pricing-redesign,
  .blog-hero-redesign,
  .blog-post-grid,
  .pl-hero,
  .pl-controls,
  .pl-body { padding-left: 18px; padding-right: 18px; }
  .ol-social-grid { grid-template-columns: 1fr; }
  .ol-plan-row span:first-child {
    min-width: 0;
  }
  .ol-plan-row b {
    display: block;
    min-width: 0;
    line-height: 1.18;
  }
  .ol-plan-row b em {
    position: absolute;
    top: 18px;
    right: 18px;
    margin-left: 0;
    white-space: nowrap;
  }
  .pl-grid { grid-template-columns: 1fr; }
  .pl-stats { flex-wrap: wrap; gap: 12px; }
  .pl-sort { display: none; }
  .blog-visual-canvas { grid-template-columns: 1fr; }
  .blog-visual-step:not(:last-child)::after {
    top: auto;
    right: auto;
    bottom: -13px;
    left: 28px;
    width: 3px;
    height: 13px;
    background: linear-gradient(180deg, #6d5ef5, #19bdf1);
    transform: none;
  }
  .blog-visual-step:nth-child(2)::after { display: block; }
  .ol-redesign-footer,
  .pl-footer { flex-direction: column; align-items: flex-start; padding-left: 18px; padding-right: 18px; }
  .si-tabs { padding: 0 18px; }
  .si-form-area { padding: 24px 18px 48px; }
  .si-card {
    padding-left: 24px;
    padding-right: 24px;
  }
  .si-sso {
    gap: 10px;
    padding-left: 12px;
    padding-right: 12px;
    font-size: 14px;
  }
}

/* EOF source-of-truth lock: other-apps/new-main-web-design */
.site-page,
.blog-redesign,
.pl-redesign,
.marketplace-page {
  min-height: 100vh;
  background: #fffdf7;
  color: #22201a;
  font-family: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
}

.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px clamp(16px, 4vw, 48px);
  border-bottom: 1px solid #f0ecdd;
  background: rgba(255, 253, 247, .94);
  backdrop-filter: blur(14px);
}

.site-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #22201a;
  font-size: 18px;
  font-weight: 700;
}

.site-brand span:first-child {
  font-size: 22px;
}

.site-nav nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.site-nav nav a,
.site-nav .github-pill,
.site-nav .start-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  padding: 8px 14px;
  color: #22201a;
  font-size: 14px;
  font-weight: 600;
  box-shadow: none;
}

.site-nav nav a:hover,
.site-nav nav a.active,
.site-nav .github-pill:hover {
  background: #fff4d6;
  color: #22201a;
}

.site-nav .github-pill {
  border: 1.5px solid #22201a;
  padding-inline: 16px;
}

.site-nav .start-pill {
  background: #5b4df0;
  color: #fff;
  padding-inline: 18px;
}

.site-nav .start-pill:hover {
  background: #4335c9;
  color: #fff;
}

.site-menu {
  width: 40px;
  height: 40px;
  border: 1.5px solid #ece7d6;
  border-radius: 10px;
  background: #fff;
  color: #22201a;
  font-size: 18px;
  font-weight: 700;
}

.site-mobile-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.home-hero,
.ol-pricing-redesign,
.blog-hero-redesign,
.pl-hero {
  max-width: 1120px;
  margin: 0 auto;
  padding: 64px clamp(16px, 4vw, 48px);
}

.home-hero {
  text-align: center;
}

.home-hero h1,
.ol-pricing-redesign > header h2,
.blog-hero-redesign h1 {
  max-width: 920px;
  margin: 0 auto;
  color: #22201a;
  font-size: clamp(44px, 6vw, 68px);
  line-height: .98;
  letter-spacing: 0;
  font-weight: 700;
}

.home-hero .accent {
  color: #8a4df0;
}

.home-hero p,
.pl-hero p,
.blog-hero-redesign p {
  color: #5c584a;
}

.home-hero p {
  max-width: 760px;
  margin: 24px auto 0;
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.42;
}

.home-hero > strong {
  display: block;
  margin: 32px 0 20px;
  color: #22201a;
  font-size: 16px;
}

.home-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.home-actions a,
.home-actions button {
  min-height: 50px;
  border: 1.5px solid #ece7d6;
  border-radius: 13px;
  background: #fff;
  padding: 0 26px;
  color: #22201a;
  font-weight: 700;
}

.home-actions .primary {
  border-color: #22201a;
  background: #22201a;
  color: #fffdf7;
}

.install-strip {
  width: fit-content;
  max-width: 100%;
  margin: 18px auto 0;
  border: 1.5px solid #ece7d6;
  border-radius: 10px;
  background: #fff;
  padding: 9px 12px 9px 16px;
  color: #8b8674;
  font: 600 14px "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

.install-strip code {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #22201a;
}

.install-strip button {
  flex: 0 0 auto;
  min-width: 46px;
  border: 0;
  border-radius: 7px;
  background: #22201a;
  color: #fffdf7;
  font: 700 11px "Space Grotesk", sans-serif;
}

.platform-pills,
.home-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}

.platform-pills span,
.platform-pills a {
  min-height: 34px;
  border: 1.5px solid #ece7d6;
  border-radius: 999px;
  background: #fff;
  padding: 0 14px;
  color: #8b8674;
  font-size: 13px;
  font-weight: 700;
}

.platform-pills .active {
  border-color: #22201a;
  color: #22201a;
}

.home-stats span {
  color: #8b8674;
  font-size: 15px;
  font-weight: 700;
}

.registry-preview,
.ol-pricing-card,
.plugin-catalog-shell {
  max-width: 1120px;
  margin: 54px auto 0;
  border: 1.5px solid #ece7d6;
  border-radius: 24px;
  background: #fff;
  padding: clamp(18px, 3vw, 34px);
  box-shadow: 0 18px 60px -42px rgba(34, 32, 26, .45);
}

.registry-toolbar,
.pl-controls {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  gap: 18px;
  align-items: center;
}

.registry-search,
.pl-search {
  min-height: 56px;
  border: 1.5px solid #ece7d6;
  border-radius: 14px;
  background: #fff;
  padding: 0 18px;
  color: #8b8674;
  font-size: 19px;
  font-weight: 500;
}

.registry-filters,
.pl-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.registry-filters button,
.pl-filter-row button {
  min-height: 46px;
  border: 0;
  border-radius: 999px;
  background: #faf8ef;
  padding: 0 18px;
  color: #22201a;
  font-size: 17px;
  font-weight: 700;
}

.registry-filters button.active,
.pl-filter-row button.active {
  background: #5b4df0;
  color: #fff;
}

.registry-grid,
.pl-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 22px;
}

.registry-card,
.plugin-card {
  min-height: 172px;
  border: 1.5px solid #ece7d6;
  border-radius: 14px;
  background: #fff;
  padding: 24px 22px;
  box-shadow: none;
}

.registry-card h3,
.plugin-card h3 {
  color: #22201a;
  font: 700 22px/1.12 "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0;
}

.registry-card p,
.plugin-card p {
  color: #5c584a;
  font-size: 17px;
  line-height: 1.48;
}

.registry-card .author,
.plugin-card .author,
.plugin-author {
  color: #b4ad9d;
  font-size: 14px;
  font-weight: 700;
}

.registry-meta,
.plugin-card-meta {
  color: #8b8674;
  font-size: 14px;
  font-weight: 700;
}

.registry-tag,
.plugin-category {
  border-radius: 8px;
  background: #eefaf3;
  color: #178055;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.build-plugin-card {
  display: grid;
  place-items: center;
  min-height: 172px;
  border: 1.5px dashed #ece7d6;
  border-radius: 14px;
  background: #faf8ef;
  text-align: center;
}

.author-section {
  max-width: 1120px;
  margin: 84px auto;
  padding: 0 clamp(16px, 4vw, 48px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 1fr);
  gap: 58px;
  align-items: center;
}

.author-section .pill,
.pricing-kicker,
.blog-kicker,
.pl-kicker,
.mono-kicker {
  width: fit-content;
  border-radius: 999px;
  background: #fff4d6;
  color: #22201a;
  padding: 7px 14px;
  font: 700 13px "Space Grotesk", sans-serif;
  letter-spacing: 0;
  text-transform: none;
}

.author-section h2,
.ol-pricing-redesign h2 {
  margin: 18px 0 16px;
  color: #22201a;
  font-size: clamp(36px, 5vw, 48px);
  line-height: 1.05;
  letter-spacing: 0;
}

.author-section code {
  border: 1.5px dashed #bcb3ff;
  border-radius: 8px;
  background: #f7f5ff;
  padding: 0 8px;
  color: #5b4df0;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

.event-card {
  border: 1.5px solid #ece7d6;
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}

.event-card div {
  padding: 14px 18px;
}

.event-card div + div {
  border-top: 1px solid #ece7d6;
  background: #f6f5ff;
}

.code-window,
.codeBlock,
.terminal,
pre {
  border-radius: 12px;
  background: #22201a !important;
  color: #e8e5d8 !important;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace !important;
}

.code-window {
  padding: 22px 26px;
  font-size: 14px;
  line-height: 1.65;
  box-shadow: 0 26px 64px -38px rgba(34, 32, 26, .6);
}

.ol-pricing-redesign > header,
.blog-hero-redesign {
  text-align: center;
}

.ol-pricing-card {
  max-width: 880px;
  text-align: left;
}

.ol-plan-row {
  border: 1.5px solid #ece7d6;
  border-radius: 14px;
  background: #fff;
  padding: 20px 24px;
}

.ol-plan-row.featured {
  border-color: #c9c2f7;
  background: #f8f7ff;
}

.purple-cta {
  max-width: 1120px;
  margin: 96px auto;
  border-radius: 24px;
  background: linear-gradient(120deg, #5b4df0, #8a4df0);
  padding: clamp(30px, 5vw, 54px);
  color: #fff;
}

.purple-cta h2 {
  font-size: clamp(34px, 5vw, 52px);
  line-height: 1.05;
  letter-spacing: 0;
}

.purple-cta p {
  color: rgba(255,255,255,.72);
  font-size: 22px;
}

.ol-redesign-footer,
.pl-footer {
  border-top: 1px solid #f0ecdd;
  background: #fffdf7;
  color: #5c584a;
}

.pl-hero h1,
.blog-article h1,
.plugin-view h1 {
  color: #22201a;
  font-size: clamp(38px, 6vw, 64px);
  line-height: 1.02;
  letter-spacing: 0;
}

.plugin-view p,
.blog-article p {
  color: #5c584a;
}

.blog-featured,
.blog-grid-card,
.plugin-view,
.blog-article {
  border: 1.5px solid #ece7d6;
  border-radius: 24px;
  background: #fff;
  box-shadow: none;
}

.blog-article {
  max-width: 860px;
  margin: 48px auto 90px;
  padding: clamp(24px, 5vw, 56px);
}

.plugin-view {
  max-width: 1040px;
  margin: 48px auto 90px;
  padding: clamp(24px, 5vw, 46px);
}

@media (max-width: 900px) {
  .site-nav {
    padding: 14px 16px;
  }
  .site-nav nav {
    display: none;
    position: absolute;
    top: 69px;
    left: 0;
    right: 0;
    grid-template-columns: 1fr;
    gap: 4px;
    border-bottom: 1px solid #f0ecdd;
    background: #fffdf7;
    padding: 8px 16px 14px;
  }
  .site-nav nav.open {
    display: grid;
  }
  .site-nav nav a,
  .site-nav .github-pill {
    justify-content: flex-start;
    min-height: 44px;
    border-radius: 12px;
  }
  .site-nav nav .start-pill {
    display: none;
  }
  .home-hero {
    padding-top: 42px;
  }
  .home-hero h1,
  .ol-pricing-redesign > header h2,
  .blog-hero-redesign h1 {
    font-size: clamp(38px, 12vw, 56px);
  }
  .registry-toolbar,
  .pl-controls,
  .author-section {
    grid-template-columns: 1fr;
  }
  .registry-grid,
  .pl-grid {
    grid-template-columns: 1fr;
  }
  .registry-filters,
  .pl-filter-row {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 4px;
  }
  .registry-filters button,
  .pl-filter-row button {
    white-space: nowrap;
  }
  .purple-cta {
    margin: 56px 16px;
  }
}

@media (max-width: 560px) {
  .home-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
  .home-actions a,
  .home-actions button {
    width: 100%;
  }
  .install-strip {
    width: 100%;
    font-size: 12px;
  }
  .platform-pills {
    overflow-x: visible;
    flex-wrap: wrap;
    justify-content: center;
    padding-bottom: 4px;
  }
  .home-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .registry-preview,
  .ol-pricing-card,
  .plugin-catalog-shell {
    border-radius: 18px;
    margin-top: 34px;
  }
  .ol-plan-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* Exact footer CTA from other-apps/new-main-web-design/Leash Landing.dc.html */
.site-page main > section.purple-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  width: auto;
  max-width: none;
  min-height: 0;
  margin: 0 48px 48px;
  border-radius: 20px;
  background: linear-gradient(120deg, #5b4df0, #8a4df0);
  padding: 48px 56px;
  color: #fff;
}

.site-page main > section.purple-cta h2 {
  margin: 0 0 8px;
  color: #fff;
  font-size: 32px;
  line-height: 1.12;
  letter-spacing: 0;
  font-weight: 800;
}

.site-page main > section.purple-cta p {
  margin: 0;
  color: #d8d3fb;
  font-size: 15.5px;
  line-height: 1.35;
  font-weight: 600;
}

.site-page main > section.purple-cta > div:last-child {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}

.site-page main > section.purple-cta a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  border: 1.5px solid rgba(255,255,255,.4);
  border-radius: 12px;
  background: transparent;
  padding: 13px 24px;
  color: #fff;
  font-size: 15.5px;
  line-height: 1;
  font-weight: 700;
  text-decoration: none;
}

.site-page main > section.purple-cta a:first-child {
  border-color: #fff;
  background: #fff;
  color: #4335c9;
}

@media (max-width: 760px) {
  .site-page main > section.purple-cta {
    flex-direction: column;
    align-items: flex-start;
    margin: 0 16px 40px;
    padding: 32px 24px;
  }
  .site-page main > section.purple-cta > div:last-child {
    flex-wrap: wrap;
  }
}

/* Final exact author/code fix after global pre styling. */
.site-page main > section.author-band .author-code,
.site-page main > section.author-band .author-code pre,
.site-page main > section.author-band .author-code code,
.site-page main > section.author-band .author-code code span {
  font: 400 13.5px/1.75 "JetBrains Mono", monospace !important;
  letter-spacing: 0 !important;
}

.site-page main > section.author-band .author-code {
  border-radius: 16px;
  background: #22201a !important;
  padding: 24px 26px;
  color: #e8e5d8 !important;
  box-shadow: 0 12px 36px rgba(34, 32, 26, .25);
}

.site-page main > section.author-band .author-code pre {
  margin: 0;
  padding: 0;
  background: transparent !important;
  color: #e8e5d8 !important;
  white-space: pre;
}

.site-page main > section.author-band .code-window-bar strong {
  font: 600 11px "JetBrains Mono", monospace !important;
  color: #8b8674;
}

.site-page main > section.author-band .event-dropdown button {
  font: 500 12.5px/1.35 "JetBrains Mono", monospace !important;
  letter-spacing: 0 !important;
}

/* GitHub nav: no public star count, full scrollable repo list. */
.site-nav .github-pill {
  gap: 8px !important;
}

.site-nav .github-pill img {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  display: block;
  object-fit: contain;
}

.site-nav .github-dropdown {
  align-content: start !important;
  width: min(430px, calc(100vw - 32px)) !important;
  max-height: min(620px, calc(100vh - 96px)) !important;
  overflow-y: auto !important;
  padding: 10px !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.site-nav .github-dropdown a {
  grid-template-columns: 34px minmax(0, 1fr) !important;
}

.site-nav .github-dropdown em {
  display: none !important;
}

.site-nav .github-dropdown .github-repo-section {
  display: grid;
  gap: 4px;
  padding: 0 !important;
}

.site-nav .github-dropdown .github-repo-section + .github-repo-section {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #f0ecdd;
}

.site-nav .github-dropdown .github-repo-section h3 {
  margin: 2px 10px 4px;
  color: #8b8674;
  font: 800 10.5px "JetBrains Mono", monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* Official paw brand mark. */
.site-brand img {
  display: block !important;
  width: 34px !important;
  height: 34px !important;
  object-fit: contain !important;
}

/* GitHub menu polish. */
.site-nav .github-pill {
  border: 1.5px solid #ece7d6 !important;
  background: #fff !important;
  color: #22201a !important;
  box-shadow: 0 6px 18px rgba(80, 68, 20, .06) !important;
}

.site-nav .github-pill:hover,
.site-nav .github-pill.active {
  border-color: #c9c2f7 !important;
  background: #f6f5ff !important;
}

.site-nav .github-pill img {
  opacity: 1 !important;
}

.site-nav .github-dropdown .github-all {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 46px !important;
  margin-top: 4px !important;
  border-top: 1px solid #f0ecdd !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  color: #5b4df0 !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

/* Hero headline tracking. */
.site-page .home-hero h1 {
  letter-spacing: -0.025em !important;
}

.site-page .home-hero p {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 0 .24em !important;
  max-width: 1080px !important;
}

.home-hero p .hero-copy-group {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .24em;
  white-space: nowrap;
}

.home-hero p .hero-agent-copy-group {
  gap: .24em;
}

.home-hero p .hero-copy-break {
  display: inline;
}

.home-hero p .hero-copy-period {
  margin-left: -.18em;
}

/* Inline hero scrollers. */
.home-hero p .hero-inline-scroller {
  position: relative;
  top: 0;
  display: inline-flex;
  align-items: center;
  width: auto;
  max-width: min(240px, 48vw);
  height: 40px;
  margin: 0 .04em;
  border-radius: 999px;
}

.home-hero p .hero-inline-scroller.agent-scroller {
  max-width: min(300px, 56vw);
}

.home-hero p .hero-inline-chip {
  appearance: none;
  font-family: inherit;
  cursor: default;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: max-content;
  max-width: 100%;
  height: 40px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid #ece7d6;
  border-radius: 999px;
  background: #fff;
  color: #22201a;
  font-size: .68em;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 1px 0 rgba(22, 22, 15, .05), 0 10px 22px -18px rgba(22, 22, 15, .36);
  animation: hero-inline-pop 240ms ease-out both;
}

.home-hero p button.hero-inline-chip {
  cursor: pointer;
}

.home-hero p button.hero-inline-chip:hover {
  border-color: #c9c2f7;
  background: #f8f7ff;
}

.home-hero p button.hero-inline-chip:focus-visible {
  outline: 3px solid rgba(91, 77, 240, .22);
  outline-offset: 3px;
}

.home-hero p .hero-inline-chip strong {
  color: inherit;
  font: inherit;
}

.home-hero p .hero-inline-chip.agent {
  padding-right: 12px;
  padding-left: 12px;
}

.home-hero p .hero-inline-chip.agent img {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  object-fit: contain;
}

@keyframes hero-inline-pop {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Hero agent highway. */
.agent-highway {
  width: min(1080px, calc(100vw - 32px));
  margin: 8px auto 0;
  padding: 4px 0;
}

.agent-highway-road {
  position: relative;
  height: 140px;
  overflow: hidden;
  border: 1px solid #ece7d6;
  border-radius: 22px;
  background:
    linear-gradient(90deg, rgba(250, 250, 246, .92), rgba(250, 250, 246, .06) 13%, rgba(250, 250, 246, .06) 87%, rgba(250, 250, 246, .92)),
    linear-gradient(180deg, #fbfaf4 0%, #f0eee5 48%, #e7e3d7 49%, #f5f2e8 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 18px 50px -36px rgba(34, 32, 26, .42);
  isolation: isolate;
}

.agent-highway-road::before,
.agent-highway-road::after {
  content: "";
  position: absolute;
  left: -8%;
  right: -8%;
  height: 1px;
  background: repeating-linear-gradient(90deg, rgba(34, 32, 26, .22) 0 46px, transparent 46px 78px);
  animation: highway-dashes 2.8s linear infinite;
  z-index: 1;
}

.agent-highway-road::before {
  top: 70px;
}

.agent-highway-road::after {
  content: none;
}

.road-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255, 255, 255, .74);
  z-index: 1;
}

.road-line.lane-one {
  top: 70px;
}

.road-line.lane-two {
  display: none;
}

.road-sheen {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 480px 120px at 18% 20%, rgba(91, 77, 240, .1), transparent 62%),
    radial-gradient(ellipse 420px 120px at 82% 80%, rgba(236, 72, 153, .09), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.highway-agent {
  --agent-color: #5b4df0;
  position: absolute;
  left: 0;
  top: calc(24px + (var(--lane) * 58px));
  z-index: 3;
  display: inline-flex;
  align-items: center;
  min-width: 156px;
  height: 48px;
  transform: translateX(-220px);
  animation: highway-drive var(--drive-duration) linear infinite;
  animation-delay: var(--drive-delay);
  will-change: transform;
}

.highway-agent-glow {
  position: absolute;
  left: 12px;
  right: 8px;
  bottom: -8px;
  height: 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--agent-color) 24%, transparent);
  filter: blur(9px);
  opacity: .78;
}

.highway-agent-body {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  max-width: 196px;
  padding: 0 14px 0 9px;
  border: 1px solid color-mix(in srgb, var(--agent-color) 26%, #ece7d6);
  border-radius: 999px;
  background: rgba(255, 255, 255, .88);
  color: #22201a;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .86) inset, 0 10px 22px -18px rgba(22, 22, 15, .45);
  backdrop-filter: blur(8px);
}

.highway-agent-icon {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border-radius: 9px;
  background: color-mix(in srgb, var(--agent-color) 12%, white);
  overflow: hidden;
}

.highway-agent-icon img {
  width: 25px;
  height: 25px;
  object-fit: contain;
}

.highway-agent-name {
  min-width: 0;
  overflow: hidden;
  color: #22201a;
  font-size: 14px;
  font-weight: 850;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.highway-plugin-rider {
  position: absolute;
  left: calc(24px + (var(--rider-index) * 35px));
  bottom: 37px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 29px;
  max-width: 104px;
  padding: 0 9px 0 5px;
  border: 1px solid rgba(34, 32, 26, .09);
  border-radius: 999px;
  background: #fff;
  color: #4c473d;
  box-shadow: 0 10px 22px -15px rgba(34, 32, 26, .52);
  animation: plugin-hop 8.2s cubic-bezier(.2, .9, .2, 1) infinite;
  animation-delay: var(--rider-delay);
  transform-origin: 50% 120%;
}

.highway-plugin-rider img {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  object-fit: contain;
}

.highway-plugin-rider span {
  min-width: 0;
  overflow: hidden;
  font-size: 10.5px;
  font-weight: 900;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-claude { --agent-color: #e76f45; }
.agent-codex { --agent-color: #18a558; }
.agent-cursor { --agent-color: #6d5be8; }
.agent-gemini { --agent-color: #8f6df2; }
.agent-opencode { --agent-color: #f0a128; }
.agent-agentforce { --agent-color: #1789ff; }
.agent-vertex { --agent-color: #34a853; }
.agent-copilot { --agent-color: #7c3aed; }

@keyframes highway-drive {
  from {
    transform: translateX(-240px) translateY(0);
  }
  45% {
    transform: translateX(48vw) translateY(-1px);
  }
  to {
    transform: translateX(calc(100vw + 220px)) translateY(0);
  }
}

@keyframes highway-dashes {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(78px);
  }
}

@keyframes plugin-hop {
  0%, 15% {
    opacity: 0;
    transform: translate(-34px, -54px) rotate(-16deg) scale(.72);
  }
  25% {
    opacity: 1;
    transform: translate(-8px, -22px) rotate(8deg) scale(1);
  }
  34%, 78% {
    opacity: 1;
    transform: translate(0, 0) rotate(-2deg) scale(1);
  }
  86%, 100% {
    opacity: 0;
    transform: translate(18px, -18px) rotate(10deg) scale(.82);
  }
}

@media (max-width: 760px) {
  .site-page .home-hero p {
    gap: 8px .28em !important;
  }

  .home-hero p .hero-copy-break {
    display: block;
    flex-basis: 100%;
    margin-top: 2px;
  }

  .home-hero p .hero-inline-scroller {
    top: 0;
    height: 46px;
    max-width: min(280px, 86vw);
  }

  .home-hero p .hero-inline-scroller.agent-scroller {
    max-width: min(340px, 90vw);
  }

  .home-hero p .hero-inline-chip {
    gap: 9px;
    height: 46px;
    min-height: 46px;
    padding: 0 16px;
    font-size: .72em;
  }

  .home-hero p .hero-inline-chip.agent img {
    width: 27px;
    height: 27px;
  }

  .agent-highway {
    width: min(100%, calc(100vw - 20px));
    margin-top: 4px;
  }

  .agent-highway-road {
    height: 124px;
    border-radius: 18px;
  }

  .agent-highway-road::before {
    top: 62px;
  }

  .agent-highway-road::after {
    content: none;
  }

  .road-line.lane-one {
    top: 62px;
  }

  .highway-agent {
    top: calc(16px + (var(--lane) * 48px));
    min-width: 136px;
    height: 42px;
  }

  .highway-agent-body {
    height: 42px;
    max-width: 166px;
    gap: 6px;
    padding-right: 10px;
  }

  .highway-agent-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
  }

  .highway-agent-icon img {
    width: 22px;
    height: 22px;
  }

  .highway-agent-name {
    font-size: 12px;
  }

  .highway-plugin-rider {
    bottom: 32px;
    height: 25px;
    max-width: 86px;
  }

  .highway-plugin-rider span {
    display: inline;
    font-size: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .agent-highway-road::before,
  .agent-highway-road::after,
  .highway-agent,
  .highway-plugin-rider {
    animation-play-state: paused !important;
  }
}

/* Hero supported-agents modal. */
.hero-agent-modal {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(34, 32, 26, .34);
  backdrop-filter: blur(8px);
}

.hero-agent-modal-panel {
  width: min(780px, 100%);
  max-height: min(720px, calc(100vh - 48px));
  overflow: auto;
  border: 1px solid #ece7d6;
  border-radius: 24px;
  background: #fffdfa;
  box-shadow: 0 28px 80px rgba(34, 32, 26, .24);
  padding: 26px;
}

.hero-agent-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}

.hero-agent-modal-head span {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 10px;
  border-radius: 999px;
  background: #fff2c9;
  padding: 7px 12px;
  color: #22201a;
  font-size: 12px;
  font-weight: 800;
}

.hero-agent-modal-head h2 {
  margin: 0;
  max-width: 560px;
  color: #22201a;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.05;
  letter-spacing: 0;
}

.hero-agent-modal-head button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border: 1px solid #ece7d6;
  border-radius: 999px;
  background: #fff;
  color: #22201a;
  font-size: 28px;
  line-height: 1;
}

.hero-agent-modal-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.hero-agent-modal-card {
  display: grid;
  justify-items: center;
  gap: 8px;
  min-height: 150px;
  border: 1px solid #ece7d6;
  border-radius: 18px;
  background: #fff;
  padding: 18px 12px;
  text-align: center;
}

.hero-agent-modal-card img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.hero-agent-modal-card strong {
  color: #22201a;
  font-size: 15px;
  line-height: 1.15;
}

.hero-agent-modal-card em {
  align-self: end;
  border-radius: 999px;
  background: #e8f6ee;
  padding: 5px 9px;
  color: #1c7a4d;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.hero-agent-modal-card.soon em {
  background: #fff4d6;
  color: #8a6a12;
}

@media (max-width: 760px) {
  .hero-agent-modal {
    padding: 14px;
  }

  .hero-agent-modal-panel {
    border-radius: 20px;
    padding: 20px;
  }

  .hero-agent-modal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Hero action rhythm. */
.site-page .home-hero {
  gap: 12px !important;
}

.site-page .home-hero .hero-mini {
  margin: 18px 0 0 !important;
}

.site-page .home-hero .hero-actions {
  margin-top: 0 !important;
}

/* Final author layout guard: keep this section compact and inside the viewport. */
.site-page main > section.author-band {
  grid-template-columns: minmax(320px, 520px) minmax(0, 1fr) !important;
  gap: 56px !important;
  max-width: 1360px !important;
  width: min(1360px, calc(100% - clamp(32px, 8vw, 96px))) !important;
  margin-right: auto !important;
  margin-left: auto !important;
  overflow: visible !important;
}

.site-page main > section.author-band h2 {
  margin: 0 !important;
  font-size: 38px !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
}

.site-page main > section.author-band .event-select-label::after {
  content: none !important;
  display: none !important;
}

.site-page main > section.author-band .event-select-label > button {
  width: auto !important;
  min-height: 0 !important;
  gap: 8px !important;
  border: 2px dashed #c9c2f7 !important;
  border-radius: 12px !important;
  background: #f6f5ff !important;
  padding: 4px 12px !important;
  color: #4335c9 !important;
  font: 600 24px/1.2 "JetBrains Mono", monospace !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}

.site-page main > section.author-band .event-select-label > button span {
  display: inline-block !important;
  color: #8b8674 !important;
  font-size: 11px !important;
  line-height: 1 !important;
}

.site-page main > section.author-band .event-card {
  max-width: 460px !important;
}

.site-page main > section.author-band .event-card div {
  gap: 10px !important;
  padding: 12px 16px !important;
}

.site-page main > section.author-band .event-card b {
  min-width: 72px !important;
}

.site-page main > section.author-band .author-code {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

.site-page main > section.author-band .author-code pre,
.site-page main > section.author-band .author-code code {
  max-width: 100% !important;
  white-space: pre-wrap !important;
  overflow-wrap: anywhere !important;
}

/* Code window header alignment. */
.site-page main > section.author-band .code-window-bar {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  height: auto !important;
  margin: 0 0 22px !important;
  padding: 0 !important;
}

.site-page main > section.author-band .code-window-bar span {
  width: 10px !important;
  height: 10px !important;
  flex: 0 0 10px !important;
}

.site-page main > section.author-band .code-window-bar strong {
  margin-left: 12px !important;
  color: #8b8674 !important;
  font: 600 11px/1 "JetBrains Mono", monospace !important;
}

@media (max-width: 980px) {
  .site-page main > section.author-band {
    grid-template-columns: 1fr !important;
  }
}

/* Plugin registry spacing: keep search controls close to results. */
.plugin-registry-page .registry-header {
  padding-bottom: 22px !important;
}

.plugin-registry-page .registry-layout {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Reference home hero from other-apps/with-highway-main-web. */
.site-page main > section.home-hero {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 18px !important;
  max-width: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 43px clamp(16px, 4vw, 48px) 40px !important;
  background: #fffdf7 !important;
  text-align: center !important;
}

.site-page .home-hero h1 {
  max-width: 900px !important;
  margin: 0 !important;
  color: #22201a !important;
  font-family: "Space Grotesk", var(--sans) !important;
  font-size: clamp(34px, 4.5vw, 60px) !important;
  font-weight: 700 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.02em !important;
}

.site-page .home-hero h1 .hero-title-line {
  display: block !important;
  color: #22201a !important;
}

.site-page .home-hero h1 .hero-title-gradient {
  display: inline !important;
  background: linear-gradient(120deg, #5b4df0, #b44df0) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

.site-page .home-hero p.hero-leash-copy {
  display: grid !important;
  gap: 10px !important;
  width: min(920px, 100%) !important;
  max-width: 920px !important;
  margin: 0 !important;
  color: #5c584a !important;
  font-family: "Space Grotesk", var(--sans) !important;
  font-size: 19px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  letter-spacing: 0 !important;
}

.site-page .home-hero p.hero-leash-copy b {
  color: inherit !important;
  font-weight: 700 !important;
}

.site-page .home-hero p.hero-leash-copy .hero-copy-main,
.site-page .home-hero p.hero-leash-copy .hero-copy-sub {
  display: block !important;
}

.site-page .home-hero p.hero-leash-copy .hero-copy-main {
  white-space: nowrap !important;
}

.site-page .agent-highway {
  position: relative !important;
  width: 100% !important;
  max-width: 960px !important;
  height: 76px !important;
  margin: 23px 0 4px !important;
  padding: 0 !important;
  overflow: visible !important;
  border-top: 1px solid #f0ecdd !important;
  border-bottom: 1px solid #f0ecdd !important;
  background: linear-gradient(180deg, #faf8ef, #fffdf7) !important;
  box-shadow: none !important;
  container-type: inline-size !important;
}

.site-page .agent-highway-finish {
  position: absolute !important;
  top: -24px !important;
  left: 50% !important;
  z-index: 5 !important;
  transform: translateX(-50%) !important;
  font-size: 24px !important;
  line-height: 1 !important;
}

.site-page .agent-highway-road {
  position: absolute !important;
  inset: 0 !important;
  height: auto !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: inherit !important;
  background: transparent !important;
  box-shadow: none !important;
  isolation: auto !important;
}

.site-page .agent-highway-road::before,
.site-page .agent-highway-road::after {
  content: none !important;
}

.site-page .agent-highway-lane {
  position: absolute !important;
  top: 37px !important;
  left: 0 !important;
  right: 0 !important;
  height: 2px !important;
  background: repeating-linear-gradient(90deg, #e5e0cd 0 22px, transparent 22px 46px) !important;
}

.site-page .agent-highway-start {
  position: absolute !important;
  top: 5px !important;
  bottom: 5px !important;
  left: 50% !important;
  width: 2px !important;
  background: repeating-linear-gradient(0deg, #22201a 0 6px, #fff 6px 12px) !important;
}

.site-page .ol-car {
  position: absolute !important;
  top: var(--car-top) !important;
  left: 50%;
  z-index: 2 !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 4px 10px 4px 5px !important;
  border: 1.5px solid #ece7d6;
  border-radius: 99px !important;
  background: #fff;
  white-space: nowrap !important;
  animation-name: ol-launch, ol-approve, ol-boost !important;
  animation-duration: var(--car-duration), var(--car-duration), var(--car-duration) !important;
  animation-delay: var(--car-delay), var(--car-delay), var(--car-delay) !important;
  animation-timing-function: linear, linear, linear !important;
  animation-iteration-count: infinite, infinite, infinite !important;
  transform: translate3d(-66cqw, 0, 0);
  will-change: transform, opacity;
  backface-visibility: hidden;
  contain: paint;
}

.site-page .ol-car-icon {
  position: relative !important;
  display: inline-flex !important;
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
}

.site-page .ol-car-icon img {
  width: 18px !important;
  height: 18px !important;
  border-radius: 5px !important;
  object-fit: cover !important;
}

.site-page .ol-car-name {
  color: #22201a !important;
  font: 600 11.5px "JetBrains Mono", monospace !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
}

.site-page .ol-check {
  position: absolute !important;
  right: -3px !important;
  bottom: -3px !important;
  width: 11px !important;
  height: 11px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1.5px solid #fff !important;
  border-radius: 50% !important;
  background: #22a06b !important;
  color: #fff !important;
  font-size: 7px !important;
  line-height: 1 !important;
  animation: ol-check var(--car-duration) var(--car-delay) ease-out infinite !important;
}

@keyframes ol-launch {
  0% {
    transform: translate3d(-66cqw, 0, 0);
    opacity: 1;
  }
  50% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  54% {
    transform: translate3d(10cqw, 0, 0);
    opacity: 1;
  }
  64%, 100% {
    transform: translate3d(66cqw, 0, 0);
    opacity: 0;
  }
}

@keyframes ol-approve {
  0%, 50% {
    background: #fff;
    border-color: #ece7d6;
  }
  52%, 100% {
    background: #e8f6ee;
    border-color: #22a06b;
  }
}

@keyframes ol-boost {
  0%, 50% {
    filter: blur(0);
    box-shadow: none;
  }
  52% {
    filter: blur(.2px);
    box-shadow: -8px 0 14px rgba(34, 32, 26, .08);
  }
  56% {
    filter: blur(1.4px);
    box-shadow: -22px 0 22px rgba(34, 32, 26, .14), -36px 0 24px rgba(34, 32, 26, .06);
  }
  64%, 100% {
    filter: blur(3px);
    box-shadow: -28px 0 26px rgba(34, 32, 26, .08);
  }
}

@keyframes ol-check {
  0%, 50% {
    opacity: 0;
    transform: scale(.4);
  }
  52%, 100% {
    opacity: 1;
    transform: scale(1);
  }
}

.site-page .home-hero .hero-mini {
  margin: 6px 0 0 !important;
  color: #22201a !important;
  font-family: "Space Grotesk", var(--sans) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

.site-page .home-hero .hero-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 12px !important;
  margin-top: 2px !important;
}

.site-page .home-hero .primary-action,
.site-page .home-hero .secondary-action {
  min-height: 0 !important;
  border-radius: 12px !important;
  padding: 13px 26px !important;
  font-family: "Space Grotesk", var(--sans) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
}

.site-page .home-hero .primary-action {
  background: #22201a !important;
  color: #fff !important;
}

.site-page .home-hero .primary-action small {
  color: #a5a1bd !important;
  font: 500 11px "JetBrains Mono", monospace !important;
}

.site-page .home-hero .secondary-action {
  border: 1.5px solid #e5e0cd !important;
  background: #fff !important;
  color: #22201a !important;
}

.site-page .home-hero .install-strip {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  max-width: min(100%, 720px) !important;
  margin: 0 !important;
  border: 1.5px solid #ece7d6 !important;
  border-radius: 10px !important;
  background: #faf8ef !important;
  padding: 10px 16px !important;
  color: #5c584a !important;
  font: 500 13px "JetBrains Mono", monospace !important;
}

.site-page .home-hero .install-strip .muted-word {
  color: #8b8674 !important;
}

.site-page .home-hero .install-strip code {
  color: #5c584a !important;
  font: inherit !important;
  white-space: nowrap !important;
}

.site-page .home-hero .install-strip button {
  border-radius: 6px !important;
  background: #22201a !important;
  padding: 4px 10px !important;
  color: #fffdf7 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}

.site-page .home-hero .platform-pills {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 7px !important;
  margin: 2px 0 0 !important;
}

.site-page .home-hero .platform-pills span {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  border: 1.5px solid #ece7d6 !important;
  border-radius: 99px !important;
  background: #fff !important;
  padding: 7px 13px !important;
  color: #8b8674 !important;
  font-family: "Space Grotesk", var(--sans) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}

.site-page .home-hero .platform-pills span.active {
  border-color: #22201a !important;
  color: #22201a !important;
}

.site-page .home-hero .platform-pills b {
  color: #c4bfa8 !important;
  font: 500 9px "JetBrains Mono", monospace !important;
}

.site-page .home-hero .home-stats {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 10px 26px !important;
  margin-top: 10px !important;
  color: #8b8674 !important;
  font-family: "Space Grotesk", var(--sans) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
}

.site-page .home-hero .home-stats span {
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  color: inherit !important;
  box-shadow: none !important;
}

@media (max-width: 760px) {
  .site-page main > section.home-hero {
    gap: 16px !important;
    padding: 28px 16px 34px !important;
  }

  .site-page .home-hero h1 {
    max-width: 360px !important;
    font-size: clamp(34px, 11vw, 45px) !important;
    line-height: 1.08 !important;
  }

  .site-page .home-hero p.hero-leash-copy {
    max-width: 340px !important;
    font-size: 17px !important;
    line-height: 1.5 !important;
  }

  .site-page .home-hero p.hero-leash-copy .hero-copy-main {
    white-space: normal !important;
  }

  .site-page .agent-highway {
    width: 100% !important;
    height: 76px !important;
    margin-top: 22px !important;
    margin-bottom: 0 !important;
  }

  .site-page .ol-car {
    padding: 4px 9px 4px 5px !important;
  }

  .site-page .ol-car-name {
    font-size: 10.5px !important;
  }

  .site-page .home-hero .hero-actions {
    width: 100% !important;
  }

  .site-page .home-hero .primary-action,
  .site-page .home-hero .secondary-action {
    width: min(100%, 330px) !important;
    justify-content: center !important;
  }

  .site-page .home-hero .install-strip {
    width: min(100%, 340px) !important;
    overflow-x: auto !important;
    padding: 10px 12px !important;
    font-size: 11.5px !important;
  }

  .site-page .home-hero .home-stats {
    max-width: 340px !important;
    gap: 8px 14px !important;
  }
}
.pricing-comparison-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }