/* The tour (James, 11 Nov 2026, of attio.com: "this is the level of depth our site needs to have"). Attio shows every claim working, as a
   small copy of the product. So a bot is not described here: it is played. A team is picked along the top, a bot at the left, and at the
   right its start, the bot, an example of what it hands over and the person's yes arrive in order, joined by a line of light.
   Loaded after home.css, on the landing page only. */
.h-tour{padding:clamp(48px,6vw,96px) 0 clamp(56px,7vw,104px);background:linear-gradient(180deg,#fff 0,#f1f2f5 100%)}
.t-head,.t-tabs,.t-deck{width:min(100% - 64px,1400px);margin-inline:auto}
.t-head h2{margin-top:12px;font-size:clamp(2.4rem,4.6vw,4.6rem);font-weight:600;line-height:.98;letter-spacing:-.04em}
.t-head > p:last-child{max-width:52ch;margin-top:14px;color:var(--soft);font-size:clamp(1.1rem,1.5vw,1.3rem);line-height:1.36}
.t-tabs{display:flex;flex-wrap:wrap;gap:8px;min-height:64px;margin-top:clamp(20px,3vw,36px);padding:4px}   /* its room is kept while the bots load, so the page below does not jump */
.t-tabs::-webkit-scrollbar{display:none}
.t-tab{all:unset;box-sizing:border-box;flex:none;display:inline-flex;align-items:center;gap:8px;height:52px;padding:0 18px 0 6px;border-radius:99px;background:#fff;box-shadow:var(--edge),0 12px 20px -16px rgba(22,30,48,.5);font-size:15px;font-weight:500;letter-spacing:-.014em;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:translate .3s var(--ease),box-shadow .3s}
.t-tab img{width:44px;height:40px;object-fit:contain;mix-blend-mode:multiply}
@media (hover:hover){.t-tab:hover{translate:0 -2px}}
.t-tab:focus-visible,.t-bot:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.t-tab[aria-selected="true"]{box-shadow:0 0 0 2.5px var(--accent),0 0 0 3.5px rgba(63,107,0,.34),0 0 30px -6px color-mix(in srgb,var(--accent) 80%,transparent)}
.t-deck{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:clamp(16px,3vw,48px);align-items:start;margin-top:clamp(16px,2.4vw,28px)}
.t-list{display:grid;gap:6px}
.t-bot{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:12px;min-height:52px;padding:0 16px;border-radius:16px;background:rgba(255,255,255,.7);box-shadow:var(--edge);font-size:16px;letter-spacing:-.016em;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:translate .3s var(--ease),background-color .3s,box-shadow .3s}
.t-bot i{flex:none;width:14px;height:14px;border-radius:50%;background:var(--silver,#c9ccd2);box-shadow:inset 0 -2px 3px rgba(0,0,0,.15);transition:background-color .3s,box-shadow .3s}
.t-bot b{font-weight:500}
@media (hover:hover){.t-bot:hover{translate:4px 0}}
.t-bot[aria-pressed="true"]{background:#fff;box-shadow:0 0 0 2.5px var(--accent),0 0 0 3.5px rgba(63,107,0,.34),0 18px 28px -20px rgba(22,30,48,.5)}
.t-bot[aria-pressed="true"] i{background:radial-gradient(circle at 32% 26%,#fff,transparent 46%),var(--accent);box-shadow:inset 0 -2px 3px rgba(0,0,0,.15),0 0 0 1px rgba(63,107,0,.45),0 0 12px var(--accent)}
.t-bot[aria-pressed="true"] b{font-weight:600}

/* the bot at work: a pane of glass in a steel frame, with its four moments down it */
.t-flow{display:grid;justify-items:start;align-content:start;gap:0;min-height:540px;margin:0;padding:clamp(18px,2.4vw,30px);border-radius:28px;border:5px solid transparent;
  background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(255,255,255,.84)) padding-box,var(--steel) border-box;box-shadow:0 0 0 1px rgba(14,18,28,.1),inset 0 1px 0 #fff,0 40px 60px -40px rgba(22,30,48,.5)}
.t-step{opacity:0;translate:0 10px;transition:opacity .5s var(--ease),translate .5s var(--ease)}
.t-step[data-in],.t-out p[data-in]{opacity:1;translate:0 0}
.t-flow small{display:block;color:var(--soft);font:600 11px/1 var(--text);letter-spacing:.09em;text-transform:uppercase}
.t-when{padding:10px 16px 12px;border-radius:14px;background:rgba(14,18,28,.05)}
.t-when b{display:block;margin-top:6px;font-size:17px;font-weight:600;letter-spacing:-.018em}
.t-wire{display:block;width:3px;height:22px;margin-left:26px;border-radius:3px;background:linear-gradient(var(--accent),color-mix(in srgb,var(--accent) 30%,transparent))}
.t-who{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 12px;align-items:center;max-width:62ch;padding:12px 18px;border-radius:18px;background:#fff;box-shadow:0 0 0 2px var(--accent),0 0 0 3px rgba(63,107,0,.3),0 0 34px -8px var(--accent)}
.t-who i{grid-row:span 2;width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 32% 26%,#fff,transparent 46%),var(--accent);box-shadow:inset 0 -3px 5px rgba(0,0,0,.16),0 0 0 1px rgba(63,107,0,.45),0 0 16px var(--accent);animation:t-pulse 2.4s ease-in-out infinite}
@keyframes t-pulse{50%{box-shadow:inset 0 -3px 5px rgba(0,0,0,.16),0 0 0 1px rgba(63,107,0,.45),0 0 30px 4px var(--accent)}}
.t-who b{font-size:19px;font-weight:600;letter-spacing:-.022em}
.t-who span{color:var(--ink-2);font-size:14.5px;line-height:1.36}
.t-out{display:grid;gap:6px;width:100%;max-width:66ch;padding:14px 18px 16px 20px;border-radius:18px;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 16px 24px -20px rgba(22,30,48,.5)}
.t-out p{font-size:clamp(1rem,1.25vw,1.15rem);line-height:1.42;letter-spacing:-.012em;opacity:0;translate:0 8px;transition:opacity .5s var(--ease),translate .5s var(--ease)}
.t-yes{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.t-yes small{flex:1 1 100%;margin-bottom:2px}
.t-btn{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;height:44px;padding:0 18px;border-radius:99px;background:#fff;box-shadow:var(--edge);font-size:15px;font-weight:500;cursor:pointer;transition:translate .25s var(--ease),box-shadow .25s}
.t-btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.t-btn:active{translate:0 1px}
.t-btn[aria-pressed="true"]:not(.on){box-shadow:var(--edge),inset 0 0 0 2px var(--ink)}
.t-said{flex:1 1 100%;min-height:1.4em;margin-top:4px;color:var(--ink-2);font-size:14.5px}
.t-btn.on{color:var(--on-accent);background:linear-gradient(135deg,rgba(255,255,255,.5),transparent 46%),var(--accent);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 0 0 1px rgba(63,107,0,.4),0 12px 22px -10px var(--accent)}
.t-foot{margin-top:16px;color:var(--soft);font-size:14px}
@media (max-width:899px){
  .t-head,.t-tabs,.t-deck{width:calc(100% - 24px)}
  .t-deck{grid-template-columns:minmax(0,1fr)}
  .t-list{grid-auto-flow:column;grid-auto-columns:max-content;overflow-x:auto;padding:4px;scrollbar-width:none}
  .t-flow{min-height:0}
}
@media (prefers-reduced-motion:reduce){.t-step,.t-out p{transition:none}.t-who i{animation:none}}