/* Trade pages (/websites-for/*): shared trade layout + one signature moment per page. */

/* hero: text left, the page's signature piece right */
.tr .phero .acts .btn-ghost{background:rgba(255,255,255,.04)}
.tr-hero{grid-template-columns:1.05fr .95fr}
.tr .phero h1{max-width:15ch;font-size:clamp(42px,6.2vw,84px)}
.tr .phero .crumbs{margin-bottom:20px}
.tr .phero .eyebrow{line-height:1.4}
.tr p,.tr li span{text-wrap:pretty}
.tr-leak li b{text-wrap:balance}

/* where the bookings leak */
.tr-leak{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
.tr-leak ol{list-style:none;padding:0;display:grid;gap:0;counter-reset:l}
.tr-leak li{counter-increment:l;display:grid;grid-template-columns:52px 1fr;gap:4px 12px;padding:24px 0;border-bottom:1px solid var(--line)}
.tr-leak li:first-child{border-top:1px solid var(--line)}
.tr-leak li::before{content:"0" counter(l);grid-row:span 2;font:700 12px/2 Inter;letter-spacing:.15em;color:var(--muted)}
.tr-leak li b{font:800 21px/1.2 "Inter Tight";letter-spacing:-.02em}
.tr-leak li span{color:var(--muted);font-size:16px}
.tr-leak .sub a,.tr-lnk{border-bottom:2px solid var(--spot);font-weight:600;color:var(--text)}

/* live demo */
.tr-demo{display:grid;grid-template-columns:1.45fr 1fr;gap:48px;align-items:center;margin-top:44px}
.tr-demo .device{box-shadow:0 60px 90px -60px rgba(15,16,18,.7)}
.tr-demo h3{font:800 clamp(26px,2.8vw,36px)/1.05 "Inter Tight";letter-spacing:-.03em;margin:14px 0 10px}
.tr-demo p{color:var(--muted)}
.tr-demo .chip{background:#fff}
.tr-demo ul{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:10px;font-size:15.5px}
.tr-demo li{display:flex;gap:10px}.tr-demo li::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--spot);margin-top:9px;box-shadow:0 0 0 3px rgba(var(--spot-rgb),.2)}
.tr-demo .open{margin-top:18px}

/* features */
.tr-feats .pcard{position:relative;overflow:hidden;transition:transform .4s var(--ease),box-shadow .4s}
.tr-feats .pcard:hover{transform:translateY(-4px);box-shadow:0 0 0 1px var(--line),0 30px 50px -35px rgba(15,16,18,.45)}
.tr-feats .pcard::after{content:"";position:absolute;right:-50px;top:-50px;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle,rgba(var(--spot-rgb),.28),transparent 70%);opacity:0;transition:opacity .4s}
.tr-feats .pcard:hover::after{opacity:1}

/* how it works strip sits on .psec.ink, reusing the homepage .steps */
.tr-how .steps{margin-top:40px}
.tr-how .steps p{color:rgba(255,255,255,.66)}

/* related trades */
.tr-sibs{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.tr-sibs a{padding:11px 16px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px var(--line);font:600 14.5px Inter;transition:box-shadow .25s,transform .25s var(--ease)}
.tr-sibs a:hover{box-shadow:0 0 0 1.5px var(--ink);transform:translateY(-2px)}
.tr-end{padding-top:0}
.tr-end .pcta{margin-top:56px}
.tr-end .pcta .btn{position:relative;white-space:nowrap}

/* ============ HUB: a spotlight that roams the trades ============ */
.spx{position:relative;margin-top:56px;border-top:1px solid rgba(255,255,255,.1);isolation:isolate}
.spx-beam{position:absolute;left:0;top:0;width:620px;height:320px;margin:-160px 0 0 -310px;z-index:-1;pointer-events:none;border-radius:50%;
  background:radial-gradient(closest-side,rgba(var(--spot-rgb),.3),rgba(var(--spot-rgb),.08) 55%,transparent);transform:translate(var(--bx,20%),var(--by,40px));transition:transform .8s var(--ease-out)}
.spx-beam::before{content:"";position:absolute;left:50%;bottom:50%;width:180px;height:900px;margin-left:-90px;transform-origin:50% 100%;transform:rotate(var(--br,8deg));
  background:linear-gradient(0deg,rgba(var(--spot-rgb),.12),transparent 80%);clip-path:polygon(38% 0,62% 0,100% 100%,0 100%);transition:transform .8s var(--ease-out)}
.spx-i{display:grid;grid-template-columns:56px minmax(0,1fr) minmax(0,300px);gap:20px;align-items:center;padding:20px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.spx-n{font:700 12px Inter;letter-spacing:.15em;color:rgba(255,255,255,.35);transition:color .4s}
.spx-i b{font:800 clamp(34px,4.4vw,60px)/1.02 "Inter Tight";letter-spacing:-.045em;color:rgba(255,255,255,.22);transition:color .5s,text-shadow .5s}
.spx-i b em{font-size:1.06em;transition:color .5s}
.spx-d{font-size:15.5px;color:rgba(255,255,255,.72);opacity:0;transform:translateX(-10px);transition:opacity .45s,transform .5s var(--ease)}
.spx-d u{display:inline-block;margin-top:8px;text-decoration:none;color:var(--spot);font:700 14px "Inter Tight"}
.spx-i.on b{color:#fff;text-shadow:0 0 50px rgba(var(--spot-rgb),.35)}
.spx-i.on b em{color:var(--spot)}
.spx-i.on .spx-n{color:var(--spot)}
.spx-i.on .spx-d{opacity:1;transform:none}
.spx-more{margin-top:34px;color:rgba(255,255,255,.7);max-width:620px}
.spx-more a{color:var(--spot);border-bottom:1px solid rgba(var(--spot-rgb),.5)}
.hub-groups .pcard a{display:inline-block;margin-top:14px}
.hub-groups .sub{margin-top:40px}

/* ============ CONVEYANCERS: a quote form you can try ============ */
.qf{position:relative;max-width:460px;margin-left:auto;width:100%;padding:28px;border-radius:24px;background:#faf9f5;color:var(--text);box-shadow:0 50px 90px -40px rgba(0,0,0,.8);overflow:hidden}
.qf-hd{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;padding-bottom:16px;border-bottom:1px solid var(--line)}
.qf-hd b{font:800 20px "Inter Tight";letter-spacing:-.02em}.qf-hd span{font-size:13px;color:var(--muted)}
.qf-l{display:block;margin:18px 0 8px;font:700 11.5px Inter;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.qf-g{display:flex;flex-wrap:wrap;gap:8px}
.qf-g button{padding:10px 15px;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--line);font:600 14px Inter;transition:background .2s,color .2s,box-shadow .2s}
.qf-g button[aria-pressed="true"]{background:var(--ink);color:#fff;box-shadow:none}
.qf-go{width:100%;justify-content:center;margin-top:24px}
.qf-done{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:10px;padding:28px;text-align:center;background:#faf9f5;opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
.qf.sent .qf-done{opacity:1;visibility:visible}
.qf-done svg{width:150px;height:150px;transform:rotate(-12deg) scale(1.6);opacity:0}
.qf.sent .qf-done svg{animation:stamp .5s cubic-bezier(.3,1.6,.5,1) .15s forwards}
@keyframes stamp{to{transform:rotate(-12deg) scale(1);opacity:1}}
.qf-done circle,.qf-done text{fill:none;stroke:#b3261e}.qf-done text{fill:#b3261e;stroke:none;font:800 13px Inter;letter-spacing:.18em}
.qf-done h3{font:800 24px "Inter Tight";letter-spacing:-.02em}
.qf-done p{font-size:14.5px;color:var(--muted);max-width:30ch}
.qf-done button{font:700 14px "Inter Tight";border-bottom:2px solid var(--spot);padding:10px 0 2px}

/* ============ CAFES: an order docket that prints ============ */
.dk{max-width:470px;margin-left:auto;width:100%;display:grid;grid-template-columns:1fr 170px;gap:18px;align-items:start}
.dk-menu{list-style:none;padding:8px 18px;border-radius:22px;background:var(--ink-2);border:1px solid rgba(255,255,255,.08)}
.dk-menu li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.07)}
.dk-menu li:last-child{border:0}
.dk-menu b{display:block;font:700 15.5px "Inter Tight";color:#fff}.dk-menu small{font-size:12.5px;color:rgba(255,255,255,.5)}
.dk-menu button{flex:none;width:44px;height:44px;border-radius:50%;background:var(--spot);color:var(--ink);font:800 22px/1 "Inter Tight";transition:transform .2s var(--ease)}
.dk-menu button:active{transform:scale(.9)}
.dk-slot{position:relative;padding-top:14px}
.dk-slot::before{content:"";position:absolute;left:-8px;right:-8px;top:0;height:16px;border-radius:8px;background:#2a2b30;box-shadow:inset 0 -4px 0 #0b0c0f;z-index:2}
.dk-paper{position:relative;margin:0 4px;padding:18px 14px 26px;background:#f7f4ea;color:#1b1b1b;font:500 12.5px/1.45 ui-monospace,Consolas,monospace;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 8px),92% 100%,84% calc(100% - 8px),76% 100%,68% calc(100% - 8px),60% 100%,52% calc(100% - 8px),44% 100%,36% calc(100% - 8px),28% 100%,20% calc(100% - 8px),12% 100%,4% calc(100% - 8px),0 100%);
  transform-origin:top;animation:print .5s var(--ease-out)}
.dk-paper b{display:block;font-weight:800;font-size:13.5px;letter-spacing:.06em}
.dk-paper hr{border:0;border-top:1px dashed rgba(0,0,0,.35);margin:8px 0}
.dk-paper ol{list-style:none;padding:0;min-height:18px}
.dk-paper li{display:flex;justify-content:space-between;gap:8px;animation:line .35s var(--ease-out)}
.dk-paper .dk-empty{color:rgba(0,0,0,.45)}
@keyframes line{from{opacity:0;transform:translateY(-6px)}}
@keyframes print{from{clip-path:inset(0 0 100% 0)}}
.dk-clear{display:block;margin:12px auto 0;font:700 13px "Inter Tight";color:rgba(255,255,255,.65);border-bottom:1px solid rgba(255,255,255,.3);padding:8px 0 2px}

@media (max-width:900px){
  .tr-hero,.tr-leak,.tr-demo{grid-template-columns:1fr;gap:40px}
  .qf,.dk{margin:0 auto}
  .spx-i{grid-template-columns:40px minmax(0,1fr);row-gap:0}
  .spx-d{grid-column:2;max-height:0;overflow:hidden;transition:opacity .45s,transform .5s var(--ease),max-height .5s var(--ease)}
  .spx-i.on .spx-d{max-height:120px;margin-top:10px}
  .spx-beam{width:420px;height:240px;margin:-120px 0 0 -210px}
}
@media (max-width:640px){
  .tr .phero h1{font-size:clamp(38px,11vw,54px)}
  .dk{grid-template-columns:1fr}.dk-slot{max-width:240px;margin:0 auto;width:100%}
  .qf{padding:22px}
}
@media (prefers-reduced-motion:reduce){.spx-beam,.spx-beam::before{transition:none}.dk-paper,.dk-paper li{animation:none}}