/* The bot showroom (James, 11 Nov 2026: "the unique selling point is the amount of ... bots that we can supply, and we charge per each bot
   ... there has to be a page where they pick the bots, and it shows them their capabilities in sort of the Higgsfield assets way").
   The same white room as the landing page: a team of glass robots for the page, one glass object for each team of bots, the teams along
   a shelf, each bot a pane of glass with a steel switch, and a tray at the foot that counts the team. Loaded after home.css. */
.bots-page{padding-bottom:110px}
.links a[aria-current="page"]{color:var(--ink)}
.links a[aria-current="page"]::after{scale:1 1}
.prog{display:flex;gap:6px;margin-left:auto}
.prog[hidden],.prog-n[hidden],.nav .btn[hidden]{display:none}
.prog li{width:30px;height:5px;border-radius:5px;background:rgba(14,18,28,.14)}
.prog li[data-done]{background:var(--ink)}
.prog li[data-now]{width:50px;background:var(--accent);box-shadow:0 0 0 1px rgba(63,107,0,.45)}
.prog-n{color:var(--soft);font-size:13px;white-space:nowrap}

.b-hero{min-height:min(78svh,720px);padding-bottom:0}
.b-hero h1{max-width:12ch;font-size:clamp(2.8rem,5.4vw,5.6rem)}
.b-shop{min-height:0;padding-top:clamp(20px,3vw,48px);background:linear-gradient(180deg,#fff 0,#fff 30%,#f1f2f5 100%)}
.b-shop .k-art{height:min(44svh,440px)}
.b-shop .k-info h2{font-size:clamp(2.2rem,4vw,4rem)}
.b-shop .k-say{max-width:36ch;line-height:1.36}
.b-shop .k-tile small b{color:var(--accent-ink);font-weight:600}
.k-tile[data-has]::after{content:attr(data-has);position:absolute;right:9px;top:8px;display:grid;place-items:center;min-width:24px;height:24px;padding:0 7px;border-radius:99px;font:600 12.5px/1 var(--text);color:var(--on-accent);
  background:linear-gradient(135deg,rgba(255,255,255,.6),transparent 50%),var(--accent);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 0 0 1px rgba(63,107,0,.4),0 6px 12px -4px var(--accent)}

/* the bar over the cards: how many are shown, and a box that searches every bot */
.b-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;width:min(100% - 64px,1400px);margin:clamp(16px,2.4vw,32px) auto 0;scroll-margin-top:96px}
.b-count{color:var(--ink-2);font-size:17px}
.b-count b{color:var(--ink);font-weight:600}
.b-bar .find{margin:0;width:min(100%,320px)}
.b-bar .find input{width:100%;height:46px;padding:0 18px;border-radius:99px;border:1px solid var(--line-2);background:#fff;font-size:16px}

/* each bot: a pane of glass. What it does, when it starts, what it needs, and a steel switch that lights when it is on the team. */
.b-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;width:min(100% - 64px,1400px);margin:16px auto 0;padding-bottom:40px}
.bot{position:relative;display:flex;flex-direction:column;gap:10px;min-height:236px;padding:18px 18px 16px;border-radius:24px;overflow:hidden;
  background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(255,255,255,.55) 46%),linear-gradient(180deg,#fff,#f4f5f8);
  box-shadow:0 0 0 1px rgba(14,18,28,.08),inset 0 1px 0 #fff,inset 0 -18px 26px -22px rgba(22,30,48,.25),0 26px 40px -30px rgba(22,30,48,.5);
  animation:rise-in .6s var(--ease) both;animation-delay:calc(var(--i) * 35ms);transition:translate .35s var(--ease),box-shadow .45s}
.bot::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:radial-gradient(120% 80% at 100% 100%,color-mix(in srgb,var(--accent) 60%,transparent),transparent 60%);opacity:0;transition:opacity .5s}
.bot > *{position:relative}
.bot .thumb{position:absolute;right:-6px;top:-10px;width:92px;height:78px;object-fit:contain;mix-blend-mode:multiply;opacity:.9;pointer-events:none;transition:scale .6s var(--ease),opacity .4s}
.bot h3{max-width:calc(100% - 84px);min-height:46px;font-size:20px;font-weight:600;line-height:1.12;letter-spacing:-.024em}
.bot .from{color:var(--soft);font-size:12.5px;margin-top:-6px}
.bot .job{color:var(--ink-2);font-size:15px;line-height:1.4;text-wrap:pretty}
/* a sample of the bot's work: a slip of frosted glass with the light down one edge */
.bot .sample{display:grid;gap:4px;padding:10px 12px 11px 15px;border-radius:14px;background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(255,255,255,.5)),rgba(14,18,28,.05);box-shadow:inset 0 0 0 1px rgba(14,18,28,.08),inset 3px 0 0 var(--accent),0 10px 16px -14px rgba(22,30,48,.5)}
.bot .sample small{color:var(--soft);font:600 10.5px/1 var(--text);letter-spacing:.09em;text-transform:uppercase}
.bot .sample p{color:var(--ink);font-size:14px;line-height:1.36;text-wrap:pretty}
.bot dl{display:grid;gap:5px;margin-top:auto;font-size:13.5px;line-height:1.3}
.bot dl div{display:grid;grid-template-columns:5.6em minmax(0,1fr);gap:8px}
.bot .asks:empty{display:none}
.bot dt{color:var(--soft)}
.bot dd{color:var(--ink)}
.bot .foot-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:6px;padding-top:12px;border-top:1px solid rgba(14,18,28,.07)}
.bot .asks{color:var(--soft);font-size:13px}
.bot .price{color:var(--ink);font-size:15px;font-weight:600;letter-spacing:-.014em;white-space:nowrap}
.b-team-price{margin-top:14px;color:var(--ink);font-size:17px;font-weight:600;letter-spacing:-.016em}
.b-team-price:empty{display:none}
@media (hover:hover) and (pointer:fine){.bot:hover{translate:0 -4px}.bot:hover .thumb{scale:1.08}}
.bot[data-on]{box-shadow:0 0 0 2.5px var(--accent),0 0 0 3.5px rgba(63,107,0,.34),inset 0 1px 0 #fff,0 0 44px -8px color-mix(in srgb,var(--accent) 80%,transparent),0 26px 40px -30px rgba(22,30,48,.5)}
.bot[data-on]::before{opacity:.5}
.bot[data-later]{background:#f4f5f8;box-shadow:0 0 0 1px rgba(14,18,28,.07)}
.bot[data-later] .thumb{opacity:.35;filter:grayscale(1)}
.bot[data-later] :is(h3,.job,dd){color:var(--soft)}
/* the switch: a steel track and a glass bead. On, the track is lit lime and the bead has crossed. */
.sw-b{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:10px;min-height:44px;cursor:pointer;-webkit-tap-highlight-color:transparent;font-size:14.5px;font-weight:600;letter-spacing:-.012em}
.sw-b i{position:relative;flex:none;width:58px;height:32px;border-radius:99px;background:var(--steel);box-shadow:inset 0 2px 4px rgba(0,0,0,.28),inset 0 0 0 1px rgba(14,18,28,.16),0 1px 0 #fff;transition:background-color .4s,box-shadow .4s}
.sw-b i::after{content:"";position:absolute;left:3px;top:3px;width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 32% 26%,#fff,rgba(255,255,255,.2) 48%),linear-gradient(180deg,#fdfdfe,#d5d8de);box-shadow:0 2px 5px rgba(0,0,0,.3),inset 0 -2px 3px rgba(0,0,0,.12),0 0 0 1px rgba(14,18,28,.12);transition:translate .45s var(--spring),background .4s}
.sw-b[aria-pressed="true"] i{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 80%,#000),var(--accent));box-shadow:inset 0 2px 4px rgba(0,0,0,.2),inset 0 0 0 1px rgba(63,107,0,.5),0 0 16px -2px var(--accent)}
.sw-b[aria-pressed="true"] i::after{translate:26px 0}
.sw-b:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:12px}
.sw-b[disabled]{cursor:default;color:var(--soft)}
.b-none{grid-column:1 / -1;padding:40px 0;color:var(--soft);font-size:17px;text-align:center}

/* the tray: your team, counted, always in reach. Glass in a steel frame, like the studio. */
.tray{position:fixed;inset:auto 0 14px;z-index:30;display:flex;justify-content:center;padding:0 12px;pointer-events:none}
.tray-in{pointer-events:auto;display:flex;align-items:center;gap:10px 18px;max-width:min(100%,980px);padding:10px 10px 10px 22px;border-radius:99px;border:4px solid transparent;
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.78)) padding-box,var(--steel) border-box;-webkit-backdrop-filter:saturate(1.6) blur(22px);backdrop-filter:saturate(1.6) blur(22px);
  box-shadow:0 0 0 1px rgba(14,18,28,.12),inset 0 1px 0 #fff,0 30px 50px -24px rgba(22,30,48,.6)}
.tray-n{display:flex;align-items:baseline;gap:9px;white-space:nowrap;color:var(--ink-2);font-size:15px}
.tray-n b{display:inline-block;min-width:1.1em;color:var(--ink);font-size:30px;font-weight:600;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.tray-n b.bump{animation:bump .5s var(--spring)}
@keyframes bump{40%{scale:1.35;color:var(--accent-ink)}}
.tray-beads{display:flex;align-items:center;min-width:0;overflow:hidden}
.tray-beads i{flex:none;width:18px;height:18px;margin-right:-6px;border-radius:50%;background:radial-gradient(circle at 32% 26%,#fff,transparent 46%),var(--accent);box-shadow:0 0 0 1.5px #fff,inset 0 -2px 3px rgba(0,0,0,.15),0 3px 6px -2px var(--accent);animation:bead .5s var(--spring) both}
@keyframes bead{from{scale:0}}
.tray-sum{color:var(--ink);font-size:15px;font-weight:600;white-space:nowrap}
.tray-sum:empty{display:none}
.tray .btn{white-space:nowrap}
.tray .btn[hidden]{display:none}
.tray #t-go{margin-left:auto;min-width:176px}
.tray-on{margin-left:-5px}
.tray-say{color:var(--ink);font-size:13.5px;line-height:1.25;max-width:22ch}
.tray-say:empty{display:none}
.tray-clear{all:unset;cursor:pointer;color:var(--soft);font-size:14px;text-decoration:underline;text-underline-offset:3px;white-space:nowrap;min-height:44px;display:inline-flex;align-items:center}
.tray-clear[hidden]{display:none}
.tray-clear:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px}
.bf-q{display:none}

/* ---- as step four of the build flow, the page takes the flow's own shape: the question at the left with the teams under it, Back and Next
   at the foot of that column where they always are, and the chosen team's bots at the right, in view without a scroll */
.in-flow .b-hero,.in-flow .foot{display:none}
.in-flow .bf-q{display:block}
.in-flow .bf-q h2{font-size:clamp(2.2rem,3.8vw,3.8rem);font-weight:600;line-height:.98;letter-spacing:-.042em}
.in-flow .bf-q h2:focus{outline:none}
.in-flow .bf-q p{max-width:40ch;margin-top:12px;color:var(--soft);font-size:17px;line-height:1.36}
.in-flow .tray-in{border:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;padding:0;border-radius:0;gap:12px}
.in-flow .tray .btn{height:54px;min-width:112px}
.in-flow .tray-beads{display:none}
.in-flow .tray-n{font-size:15px}
.in-flow .tray-n b{font-size:24px}
@media (min-width:900px) and (min-height:640px){
  html:has(.in-flow),.in-flow{height:100%;overflow:hidden}
  .in-flow{padding-bottom:0}
  .in-flow .top{position:absolute;inset:0 0 auto;width:auto;margin:0;border:0;border-radius:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
  .in-flow .nav{width:min(100% - 64px,1400px);padding:0}
  .in-flow .b-shop{display:grid;grid-template-columns:minmax(0,39fr) minmax(0,61fr);grid-template-rows:auto auto minmax(0,1fr);grid-template-areas:"q stage" "rail bar" "rail grid";column-gap:clamp(20px,3.4vw,64px);row-gap:0;
    height:100svh;min-height:0;padding:calc(var(--top) + 20px) 28px 0 max(32px,calc((100vw - 1400px) / 2));background:linear-gradient(180deg,#fff 0,#fff 56%,#eceef2 100%);overflow:hidden}
  .in-flow .bf-q{grid-area:q;align-self:start}
  .in-flow .k-rail{grid-area:rail;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;align-content:start;width:auto;max-width:540px;margin:20px 0 0;padding:4px;overflow:visible}
  .in-flow .k-tile{flex:none;height:70px;padding:9px 12px;border-radius:16px;animation:none}
  .in-flow .k-tile img{right:-4%;top:-6%;width:44%;height:112%}
  .in-flow .k-tile b{font-size:14px;max-width:none}
  .in-flow .k-tile[aria-pressed="true"]{flex-grow:0}
  .in-flow .k-tile[aria-pressed="true"] b{font-size:14px}
  .in-flow .k-tile[aria-pressed="true"] img{scale:1.08;translate:0 0}
  .in-flow .k-stage{grid-area:stage;display:flex;align-items:center;gap:6px 18px;width:auto;margin:0;min-height:120px}
  .in-flow .k-art{flex:none;width:170px;height:120px;margin:0}
  .in-flow .k-info{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 20px;flex:1;min-width:0}
  .in-flow .k-over,.in-flow .k-acts .arrow{display:none}
  .in-flow .k-info h2{margin:0;font-size:clamp(1.6rem,2.4vw,2.4rem)}
  .in-flow .k-say{grid-column:1;margin-top:4px;font-size:15px;max-width:44ch}
  .in-flow .k-acts{grid-column:2;grid-row:1 / span 2;margin:0}
  .in-flow .b-team-price{grid-column:1 / -1;margin-top:6px}
  .in-flow .b-bar{grid-area:bar;width:auto;margin:10px 0 0}
  .in-flow .b-grid{grid-area:grid;width:auto;margin:10px -14px 0;padding:6px 14px 40px;overflow-y:auto;overscroll-behavior:contain;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:max-content;align-content:start}
  .in-flow .tray{inset:auto auto 26px max(32px,calc((100vw - 1400px) / 2));width:min(540px,calc(39vw - 56px));padding:0;justify-content:flex-start}
  .in-flow .tray-in{width:100%;max-width:none}
  .in-flow .tray #t-go{min-width:140px}
  .in-flow .tray-on{display:none}
  .in-flow .tray-in{gap:10px}
}

@media (max-width:899px){
  .bots-page{padding-bottom:92px}
  .bots-page .nav .solid{display:none}   /* the tray is the one button at the foot of this page */
  .b-hero{min-height:0}
  .b-shop .k-art{height:38svh}
  .b-bar,.b-grid{width:calc(100% - 24px)}
  .b-grid{grid-template-columns:minmax(0,1fr)}
  /* one slim row: the count and the way on */
  .tray{inset:auto 0 10px}
  .tray-in,.in-flow .tray-in{width:100%;gap:10px;padding:7px 7px 7px 16px;border-radius:99px;border:3px solid transparent;background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.86)) padding-box,var(--steel) border-box;box-shadow:0 0 0 1px rgba(14,18,28,.12),0 20px 30px -18px rgba(22,30,48,.6)}
  .tray-beads,.tray-on,.tray-clear{display:none}
  .tray-sum{font-size:13px;line-height:1.15;white-space:normal;max-width:9ch}
  .tray-n{font-size:13px;gap:5px}
  .tray .btn,.in-flow .tray .btn{height:48px;min-width:0}
  .tray #t-go{flex:1;min-width:0;margin:0}
  .tray-n b{font-size:24px}
  .in-flow .bf-q{padding:calc(var(--top) + 6px) 16px 0}
  .in-flow .bf-q h2{font-size:clamp(2rem,9.4vw,2.8rem)}
  .in-flow .b-shop{padding-top:0}
  .in-flow .b-shop .k-stage{display:none}
  .prog li{width:18px}.prog li[data-now]{width:30px}
  .prog-n{display:none}
}
@media (prefers-reduced-motion:reduce){.bot,.tray-n b.bump,.tray-beads i{animation:none}}
.links[hidden]{display:none}

.b-hz{margin-top:16px;animation:rise-in 1s var(--ease) .3s both}