/* The CoCentric wheel on the home page - the marketing-site wheel, in the dark of
   this page. Ported from covince-site-v2/goalwheel.css; only the palette and the
   two link rules differ, so the two stay diffable. */
/* The CoCentric wheel — one goal in the middle, six ways the platform carries it.
   It replaces the old orbiting ring: that one showed the seventeen tools floating
   around a goal name, which is a picture of a stack. This one is clickable, and
   clicking a part answers the only question that matters — WHAT of my goal lives
   here, and which tool is that? */

/* Every colour is a token on .ccw. The home page is black with white text, so the
   green of the marketing site becomes white: the lit part is a white band with black
   ink on it, the connections and the runner are white, and nothing states a colour
   further down. Swap these six lines and the whole wheel retints. */
.ccw{
  --text:#f2f2f4;
  --muted:#b8b8be;
  --muted-2:#8c8c94;
  --accent:#ffffff;
  --accent-2:rgba(255,255,255,.70);
  --accent-3:rgba(255,255,255,.95);
  --accent-text:#ffffff;
  --accent-soft:rgba(255,255,255,.10);
  --accent-line:rgba(255,255,255,.26);
  --surface-1:rgba(255,255,255,.035);
  --surface-2:rgba(255,255,255,.05);
  --glass-2:rgba(255,255,255,.07);
  --glass-line-2:rgba(255,255,255,.14);
  --row-hover:rgba(255,255,255,.07);
  --sheen:rgba(255,255,255,.35);
  --shadow:0 40px 80px -50px rgba(0,0,0,.95);
  --shadow-sm:0 12px 28px -20px rgba(0,0,0,.95);
  --blur:blur(10px);
  --radius:20px;
  position:relative;
  display:block;
  text-align:left;
}
.ccw *{box-sizing:border-box}

/* ── the goals ───────────────────────────────────────────────────────────── */
.gw-goals{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:28px 0 0}
.gw-goal{display:inline-flex;align-items:center;gap:9px;height:44px;padding:0 18px;
  border-radius:23px;cursor:pointer;font:inherit;font-size:15px;font-weight:650;
  color:var(--muted);background:var(--surface-1);border:1px solid var(--glass-line-2);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  transition:transform .22s cubic-bezier(.2,.8,.2,1),color .22s,border-color .22s,box-shadow .22s}
.gw-goal svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;opacity:.75}
.gw-goal:hover{color:var(--text);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.gw-goal[aria-pressed="true"]{color:var(--accent-text);border-color:var(--accent-line);
  background:var(--accent-soft);box-shadow:0 0 0 1px var(--accent-line),0 18px 40px -22px var(--accent)}
.gw-goal[aria-pressed="true"] svg{opacity:1}

/* ── the board ───────────────────────────────────────────────────────────── */
.gw-board{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:24px;align-items:start}

.gw-stage{position:relative;border-radius:var(--radius);overflow:hidden;display:flex;align-items:center;
  border:1px solid var(--glass-line-2);background:var(--surface-1);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  box-shadow:var(--shadow);padding:10px}

/* the shine: a slow conic sweep behind the wheel, and a soft bloom under it */
.gw-stage::before{content:"";position:absolute;left:50%;top:50%;width:132%;aspect-ratio:1;
  transform:translate(-50%,-50%);pointer-events:none;opacity:.5;
  background:conic-gradient(from 0deg,transparent 0deg,var(--accent-soft) 40deg,
    transparent 120deg,transparent 240deg,var(--accent-soft) 300deg,transparent 360deg);
  filter:blur(38px);animation:gwSweep 22s linear infinite}
.gw-stage::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(62% 55% at 42% 45%,transparent 40%,rgba(0,0,0,.45) 100%)}
@keyframes gwSweep{to{transform:translate(-50%,-50%) rotate(360deg)}}

/* The wheel sits LEFT inside the stage. The fan of pills leaves its right edge and
   needs the rest of the width to land in - centred, every pill was clipped off. */
/* The wheel is the point of the section, so it gets the room: it sits LEFT and the
   fan of pills leaves its right edge into the rest of the width. */
.gw-wheelbox{position:relative;width:min(640px,58%);aspect-ratio:1;margin:20px 0 20px 4px;z-index:2}
.gw-wheel{position:absolute;inset:0;width:100%;height:100%;overflow:visible}

/* Keyboard users get a ring; a mouse click must not leave a black box behind. */
.gw-seg{cursor:pointer;outline:none}
.gw-seg:focus-visible .gw-seg__band{stroke:var(--accent);stroke-opacity:1;stroke-width:3}
.gw-seg__band{fill:var(--text);fill-opacity:.045;stroke:var(--text);stroke-opacity:.14;
  stroke-width:1.1;transition:fill-opacity .3s ease,stroke-opacity .3s ease}
.gw-seg:hover .gw-seg__band{fill-opacity:.09;stroke-opacity:.3}
.gw-seg--lit .gw-seg__band{fill:url(#gwLit);fill-opacity:1;stroke:var(--accent);
  stroke-opacity:1;stroke-width:2.2;filter:url(#gwGlow)}
.gw-seg__label{fill:var(--muted);font-size:21px;font-weight:650;letter-spacing:.2px;
  pointer-events:none;transition:fill .3s ease}
.gw-seg:hover .gw-seg__label{fill:var(--text)}
.gw-seg--lit .gw-seg__label{fill:#0b0b0c;font-weight:800}

.gw-rotor{transform-origin:310px 310px;transition:transform 1.45s cubic-bezier(.33,.02,.16,1)}

.gw-hub__disc{fill:var(--glass-2);stroke:var(--glass-line-2)}
.gw-hub__ring{fill:none;stroke:var(--accent);stroke-opacity:.6;stroke-width:2;
  stroke-dasharray:3 7;stroke-linecap:round;transform-origin:310px 310px;
  animation:gwSpin 44s linear infinite}
@keyframes gwSpin{to{transform:rotate(360deg)}}
.gw-hub__k{fill:var(--accent-text);font-size:11px;letter-spacing:.2em;font-weight:800;
  text-transform:uppercase}
.gw-hub__t{fill:var(--text);font-size:19px;font-weight:800;letter-spacing:-.4px}
.gw-hub__s{fill:var(--muted-2);font-size:12.5px}

/* the runner: a light travelling round the goal, the way the film does it */
.gw-runner{fill:var(--accent);transform-origin:310px 310px;
  transition:transform 1.45s cubic-bezier(.33,.02,.16,1);filter:url(#gwGlow)}

.gw-link{fill:none;stroke:var(--accent);stroke-opacity:.55;stroke-width:1.5;
  stroke-dasharray:1;stroke-dashoffset:1;animation:gwDraw .6s cubic-bezier(.3,.7,.2,1) forwards}
@keyframes gwDraw{to{stroke-dashoffset:0}}

.gw-nodes{position:absolute;inset:0;z-index:3;pointer-events:none}
/* The pill layer covers the whole box, so without this it eats every click on the
   right-hand half of the wheel - which is exactly the half a visitor aims at. */
.gw-node{pointer-events:auto}
.gw-node{position:absolute;transform:translateY(-50%);display:flex;align-items:center;gap:11px;
  min-height:40px;padding:8px 16px 8px 13px;border-radius:20px;white-space:nowrap;text-decoration:none;
  background:var(--glass-2);border:1px solid var(--accent-line);color:var(--text);
  font-size:14.5px;font-weight:650;box-shadow:var(--shadow-sm);opacity:0;
  animation:gwNodeIn .45s cubic-bezier(.16,1,.3,1) forwards;overflow:hidden}
.gw-node svg{width:17px;height:17px;flex:none;fill:none;stroke:var(--accent-text);
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* the job it does, and under it the tool that does it */
.gw-node__tx{display:flex;flex-direction:column;line-height:1.25}
.gw-node__tx b{font-weight:700}
.gw-node em{font-style:normal;color:var(--accent-text);font-weight:650;font-size:12px;
  letter-spacing:.1px}
.gw-node:hover{border-color:var(--accent);transform:translateY(-50%) translateX(3px)}
/* the sheen: one pass of light across a pill when it is pointed at */
.gw-node::after{content:"";position:absolute;top:0;bottom:0;width:42%;left:-60%;
  background:linear-gradient(100deg,transparent,var(--sheen),transparent);opacity:0;
  pointer-events:none}
.gw-node:hover::after{opacity:.75;animation:gwSheen .75s ease-out}
@keyframes gwSheen{from{left:-60%}to{left:120%}}
@keyframes gwNodeIn{from{opacity:0;transform:translateY(-50%) translateX(-16px) scale(.96)}
  to{opacity:1;transform:translateY(-50%) translateX(0) scale(1)}}

/* ── the panel ───────────────────────────────────────────────────────────── */
.gw-side{border-radius:var(--radius);border:1px solid var(--glass-line-2);
  background:var(--surface-2);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  box-shadow:var(--shadow);padding:26px 24px 20px;position:sticky;top:24px}
.gw-side__k{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:800;
  color:var(--accent-text);margin-bottom:10px}
.gw-side__t{font-size:22px;font-weight:800;letter-spacing:-.5px;margin:0 0 6px;color:var(--text)}
.gw-side__s{color:var(--muted);font-size:14.5px;line-height:1.55;margin:0 0 18px}
.gw-side__s b{color:var(--text)}
.gw-rule{height:2px;border-radius:2px;margin:0 0 16px;
  background:linear-gradient(90deg,var(--accent),transparent)}
.gw-items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.gw-items .gw-row{display:flex;gap:12px;align-items:flex-start;padding:11px 10px;border-radius:12px;
  transition:background .16s ease,transform .16s ease}
.gw-items .gw-row:hover{background:var(--row-hover);transform:translateX(2px)}
.gw-items svg{width:18px;height:18px;flex:none;margin-top:2px;fill:none;stroke:var(--accent-text);
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.gw-items b{display:block;font-size:14.5px;font-weight:700;color:var(--text)}
.gw-items span{display:block;font-size:13px;color:var(--muted);line-height:1.45;margin-top:2px}
.gw-items i{font-style:normal;color:var(--accent-text);font-weight:700}

.gw-foot{margin-top:16px;padding-top:14px;border-top:1px solid var(--glass-line-2);
  font-size:12.5px;color:var(--muted-2);line-height:1.5}

@media(max-width:1240px){
  /* not enough width for a fan: the wheel centres and the panel carries the list */
  .gw-wheelbox{width:min(520px,100%);margin:8px auto}
  .gw-nodes,.gw-links{display:none}
}
@media(max-width:1080px){
  .gw-board{grid-template-columns:1fr}
  .gw-side{position:static}
  /* the fan needs room to the right of the wheel; below a tablet it has none, so
     the panel carries the list on its own */
  .gw-nodes,.gw-links{display:none}
  .gw-wheelbox{width:min(560px,100%)}
}
@media(max-width:640px){
  .gw-seg__label{font-size:25px}
  .gw-hub__t{font-size:26px}
  .gw-hub__k,.gw-hub__s{font-size:15px}
  .gw-goal{height:40px;font-size:14px;padding:0 14px}
}
@media(prefers-reduced-motion:reduce){
  .gw-stage::before,.gw-hub__ring{animation:none}
  .gw-rotor,.gw-runner{transition:none}
}