/* How it works (James, 11 Nov 2026, of attio.com: "this is the level of depth our site needs to have"). Attio shows every claim working.
   So the five steps are not described here: each is done, on one CRM of glass that stays beside them while they scroll. The camera
   stands where the step in view acts, as it does in the real flow (lux.css): on the bar for the name, on the foot for the bots, square
   on for the open. Then the ways to keep shaping it share the try-out (ask.css). Loaded after ask.css, on this page only. */
.how-page .tp-hero h1{max-width:12ch}

/* ---- the five steps at one side, the CRM they act on at the other */
.hw-flow{position:relative;padding:clamp(24px,4vw,64px) 0 0;background:linear-gradient(180deg,#fff 0,#fff 80%,#eef0f4 100%)}
.hw-deck{display:grid;grid-template-columns:minmax(0,500px) minmax(0,1fr);gap:clamp(24px,4vw,76px);width:min(100% - 64px,1400px);margin-inline:auto}
.hw-step{display:grid;align-content:center;justify-items:start;min-height:max(84svh,620px);padding:36px 0}
.hw-step > *{max-width:100%}
.hw-step h2{margin-top:12px;font-size:clamp(2rem,3vw,3rem);font-weight:600;line-height:1;letter-spacing:-.042em;text-wrap:balance}
.hw-p{max-width:40ch;margin-top:16px;color:var(--soft);font-size:clamp(1.05rem,1.4vw,1.25rem);line-height:1.38;text-wrap:pretty}
.hw-say{min-height:1.4em;margin-top:14px;color:var(--ink-2);font-size:15px;line-height:1.4}
.hw-say:empty{min-height:0;margin:0}
.hw-more{margin-top:18px}
.hw-more .arrow{font-size:17px}

/* the CRM stays in view while its steps go by */
.hw-world{position:sticky;top:calc(var(--top) + 76px);align-self:start;margin-right:clamp(-90px,-4vw,0px);overflow:hidden;overflow:clip;
  -webkit-mask-image:linear-gradient(90deg,#000 90%,transparent),linear-gradient(#000 86%,transparent);mask-image:linear-gradient(90deg,#000 90%,transparent),linear-gradient(#000 86%,transparent);-webkit-mask-composite:source-in;mask-composite:intersect}
.hw-world .g-cam{left:0;transform:scale(var(--fit,1));transform-origin:0 0}
.hw-world .g-tilt{transform-origin:0 0}
.hw-deck[data-step="name"] .g-tilt{transform:perspective(2600px) rotateX(0deg) rotateY(0deg) scale(1.62)}
.hw-deck[data-step="look"] .g-tilt{transform:perspective(2600px) rotateX(1deg) rotateY(-4deg)}
.hw-deck[data-step="bots"] .g-tilt{transform:perspective(2600px) rotateX(0deg) rotateY(0deg) translateY(-38%) scale(1.5)}
.hw-deck[data-step="go"] .g-tilt{transform:perspective(2600px) rotateX(0deg) rotateY(0deg)}
/* with the camera close on the foot, the words that say no bot runs yet stand beside the count, where they stay in view */
.hw-world .bot-dock em{order:1}
.hw-world .bot-dock .bd-row{order:2}

/* step one: the kinds of business as small tiles, then the trades of the chosen kind */
.hw-kinds{display:flex;flex-wrap:wrap;gap:7px;margin-top:22px}
.hw-kind{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:6px;height:42px;padding:0 14px 0 5px;border-radius:99px;background:#fff;box-shadow:var(--edge),0 12px 20px -16px rgba(22,30,48,.5);font-size:14px;letter-spacing:-.014em;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:translate .3s var(--ease),box-shadow .3s}
.hw-kind img{width:34px;height:30px;object-fit:contain;mix-blend-mode:multiply}
.hw-kind b{font-weight:500}
@media (hover:hover){.hw-kind:hover{translate:0 -2px}}
.hw-kind:active{scale:.97}
.hw-kind:focus-visible,.hw-bot:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.hw-kind[aria-pressed="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)}
.hw-kind[aria-pressed="true"] b{font-weight:600}
.hw-step .k-trades{gap:6px;margin-top:14px;max-width:none}
.hw-step .k-trades button{height:38px;padding:0 14px;font-size:14.5px;line-height:36px}

/* step two: the name box is the ask box's own pill, with nothing to press */
.hw-step .a-form{width:100%;margin-top:24px;padding-right:24px}

/* step three: the whole looks, in the studio's own pane */
.hw-step .studio{width:100%;margin-top:24px}

/* step four: each of the trade's own bots is a switch, with what it does and what it costs */
.hw-bots{display:grid;gap:7px;width:100%;margin-top:20px}
.hw-bot{all:unset;box-sizing:border-box;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:2px 14px;padding:10px 16px 11px 14px;border-radius:18px;background:rgba(255,255,255,.8);box-shadow:var(--edge),0 14px 22px -18px rgba(22,30,48,.5);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:translate .3s var(--ease),box-shadow .3s,background-color .3s}
/* the switch: a silver track and a knob that slides and lights */
.hw-bot i{grid-row:span 2;position:relative;width:46px;height:28px;border-radius:99px;background:linear-gradient(180deg,#d9dce2,#eceef1);box-shadow:inset 0 1px 3px rgba(0,0,0,.22),0 0 0 1px rgba(14,18,28,.08);transition:background-color .3s,box-shadow .3s}
.hw-bot i::after{content:"";position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 32% 26%,#fff,#e9ebee 70%);box-shadow:0 1px 3px rgba(0,0,0,.3),0 0 0 .5px rgba(0,0,0,.1);transition:translate .4s var(--spring)}
.hw-bot b{font-size:17px;font-weight:600;letter-spacing:-.02em}
.hw-bot em{color:var(--ink-2);font-size:15px;font-style:normal;font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}
.hw-bot span{grid-column:2 / -1;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;color:var(--soft);font-size:14px;line-height:1.36}
@media (hover:hover){.hw-bot:hover{translate:3px 0}}
.hw-bot[aria-checked="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)}
.hw-bot[aria-checked="true"] i{background:linear-gradient(135deg,rgba(255,255,255,.5),transparent 46%),var(--accent);box-shadow:inset 0 1px 2px rgba(0,0,0,.14),0 0 0 1px rgba(63,107,0,.45),0 0 14px -2px var(--accent)}
.hw-bot[aria-checked="true"] i::after{translate:18px 0}
.hw-bot[aria-checked="true"] em{color:var(--ink)}

/* step five: the design so far, a line for each choice made above */
.hw-design{display:grid;width:100%;margin:24px 0 0;border-radius:20px;background:rgba(255,255,255,.8);box-shadow:var(--edge),0 16px 26px -20px rgba(22,30,48,.5);overflow:hidden}
.hw-design div{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:13px 18px}
.hw-design div + div{box-shadow:inset 0 1px 0 rgba(14,18,28,.07)}
.hw-design dt{color:var(--soft);font-size:15px}
.hw-design dd{margin:0;font-size:16px;font-weight:600;letter-spacing:-.016em;text-align:right}
.hw-acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:22px}

/* ---- after it opens: three ways to change the try-out, one shown at a time */
.how-page .a-top{align-items:start}
.how-page .a-ask{padding-top:6px}
.hw-ways{max-width:100%;margin-bottom:14px;overflow-x:auto;scrollbar-width:none}
.hw-ways::-webkit-scrollbar{display:none}
.hw-ways button{flex:none;height:40px;font-size:15px;white-space:nowrap}
.hw-way[hidden]{display:none}
.hw-way{min-height:168px}
.hw-stages{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.hw-stages .a-chip{min-height:36px;padding:5px 14px;font-size:14px;animation:none}
.hw-stages .a-chip[aria-pressed="true"]{box-shadow:0 0 0 2.5px var(--accent),0 0 0 3.5px rgba(63,107,0,.34);font-weight:600}
.hw-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px}
.hw-row[hidden]{display:none}
.hw-row input,#hw-paste{box-sizing:border-box;border:1px solid var(--line-2);border-radius:14px;background:#fff;font:400 16px/1.3 var(--text);letter-spacing:-.016em;outline:0;transition:border-color .2s,box-shadow .2s}
.hw-row input{flex:1 1 180px;min-width:0;height:44px;padding:0 14px}
#hw-paste{display:block;width:100%;min-height:104px;padding:12px 14px;font:500 13px/1.5 var(--mono);letter-spacing:0;white-space:pre;overflow:auto;resize:vertical;tab-size:18}
.hw-row input:focus-visible,#hw-paste:focus-visible{border-color:var(--accent-ink);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 30%,transparent)}
.hw-row .btn{height:44px}
.hw-row .btn:disabled{opacity:.45;cursor:default}
.hw-way .a-fine{margin-top:8px}
.hw-cols{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.hw-col{display:inline-flex;align-items:baseline;gap:8px;min-height:34px;padding:6px 12px;border-radius:10px;background:rgba(255,255,255,.9);box-shadow:var(--edge);font-size:14px}
.hw-col b{font-weight:600}
.hw-col small{color:var(--soft);font-size:12.5px}

.how-page .l-copy h2{max-width:18ch}

@media (max-width:899px){
  .hw-flow{padding-top:0}
  .hw-deck{display:flex;flex-direction:column;gap:0;width:100%}
  /* the CRM is pinned under the bar and the steps scroll beneath it, as the landing page pins its own */
  .hw-world{order:-1;top:calc(var(--top) - 8px);z-index:3;width:100%;max-height:42svh;margin:0;background:linear-gradient(#fff 90%,rgba(255,255,255,0));-webkit-mask-image:none;mask-image:none}
  .hw-world .g-cam{left:10px}
  .hw-deck[data-step] .g-tilt{transform:none}
  .hw-deck[data-step="name"] .g-tilt{transform:scale(1.5)}
  .hw-deck[data-step="bots"] .g-tilt{transform:translateY(-30%) scale(1.4)}
  .hw-steps{width:calc(100% - 32px);margin-inline:auto}
  .hw-step{min-height:0;padding:34px 0 30px;scroll-margin-top:42svh}   /* a step that is jumped to lands under the pinned CRM, not behind it */
  .hw-way{min-height:0}
}
@media (prefers-reduced-motion:reduce){.hw-world .g-tilt{transition:none}}