/* Own opaque tokens: the shared --mel-surface-1 is a 3.5% tint on dark, too
   transparent for a chip fill. Dark is the default; the marketing root
   switches to light with a .light class. */
.mlp-cobuild { --cb-fill: #0E1226; --cb-well: #080B19; --cb-ink: #E8EAF2; --cb-ink-2: rgba(200,208,230,.72);
  --cb-hi: rgba(255,255,255,.06); --cb-lo: rgba(0,0,0,.6); --cb-rim: rgba(167,139,250,.2);
  --cb-glow: rgba(34,211,238,.14); --cb-glow-peak: rgba(34,211,238,.26); --cb-who: #22D3EE;
  --cb-knob: linear-gradient(135deg, #22D3EE, #A78BFA); --cb-knob-ink: #0B0F1F; }
.light .mlp-cobuild { --cb-fill: #EEF2F8; --cb-well: #E2E8F1; --cb-ink: #0F172A; --cb-ink-2: #475569;
  --cb-hi: rgba(255,255,255,.95); --cb-lo: rgba(100,116,150,.3); --cb-rim: rgba(30,58,138,.12);
  --cb-glow: rgba(30,58,138,0); --cb-glow-peak: rgba(30,58,138,0); --cb-who: #1E3A8A;
  --cb-knob: linear-gradient(135deg, #1E3A8A, #4F46E5); --cb-knob-ink: #FFFFFF; }

/* Animatable angle: the sweep is a border-box conic under a padding-box fill,
   so the light only ever shows on the 1px border. */
@property --cb-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

.mlp-cobuild { position: relative; display: inline-flex; align-items: center; gap: 12px; max-width: 100%;
  margin-top: 20px; padding: 5px 5px 5px 16px; border-radius: 999px; text-decoration: none;
  font-family: Poppins, system-ui, sans-serif; color: var(--cb-ink);
  border: 1px solid transparent;
  background:
    linear-gradient(var(--cb-fill), var(--cb-fill)) padding-box,
    conic-gradient(from var(--cb-a), var(--cb-rim) 0 62%, #22D3EE 74%, #A78BFA 82%, var(--cb-rim) 94%) border-box;
  /* Relief: highlight top-left, depth bottom-right. On dark it also casts a
     faint cyan halo that breathes, so the chip emits light instead of mud. */
  box-shadow: -5px -5px 12px var(--cb-hi), 7px 8px 18px var(--cb-lo), 0 0 22px var(--cb-glow);
  animation: mlp-cobuild-sweep 7s linear infinite, mlp-cobuild-breathe 3.2s ease-in-out infinite;
  transition: transform .2s ease; }
@keyframes mlp-cobuild-sweep { to { --cb-a: 360deg; } }
@keyframes mlp-cobuild-breathe { 50% { box-shadow: -5px -5px 12px var(--cb-hi), 7px 8px 18px var(--cb-lo), 0 0 30px var(--cb-glow-peak); } }
.mlp-cobuild:hover { transform: translateY(-1px); }
.mlp-cobuild:active { transform: translateY(1px); }
.mlp-cobuild:focus-visible { outline: 2px solid #22D3EE; outline-offset: 3px; }

.mlp-cobuild-dot { position: relative; flex: none; width: 7px; height: 7px; border-radius: 50%; background: #22D3EE; }
.mlp-cobuild-dot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #22D3EE;
  animation: mlp-cobuild-ping 2s ease-out infinite; }
@keyframes mlp-cobuild-ping { from { transform: scale(1); opacity: .6; } to { transform: scale(2.6); opacity: 0; } }
.mlp-cobuild-lead { flex: none; font-size: 12.5px; font-weight: 600; letter-spacing: .01em; color: var(--cb-ink-2); }

/* Recessed well: pressed-in relief; clips only its own text. */
.mlp-cobuild-rot { display: grid; min-width: 0; overflow: hidden; contain: paint; border-radius: 999px;
  padding: 6px 14px; background: var(--cb-well); font-size: 13px; line-height: 1.35; text-align: left;
  box-shadow: inset 2px 2px 5px var(--cb-lo), inset -2px -2px 5px var(--cb-hi); }
.mlp-cobuild-item { grid-area: 1 / 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transform: translateY(110%); opacity: 0;
  transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .3s ease; }
.mlp-cobuild-item.is-on { transform: none; opacity: 1; }
.mlp-cobuild-item.is-off { transform: translateY(-110%); opacity: 0; }
.mlp-cobuild-who { font-weight: 700; color: var(--cb-who); }
.mlp-cobuild-what { color: var(--cb-ink-2); }

/* Raised knob: the one solid, pressable thing in the chip. */
.mlp-cobuild-go { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  color: var(--cb-knob-ink); background: var(--cb-knob);
  box-shadow: -2px -2px 5px var(--cb-hi), 3px 3px 7px var(--cb-lo); transition: transform .2s ease; }
.mlp-cobuild:hover .mlp-cobuild-go { transform: translateX(2px); }
.mlp-cobuild-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Mobile tray (bento, liquid glass). A rotating line is scrolled past before
   it finishes a cycle, so on phones the four audiences are laid out at once,
   with hierarchy: Enterprises (the pilot we co-build) is the lead tile on a
   deep brand gradient with a glass sheen and its promise; integrators, tech
   partners and creators sit beneath as three compact glass tiles. Every label
   is one line. The tray sits on the opaque hero deck, so the glass never
   shows the backdrop through it. Both variants ship in the markup and CSS
   picks one (no useIsMobile), so the prerendered page never swaps layout. */
.mlp-cobuild-tray { display: none; }
@media (max-width: 767px) {
  .mlp-cobuild { display: none; }
  .mlp-cobuild-tray { --cb-ink: #EEF0F8; --cb-ink-2: rgba(214,220,238,.64); --cb-acc: #67E8F9;
    --cb-glass: rgba(255,255,255,.035); --cb-glass-edge: rgba(255,255,255,.08); --cb-glass-hi: rgba(255,255,255,.10);
    display: flex; flex-direction: column; gap: 10px; width: 100%; margin-top: 20px;
    font-family: Poppins, system-ui, sans-serif; color: var(--cb-ink); }
  .light .mlp-cobuild-tray { --cb-ink: #0F172A; --cb-ink-2: #64748B; --cb-acc: #1E3A8A;
    --cb-glass: #FFFFFF; --cb-glass-edge: rgba(15,23,42,.07); --cb-glass-hi: rgba(255,255,255,1); }
  .mlp-cobuild-tray-head { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 4px;
    white-space: nowrap; font: 700 10.5px/1 "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
    letter-spacing: .16em; text-transform: uppercase; color: var(--cb-ink-2); }

  /* Lead tile: navy ink ground (white text well above 12:1), glass sheen on
     the upper half, slow light pass. */
  .mlp-cobuild-lead-key { position: relative; display: flex; align-items: center; gap: 12px; min-height: 68px;
    padding: 12px 12px 12px 16px; border-radius: var(--mlp-r, 16px); overflow: hidden; isolation: isolate;
    text-decoration: none; color: #fff; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
    /* Dark navy ink, the marketing cards' ground (beta tab / ink #0B1530 ->
       navy #1E2F7A), with a faint cyan bloom top-right; same in both themes. */
    background:
      radial-gradient(90% 140% at 100% 0%, rgba(34,211,238,.20), transparent 55%),
      linear-gradient(135deg, #071827 0%, #0B1530 45%, #15183B 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 0 1px rgba(125,145,220,.18),
      0 10px 28px -10px rgba(7,24,39,.8), 0 0 28px -8px rgba(34,211,238,.18);
    transition: transform .2s cubic-bezier(.2,.8,.2,1); }
  .light .mlp-cobuild-lead-key { box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 0 1px rgba(30,47,122,.35),
      0 12px 26px -12px rgba(11,21,48,.55); }
  .mlp-cobuild-lead-key::before { content: ""; position: absolute; inset: 0 0 50% 0; z-index: -1; border-radius: inherit;
    background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,0)); }
  .mlp-cobuild-lead-key::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 45%; z-index: -1;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.16), transparent);
    transform: translateX(-120%); animation: mlp-cobuild-pass 5.5s cubic-bezier(.4,0,.2,1) 1.2s infinite; }
  @keyframes mlp-cobuild-pass { 0% { transform: translateX(-120%); } 30%, 100% { transform: translateX(260%); } }
  .mlp-cobuild-lead-key:active { transform: scale(.975); }
  .mlp-cobuild-lead-key:focus-visible { outline: 2px solid #67E8F9; outline-offset: 3px; }
  .mlp-cobuild-lead-ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--mlp-r-in, 10px);
    background: rgba(255,255,255,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), inset 0 0 0 1px rgba(255,255,255,.12); }
  /* The promise is fitted to its line by useFitText (no truncation). On
     narrow phones the glyph tile is dropped to give it room. */
  .mlp-cobuild-lead-tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; text-align: left;
    }
  .mlp-cobuild-lead-who { font-size: 15.5px; font-weight: 700; letter-spacing: -.015em; line-height: 1.2; white-space: nowrap; }
  .mlp-cobuild-lead-what { display: block; font-size: 12.5px; letter-spacing: -.005em; line-height: 1.3;
    color: rgba(255,255,255,.82); white-space: nowrap; overflow: hidden; }
  .mlp-cobuild-lead-what::first-letter { text-transform: uppercase; }
  .mlp-cobuild-lead-go { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
    color: #0B1530; background: #fff; box-shadow: 0 4px 12px rgba(10,14,40,.3); transition: transform .2s ease; }
  .mlp-cobuild-lead-key:active .mlp-cobuild-lead-go { transform: translateX(2px); }

  /* Secondary tiles: glass on the deck, glyph over a one-line label. */
  .mlp-cobuild-tray-keys { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .mlp-cobuild-key { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    min-width: 0; min-height: 76px; padding: 12px 6px 10px; border-radius: var(--mlp-r, 16px);
    text-decoration: none; color: var(--cb-ink); background: var(--cb-glass);
    box-shadow: inset 0 1px 0 var(--cb-glass-hi), inset 0 0 0 1px var(--cb-glass-edge);
    touch-action: manipulation; -webkit-tap-highlight-color: transparent;
    transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease; }
  .light .mlp-cobuild-key { box-shadow: inset 0 0 0 1px var(--cb-glass-edge), 0 1px 2px rgba(15,23,42,.04), 0 8px 18px -10px rgba(30,58,138,.25); }
  .mlp-cobuild-key:active { transform: scale(.96);
    box-shadow: inset 0 1px 0 var(--cb-glass-hi), inset 0 0 0 1px color-mix(in srgb, var(--cb-acc) 55%, transparent); }
  .mlp-cobuild-key:focus-visible { outline: 2px solid var(--cb-acc); outline-offset: 2px; }
  .mlp-cobuild-key-ic { display: grid; place-items: center; color: var(--cb-acc); }
  /* One-line labels never crop: useFitText measures each [data-fit] label
     and scales its font to the width it actually has (any screen, any
     language), down to its floor; only past the floor does it wrap. */
  .mlp-cobuild-key { padding-left: 6px; padding-right: 6px; }
  .mlp-cobuild-key-who { display: block; max-width: 100%; white-space: nowrap; overflow: hidden;
    font-size: 12.5px; font-weight: 600; letter-spacing: -.015em; line-height: 1.2; text-align: center; }
}
@media (max-width: 400px) {
  .mlp-cobuild-lead-ic { display: none; }
  .mlp-cobuild-lead-key { padding-left: 18px; }
}
/* Narrow phones (< 360px): three tiles in a row leave ~70px per label, so
   they become full-width rows (glyph + label centred), same glass. */
@media (max-width: 359px) {
  .mlp-cobuild-tray-keys { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .mlp-cobuild-key { flex-direction: row; justify-content: center; gap: 10px; min-height: 48px; padding: 0 16px; }
  .mlp-cobuild-key-who { flex: 0 1 auto; min-width: 0; text-align: center; font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .mlp-cobuild, .mlp-cobuild-dot::after, .mlp-cobuild-lead-key::after { animation: none; }
  .mlp-cobuild-lead-key::after { opacity: 0; }
  .mlp-cobuild-item, .mlp-cobuild-key, .mlp-cobuild-lead-key { transition: none; }
}