/* Growth Notes marketing site: the visual elements, page headers and phone layouts from the design canvas
   "Growth Notes site restructure". Built on site.css tokens. Loaded after site.css on every page. */

/* Icon tiles and one-line facts */
.v-ico{width:44px;height:44px;border-radius:13px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;flex:none}
.v-ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.v-ico.sm{width:32px;height:32px;border-radius:10px}.v-ico.sm svg{width:16px;height:16px}
.v-ico.lg{width:64px;height:64px;border-radius:18px}.v-ico.lg svg{width:30px;height:30px}
.v-ico.ok{background:var(--covered-soft);color:var(--covered)}
.v-ico.gold{background:var(--gold-soft);color:var(--gold-ink)}
.v-ico.ink{background:var(--ink);color:var(--paper)}
.v-ico.ghost{background:transparent;border:1.5px dashed var(--line-strong);color:var(--ink-3)}
.v-facts{display:flex;flex-wrap:wrap;gap:14px 28px}
.v-fact{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:15px}
.v-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.v-tile{display:flex;flex-direction:column;gap:14px;padding:22px;border:1px solid var(--line);border-radius:18px;background:var(--surface);transition:transform .3s var(--ease-out),border-color .3s}
.v-tile:hover{transform:translateY(-4px);border-color:var(--accent)}
.v-tile b{font-size:16px;line-height:1.3}.v-tile small{font-size:13.5px;color:var(--ink-3);line-height:1.4}
.v-head{display:flex;flex-direction:column;gap:12px;align-items:flex-start;margin-bottom:40px}
.v-head.c{align-items:center;text-align:center}
.v-cap{font-size:14px;color:var(--ink-3)}
.v-arrow{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--accent);text-decoration:none}
.v-arrow i{width:26px;height:26px;border-radius:50%;background:var(--sunk);display:grid;place-items:center;font-style:normal;transition:transform .2s var(--ease-out)}
.v-arrow:hover i{transform:translateX(3px)}

/* The stage: a dotted ground that holds a real piece of the product */
.v-stage{position:relative;border:1px solid var(--line);border-radius:22px;background:radial-gradient(var(--dot) 1.2px,transparent 1.4px) 0 0/18px 18px,var(--paper);overflow:hidden}
/* The night sky, as the Library map draws it */
.v-night{position:relative;border-radius:22px;overflow:hidden;color:#f1eff5;background:radial-gradient(55% 60% at 50% 46%,#2c2650 0%,transparent 72%),#15141a}
.v-night::before{content:"";position:absolute;inset:-300px;background-image:radial-gradient(1.4px 1.4px at 37px 61px,#fff,transparent),radial-gradient(1px 1px at 157px 133px,#c9bcff,transparent),radial-gradient(1.6px 1.6px at 243px 29px,#fff,transparent),radial-gradient(1px 1px at 91px 211px,#a796ff,transparent),radial-gradient(1.2px 1.2px at 201px 177px,#fff,transparent);background-size:280px 260px;opacity:.75;animation:v-drift 140s linear infinite;pointer-events:none}
@keyframes v-drift{to{transform:translate3d(-280px,-260px,0)}}
.v-night .v-cap{color:#a29dae}

/* Level bars: filled is where you are, outlined is where you're going, sunk is not yet */
.v-lvl{display:inline-flex;gap:3px;flex:none}
.v-lvl i{width:16px;height:6px;border-radius:3px;background:var(--sunk);box-shadow:inset 0 0 0 1px var(--line)}
.v-lvl i.you{background:var(--accent);box-shadow:none}
.v-lvl i.goal{background:transparent;box-shadow:inset 0 0 0 1.5px var(--accent);animation:v-goal 2.4s var(--ease-io) infinite}
.v-lvl.lg i{width:28px;height:9px;border-radius:5px}
@keyframes v-goal{50%{background:var(--accent-soft)}}

/* Lines that carry a signal from one thing to the next */
.v-line{position:relative;height:2px;background:var(--line-strong);border-radius:2px;overflow:hidden;flex:1;min-width:20px}
.v-line.dash{background:repeating-linear-gradient(90deg,var(--line-strong) 0 6px,transparent 6px 12px)}
.v-line::after{content:"";position:absolute;top:0;bottom:0;left:0;width:22%;background:linear-gradient(90deg,transparent,var(--accent));box-shadow:0 0 10px var(--accent);animation:v-sig 4s var(--ease-io) infinite}
.v-line.off{opacity:.35}.v-line.off::after{display:none}
.v-line.b::after{animation-delay:1.3s}.v-line.c::after{animation-delay:2.6s}
@keyframes v-sig{0%{transform:translateX(-100%)}70%,100%{transform:translateX(460%)}}
.v-vline{position:relative;width:2px;height:40px;background:var(--line);overflow:hidden;flex:none}
.v-vline::after{content:"";position:absolute;left:0;right:0;top:0;height:30%;background:linear-gradient(180deg,transparent,var(--accent));animation:v-sigv 4s var(--ease-io) infinite}
@keyframes v-sigv{0%{transform:translateY(-100%)}70%,100%{transform:translateY(340%)}}

/* Motion: float, pulse, breathe, twinkle, and steps that light up in turn */
.v-float{animation:v-float 7s var(--ease-io) infinite}.v-float.b{animation-delay:-3.5s}
@keyframes v-float{50%{transform:translateY(-10px)}}
.v-pulse{animation:v-pulse 4s var(--ease-io) infinite}
@keyframes v-pulse{0%,100%{box-shadow:0 0 0 0 transparent}12%{box-shadow:0 0 0 9px color-mix(in srgb,var(--accent) 22%,transparent)}30%{box-shadow:0 0 0 0 transparent}}
.v-breathe{transform-box:fill-box;transform-origin:center;animation:v-breathe 6s var(--ease-io) infinite}
@keyframes v-breathe{50%{transform:scale(1.04);opacity:.86}}
.v-tw{animation:v-tw 3.6s ease-in-out infinite}
@keyframes v-tw{0%,100%{opacity:.35}50%{opacity:1}}
.v-spin{transform-box:fill-box;transform-origin:center;animation:v-spin 60s linear infinite}
@keyframes v-spin{to{transform:rotate(360deg)}}
.d1{animation-delay:.8s}.d2{animation-delay:1.6s}.d3{animation-delay:2.4s}.d4{animation-delay:3.2s}.d5{animation-delay:4s}
.v-seq{animation-duration:10s;animation-iteration-count:infinite;animation-timing-function:var(--ease-out)}
.v-seq.s1{animation-name:v-s1}.v-seq.s2{animation-name:v-s2}.v-seq.s3{animation-name:v-s3}.v-seq.s4{animation-name:v-s4}.v-seq.s5{animation-name:v-s5}.v-seq.s6{animation-name:v-s6}
@keyframes v-s1{0%,5%{opacity:.25;transform:scale(.86)}9%,94%{opacity:1;transform:none}100%{opacity:.25;transform:scale(.86)}}
@keyframes v-s2{0%,18%{opacity:.25;transform:scale(.86)}22%,94%{opacity:1;transform:none}100%{opacity:.25;transform:scale(.86)}}
@keyframes v-s3{0%,31%{opacity:.25;transform:scale(.86)}35%,94%{opacity:1;transform:none}100%{opacity:.25;transform:scale(.86)}}
@keyframes v-s4{0%,44%{opacity:.25;transform:scale(.86)}48%,94%{opacity:1;transform:none}100%{opacity:.25;transform:scale(.86)}}
@keyframes v-s5{0%,57%{opacity:.25;transform:scale(.86)}61%,94%{opacity:1;transform:none}100%{opacity:.25;transform:scale(.86)}}
@keyframes v-s6{0%,70%{opacity:.25;transform:scale(.86)}74%,94%{opacity:1;transform:none}100%{opacity:.25;transform:scale(.86)}}
.v-grow{transform-origin:left center;animation:v-grow 6s var(--ease-out) infinite}
@keyframes v-grow{0%{transform:scaleX(0)}25%,90%{transform:scaleX(1)}100%{transform:scaleX(0)}}

/* Badges and faces */
.v-badge{display:block;flex:none;filter:drop-shadow(0 10px 18px rgba(75,51,184,.28))}
.v-face{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none;border:2px solid var(--surface);box-shadow:0 0 0 1px var(--line)}
.v-face.lg{width:64px;height:64px}.v-face.sm{width:32px;height:32px}
.v-who{display:flex;align-items:center;gap:12px;min-width:0}
.v-who b{display:block;font-size:15px;line-height:1.25}.v-who small{display:block;font-size:13px;color:var(--ink-3)}
.v-mini{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px;box-shadow:var(--shadow-lg)}
.v-bubble{display:inline-flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-size:14px;box-shadow:var(--shadow-lg)}

/* The path: a dashed line from the badge you hold to the next one */
.v-path{display:flex;align-items:center;gap:14px}
.v-stop{width:14px;height:14px;border-radius:50%;border:2px solid var(--accent);background:var(--surface);flex:none}
.v-stop.goal{background:var(--accent)}

/* Diagrams of dots and lines, as on the case studies page */
.v-dia{position:relative;width:200px;height:120px;flex:none}
.v-dia .d{position:absolute;border-radius:50%;background:var(--accent-soft);border:2px solid var(--accent);transform:translate(-50%,-50%);width:26px;height:26px}
.v-dia .d.big{width:44px;height:44px;background:var(--accent)}
.v-dia .ln{position:absolute;height:2px;background:var(--line-strong);transform-origin:left center}
.v-dia .ring{position:absolute;left:50%;top:50%;width:104px;height:104px;margin:-52px 0 0 -52px;border-radius:50%;border:1.5px dashed var(--line-strong);animation:v-spin 30s linear infinite}

/* The constellation: a role's badge with its abilities as stars, core on the inner ring */
.v-const{position:relative;width:100%;aspect-ratio:600/420}
.v-const svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.v-const .core{fill:none;stroke:#a796ff;stroke-opacity:.55;stroke-width:1}
.v-const .spec{fill:none;stroke:#a29dae;stroke-opacity:.5;stroke-width:1;stroke-dasharray:3 5}
.v-const .spoke{stroke:#a796ff;stroke-opacity:.35;stroke-width:1}
.v-const .spoke.far{stroke:#a29dae;stroke-dasharray:2 4}
.v-const .star{fill:#f1eff5}
.v-const .star.gold{fill:#f0cf73;filter:drop-shadow(0 0 6px #d9a62b)}
.v-const .star.gap{fill:#a796ff;filter:drop-shadow(0 0 7px #a796ff)}
.v-const .star.new{fill:#7fd6a6;filter:drop-shadow(0 0 7px #7fd6a6)}
.v-const .star.hid{fill:none;stroke:#6b6677;stroke-dasharray:2 2}
.v-const text{fill:#c9c5d4;font:500 11px var(--body)}
.v-const .shape{fill:#a796ff;fill-opacity:.1;stroke:#a796ff;stroke-opacity:.5;stroke-width:1}
.v-const .v-badge{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:19%;filter:drop-shadow(0 0 22px rgba(167,150,255,.55))}
.v-key{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:13px;color:#c9c5d4}
.v-key span{display:inline-flex;align-items:center;gap:7px}
.v-key i{width:9px;height:9px;border-radius:50%;background:#f1eff5}
.v-key i.gold{background:#f0cf73}.v-key i.gap{background:#a796ff}.v-key i.new{background:#7fd6a6}.v-key i.hid{background:transparent;border:1px dashed #a29dae}

/* The competence map (radar) */
.v-radar{width:100%;max-width:460px;display:block;margin:0 auto;overflow:visible}
.v-radar .grid{fill:none;stroke:var(--line)}
.v-radar .goal{fill:var(--covered-soft);fill-opacity:.6;stroke:var(--covered);stroke-width:1.6;stroke-dasharray:5 4;opacity:0;transition:opacity .5s var(--ease-out)}
.v-radar .goal.on{opacity:1}
.v-radar .you{fill:var(--accent-soft);fill-opacity:.9;stroke:var(--accent);stroke-width:2}
.v-radar text{font:500 11px var(--mono);fill:var(--ink-3);text-anchor:middle}
.v-radar .gapdot{fill:var(--covered);opacity:0;transition:opacity .4s}
.v-radar .gapdot.on{opacity:1}
.v-pick{display:flex;flex-direction:column;gap:8px}
.v-pick button{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:14px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;text-align:left;cursor:pointer;min-height:44px;transition:border-color .2s,background .2s}
.v-pick button:hover{border-color:var(--line-strong)}
.v-pick button.on{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 1px var(--accent)}
.v-pick button b{display:block;font-size:15px}.v-pick button small{display:block;font-size:13px;color:var(--ink-3)}
.v-count{margin-left:auto;font:600 22px var(--head);color:var(--accent)}

/* The competence matrix: roles across, abilities down, level bars in each cell */
.v-mx{display:grid;grid-template-columns:minmax(150px,1.5fr) repeat(4,minmax(96px,1fr));border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--surface);min-width:620px}
.v-mx>*{padding:14px 12px;border-bottom:1px solid var(--line);border-left:1px solid var(--line);display:flex;align-items:center;justify-content:center;min-height:56px}
.v-mx>.ab{justify-content:flex-start;border-left:0;font-weight:600;font-size:14.5px;line-height:1.3}
.v-mx>.hd{flex-direction:column;gap:6px;padding:16px 8px;font-size:12.5px;font-weight:600;text-align:center;line-height:1.25;background:var(--paper)}
.v-mx>.hd img{width:56px;height:56px}
.v-mx>.me{background:var(--accent-soft)}
.v-mx>.nx{background:color-mix(in srgb,var(--covered-soft) 55%,transparent)}
.v-mx>.last{border-bottom:0}
.v-mx .plus{margin-left:6px;font:700 11px var(--body);color:var(--covered);background:var(--covered-soft);border-radius:999px;padding:1px 6px;animation:v-tw 2.4s ease-in-out infinite}

/* Mentorship: a track of sessions between two people */
.v-track{display:flex;align-items:center;gap:8px;flex-wrap:nowrap}
.v-node{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:none;font:600 14px var(--body);background:var(--surface);border:2px solid var(--accent);color:var(--accent)}
.v-node svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.v-node.fill{background:var(--accent);color:var(--accent-ink)}
.v-node.ok{border-color:var(--covered);background:var(--covered);color:#fff}
.v-phase{display:flex;flex-direction:column;align-items:center;gap:10px;flex:none}
.v-phase small{font-size:12.5px;font-weight:600;color:var(--ink-3);white-space:nowrap}
.v-phase .row{display:flex;gap:6px;border:0;padding:0}

/* Credits: where the money goes */
.v-split{display:flex;height:14px;border-radius:999px;overflow:hidden;background:var(--sunk)}
.v-split i{display:block;height:100%}
.v-split .m{background:var(--accent);width:75%}.v-split .g{background:var(--line-strong);width:25%}
.v-coin{width:26px;height:26px;border-radius:50%;background:var(--gold-soft);border:2px solid var(--gold);color:var(--gold-ink);display:grid;place-items:center;font:700 11px var(--body);flex:none}
.v-stack{display:flex;align-items:flex-end;gap:3px;height:56px}
.v-stack i{width:10px;border-radius:3px 3px 0 0;background:linear-gradient(180deg,var(--gold),var(--gold-line));display:block}

/* Own space and organisation */
.v-zone{flex:1 1 220px;display:flex;flex-direction:column;gap:12px;padding:22px;border-radius:22px;border:1.5px solid var(--line-strong);background:var(--surface);min-width:0}
.v-zone.own{border-color:var(--accent);background:color-mix(in srgb,var(--accent-soft) 45%,var(--surface))}
.v-zone.org{border-style:dashed}
.v-item{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:12px;background:var(--surface);border:1px solid var(--line);font-size:14px;font-weight:600;transition:border-color .3s,background .3s,box-shadow .3s}
.v-item svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none;color:var(--ink-3)}
.v-item.seen{border-color:var(--covered);background:var(--covered-soft)}
.v-item.seen svg{color:var(--covered)}
.v-switch{width:52px;height:30px;border-radius:999px;background:var(--line-strong);border:0;position:relative;cursor:pointer;flex:none;transition:background .25s;padding:0}
.v-switch::after{content:"";position:absolute;left:3px;top:3px;width:24px;height:24px;border-radius:50%;background:#fff;transition:transform .25s var(--ease-out)}
.v-switch.on{background:var(--accent)}.v-switch.on::after{transform:translateX(22px)}

/* Steps that play on their own (How it works) */
.v-tabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:6px}
.v-tabs button{position:relative;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);font:600 14px var(--body);cursor:pointer;min-height:52px;text-align:left;overflow:hidden;transition:border-color .2s,color .2s}
.v-tabs button.on{border-color:var(--accent);color:var(--ink)}
.v-tabs button.on::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--accent);transform-origin:left;animation:v-prog 5s linear both}
@keyframes v-prog{from{transform:scaleX(0)}}
.v-panes{position:relative;display:grid}
.v-pane{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .45s var(--ease-out),transform .45s var(--ease-out),visibility 0s .45s}
.v-pane.on{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.v-chat{display:flex;flex-direction:column;gap:10px}
.v-chat span{max-width:80%;padding:10px 14px;border-radius:16px;font-size:15px}
.v-chat .n{align-self:flex-start;background:var(--sunk)}
.v-chat .m{align-self:flex-end;background:var(--accent);color:var(--accent-ink)}
.v-opts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.v-opts span{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 6px;border:1px solid var(--line);border-radius:12px;font-size:12.5px;font-weight:600;text-align:center}
.v-opts span.on{border:2px solid var(--accent);background:var(--accent-soft)}

/* A week, and a programme's rhythm */
.v-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.v-week>span{display:flex;flex-direction:column;gap:6px;align-items:center;font-size:12px;font-weight:600;color:var(--ink-3)}
.v-week i{display:block;width:100%;height:84px;border-radius:10px;background:var(--sunk);position:relative;overflow:hidden}
.v-week i b{position:absolute;left:4px;right:4px;border-radius:6px;background:var(--accent)}
.v-rhythm{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:4px}
.v-rhythm i{height:34px;border-radius:8px;background:var(--sunk);display:grid;place-items:center;font:600 11px var(--mono);color:var(--ink-3);font-style:normal}
.v-rhythm i.s{background:var(--accent-soft);color:var(--accent)}
.v-rhythm i.r{background:var(--covered-soft);color:var(--covered)}
.v-strikes{display:flex;gap:10px;align-items:center}
.v-strikes i{width:22px;height:22px;border-radius:50%;border:2px solid var(--warn);display:block}
.v-strikes i.x{background:var(--warn)}

@media (max-width:700px){.v-track{flex-wrap:wrap;justify-content:center}.v-track .v-line{display:none}.v-head{margin-bottom:28px}}
@media (prefers-reduced-motion:reduce){.gn [class*="v-"],.gn [class*="v-"]::after,.gn [class*="v-"]::before{animation:none !important;transition:none !important}}

.gn.dark .v-badge{filter:drop-shadow(0 10px 18px rgba(0,0,0,.5))}
.gn.dark .v-switch::after,.gn.dark .v-night{border:0}
.gn.dark .v-night{background:radial-gradient(55% 60% at 50% 46%,#2c2650 0%,transparent 72%),#0e0d12}
.gn.dark .band-dark{background:radial-gradient(120% 90% at 50% 10%,#2a2836 0%,#1a1920 60%,#111016 100%)}

/* Phones */
@media (max-width:700px){
  .v-path{gap:6px}.v-path img.v-badge{width:64px;height:64px}
  .v-stage{border-radius:18px}
  .v-pick button{padding:8px 10px;gap:10px}.v-pick button img{width:40px;height:40px}
  .v-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.v-tile{padding:16px;gap:10px}
  .v-opts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .v-facts{gap:10px 18px}
  .v-phase{flex:1 1 40%}
  .v-const text{font-size:9px}
  .v-rhythm i{height:26px;font-size:9px}
  .v-duo{flex-direction:column}.v-duo .v-line{display:none}
}

/* How it works: six tabs of equal width, and every step in the same frame at the same height */
.v-tabs{grid-template-columns:repeat(6,minmax(0,1fr))}
.v-tabs button{height:60px;white-space:nowrap}
.v-tabs button>span:last-child{overflow:hidden;text-overflow:ellipsis}
.v-step{display:flex;flex-wrap:wrap;gap:32px 48px;align-items:center;min-height:480px}
.v-side{flex:0 0 280px;margin:0}
.v-show{flex:1 1 480px;min-width:0;min-height:480px;display:flex;align-items:center;justify-content:center}
@media (max-width:1000px){.v-tabs{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:700px){.v-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}.v-tabs button{height:52px}.v-step{min-height:0;gap:20px}.v-side{flex:1 1 100%}.v-show{flex:1 1 100%;min-height:420px}}

/* ------------------------------------------------------------------ Headers: one kind per page */
.h-wrap{position:relative;overflow:hidden}
.h-c{display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px}
.h-acts{display:flex;gap:12px;flex-wrap:wrap}
/* How it works: the route itself */
.h-route{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;position:relative;width:100%;max-width:1040px}
.h-route::before{content:"";position:absolute;left:8%;right:8%;top:31px;height:2px;background:repeating-linear-gradient(90deg,var(--line-strong) 0 6px,transparent 6px 12px)}
.h-route::after{content:"";position:absolute;left:8%;top:30px;width:84%;height:4px;border-radius:2px;background:linear-gradient(90deg,transparent 0,var(--accent) 50%,transparent 100%);background-size:22% 100%;background-repeat:no-repeat;animation:h-run 6s var(--ease-io) infinite}
@keyframes h-run{0%{background-position:-30% 0}80%,100%{background-position:130% 0}}
.h-stop{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:10px;font-size:14px;font-weight:600;text-decoration:none;color:var(--ink)}
.h-stop .v-ico{width:64px;height:64px;border-radius:50%;border:3px solid var(--paper)}
.h-stop .v-ico svg{width:26px;height:26px}
.h-stop small{font-weight:500;color:var(--ink-3);font-size:12.5px}
/* Mentoring and Anvil: the night, edge to edge */
.h-night{position:relative;color:#f1eff5;background:radial-gradient(60% 70% at 70% 40%,#2c2650 0%,transparent 70%),#15141a;overflow:hidden}
.h-night::before{content:"";position:absolute;inset:-300px;background-image:radial-gradient(1.4px 1.4px at 37px 61px,#fff,transparent),radial-gradient(1px 1px at 157px 133px,#c9bcff,transparent),radial-gradient(1.6px 1.6px at 243px 29px,#fff,transparent),radial-gradient(1px 1px at 91px 211px,#a796ff,transparent),radial-gradient(1.2px 1.2px at 201px 177px,#fff,transparent);background-size:280px 260px;opacity:.8;animation:v-drift 140s linear infinite;pointer-events:none}
.h-night.grid{background:linear-gradient(rgba(167,150,255,.08) 1px,transparent 1px) 0 0/100% 48px,linear-gradient(90deg,rgba(167,150,255,.08) 1px,transparent 1px) 0 0/48px 100%,radial-gradient(60% 70% at 72% 45%,#2c2650 0%,transparent 70%),#15141a}
.h-night .frame{border-color:#34313e;position:relative}
.h-night .lede{color:#c9c5d4}
.h-night .btn-quiet{background:transparent;color:#f1eff5;border-color:#4a4656}
.h-night .tag{background:transparent;color:#f1eff5;border-color:#4a4656}
.h-night .uline{background-image:linear-gradient(#a796ff,#a796ff)}
.h-pair{display:flex;align-items:center;justify-content:center;gap:0;width:100%}
.h-pair figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:6px;flex:none;font-size:14px;font-weight:600}
.h-pair figure>img:first-child{width:128px;height:128px;border-radius:50%;object-fit:cover;border:3px solid #a796ff;box-shadow:0 0 40px rgba(167,150,255,.5)}
.h-pair figure .v-badge{margin-top:-38px;filter:drop-shadow(0 0 14px rgba(167,150,255,.6))}
.h-arc{flex:1;max-width:200px;height:2px;background:repeating-linear-gradient(90deg,#a796ff 0 6px,transparent 6px 12px);position:relative;margin-bottom:60px}
.h-arc::after{content:"";position:absolute;left:0;top:-4px;width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 0 14px #a796ff;animation:h-dot 3.6s var(--ease-io) infinite}
.h-arc.r::after{animation-direction:reverse}
@keyframes h-dot{0%{left:0;opacity:0}15%,85%{opacity:1}100%{left:calc(100% - 10px);opacity:0}}
.h-gem{flex:none;display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 18px;border-radius:18px;background:rgba(44,38,80,.85);border:1px solid #a796ff;margin-bottom:60px;font-weight:600;font-size:15px;box-shadow:0 0 30px rgba(167,150,255,.35)}
/* On your own: everything of yours, in orbit around you */
.h-orbit{position:relative;width:100%;max-width:420px;aspect-ratio:1;margin:0 auto}
.h-orbit .ring{position:absolute;inset:11%;border-radius:50%;border:2px dashed var(--line-strong);animation:v-spin 80s linear infinite}
.h-orbit .ring.in{inset:27%;border:1px solid var(--accent);opacity:.45;animation:none}
.h-orbit .me{position:absolute;left:50%;top:50%;width:34%;aspect-ratio:1;border-radius:50%;object-fit:cover;transform:translate(-50%,-50%);border:4px solid var(--surface);box-shadow:0 0 0 2px var(--accent),var(--shadow-lg)}
.h-orbit .o{position:absolute;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12.5px;font-weight:600;transform:translate(-50%,-50%);white-space:nowrap}
.h-orbit .o .v-ico{box-shadow:var(--shadow-lg)}
.h-orbit .lock{position:absolute;left:50%;top:70%;transform:translateX(-50%);white-space:nowrap}
/* Organisations: a moving roster */
.h-marq-box{width:100%;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.h-marq{display:flex;gap:12px;width:max-content;animation:h-marq 42s linear infinite;padding:6px 0}
.h-marq.rev{animation-direction:reverse}
@keyframes h-marq{to{transform:translateX(-50%)}}
.h-tile{flex:none;display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:18px;background:var(--surface);border:1px solid var(--line);min-width:250px}
.h-tile>span{display:flex;flex-direction:column;gap:5px;min-width:0;flex:1;font-size:14.5px;font-weight:600}
/* Mentors: what lands in your hand */
.h-fan{position:relative;width:100%;max-width:440px;height:330px;margin:0 auto}
.h-fan>div{position:absolute;left:8%;right:8%;padding:18px;border-radius:20px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-lg);display:flex;flex-direction:column;gap:12px}
.h-fan>.c1{top:0;transform:rotate(-5deg);z-index:1}
.h-fan>.c2{top:118px;transform:rotate(3deg);z-index:2}
.h-fan>.c3{top:210px;transform:rotate(-2deg);z-index:3;border-color:var(--gold)}
/* Pricing: the two numbers */
.h-nums{display:flex;align-items:center;justify-content:center;gap:28px;flex-wrap:wrap}
.h-num{display:flex;flex-direction:column;align-items:center;gap:4px}
.h-num b{font:600 clamp(72px,11vw,148px)/.9 var(--head);letter-spacing:-.03em}
.h-num.gold b{color:var(--gold)}
.h-num span{font-size:15px;font-weight:600;color:var(--ink-2)}
.h-then{width:64px;height:2px;background:var(--line-strong);position:relative;overflow:hidden;flex:none}
.h-then::after{content:"";position:absolute;inset:0;width:40%;background:var(--accent);animation:v-sig 3s var(--ease-io) infinite}

@media (max-width:700px){
  .h-route{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:18px}.h-route::before,.h-route::after{display:none}
  .h-stop .v-ico{width:52px;height:52px}.h-stop{font-size:12.5px}.h-stop small{display:none}
  .h-pair figure>img:first-child{width:84px;height:84px}.h-pair figure .v-badge{width:44px;height:44px;margin-top:-26px}
  .h-arc{margin-bottom:44px;max-width:none}.h-gem{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);margin:0;white-space:nowrap;padding:10px 14px;font-size:13.5px}
  .h-pair{position:relative;padding-bottom:86px}
  .h-orbit{max-width:310px}.h-orbit .o{font-size:11.5px}
  .h-tile{min-width:210px;padding:10px 12px}
  .h-fan{height:300px}.h-fan>div{left:2%;right:2%;padding:14px}
  .h-nums{gap:14px}.h-then{width:28px}
  .v-const text{display:none}
}

/* ------------------------------------------------------------------ Phone-first layouts */
.m-sec{padding:44px 20px;border-top:1px solid var(--line)}
.m-sec.tight{padding:28px 20px}
.m-sec.dark{background:#15141a;color:#f1eff5;border-color:#34313e}
.m-h{font-family:var(--head);font-weight:600;font-size:30px;line-height:1.1;letter-spacing:-.01em;margin:0}
.m-eye{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.m-hd{display:flex;flex-direction:column;gap:8px;margin-bottom:22px}
.m-rail{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -20px;padding:4px 20px 14px;scrollbar-width:none}
.m-rail::-webkit-scrollbar,.m-chips::-webkit-scrollbar{display:none}
.m-rail>*{flex:0 0 82%;scroll-snap-align:center;min-width:0}
.m-rail.sm>*{flex-basis:64%}
.m-swipe{display:flex;align-items:center;justify-content:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--ink-3);padding-top:2px}
.m-swipe i{width:6px;height:6px;border-radius:50%;background:var(--line-strong);display:block}
.m-swipe i.on{width:18px;border-radius:3px;background:var(--accent)}
.m-card{border:1px solid var(--line);border-radius:20px;background:var(--surface);padding:18px;display:flex;flex-direction:column;gap:12px;color:var(--ink);text-decoration:none}
.m-card.tall{min-height:400px}

.m-card .t{font:600 22px/1.15 var(--head)}
.m-art{flex:1;display:flex;flex-direction:column;justify-content:center;gap:10px;border-radius:14px;padding:14px;background:radial-gradient(var(--dot) 1.2px,transparent 1.4px) 0 0/16px 16px,var(--paper);min-height:150px}
.m-chips{display:flex;gap:8px;overflow-x:auto;margin:0 -20px;padding:2px 20px 12px;scrollbar-width:none}
.m-chips button{flex:none;min-height:44px;padding:0 14px 0 6px;border-radius:999px;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink-2);font:600 14px var(--body);display:inline-flex;align-items:center;gap:8px;cursor:pointer}
.m-chips button.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.m-vt{display:flex;flex-direction:column}
.m-vt>.st{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;padding-bottom:22px;position:relative}
.m-vt>.st::before{content:"";position:absolute;left:21px;top:46px;bottom:2px;width:2px;background:var(--line-strong)}
.m-vt>.st::after{content:"";position:absolute;left:19px;top:46px;width:6px;height:18px;border-radius:3px;background:var(--accent);animation:m-fall 3s var(--ease-io) infinite}
@keyframes m-fall{0%{transform:translateY(0);opacity:0}20%{opacity:1}100%{transform:translateY(46px);opacity:0}}
.m-vt>.st:last-child{padding-bottom:0}.m-vt>.st:last-child::before,.m-vt>.st:last-child::after{display:none}
.m-vt .st>div{display:flex;flex-direction:column;gap:6px;padding-top:2px;min-width:0}
.m-vt b{font-size:16px}.m-vt small{font-size:13.5px;color:var(--ink-3)}
.m-vt .v-node{width:44px;height:44px}
.m-list{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--surface)}
.m-list>*{display:flex;align-items:center;gap:12px;min-height:58px;padding:8px 14px;color:var(--ink);text-decoration:none;font-weight:600;font-size:15px}
.m-list>*+*{border-top:1px solid var(--line)}
.m-list .end{margin-left:auto;flex:none}
.m-list small{display:block;font-weight:500;font-size:13px;color:var(--ink-3)}
.m-cta{position:sticky;bottom:0;z-index:40;display:flex;gap:10px;padding:12px 20px 14px;background:color-mix(in srgb,var(--paper) 90%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--line)}
.m-cta .btn{flex:1;min-height:52px;font-size:16px}
.m-cta .btn.alt{flex:0 0 52px;padding:0;background:var(--surface);border-color:var(--line-strong);color:var(--ink)}
.m-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.m-kpis>*{border:1px solid var(--line);border-radius:16px;padding:14px;background:var(--surface);display:flex;flex-direction:column;gap:4px;font-size:13.5px;color:var(--ink-3)}
.m-big{font:600 34px/1 var(--head);letter-spacing:-.01em;color:var(--ink)}
.m-flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));position:relative;text-align:center;gap:4px}
.m-flow::before{content:"";position:absolute;left:12%;right:12%;top:25px;height:2px;background:var(--line-strong)}
.m-flow::after{content:"";position:absolute;left:12%;top:24px;width:76%;height:4px;background:linear-gradient(90deg,transparent,var(--accent),transparent);background-size:26% 100%;background-repeat:no-repeat;animation:h-run 4.5s var(--ease-io) infinite}
.m-flow>span{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12px;font-weight:600;position:relative;z-index:1;line-height:1.25}
.m-flow .v-ico{width:52px;height:52px;border-radius:50%;border:3px solid var(--paper)}
.m-flow small{font-weight:500;color:var(--ink-3);font-size:11px}
.m-climb{display:flex;flex-direction:column;align-items:center}
.m-climb .rung{width:100%;display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:var(--surface);font-weight:600;font-size:14.5px}
.m-climb .gap{width:2px;height:22px;background:repeating-linear-gradient(180deg,var(--accent) 0 5px,transparent 5px 10px)}
.m-row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.m-state{margin-left:auto;flex:none;font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;background:var(--sunk);color:var(--ink-3);transition:background .3s,color .3s}
.m-state.seen{background:var(--covered-soft);color:var(--covered)}
.m-hero{padding:28px 20px 36px;display:flex;flex-direction:column;gap:20px}
.m-hero .h1{font-size:40px}

/* Fixes after checking the rendered pages */
.m-cta .btn.alt svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.gn a.m-card,.gn .m-list>a,.gn a.v-tile,.gn a.h-stop{color:var(--ink)}
.m-climb .rung{text-align:left}
.v-pick button{min-width:0}.v-pick button>span{min-width:0}
.h-fan{height:370px}.h-fan>.c2{top:150px}.h-fan>.c3{top:250px}
@media (max-width:700px){.h-fan{height:400px}.h-fan>.c2{top:176px}.h-fan>.c3{top:276px}.v-const>.v-ico.lg{width:60px !important;height:60px !important;border-radius:18px !important}}
.v-panes{grid-template-columns:minmax(0,1fr)}.v-pane{min-width:0}
.m-card .sn{font:600 13px var(--mono);color:var(--accent)}
.v-tiles.six{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:700px){.v-tiles.six{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Dark-mode and contrast fixes after checking every page in both themes */
.gn .v-mx>.ab{background:var(--surface);color:var(--ink)}
.band-dark .v-cap,.m-sec.dark .v-cap,.h-night .v-cap{color:#a29dae}
.v-night .v-mini .v-cap,.v-night .m-card .v-cap,.m-sec.dark .m-card .meta,.m-sec.dark .m-card .v-cap{color:var(--ink-3)}
.h-num.gold b{color:var(--gold-ink)}

/* Constellation stars as the Library map draws them: a ring that shows the state, the competence area's icon inside */
.v-star{position:absolute;transform:translate(-50%,-50%);padding:3px;border-radius:50%;background:conic-gradient(var(--c,#f1eff5) var(--p,100%),#3a3746 0);display:block;animation:v-starglow 4s var(--ease-io) infinite}
.v-star i{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#1e1d25;color:#f1eff5}
.v-star svg{position:static;width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.v-star.sm i{width:26px;height:26px}.v-star.sm svg{width:14px;height:14px}
.v-star.gold{--c:#f0cf73}.v-star.gold i{color:#f0cf73}
.v-star.gap{--c:#a796ff;--p:62%}
.v-star.spec{--c:#8f8a9c}
.v-star.new{--c:#7fd6a6}.v-star.new i{color:#7fd6a6}
.v-star.hid{background:none;border:1.5px dashed #6b6677;padding:1.5px;animation:none}.v-star.hid i{color:#6b6677;background:transparent}
@keyframes v-starglow{0%,100%{box-shadow:0 0 0 0 transparent}50%{box-shadow:0 0 14px 1px color-mix(in srgb,var(--c,#f1eff5) 55%,transparent)}}
.v-starlab{position:absolute;transform:translateY(-50%);display:flex;flex-direction:column;gap:1px;padding:6px 10px;border-radius:10px;background:rgba(30,29,37,.9);border:1px solid #4a4656;font-size:12px;line-height:1.25;color:#c9c5d4;white-space:nowrap}
.v-starlab b{color:#f1eff5;font-size:12.5px}
.v-areas{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 14px;font-size:12.5px;color:#c9c5d4;position:relative}
.v-areas span{display:inline-flex;align-items:center;gap:6px}
.v-areas svg{width:14px;height:14px;fill:none;stroke:#a796ff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.v-key i.ring{background:none;border:2px solid #f0cf73;width:11px;height:11px}
.v-key i.ring.gap{border-color:#a796ff;border-right-color:#3a3746}
.v-key i.ring.spec{border-color:#8f8a9c}
.v-key i.ring.new{border-color:#7fd6a6}.v-key i.ring.kept{border-color:#f1eff5}.v-key i.ring.hid{border:1.5px dashed #6b6677}
@media (max-width:700px){.v-star i{width:26px;height:26px}.v-star svg{width:13px;height:13px}.v-star.sm i{width:20px;height:20px}.v-star.sm svg{width:11px;height:11px}.v-starlab{display:none}.v-areas{font-size:11.5px;gap:5px 10px}}
.v-const .v-star svg{stroke-dasharray:none;stroke-opacity:1;stroke:currentColor;fill:none}
.v-star.spec i{color:#c9c5d4}
.v-const>.v-ico svg{position:static;inset:auto}
.v-const>.v-ico svg{width:46%;height:46%}

/* Sign-up state. One class on the page (su-open or su-invite, set from the staff switch) decides which version of
   every sign-up-dependent element shows. Invite only is the default when nothing says otherwise. */
body:not(.su-open) .if-open{display:none !important}
.su-open .if-invite{display:none !important}

/* ------------------------------------------------------------------ On the site
   Each ported page carries its desktop layout and its phone layout; the screen picks one. */
@media (max-width:700px){.only-desk{display:none}}
@media (min-width:701px){.only-phone{display:none}}
/* Things site.js switches. A chooser puts .on on the pieces that match the choice (data-on); a switch puts .is-on
   on its scope (data-toggle). */
.swap{display:none}.swap.on{display:inline}
.lit{opacity:.35;transition:opacity .35s var(--ease-out)}.lit.on{opacity:1}
.lit:not(.on) .v-line::after{display:none}
.s-on{display:none}
.lit.on .s-on,.is-on .s-on{display:inline}.lit.on .s-off,.is-on .s-off{display:none}
.lit.on .m-state,.is-on .m-state.sh{background:var(--covered-soft);color:var(--covered)}
.is-on .v-switch{background:var(--accent)}.is-on .v-switch::after{transform:translateX(22px)}
.is-on .v-item.sh{border-color:var(--covered);background:var(--covered-soft)}.is-on .v-item.sh svg{color:var(--covered)}
.v-item .e-on{display:none}.is-on .v-item .e-on{display:block}.is-on .v-item .e-off{display:none}
.sh-dim{opacity:.35;transition:opacity .35s}.is-on .sh-dim{opacity:1}
.sh-line{opacity:.35}.sh-line::after{display:none}.is-on .sh-line{opacity:1}.is-on .sh-line::after{display:block}
/* The Company menu sits near the right edge: it opens leftwards, one column wide. */
#company-menu{left:auto;right:-8px;width:300px;grid-template-columns:minmax(0,1fr)}

/* Header grounds (src/patterns.mjs): one quiet pattern per page, faint enough to sit behind a heading */
.pat{-webkit-mask-image:radial-gradient(120% 100% at 50% 40%,#000 35%,transparent 92%);mask-image:radial-gradient(120% 100% at 50% 40%,#000 35%,transparent 92%)}
.pat svg{position:absolute;inset:0;width:100%;height:100%}
.pat svg.bot{inset:auto 0 0 0;height:auto}
.pat .l{fill:none;stroke:var(--ink-3);stroke-opacity:.2;stroke-width:1;vector-effect:non-scaling-stroke}
.pat .l.d{stroke-dasharray:3 6}
.pat .l.a{stroke:var(--accent);stroke-opacity:.38}
.pat .n{fill:var(--paper);stroke:var(--ink-3);stroke-opacity:.34;stroke-width:1;vector-effect:non-scaling-stroke}
.pat .n.g{stroke:var(--accent);stroke-opacity:.5}
.pat .a.mv:not(.l){fill:var(--accent);opacity:.45}
.pat .draw{stroke-dasharray:1;stroke-dashoffset:1;animation:pat-draw 18s var(--l,0s) ease-in-out infinite}
@keyframes pat-draw{0%{stroke-dashoffset:1;opacity:1}14%,24%{stroke-dashoffset:0;opacity:1}32%,100%{stroke-dashoffset:0;opacity:0}}
.pat-orgs{background:radial-gradient(circle,color-mix(in srgb,var(--ink-3) 30%,transparent) 1px,transparent 1.6px) 0 0/28px 28px}
.pat-orgs i{position:absolute;width:5px;height:5px;margin:-2.5px;border-radius:50%;background:var(--accent);opacity:0;animation:pat-lit 17s var(--l,0s) ease-in-out infinite}
@keyframes pat-lit{0%,100%{opacity:0;box-shadow:none}10%,22%{opacity:.6;box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 12%,transparent)}34%{opacity:0;box-shadow:none}}
.pat-prog b{position:absolute;inset:0;background:var(--ink-3);opacity:.075;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='132'%3E%3Cg fill='%23000'%3E%3Crect x='0' y='18' width='44' height='8' rx='4'/%3E%3Crect x='56' y='18' width='44' height='8' rx='4'/%3E%3Ccircle cx='118' cy='22' r='4'/%3E%3Crect x='140' y='18' width='44' height='8' rx='4'/%3E%3Crect x='196' y='18' width='44' height='8' rx='4'/%3E%3Ccircle cx='258' cy='22' r='4'/%3E%3Crect x='30' y='62' width='44' height='8' rx='4'/%3E%3Ccircle cx='92' cy='66' r='4'/%3E%3Crect x='114' y='62' width='44' height='8' rx='4'/%3E%3Crect x='170' y='62' width='44' height='8' rx='4'/%3E%3Ccircle cx='232' cy='66' r='4'/%3E%3Crect x='84' y='106' width='44' height='8' rx='4'/%3E%3Crect x='140' y='106' width='44' height='8' rx='4'/%3E%3Ccircle cx='202' cy='110' r='4'/%3E%3Crect x='224' y='106' width='44' height='8' rx='4'/%3E%3Crect x='0' y='106' width='16' height='8' rx='4'/%3E%3C/g%3E%3C/svg%3E") 0 0/280px 132px;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='132'%3E%3Cg fill='%23000'%3E%3Crect x='0' y='18' width='44' height='8' rx='4'/%3E%3Crect x='56' y='18' width='44' height='8' rx='4'/%3E%3Ccircle cx='118' cy='22' r='4'/%3E%3Crect x='140' y='18' width='44' height='8' rx='4'/%3E%3Crect x='196' y='18' width='44' height='8' rx='4'/%3E%3Ccircle cx='258' cy='22' r='4'/%3E%3Crect x='30' y='62' width='44' height='8' rx='4'/%3E%3Ccircle cx='92' cy='66' r='4'/%3E%3Crect x='114' y='62' width='44' height='8' rx='4'/%3E%3Crect x='170' y='62' width='44' height='8' rx='4'/%3E%3Ccircle cx='232' cy='66' r='4'/%3E%3Crect x='84' y='106' width='44' height='8' rx='4'/%3E%3Crect x='140' y='106' width='44' height='8' rx='4'/%3E%3Ccircle cx='202' cy='110' r='4'/%3E%3Crect x='224' y='106' width='44' height='8' rx='4'/%3E%3Crect x='0' y='106' width='16' height='8' rx='4'/%3E%3C/g%3E%3C/svg%3E") 0 0/280px 132px;animation:pat-weeks 70s linear infinite}
@keyframes pat-weeks{to{-webkit-mask-position:-280px 0;mask-position:-280px 0}}
.pat-prog.pat-ph b{-webkit-mask-size:200px 94px;mask-size:200px 94px;opacity:.09}
.pat .c{fill:var(--ink-3);opacity:.13}
.pat .c.top{fill:var(--accent);opacity:.3;animation:pat-coin 13s var(--l,0s) ease-in-out infinite}
@keyframes pat-coin{0%,55%,100%{opacity:.3;transform:none}70%{opacity:0;transform:translateY(-6px)}85%{opacity:0;transform:translateY(-6px)}}
.pat.pat-ph .l{stroke-opacity:.16}
@media (prefers-reduced-motion:reduce){.pat .mv{display:none}.pat *,.pat b{animation:none !important}.pat .draw{stroke-dashoffset:0;opacity:.5}}

/* ---------- Delight: motion borrowed from the Library map (site.js adds the dl- classes; nothing here shows without it) ---------- */
@property --dl-ang{syntax:"<angle>";inherits:false;initial-value:0deg}
/* Things rise into place as they scroll in, one after another */
.dl-rv{opacity:0;translate:0 20px;transition:opacity .7s var(--ease-out) calc(var(--dl-i,0)*80ms),translate .9s cubic-bezier(.2,.9,.25,1.12) calc(var(--dl-i,0)*80ms) !important}
.dl-rv.dl-in{opacity:1;translate:0 0}
/* Night sections: slow nebula clouds, a nearer layer of stars, a shooting star now and then, a glow under the pointer */
.dl-night{isolation:isolate;overflow:hidden}
.dl-neb{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1}
.dl-neb i{position:absolute;border-radius:50%;filter:blur(64px);animation:dl-nebula 44s ease-in-out infinite alternate}
.dl-neb i:nth-child(1){left:-12%;top:-30%;width:58%;aspect-ratio:1;background:radial-gradient(circle,rgba(124,98,255,.3),transparent 70%)}
.dl-neb i:nth-child(2){right:-14%;bottom:-40%;width:52%;aspect-ratio:1;background:radial-gradient(circle,rgba(58,168,196,.2),transparent 70%);animation-delay:-18s;animation-duration:56s}
.dl-neb u{position:absolute;inset:-400px;background-image:radial-gradient(1.8px 1.8px at 60px 90px,#fff,transparent),radial-gradient(1.4px 1.4px at 300px 260px,#c9bcff,transparent),radial-gradient(1.6px 1.6px at 210px 380px,#fff,transparent),radial-gradient(1.2px 1.2px at 420px 120px,#a796ff,transparent);background-size:480px 440px;opacity:.55;animation:dl-drift 150s linear infinite}
.dl-neb b{position:absolute;left:var(--sx,12%);top:var(--sy,8%);width:120px;height:1.5px;border-radius:2px;transform-origin:100% 50%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.95));box-shadow:0 0 6px rgba(255,255,255,.6);opacity:0;animation:dl-shoot 17s ease-out var(--sd,3s) infinite}
.dl-neb s{position:absolute;inset:0;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(167,150,255,.14),transparent 70%);opacity:0;transition:opacity .5s}
.dl-night.dl-hot .dl-neb s{opacity:1}
@keyframes dl-nebula{0%{transform:translate3d(0,0,0) scale(1) rotate(0deg)}50%{transform:translate3d(60px,-40px,0) scale(1.12) rotate(8deg)}100%{transform:translate3d(-40px,30px,0) scale(.95) rotate(-6deg)}}
@keyframes dl-drift{to{transform:translate3d(480px,-440px,0)}}
@keyframes dl-shoot{0%{transform:rotate(24deg) translateX(0);opacity:0}1.5%{opacity:1}8%{transform:rotate(24deg) translateX(720px);opacity:0}100%{transform:rotate(24deg) translateX(720px);opacity:0}}
/* Constellations assemble: lines fade up, then each star pops in with a little spring */
.dl-const svg{opacity:0;transition:opacity 1.1s var(--ease-out) .15s}
.dl-const .v-star,.dl-const .v-starlab{scale:0;opacity:0;transition:scale .6s cubic-bezier(.3,1.7,.5,1) calc(var(--dl-i,0)*70ms + .3s),opacity .3s calc(var(--dl-i,0)*70ms + .3s)}
.dl-const.dl-in svg{opacity:1}
.dl-const.dl-in .v-star,.dl-const.dl-in .v-starlab{scale:1;opacity:1}
/* A ring of light where you tap or click */
.dl-ripple{position:fixed;width:80px;height:80px;margin:-40px 0 0 -40px;border-radius:50%;border:1.5px solid var(--accent);box-shadow:0 0 18px color-mix(in srgb,var(--accent) 70%,transparent);pointer-events:none;z-index:999;animation:dl-ripple .7s ease-out both}
@keyframes dl-ripple{from{transform:scale(.25);opacity:.9}to{transform:scale(2.2);opacity:0}}
/* The featured plan: light travels round its edge */
.dl-spin{border-color:transparent !important;background:linear-gradient(var(--surface),var(--surface)) padding-box,conic-gradient(from var(--dl-ang),var(--line) 0deg,var(--accent) 50deg,#f0cf73 80deg,var(--line) 140deg,var(--line) 360deg) border-box !important;animation:dl-spin 8s linear infinite}
@keyframes dl-spin{to{--dl-ang:360deg}}
/* Hero pictures lean a little towards the pointer; the ground behind leans the other way */
.dl-par{translate:calc(var(--px,0)*-10px) calc(var(--py,0)*-8px);transition:translate .5s var(--ease-out)}
.dl-par-b{translate:calc(var(--px,0)*8px) calc(var(--py,0)*6px);transition:translate .7s var(--ease-out)}
/* Things answer the hand: cards spring up under a pointer, everything gives a little under a press */
[data-scope] .btn,[data-scope] .m-card,[data-scope] [data-set],[data-scope] .m-cta .btn{transition:scale .18s var(--ease-out),filter .2s,background-color .2s,border-color .2s,color .2s}
[data-scope] .btn:active,[data-scope] a.m-card:active,[data-scope] [data-set]:active,[data-scope] .m-cta .btn:active{scale:.96}
@media (hover:hover){
  [data-scope] .v-tile,[data-scope] .v-mini,[data-scope] .plan{transition:translate .4s cubic-bezier(.3,1.6,.5,1),box-shadow .3s var(--ease-out),border-color .3s}
  [data-scope] .v-tile:hover,[data-scope] .v-mini:hover,[data-scope] .plan:hover{translate:0 -5px;box-shadow:var(--shadow-lg)}
  [data-scope] .v-tile .v-ico,[data-scope] .v-mini .v-ico,[data-scope] .v-fact .v-ico{transition:scale .35s cubic-bezier(.3,1.7,.5,1),rotate .35s cubic-bezier(.3,1.7,.5,1)}
  [data-scope] .v-tile:hover .v-ico,[data-scope] .v-mini:hover .v-ico,[data-scope] .v-fact:hover .v-ico{scale:1.14;rotate:-5deg}
  [data-scope] .v-star{transition:scale .28s cubic-bezier(.3,1.7,.5,1),filter .2s}
  [data-scope] .dl-in .v-star:hover{scale:1.18;filter:brightness(1.25) saturate(1.15)}
}
/* The main button catches the light every few seconds */
[data-scope] .btn-primary.btn-lg,[data-scope] .m-cta .btn-primary{position:relative;overflow:hidden}
[data-scope] .btn-primary.btn-lg::after,[data-scope] .m-cta .btn-primary::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.28) 50%,transparent 60%);transform:translateX(-120%);animation:dl-sheen 7s var(--ease-io) 2s infinite;pointer-events:none}
@keyframes dl-sheen{0%{transform:translateX(-120%)}18%,100%{transform:translateX(120%)}}
/* Phone rails: the card in front stands forward, the others wait */
.dl-rail>*{transition:scale .4s cubic-bezier(.3,1.3,.5,1),opacity .4s var(--ease-out);scale:.94;opacity:.6}
.dl-rail>.dl-on{scale:1;opacity:1}
.m-swipe i{transition:width .3s cubic-bezier(.3,1.5,.5,1),background-color .3s}
@media (max-width:700px){.dl-neb i{filter:blur(40px)}.dl-neb s{display:none}.dl-neb b{width:80px}}
@media (prefers-reduced-motion:reduce){.gn [class*="dl-"],.gn [class*="dl-"] *,[data-scope] .btn-primary::after,[data-scope] .m-cta .btn-primary::after{animation:none !important;transition:none !important}[data-scope] .btn-primary::after,[data-scope] .m-cta .btn-primary::after{display:none}}

/* ---------- Glow and colour ---------- */
/* Each header has a wash of its own two colours behind the pattern, drifting slowly */
.pat{--ga:20%}
.gn:not(.dark) .pat{--ga:13%}
@media (prefers-color-scheme:dark){.gn:not(.light) .pat{--ga:20%}}
.pat-glow{position:absolute;inset:-25%;background:radial-gradient(34% 44% at var(--gx,72%) var(--gy,42%),color-mix(in srgb,var(--c1,#7c62ff) var(--ga),transparent),transparent 72%),radial-gradient(30% 40% at var(--gx2,22%) var(--gy2,74%),color-mix(in srgb,var(--c2,#3aa8c4) calc(var(--ga)*.75),transparent),transparent 72%);animation:pat-aura 22s ease-in-out infinite alternate}
@keyframes pat-aura{0%{transform:translate3d(-2%,1%,0) scale(1)}100%{transform:translate3d(3%,-2%,0) scale(1.08)}}
.pat-how{--c1:#7c62ff;--c2:#3aa8c4;--gx:50%;--gy:30%;--gx2:50%;--gy2:88%}
.pat-own{--c1:#2fb8a0;--c2:#7c62ff;--gx:68%;--gy:50%}
.pat-own.pat-ph{--gx:50%;--gy:74%;--gx2:20%;--gy2:20%}
.pat-orgs{--c1:#5b7cff;--c2:#d86bd0;--gx:50%;--gy:36%}
.pat-prog{--c1:#f0a04b;--c2:#7c62ff;--gx:74%;--gy:46%}
.pat-ment{--c1:#e86aa6;--c2:#f0cf73;--gx:66%;--gy:44%}
.pat-price{--c1:#e0b23c;--c2:#58c08a;--gx:58%;--gy:26%;--gx2:38%;--gy2:30%}
.pat .n.g{stroke-opacity:.8;filter:drop-shadow(0 0 4px var(--accent))}
.pat .a.mv:not(.l){opacity:.9;filter:drop-shadow(0 0 6px var(--accent))}
.pat .l.a.draw{stroke-opacity:.7;filter:drop-shadow(0 0 3px var(--accent))}
.pat-ment .l.a.draw{stroke:#e86aa6;filter:drop-shadow(0 0 3px #e86aa6)}
.pat-orgs i{background:#b08cff;box-shadow:0 0 10px 2px color-mix(in srgb,#b08cff 60%,transparent)}
.pat-orgs i:nth-child(3n){background:#e88bd8;box-shadow:0 0 10px 2px color-mix(in srgb,#e88bd8 60%,transparent)}
.pat .c.top{fill:#e0b23c;opacity:.6;filter:drop-shadow(0 0 5px #e0b23c)}
@keyframes pat-coin{0%,55%,100%{opacity:.6;transform:none}70%,85%{opacity:0;transform:translateY(-6px)}}
/* On your own: rings that start at the profile picture and travel outwards */
.has-sky:has(.h-rings){overflow:clip}
.has-sky>.h-orbit{z-index:0}
.h-rings{position:absolute;inset:0;pointer-events:none;z-index:-1}
.h-rings i,.h-rings b{position:absolute;left:50%;top:50%;translate:-50% -50%;aspect-ratio:1;border-radius:50%}
.h-rings i{border:1px solid color-mix(in srgb,var(--ink-3) 22%,transparent)}
.h-rings i:nth-child(1){width:128%}.h-rings i:nth-child(2){width:170%;opacity:.8}.h-rings i:nth-child(3){width:222%;opacity:.62}.h-rings i:nth-child(4){width:286%;opacity:.44}.h-rings i:nth-child(5){width:364%;opacity:.28}
.h-rings b{width:34%;border:1px solid #2fb8a0;box-shadow:0 0 14px 1px color-mix(in srgb,#2fb8a0 40%,transparent);opacity:0;animation:h-ripple 10s cubic-bezier(.2,.6,.3,1) infinite}
.h-rings b+b{animation-delay:-5s}
@keyframes h-ripple{0%{width:34%;opacity:0}8%{opacity:.6}100%{width:364%;opacity:0}}
.h-orbit .me{box-shadow:0 0 0 2px var(--accent),0 0 34px 4px color-mix(in srgb,#2fb8a0 40%,transparent),var(--shadow-lg)}
/* The underline under each headline runs violet to teal to gold */
.gn .uline,.gn .h-night .uline{background-image:linear-gradient(90deg,var(--accent),#3aa8c4 55%,#e0b23c)}
.gn [data-scope] .eyebrow,.gn [data-scope] .m-eye{background:linear-gradient(90deg,var(--accent),#3aa8c4);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;width:fit-content}
/* Buttons, cards and level bars carry a little light of their own */
.gn .btn-primary{box-shadow:0 8px 26px -12px color-mix(in srgb,var(--accent) 80%,transparent)}
.gn .btn-primary:hover{box-shadow:0 10px 34px -8px color-mix(in srgb,var(--accent) 85%,transparent),0 0 0 1px color-mix(in srgb,var(--accent) 50%,transparent)}
.v-lvl i.you{box-shadow:0 0 8px color-mix(in srgb,var(--accent) 55%,transparent)}
@media (hover:hover){
  [data-scope] .v-tile:hover,[data-scope] .v-mini:hover,[data-scope] .plan:hover{border-color:color-mix(in srgb,var(--accent) 55%,var(--line));box-shadow:0 18px 44px -20px color-mix(in srgb,var(--accent) 70%,transparent),var(--shadow-lg)}
  [data-scope] .v-tile:hover .v-ico,[data-scope] .v-mini:hover .v-ico,[data-scope] .v-fact:hover .v-ico{filter:drop-shadow(0 0 8px currentColor)}
}
.gn.dark [data-scope] .h1{text-shadow:0 0 44px color-mix(in srgb,var(--accent) 28%,transparent)}
@media (prefers-color-scheme:dark){.gn:not(.light) [data-scope] .h1{text-shadow:0 0 44px color-mix(in srgb,var(--accent) 28%,transparent)}}
.v-const .v-badge{animation:v-badgeglow 5s ease-in-out infinite}
@keyframes v-badgeglow{0%,100%{filter:drop-shadow(0 0 18px rgba(167,150,255,.45))}50%{filter:drop-shadow(0 0 34px rgba(167,150,255,.85)) drop-shadow(0 0 10px rgba(240,207,115,.35))}}
/* Night sections: a third, warmer cloud */
.dl-neb em{position:absolute;left:34%;top:30%;width:40%;aspect-ratio:1;border-radius:50%;filter:blur(70px);background:radial-gradient(circle,rgba(232,106,166,.2),transparent 70%);animation:dl-nebula 60s ease-in-out -30s infinite alternate}
.dl-neb i:nth-child(1){background:radial-gradient(circle,rgba(124,98,255,.4),transparent 70%)}
.dl-neb i:nth-child(2){background:radial-gradient(circle,rgba(58,168,196,.28),transparent 70%)}
@media (prefers-reduced-motion:reduce){.pat-glow,.h-rings b,.v-const .v-badge{animation:none !important}.h-rings b{display:none}}