/* The build flow (James, 11 Nov 2026: "the flow of a ps5 menu, glassy and premium feel, white, silver, glass and lime green"; then of the
   first try: "a background CRM with a menu over it ... it's just shite"). So nothing sits over the CRM. The question is written on the
   page at the left, as on the landing page; the CRM stands at the right as a slab of glass on steel (glass.css) and is built as the
   answers come: the trade puts its stages and words on it, the name is written on it, the look floods it. One question at a time,
   Back and Next always in the same place. Loaded after site.css and glass.css, on this page only. Lime is a light and a fill, never writing. */
:root{--top:64px}
html,body{background:#fff}
body{overflow-x:hidden;overflow-x:clip}
::selection{background:var(--accent);color:var(--on-accent)}

/* the bar: the name, and how far along you are. Nothing else. */
.top{position:absolute;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;border:0}
.nav{width:min(100% - 64px,1400px)}
.mark svg{color:var(--ink)}
.mark svg rect:nth-child(3){fill:var(--accent);stroke:rgba(63,107,0,.5);stroke-width:.6}
.prog{display:flex;gap:6px}
.prog li{width:34px;height:5px;border-radius:5px;background:rgba(14,18,28,.14);transition:background-color .5s,width .6s var(--spring)}
.prog li[data-done]{background:var(--ink)}
.prog li[data-now]{width:56px;background:var(--accent);box-shadow:0 0 0 1px rgba(63,107,0,.45)}
.prog-n{min-width:5.6em;color:var(--soft);font-size:13px;text-align:right;font-variant-numeric:tabular-nums}

/* buttons: the solid one is lime with a lit top edge; a band of light crosses it under the pointer */
.btn{background:#f1f2f5;box-shadow:var(--edge)}
.btn.solid{overflow:hidden;font-weight:500;box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 0 0 1px rgba(63,107,0,.34),0 16px 30px -14px color-mix(in srgb,var(--accent) 85%,transparent)}
.btn.solid::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 32%,rgba(255,255,255,.75) 50%,transparent 68%);translate:-120% 0;transition:translate .9s var(--ease);pointer-events:none}
@media (hover:hover){.btn.solid:hover::after{translate:120% 0}}
.btn[hidden]{display:none}

/* the screen: the question at the left, the CRM standing at the right. It bleeds off the right edge when the camera leans in. */
.flow{position:relative;display:grid;grid-template-columns:minmax(0,39fr) minmax(0,61fr);gap:clamp(20px,3.4vw,64px);min-height:100svh;padding:calc(var(--top) + 8px) 0 26px max(32px,calc((100vw - 1400px) / 2));
  background:radial-gradient(60% 50% at 76% 46%,#fff,rgba(255,255,255,0) 70%),linear-gradient(180deg,#fff 0,#fff 56%,#eceef2 100%);transition:grid-template-columns .9s var(--ease)}
.f-side{display:flex;flex-direction:column;min-width:0;padding:10px 0 0}
.step{margin-block:auto;animation:step-in .6s var(--ease) both}
.step[hidden]{display:none}
@keyframes step-in{from{opacity:0;translate:calc(var(--dir,1) * 40px) 0}}
.q h2{font-size:clamp(2.5rem,4.3vw,4.4rem);font-weight:600;line-height:.98;letter-spacing:-.042em;text-wrap:balance}
.q h2:focus{outline:none}
.q p{max-width:40ch;margin-top:14px;color:var(--soft);font-size:clamp(1.05rem,1.35vw,1.25rem);line-height:1.36;text-wrap:pretty}

/* the stage */
.f-stage{min-height:0;margin:0}
.f-stage .g-cam{left:0;transform:scale(var(--fit,1));transform-origin:0 0}
.f-stage .g-tilt{transform-origin:0 0}
/* where the camera stands for each question: back for the trade, close on the name, level and nearer for the end */
.flow[data-step="name"] .g-tilt{transform:perspective(2600px) rotateX(0deg) rotateY(0deg) scale(1.62)}
.flow[data-step="look"] .g-tilt{transform:perspective(2600px) rotateX(1deg) rotateY(-4deg)}
.flow[data-step="go"] .g-tilt{transform:perspective(2600px) rotateX(0deg) rotateY(0deg)}
.flow[data-step="go"]{grid-template-columns:minmax(0,32fr) minmax(0,68fr)}

/* step one: every kind of business as a labelled tile with its own object, all in view; the chosen kind's trades under it */
.kinds{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:24px}
.kind{all:unset;box-sizing:border-box;position:relative;display:flex;flex-direction:column;justify-content:flex-end;height:84px;padding:8px 10px;border-radius:16px;border:1px solid rgba(14,18,28,.08);background:#fff;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent;
  box-shadow:0 1px 2px rgba(22,30,48,.05),0 18px 30px -24px rgba(22,30,48,.4);animation:tile-in .7s var(--ease) both;animation-delay:calc(var(--i) * 50ms);transition:translate .35s var(--ease),box-shadow .35s,border-color .35s}
@keyframes tile-in{from{opacity:0;translate:0 20px}}
.kind img{position:absolute;right:-6%;top:-14%;width:62%;height:78%;object-fit:contain;mix-blend-mode:multiply;pointer-events:none;transition:scale .7s var(--ease)}
.kind b{position:relative;max-width:11ch;font-size:12.5px;font-weight:600;line-height:1.12;letter-spacing:-.014em}
.kind small{display:none}
@media (hover:hover) and (pointer:fine){.kind:hover{translate:0 -4px;border-color:rgba(14,18,28,.16)}.kind:hover img{scale:1.07}}
.kind:active{scale:.98}
.kind:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.kind[aria-pressed="true"]{border-color:transparent;box-shadow:0 0 0 2.5px var(--accent),0 0 0 3.5px rgba(63,107,0,.32),0 0 36px -6px color-mix(in srgb,var(--accent) 80%,transparent),0 22px 34px -26px rgba(22,30,48,.5)}
.kind[aria-pressed="true"] img{scale:1.12}
.trades{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;min-height:92px;align-content:flex-start}
.mcard{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:10px;height:42px;padding:0 16px;border-radius:99px;border:1px solid var(--line-2);background:#fff;font-size:15px;letter-spacing:-.014em;cursor:pointer;-webkit-tap-highlight-color:transparent;
  animation:tile-in .5s var(--ease) both;animation-delay:calc(var(--i) * 30ms);transition:translate .3s var(--ease),border-color .3s,box-shadow .3s,background-color .3s}
@media (hover:hover){.mcard:hover{translate:0 -2px;border-color:rgba(14,18,28,.3)}}
.mcard:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.mname{font-weight:500}
.mtags{display:none;gap:6px;color:rgba(11,12,14,.62);font-size:12.5px}
.mtags span + span::before{content:"\00b7";margin-right:6px}
.mcard[aria-pressed="true"]{border-color:transparent;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 10px 20px -10px color-mix(in srgb,var(--accent) 80%,transparent)}
.mcard[aria-pressed="true"] .mname{font-weight:600}
.mcard[aria-pressed="true"] .mtags{display:inline-flex}
.find{margin-top:14px;max-width:340px}
.find input{width:100%;height:46px;padding:0 18px;border-radius:99px;border:1px solid var(--line-2);background:#fff;font-size:16px}
.find p{margin-top:6px;color:var(--soft);font-size:14px}
.find p:empty{display:none}

/* step two: one line to write on */
.big-in{display:block;width:100%;height:92px;margin-top:22px;padding:0;border:0;border-bottom:2px solid var(--line-2);border-radius:0;background:none;color:var(--ink);font:600 clamp(2rem,3.4vw,3.4rem)/1 var(--text);letter-spacing:-.035em;outline:0;caret-color:var(--accent-ink);transition:border-color .3s}
.big-in::placeholder{color:rgba(14,18,28,.22);opacity:1}
.big-in:focus-visible{border-bottom-color:var(--accent-ink);box-shadow:0 12px 20px -18px var(--accent)}

/* step three: the studio (glass.css), under a shorter heading so it all fits */
.step[data-pane="look"] .q h2{font-size:clamp(2rem,3vw,3rem)}
.step[data-pane="look"] .q p{display:none}
.step[data-pane="look"] .studio{margin-top:14px;max-width:540px}

/* Back and Next: always in the same place */
.console-nav{display:flex;align-items:center;gap:12px;margin-top:16px;max-width:540px}
.console-nav .btn{height:54px;min-width:112px}
.p-say{flex:1;min-height:1.3em;color:var(--soft);font-size:14.5px;line-height:1.3}
.console-nav #p-next,.console-nav #p-open{min-width:190px}
.flow[data-step="go"] .console-nav #p-open{box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 0 0 1px rgba(63,107,0,.34),0 0 0 8px color-mix(in srgb,var(--accent) 22%,transparent),0 20px 34px -14px var(--accent)}

.foot{background:#eceef2;border:0}
.foot .wrap{justify-content:center}
.foot .mark{display:none}
.foot p{color:var(--faint);font-size:12px}
/* on a desk the whole thing is one screen */
@media (min-width:900px) and (min-height:640px){
  html,body{height:100%;overflow:hidden}
  .flow{height:100svh;min-height:0}
  .foot{position:fixed;inset:auto 28px 6px auto;z-index:2;padding:0;background:none;pointer-events:none}
  .foot .wrap{width:auto;flex-wrap:nowrap}
  .foot .hz{pointer-events:auto}
  /* step three is the tallest: its studio scrolls inside its own pane, so Back and Next never leave the window */
  .f-side{min-height:0}
  .step[data-pane="look"]:not([hidden]){display:flex;flex-direction:column;min-height:0}
  .step[data-pane="look"] .studio{min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
  /* close on the name the camera fills the corner, so the foot's line steps aside for the picture */
  body:has(.flow[data-step="name"]) .foot p{visibility:hidden}
}
@media (min-width:900px) and (max-height:760px){
  .kind{height:72px}
  .q h2{font-size:clamp(2.2rem,3.6vw,3.4rem)}
}

@media (max-width:899px){
  body{padding-bottom:0}
  .nav{width:calc(100% - 32px)}
  .prog li{width:22px}
  .prog li[data-now]{width:36px}
  .flow,.flow[data-step="go"]{display:flex;flex-direction:column;min-height:100svh;padding:calc(var(--top) + 4px) 0 18px;gap:14px}
  /* the picture stays in view while the choices scroll under it */
  .f-stage{order:-1;position:sticky;top:0;z-index:3;overflow:hidden;overflow:clip;padding-top:calc(var(--top) - 6px);margin-top:calc(var(--top) * -1 + 2px);background:linear-gradient(#fff 88%,rgba(255,255,255,0))}
  .f-stage .g-cam{left:10px}
  .flow[data-step="name"] .g-tilt{transform:scale(1.5)}
  .flow[data-step="look"] .g-tilt,.flow[data-step="go"] .g-tilt{transform:none}
  .f-side{padding:0 16px;flex:1}
  .step{margin-block:0 auto}
  .q h2,.step[data-pane="look"] .q h2{font-size:clamp(2rem,9.4vw,2.8rem)}
  .kinds{gap:6px;margin-top:16px}
  .kind{height:78px;padding:7px 8px}
  .kind b{font-size:11.5px}
  .big-in{height:68px;margin-top:14px}
  .step[data-pane="look"] .studio,.console-nav{max-width:none}
  .console-nav{position:sticky;bottom:10px;z-index:4;padding:8px;margin-inline:-6px;border-radius:99px;background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:var(--edge),0 16px 30px -18px rgba(22,30,48,.5)}
  .console-nav .btn{min-width:0;height:50px}
  .console-nav #p-next,.console-nav #p-open{flex:1;min-width:0}
  .p-say:empty{display:none}
}

/* the end: how many bots come with it, and the way back to change them */
.go-bots{margin-top:16px;font-size:16px;color:var(--ink)}
.go-bots a{color:var(--ink);text-decoration:none;padding-bottom:2px;background:linear-gradient(var(--accent),var(--accent)) 0 100% / 100% 3px no-repeat;white-space:nowrap}