/* trust v3 = Integrations and stack. Owner: t1. */
.tr-mk { display: block; width: 44%; aspect-ratio: 1; background: var(--c, var(--ink)); -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }
.tr-letter { -webkit-mask: none; mask: none; background: none; color: var(--c); display: grid; place-items: center;
  font: 750 clamp(16px, 1.8vw, 26px)/1 var(--font); letter-spacing: -0.04em; }
.tr-note { margin: 18px auto 0; max-width: 34em; font: 400 17px/1.5 var(--font); color: var(--ink-2); }

/* 1 Logo grid */
.tr-field { position: relative; }
.tr-cells { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(6, auto); gap: 14px; }
.tr-cell { aspect-ratio: 1; border-radius: 24%; background: rgba(255, 255, 255, .42); box-shadow: inset 0 0 0 1px rgba(27, 23, 19, .035); }
.tr-logo { position: relative; display: grid; place-items: center; background: #fff; cursor: default; outline: none;
  box-shadow: 0 1px 2px rgba(27, 23, 19, .05), 0 10px 24px -14px rgba(60, 30, 10, .22);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.tr-logo:hover, .tr-logo:focus-visible, .tr-logo.lit { transform: translateY(-3px) scale(1.06);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 28%, transparent), 0 18px 34px -16px color-mix(in srgb, var(--c) 55%, transparent); }
.tr-tip { position: absolute; left: 50%; top: calc(100% + 8px); z-index: 3; transform: translate(-50%, 4px); opacity: 0; pointer-events: none;
  white-space: nowrap; padding: 7px 11px; border-radius: 10px; background: var(--ink); color: rgba(255, 255, 255, .7); font: 400 12px/1.3 var(--font);
  transition: opacity .2s, transform .2s; text-align: center; }
.tr-tip b { display: block; color: #fff; font-weight: 600; font-size: 13px; }
.tr-logo:hover .tr-tip, .tr-logo:focus-visible .tr-tip { opacity: 1; transform: translate(-50%, 0); }
.tr-center { position: absolute; z-index: 2; inset: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(6, 1fr);
  gap: 14px; pointer-events: none; }
.tr-center > * { grid-column: 3 / 11; pointer-events: auto; text-align: center; justify-self: center; }
.tr-center .tb-kicker { grid-row: 2; align-self: end; }
.tr-center .tb-h2 { grid-row: 2 / 4; align-self: center; margin: 0; max-width: 15em; text-wrap: balance; }
.tr-center .tb-kicker { display: none; }
.tr-center .tr-note { grid-row: 4; align-self: start; margin-top: 0; }
.tr-center .tb-btn { grid-row: 5; align-self: start; margin-top: -26px; }

.tr-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 56px; }
.tr-card { padding: 22px 24px 26px; border-radius: 22px; border: 0; display: flex; flex-direction: column; }
/* v7: the models card gets 3-4 useful ticks, so both cards in the row end at the same height without an empty bottom */
.tr-pts { list-style: none; margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.tr-pts li { display: flex; gap: 10px; align-items: flex-start; font: 400 14.5px/1.45 var(--font); color: var(--ink-2); }
.tr-pts .tb-check { flex: none; margin-top: 2px; }
.tr-card h3 { margin: 0 0 6px; font: 600 19px/1.3 var(--font); letter-spacing: -0.015em; color: var(--ink); }
.tr-card p { margin: 0; font: 400 15.5px/1.5 var(--font); color: var(--ink-2); }
.tr-via { color: var(--muted); white-space: nowrap; }
.tr-card-art { min-height: 96px; margin-bottom: 18px; padding: 16px; border-radius: 16px; background: var(--soft);
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.tr-pick { width: 44px; height: 44px; border-radius: 12px; background: #fff; display: grid; place-items: center; }
.tr-pick .tr-mk { width: 22px; }
.tr-pick.on { box-shadow: inset 0 0 0 1.5px var(--ink); }
.tr-key { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; margin-left: auto; border-radius: 12px;
  background: #fff; color: var(--ink); font: 550 14px/1 var(--font); }
.tr-key svg { width: 18px; height: 18px; color: var(--muted); }
.tr-mcp { flex-direction: column; align-items: stretch; gap: 8px; }
.tr-mcp-q { display: flex; gap: 10px; align-items: flex-start; font: 400 14.5px/1.45 var(--font); color: var(--ink-2); }
.tr-mcp-ic { width: 26px; height: 26px; border-radius: 8px; background: #fff; display: grid; place-items: center; flex: none; }
.tr-mcp-ic .tr-mk { width: 15px; }
.tr-mcp-a { display: flex; gap: 10px; align-items: center; padding-left: 36px; font: 550 14.5px/1.4 var(--font); color: var(--ink); }

/* 2 Floating cards */
.tr-fl { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px; align-items: center; }
.tr-fl-txt .tb-h2 { text-wrap: balance; }
.tr-fl-txt .tr-note { margin: 18px 0 28px; }
/* v7: the lanes end at the dark plate edge on any width (plate inset = shell.css .grp::before; wrap inset = .wrap), the fade sits inside it */
.tr-lanes { --wmax: 1240px; --wpad: 32px; --pi: max(16px, 50vw - 700px); --wi: max(var(--wpad), (100vw - var(--wmax)) / 2 + var(--wpad));
  display: flex; flex-direction: column; gap: 16px; margin-right: calc(var(--pi) - var(--wi)); overflow: hidden; padding: 10px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 88%, transparent); }
.tr-lane { overflow: visible; }
.tr-track { display: flex; gap: 14px; width: max-content; animation: tr-drift 46s linear infinite; animation-play-state: paused; }
.tr-lane.r .tr-track { animation-direction: reverse; animation-duration: 52s; }
.tr-lane:nth-child(2) { margin-left: -90px; }
.tr-lanes.run .tr-track { animation-play-state: running; }
.tr-lanes.run:hover .tr-track { animation-play-state: paused; }
@keyframes tr-drift { to { transform: translateX(calc(-50% - 7px)); } }
.tr-fc { display: inline-flex; align-items: center; gap: 12px; width: 210px; height: 68px; padding: 0 16px; border-radius: 16px; background: #fff;
  box-shadow: 0 1px 2px rgba(27, 23, 19, .05), 0 10px 24px -16px rgba(60, 30, 10, .25); transition: transform .3s var(--ease); }
.tr-fc:hover { transform: translateY(-2px); }
.tr-fc-ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 9%, #fff); flex: none; }
.tr-fc-ic .tr-mk { width: 20px; }
.tr-fc-ic .tr-letter { font-size: 18px; }
.tr-fc b { display: block; font: 600 15px/1.2 var(--font); color: var(--ink); }
.tr-fc small { display: block; font: 400 12.5px/1.3 var(--font); color: var(--muted); margin-top: 2px; }

@media (max-width: 1024px) {
  .tr-cells, .tr-center { gap: 10px; }
  .tr-center .tb-h2 { font-size: 36px; }
  .tr-center .tr-note { font-size: 15.5px; }
  .tr-fl { grid-template-columns: 1fr; gap: 36px; }
  .tr-lanes { margin-left: calc(var(--pi) - var(--wi)); }
}
@media (max-width: 760px) {
  .tr-cells { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-top: 28px; }
  .tr-cell { display: none; }
  .tr-logo { display: grid; grid-area: auto !important; }
  .tr-tip { display: none; }
  .tr-field { display: flex; flex-direction: column-reverse; }
  .tr-center { position: static; display: block; text-align: left; }
  .tr-center > * { text-align: left; }
  .tr-center .tb-h2 { font-size: 32px; }
  .tr-center .tr-note { margin: 14px 0 22px; }
  .tr-center .tb-btn { margin-top: 0; width: 100%; }
  .tr-row { grid-template-columns: 1fr; margin-top: 32px; gap: 12px; }
  .tr-card { padding: 16px 16px 20px; }
  .tr-key { margin-left: 0; }
  .tr-fc { width: 180px; height: 60px; }
}
@media (prefers-reduced-motion: reduce) {
  .tr-track { animation: none; }
  .tr-logo { transition: none; }
}

/* v5: models + "Manage from your AI" on the dark plate. Quiet glass cards instead of two bright white blocks;
   logos keep small white tiles so brand marks stay readable. */
.sec.grp-dark .tr-card.tb-card { background: rgba(255, 255, 255, .045); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); color: #fff; }
.sec.grp-dark .tr-card h3 { color: #fff; }
.sec.grp-dark .tr-card p { color: rgba(255, 255, 255, .62); }
.sec.grp-dark .tr-via { color: rgba(255, 255, 255, .42); }
.sec.grp-dark .tr-card-art { background: rgba(255, 255, 255, .05); }
.sec.grp-dark .tr-pick { background: rgba(255, 255, 255, .94); }
.sec.grp-dark .tr-pick.on { box-shadow: 0 0 0 2px #15120F, 0 0 0 3.5px rgba(255, 255, 255, .85); }
.sec.grp-dark .tr-key { background: rgba(255, 255, 255, .08); color: #fff; }
.sec.grp-dark .tr-pts { border-top-color: rgba(255, 255, 255, .1); }
.sec.grp-dark .tr-pts li { color: rgba(255, 255, 255, .74); }
.sec.grp-dark .tr-pts .tb-check { color: #fff; }
body.std-apollo .tr-lanes { --wmax: 1264px; }
@media (max-width: 900px) { .tr-lanes { --wpad: 18px; } }
.sec.grp-dark .tr-key svg { color: rgba(255, 255, 255, .55); }
.sec.grp-dark .tr-mcp-q { color: rgba(255, 255, 255, .72); }
.sec.grp-dark .tr-mcp-a { color: #fff; }
.sec.grp-dark .tr-note { color: rgba(255, 255, 255, .66); }

/* v6: "Manage from your AI" = a Claude-like composer: the request types in, then the user bubble and a short "Done" reply. */
.tr-mcp { gap: 10px; }
.tr-ai-thread { display: grid; gap: 8px; min-height: 92px; align-content: end; }
.tr-ai-u, .tr-ai-a { opacity: 0; transform: translateY(6px); transition: opacity .35s var(--ease), transform .35s var(--ease); }
.tr-mcp.sent .tr-ai-u, .tr-mcp.sent .tr-ai-a { opacity: 1; transform: none; }
.tr-mcp.sent .tr-ai-a { transition-delay: .55s; }
.tr-ai-u { justify-self: end; max-width: 86%; padding: 8px 12px; border-radius: 14px; background: #F0EEE6; color: var(--ink); font: 400 13.5px/1.4 var(--font); }
.tr-ai-a { display: flex; gap: 9px; align-items: flex-start; font: 400 13.5px/1.45 var(--font); color: var(--ink); }
.tr-ai-logo { width: 22px; height: 22px; flex: none; display: grid; place-items: center; }
.tr-ai-logo .tr-mk { width: 18px; --c: #D97757; }
.tr-ai-box { position: relative; display: flex; align-items: flex-start; min-height: 58px; padding: 11px 50px 11px 14px; border-radius: 16px;
  background: #fff; box-shadow: 0 0 0 1px rgba(27, 23, 19, .1), 0 6px 18px -12px rgba(27, 23, 19, .3); font: 400 14px/1.45 var(--font); color: var(--ink); }
.tr-ai-txt.ph { color: var(--faint); }
.tr-ai-caret { display: none; width: 1.5px; height: 17px; margin: 2px 0 0 1px; background: var(--ink); animation: tr-blink 1s steps(1) infinite; }
.tr-mcp.typing .tr-ai-caret { display: inline-block; }
@keyframes tr-blink { 50% { opacity: 0; } }
.tr-ai-send { position: absolute; right: 10px; bottom: 10px; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  background: #D97757; color: #fff; opacity: .35; transition: opacity .2s, transform .2s var(--ease); }
.tr-ai-send svg { width: 16px; height: 16px; }
.tr-mcp.typing .tr-ai-send { opacity: 1; }
/* dark plate: the composer stays a light "app window", the thread sits on the card */
.sec.grp-dark .tr-ai-u { background: rgba(255, 255, 255, .1); color: #fff; }
.sec.grp-dark .tr-ai-a { color: #fff; }
.sec.grp-dark .tr-ai-logo .tr-mk { --c: #E8957A; }

/* v6: logo lane on the dark plate (was white cards) */
.sec.grp-dark .tr-fc { background: rgba(255, 255, 255, .055); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09); }
.sec.grp-dark .tr-fc:hover { background: rgba(255, 255, 255, .09); }
.sec.grp-dark .tr-fc b { color: #fff; }
.sec.grp-dark .tr-fc small { color: rgba(255, 255, 255, .5); }
.sec.grp-dark .tr-fc-ic { background: rgba(255, 255, 255, .94); }
@media (prefers-reduced-motion: reduce) { .tr-ai-u, .tr-ai-a { transition: none; } .tr-ai-caret { animation: none; } }