:root{ --blue:#4FC3F7; --blue-soft:#6FB0E0; --ink:#050505; --gold:#D4A856; --gold-pale:#F3E4A8; --gold-mid:#A1853E; --grey:#9C968D; --grey-dim:#9C968D; --line:#1c1c1c; --cream:#FFEBB9; /* sampled from the product screens */ --app-gold:#CDAA63; --app-gold-soft:#C9B97D; --app-gold-deep:#8B7445; --app-bubble:#0F0F0F; --app-text:#DBDBDB; --app-green:#6E9475; --app-red:#8F4E4C; --app-lv:#CABA7E; --kmark:url("/assets/img/28130e46f4c9.png?v=2"); --display:'Cormorant Garamond',Georgia,serif; --body:'Poppins',system-ui,sans-serif; --util:'Space Grotesk',ui-monospace,monospace; } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{background:var(--ink);color:var(--grey);font-family:var(--body);font-size:16px;line-height:1.65;overflow-x:hidden} body::before{content:'';position:fixed;inset:0;z-index:91;pointer-events:none;opacity:.05; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");} #kx-desat{position:fixed;inset:0;z-index:60;pointer-events:none; background:rgba(4,4,4,.32); backdrop-filter:grayscale(1) brightness(.64) contrast(1.14); -webkit-backdrop-filter:grayscale(1) brightness(.64) contrast(1.14); -webkit-mask-image:radial-gradient(circle var(--r,300px) at var(--mx,50%) var(--my,40%),transparent 0,transparent 48%,#000 100%); mask-image:radial-gradient(circle var(--r,300px) at var(--mx,50%) var(--my,40%),transparent 0,transparent 48%,#000 100%);} @keyframes kxPulseRing{0%,100%{opacity:.6}50%{opacity:1}} @property --kxa{syntax:'';inherits:false;initial-value:0deg} .kx-trace{position:relative;isolation:isolate} .kx-trace::before{content:"";position:absolute;inset:-2.5px;border-radius:inherit;padding:2.5px; background:conic-gradient(from var(--kxa),transparent 0 58%,#F3E4A8 72%,#FFFFFF 80%,#D4A856 90%,transparent 100%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask-composite:exclude;pointer-events:none;animation:kxTrace 26s linear infinite} @keyframes kxTrace{to{--kxa:360deg}} @keyframes kxOrbGlow{0%,100%{box-shadow:0 0 16px 2px rgba(255,182,88,.45)}50%{box-shadow:0 0 34px 8px rgba(255,196,104,.85)}} .wrap{max-width:1180px;margin:0 auto;padding:0 28px} .eyebrow{font-family:var(--util);font-size:11px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-mid)} .display{font-family:var(--display);font-weight:600;color:var(--cream);font-size:clamp(36px,6vw,72px);line-height:1.03;letter-spacing:-.01em} .display em{font-style:italic;font-weight:500;color:var(--gold)} .lede{max-width:52ch;font-size:17px;line-height:1.72;color:#b9b6b0} .hero{position:relative;z-index:2;padding:128px 0 30px;text-align:center} .hero .eyebrow{display:block;margin-bottom:22px} .hero .lede{margin:24px auto 0;max-width:58ch} .mission{max-width:64ch;margin:30px auto 0;font-size:15.5px;line-height:1.75;color:#B9B4AB; padding-top:26px;border-top:1px solid rgba(212,168,86,.22);position:relative} .mission::before{content:'';position:absolute;left:50%;top:-1px;transform:translateX(-50%); width:64px;height:1px;background:var(--gold)} @media(max-width:640px){.mission{font-size:14.5px;margin-top:24px;padding-top:22px}} .scroll-cue{margin-top:44px;font-family:var(--util);font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--grey-dim)} .scroll-cue i{display:block;width:1px;height:46px;margin:12px auto 0;background:linear-gradient(180deg,var(--gold),transparent);animation:cue 2.4s ease-in-out infinite} @keyframes cue{0%,100%{opacity:.25;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}} /* ---------------- stage ---------------- */ .show{position:relative;height:1700vh;z-index:62} .pin{position:sticky;top:0;height:100vh;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:40px;padding:0 40px} .side{position:relative;z-index:62;height:400px} .beat{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center; opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .7s cubic-bezier(.16,1,.3,1);pointer-events:none} .beat.on{opacity:1;transform:none} .beat::before{content:'';position:absolute;left:-9%;right:-9%;top:-8%;bottom:-8%;z-index:-1; background:radial-gradient(ellipse at center,rgba(5,5,5,.94) 0%,rgba(5,5,5,.82) 45%,rgba(5,5,5,0) 78%)} .beat .step{display:flex;align-items:baseline;gap:12px;margin-bottom:20px} .beat .step b{font-family:var(--display);font-weight:600;font-size:46px;line-height:.9;color:var(--gold); text-shadow:0 0 34px rgba(212,168,86,.45)} .beat .step span{font-family:var(--util);font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:#C6B892} .beat h2{font-family:var(--display);font-weight:600;font-size:clamp(32px,3.8vw,50px);line-height:1.06;color:#FFF8E8;margin-bottom:18px; text-shadow:0 2px 30px rgba(0,0,0,.9)} .beat h2 em{font-style:italic;color:var(--gold-pale)} .beat p{font-size:17.5px;line-height:1.72;color:#E3DED2;max-width:40ch;text-shadow:0 2px 20px rgba(0,0,0,.95)} .beat p b{color:#FFF3D6;font-weight:600} .beat p .w{color:#E3DED2;transition:color .35s ease,text-shadow .35s ease;text-shadow:0 2px 20px rgba(0,0,0,.95)} .beat p .w.lit{color:#FFFDF6;text-shadow:0 2px 20px rgba(0,0,0,.95),0 0 22px rgba(255,240,205,.22)} .beat p b .w{color:#FFEFC9} .beat p b .w.lit{color:#FFF8E2;text-shadow:0 2px 20px rgba(0,0,0,.95),0 0 26px rgba(255,225,150,.32)} .side.right .beat{text-align:right;align-items:flex-end} .side.right .beat .step{flex-direction:row-reverse} /* ---------------- the phone ---------------- */ .phone{ position:relative;z-index:61;height:min(80vh,820px);width:-moz-fit-content;width:fit-content; max-width:80vw;flex:none; border-radius:52px;padding:12px; background:linear-gradient(155deg,#4a4a52 0%,#17171b 20%,#0e0e11 58%,#2e2e35 100%); box-shadow: 0 60px 130px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.09), 0 0 90px 10px rgba(212,168,86,.20), 0 0 200px 40px rgba(212,168,86,.10), inset 0 0 0 1px rgba(0,0,0,.9); } .phone::before{content:'';position:absolute;left:50%;top:50%;width:180%;height:150%;transform:translate(-50%,-50%); z-index:-1;pointer-events:none;border-radius:50%; background:radial-gradient(ellipse at center,rgba(231,182,70,.22) 0%,rgba(212,168,86,.10) 34%,rgba(212,168,86,0) 68%)} .screen{position:relative;height:100%;width:auto;aspect-ratio:1179/2556;border-radius:38px;overflow:hidden;background:#000;isolation:isolate} .island{position:absolute;left:50%;top:9px;transform:translateX(-50%);width:33%;height:22px;border-radius:999px;background:#000;z-index:9} .statusbar{position:absolute;left:0;right:0;top:0;height:38px;display:flex;align-items:center;justify-content:space-between; padding:0 18px;z-index:8;font-family:var(--body);font-size:11px;font-weight:600;color:#fff} .statusbar .bars{display:flex;gap:3px;align-items:flex-end} .statusbar .bars i{display:block;width:2.5px;background:#fff;border-radius:1px} .homebar{position:absolute;left:50%;bottom:7px;transform:translateX(-50%);width:36%;height:4px;border-radius:99px;background:#5a5a5a;z-index:9} .view{position:absolute;inset:0;padding-top:38px;opacity:0;transition:opacity .5s ease;pointer-events:none} .view.on{opacity:1;pointer-events:auto} .view.raw{padding-top:0} .view.raw img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;display:block} .screen.bare .island,.screen.bare .statusbar,.screen.bare .homebar{opacity:0;transition:opacity .3s} /* system header */ .apphead{position:relative;height:52px;display:flex;align-items:center;justify-content:space-between;padding:0 14px} .apphead .burger{display:flex;flex-direction:column;gap:4px;width:19px} .apphead .burger i{height:1.6px;background:var(--app-gold);border-radius:2px;display:block} .apphead .mark{height:15px;opacity:.95} .apphead .av{position:relative;width:38px;height:38px;border-radius:11px;border:1px solid rgba(205,170,99,.55); background:radial-gradient(circle at 50% 35%,#3a2c10,#0b0905);display:grid;place-items:center;font-size:17px} .apphead .lv{position:absolute;left:50%;bottom:-8px;transform:translateX(-50%);background:var(--app-lv);color:#1a1400; font-family:var(--util);font-size:8px;font-weight:700;letter-spacing:.04em;padding:2px 6px;border-radius:99px;white-space:nowrap} .streak{position:relative;height:16px;margin-bottom:2px} .streak::before{content:'';position:absolute;left:12%;right:12%;top:50%;height:1px; background:linear-gradient(90deg,transparent,rgba(197,183,129,.55),transparent)} .streak::after{content:'';position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:99px; background:#F3E4A8;box-shadow:0 0 14px 4px rgba(243,228,168,.75)} /* chat view */ .chathead{display:flex;align-items:center;gap:11px;padding:6px 16px 14px;border-bottom:1px solid #121212} .chathead .kav{position:relative;width:44px;height:44px;border-radius:99px;flex:none; background:radial-gradient(circle at 40% 32%,#2b2109,#0a0805);border:1px solid rgba(205,170,99,.55); box-shadow:0 0 22px rgba(201,185,125,.32)} .chathead .kav::after{content:'';position:absolute;inset:0;background:var(--kmark) center/50% no-repeat; filter:drop-shadow(0 0 6px rgba(243,228,168,.55))} .chathead .t{flex:1} .chathead .t b{display:block;color:#fff;font-size:16.5px;font-weight:600;line-height:1.2} .chathead .t span{font-size:12px;color:#9C968D} .dots{display:flex;gap:5px} .dots i{width:5px;height:5px;border-radius:99px;background:#2e2e2e;display:block} .dots i.a{background:var(--app-gold)} .thread{position:absolute;left:0;right:0;top:120px;bottom:74px;overflow:hidden;padding:14px 16px;display:flex;flex-direction:column;gap:11px} .msg{max-width:84%;opacity:0;transform:translateY(10px);transition:opacity .45s ease,transform .5s cubic-bezier(.16,1,.3,1)} .msg.on{opacity:1;transform:none} .msg .who{display:flex;align-items:center;gap:7px;margin-bottom:6px;font-family:var(--util);font-size:9.5px;letter-spacing:.2em;color:var(--app-gold-deep)} .msg .who i{width:17px;height:17px;border-radius:99px;display:block;flex:none;border:1px solid rgba(205,170,99,.5); background:radial-gradient(circle at 40% 32%,#2b2109,#0a0805) , var(--kmark); background-size:cover,58%;background-position:center,center;background-repeat:no-repeat,no-repeat} .msg .b{background:#131313;color:#EDEDED;border-radius:14px;padding:13px 15px;font-size:13.5px;line-height:1.52; border:1px solid #232323;box-shadow:0 6px 18px rgba(0,0,0,.5)} .msg.me{align-self:flex-end;max-width:70%} .msg.me .b{background:linear-gradient(180deg,#D8C689,#B79A56);color:#160f02;font-weight:600;border:none} .inbar{position:absolute;left:0;right:0;bottom:0;height:74px;display:flex;align-items:center;gap:9px;padding:0 14px 12px; border-top:1px solid #121212;background:#000} .inbar .mic{width:34px;height:34px;border-radius:99px;border:1px solid rgba(205,170,99,.45);display:grid;place-items:center;flex:none} .inbar .mic svg{width:13px;height:13px;fill:var(--app-gold)} .inbar .fld{flex:1;height:40px;border:1px solid rgba(205,170,99,.28);border-radius:99px;display:flex;align-items:center; padding:0 13px;color:#9C968D;font-size:13px;background:#070707} .inbar input{flex:1;background:none;border:none;outline:none;color:#e6e6e6;font-family:var(--body);font-size:16px} .inbar input::placeholder{color:#9C968D} .inbar .send{width:34px;height:34px;border-radius:99px;flex:none;border:none;cursor:pointer; background:radial-gradient(circle at 45% 35%,#8B7445,#3a301c);display:grid;place-items:center} .inbar .send svg{width:13px;height:13px;fill:#F3E4A8} /* map view */ .mapwrap{position:absolute;left:0;right:0;top:70px;bottom:74px;overflow:hidden} .mapwrap svg{position:absolute;left:0;top:0;width:100%;height:100%} .orb-l{font-family:var(--util);font-size:6.4px;letter-spacing:.22em;fill:var(--app-gold)} .orb-n{font-family:var(--display);font-weight:600;fill:var(--app-gold)} .node{opacity:0;transition:opacity .6s ease} .node.on{opacity:1} /* the chat sheet that rises over the map */ .sheet{position:absolute;left:0;right:0;bottom:0;height:80%;background:#050505;border-top:1px solid #1a1a1a; border-radius:16px 16px 0 0;transform:translateY(102%);transition:transform .55s cubic-bezier(.16,1,.3,1);z-index:6; display:flex;flex-direction:column;padding-bottom:74px} .sheet.up{transform:none} .sheet .grab{width:38px;height:3.5px;border-radius:99px;background:#2e2e2e;margin:9px auto 4px;flex:none} .sheet .shead{display:flex;align-items:center;justify-content:space-between;padding:4px 14px 10px;flex:none} .sheet .shead .kx{display:flex;align-items:center;gap:7px;font-family:var(--util);font-size:9.5px;letter-spacing:.2em;color:var(--app-gold-deep)} .sheet .shead .kx i{width:16px;height:16px;border-radius:99px;flex:none;border:1px solid rgba(205,170,99,.5); background:radial-gradient(circle at 40% 32%,#2b2109,#0a0805) , var(--kmark); background-size:cover,58%;background-position:center,center;background-repeat:no-repeat,no-repeat} .sheet .shead button{font-family:var(--body);font-size:10.5px;color:var(--app-gold);background:#0d0d0d;border:1px solid #232323; border-radius:8px;padding:4px 9px;cursor:pointer} .sheet .body{flex:1;overflow:hidden;padding:0 13px 10px;display:flex;flex-direction:column;gap:9px} .sheet .body::-webkit-scrollbar{width:0} .card{border:1px solid rgba(205,170,99,.35);border-radius:11px;padding:11px 12px;background:linear-gradient(180deg,#0d0b06,#070706)} .card .t{font-family:var(--util);font-size:8.5px;letter-spacing:.2em;color:var(--app-gold-deep);margin-bottom:5px} .card .n{color:#F7EFD5;font-size:13.5px;font-weight:600;line-height:1.35} .card .m{color:#9C968D;font-size:10.5px;margin-top:4px} .card .w{margin-top:9px;padding-left:9px;border-left:2px solid rgba(205,170,99,.55);color:#B8AC8C;font-size:10.5px;line-height:1.45} .card .w b{color:var(--app-gold);font-weight:600} .card.hold{border-color:#2a2a2a;background:linear-gradient(180deg,#0a0a0a,#070707)} .card.hold .t{color:#9C968D}.card.hold .n{color:#9a9a9a} .quick{display:flex;gap:7px;padding:0 13px 10px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;flex:none} .quick::-webkit-scrollbar{display:none} .quick button{flex:none;white-space:nowrap} .quick button{font-family:var(--body);font-size:10.5px;color:#c9c4b8;background:#0c0c0c;border:1px solid #1f1f1f; border-radius:99px;padding:7px 11px;cursor:pointer;transition:border-color .3s,color .3s} .quick button:hover{border-color:var(--app-gold);color:#F3E4A8} /* ---- the card system ---- */ .kc{display:flex;align-items:flex-start;gap:10px; border:1px solid rgba(201,167,97,.45);border-radius:12px;background:#0A0A0A;padding:9px 11px; box-shadow:0 0 16px rgba(201,167,97,.16); opacity:0;transform:translateY(6px);transition:opacity .4s ease,transform .45s cubic-bezier(.16,1,.3,1)} .kc.shown{opacity:1;transform:none} .kc-ico{width:30px;height:30px;border-radius:8px;flex:none;display:grid;place-items:center;font-size:15px; background:#1D1C17;border:1px solid #3B3627} .kc-pill{font-size:8.5px;font-weight:700;letter-spacing:.1em;color:#C9A761;background:#3D321E;border-radius:5px; padding:4px 7px;flex:none;text-transform:uppercase} .kc-t{min-width:0;flex:1} .kc-name{color:#FFFFFF;font-size:13px;font-weight:600;line-height:1.3} .kc-line{display:block;color:#FFFFFF;font-size:12px;font-weight:400;line-height:1.45;margin-top:3px;opacity:.86} /* gold step card, used inside a milestone */ .kcs{border:1px solid rgba(201,167,97,.55);border-radius:14px;background:#0F0F0F;overflow:hidden; box-shadow:0 0 26px rgba(201,167,97,.26)} .kcs-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px} .kcs-head b{color:#fff;font-size:13.5px;font-weight:700} .kcs-chev{width:19px;height:19px;border-radius:99px;border:1px solid rgba(201,167,97,.6);color:#C9A761; display:grid;place-items:center;font-size:10px;flex:none} .kcs-body{padding:0 12px 12px} .kcs-body p{color:#D2D2D2;font-size:11.5px;line-height:1.55} .kc-start{display:block;margin:11px auto 0;background:linear-gradient(180deg,#C7A157,#AF8031);color:#1a1400; border:none;border-radius:99px;padding:9px 24px;font-weight:700;font-size:12px;cursor:pointer;font-family:var(--body); box-shadow:0 4px 16px rgba(175,128,49,.45)} /* ---- milestone sheet on the map ---- */ .msheet{position:absolute;left:0;right:0;bottom:0;height:57%;background:#050505;border-top:1px solid #1a1a1a; border-radius:16px 16px 0 0;transform:translateY(104%);transition:transform .7s cubic-bezier(.16,1,.3,1);z-index:5; padding:0 12px 78px} .msheet.up{transform:none} .msheet .grab{width:38px;height:3.5px;border-radius:99px;background:#2e2e2e;margin:9px auto 8px} .msheet .mt{text-align:center;color:#fff;font-size:14px;font-weight:700;margin-bottom:12px} .mlist{margin-top:12px} .mlist div{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 2px;color:#cfcfcf;font-size:11.5px} .mlist i{width:19px;height:19px;border-radius:99px;border:1px solid rgba(201,167,97,.6);color:#C9A761; display:grid;place-items:center;font-style:normal;font-size:10px;flex:none} /* ---- community screen ---- */ .tabs{display:flex;gap:6px;padding:2px 12px 10px} .tabs span{flex:1;text-align:center;font-family:var(--util);font-size:9px;letter-spacing:.14em;text-transform:uppercase; color:#9C968D;border:1px solid #1e1a14;border-radius:8px;padding:7px 0} .tabs span.a{color:#1a1400;background:var(--app-gold);border-color:var(--app-gold);font-weight:700} .feed{position:absolute;left:0;right:0;top:112px;bottom:74px;overflow:hidden;padding:0 12px;display:flex;flex-direction:column;gap:9px} .fpost{border:1px solid #1c1a15;border-radius:13px;background:#0b0b0b;padding:11px} .fpost .r{display:flex;align-items:center;gap:8px;margin-bottom:7px} .fpost .av{width:24px;height:24px;border-radius:99px;flex:none;background:radial-gradient(circle at 40% 32%,#3a2c10,#0b0905);border:1px solid rgba(205,170,99,.5)} .fpost .r b{color:#EFE7D3;font-size:11.5px;font-weight:700} .fpost .r span{margin-left:auto;font-family:var(--util);font-size:8.5px;letter-spacing:.12em;color:#9C968D} .fpost p{color:#C9C4B8;font-size:11.5px;line-height:1.5} .fpost .re{display:flex;gap:12px;margin-top:8px;font-family:var(--util);font-size:9px;letter-spacing:.1em;color:#9C968D} .fpost .re i{font-style:normal;color:var(--app-gold)} .liveroom{display:flex;align-items:center;gap:9px;border:1px solid rgba(201,167,97,.4);border-radius:13px;padding:10px 11px; background:linear-gradient(180deg,#0d0b06,#070706)} .liveroom .dot{width:7px;height:7px;border-radius:99px;background:#6E9475;box-shadow:0 0 10px #6E9475;flex:none} .liveroom b{color:#F0E6C8;font-size:11.5px;font-weight:700} .liveroom span{margin-left:auto;font-family:var(--util);font-size:9px;letter-spacing:.12em;color:#9C968D} /* ---- advisors screen ---- */ .advs{position:absolute;left:0;right:0;top:96px;bottom:74px;overflow:hidden;padding:0 12px;display:flex;flex-direction:column;gap:9px} .advtitle{text-align:center;color:#fff;font-size:14px;font-weight:700;margin:2px 0 6px} /* try-it section */ .tryit{position:relative;z-index:2;padding:110px 0 40px;display:grid;grid-template-columns:1fr auto;gap:60px;align-items:center} .tryit .copy .eyebrow{display:block;margin-bottom:18px} .tryit h2{font-family:var(--display);font-weight:600;font-size:clamp(30px,4vw,52px);line-height:1.06;color:var(--cream);margin-bottom:18px} .tryit h2 em{font-style:italic;color:var(--gold)} .tryit .note{margin-top:22px;font-family:var(--util);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey-dim)} @media(max-width:980px){ .pin{grid-template-columns:1fr;grid-template-rows:auto 1fr;gap:14px;padding:14px 18px 18px;align-items:stretch} .side{grid-column:1;grid-row:1;position:relative;height:190px} .side.right{grid-column:1;grid-row:1} .beat{position:absolute;inset:0;text-align:center;align-items:center;justify-content:flex-start} .beat::before{left:-6%;right:-6%} .beat .step{justify-content:center;margin-bottom:10px} .beat .step b{font-size:30px} .beat h2{font-size:24px;margin-bottom:8px} .beat p{max-width:44ch;font-size:14.5px} .phone{grid-column:1;grid-row:2;justify-self:center;height:100%;width:-moz-fit-content;width:fit-content;max-width:92vw;max-height:64vh;min-height:340px} } /* ---------------- the loop ---------------- */ .loop{position:relative;z-index:62;padding:118px 0 40px} .loop-grid{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:clamp(36px,5vw,80px);align-items:center} .loop-stage{position:relative} .loop-stage svg{width:100%;height:auto;display:block;overflow:visible} .ring{fill:none;stroke:rgba(212,168,86,.10);stroke-width:1;stroke-dasharray:2 8} .chord{stroke:rgba(212,168,86,.16);stroke-width:1.2;transition:stroke .4s,stroke-width .4s} .chord.lit{stroke:rgba(243,228,168,.75);stroke-width:2} .loop-path{margin-top:16px;text-align:center;min-height:1.6em;font-family:var(--util);font-size:11px; letter-spacing:.16em;text-transform:uppercase;color:var(--gold-pale)} .st{cursor:pointer} .st circle{fill:#0a0806;stroke:rgba(212,168,86,.5);stroke-width:1.6;transition:fill .45s,stroke .45s,filter .45s} .st text{font-family:var(--util);font-size:15px;font-weight:700;fill:var(--gold);text-anchor:middle;transition:fill .45s} .st .lbl{font-size:10.5px;font-weight:500;letter-spacing:.16em;fill:#9a948a;text-transform:uppercase} .st.on circle{fill:#3a2c10;stroke:var(--gold-pale);filter:drop-shadow(0 0 18px rgba(212,168,86,.75))} .st.on text{fill:#FFF6DC} .st.on .lbl{fill:var(--gold-pale)} .pulse{fill:#FFF3D6;filter:drop-shadow(0 0 12px rgba(255,224,140,.95))} .loop-centre{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;pointer-events:none} .loop-centre span{display:block;font-family:var(--util);font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--grey-dim)} .loop-centre b{display:block;font-family:var(--display);font-weight:600;font-size:clamp(44px,5.6vw,64px);line-height:1;color:#FFF8E8;margin:4px 0 6px} .loop-centre em{display:block;font-family:var(--util);font-style:normal;font-size:11px;letter-spacing:.14em; color:var(--blue);text-shadow:0 0 18px rgba(79,195,247,.55)} .loop-go{display:block;margin:22px auto 0;font-family:var(--body);font-size:14px;font-weight:700;cursor:pointer; color:#1a1400;background:linear-gradient(180deg,#D7C582,#A1853E);border:none;border-radius:999px;padding:13px 28px; box-shadow:0 10px 34px rgba(231,182,70,.32);transition:transform .3s} .loop-go:hover{transform:translateY(-2px)} .loop-go.on{background:none;color:var(--gold-pale);border:1px solid rgba(212,168,86,.5);box-shadow:none} .loop-go:focus-visible{outline:2px solid var(--gold);outline-offset:3px} .loop-copy .eyebrow{display:block;margin-bottom:18px} .loop-copy h2{font-family:var(--display);font-weight:600;font-size:clamp(30px,4.2vw,52px);line-height:1.06;color:#FFF8E8;margin-bottom:16px} .loop-copy h2 em{font-style:italic;color:var(--gold)} .loop-copy .lede{margin:0 0 30px;color:#E3DED2;max-width:46ch} .loop-list{list-style:none;margin:0 0 30px;padding:0;border-top:1px solid var(--line)} .loop-list li{display:grid;grid-template-columns:26px 1fr;gap:14px;align-items:baseline;padding:15px 0; border-bottom:1px solid var(--line);cursor:pointer;transition:opacity .4s} .loop-list i{font-style:normal;font-family:var(--util);font-size:11px;color:var(--grey-dim);transition:color .4s} .loop-list b{display:block;font-family:var(--body);font-size:17px;font-weight:600;color:#CFC9BE;transition:color .4s} .loop-list span{display:block;font-size:14.5px;line-height:1.5;color:#9C968D;margin-top:3px;transition:color .4s} .loop-list li.on i{color:var(--gold)} .loop-list li.on b{color:#FFF6DC} .loop-list li.on span{color:#D5CFC4} .loop-out{display:flex;gap:10px;flex-wrap:wrap} .loop-out span{font-family:var(--util);font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:#C9A761;background:#3D321E;border-radius:6px;padding:8px 13px} @media(max-width:900px){ .loop-grid{grid-template-columns:1fr;gap:30px} .loop-stage{max-width:400px;margin:0 auto;order:2} .loop-copy{order:1} } /* ---------------- membership ---------------- */ .mem{position:relative;z-index:62;padding:120px 0 40px;text-align:center} .mem .eyebrow{display:block;margin-bottom:20px} .mem h1,.mem h2{font-family:var(--display);font-weight:600;font-size:clamp(30px,4.4vw,56px);line-height:1.05;color:#FFF8E8;margin-bottom:16px} .mem h1 em,.mem h2 em{font-style:italic;color:var(--gold)} .mem .lede{margin:0 auto 34px;color:#E3DED2} /* the recommendation */ .rec{max-width:660px;margin:0 auto 40px;padding:22px 26px;border:1px solid rgba(79,195,247,.35);border-radius:14px; background:linear-gradient(180deg,rgba(79,195,247,.07),rgba(79,195,247,.02));text-align:left; display:flex;gap:16px;align-items:flex-start} .rec i{width:34px;height:34px;border-radius:99px;flex:none;background:radial-gradient(circle at 40% 32%,#0d3346,#061620); border:1px solid rgba(79,195,247,.5);display:grid;place-items:center;font-style:normal;font-size:15px;color:var(--blue)} .rec .t{flex:1;min-width:0} .rec b{display:block;font-family:var(--util);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--blue);margin-bottom:7px} .rec p{font-size:15.5px;line-height:1.6;color:#DCD7CC;margin:0} .rec p strong{color:#FFF6DC;font-weight:600} /* billing */ .bill{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:4px;margin-bottom:34px;gap:4px} .bill button{font-family:var(--util);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;cursor:pointer; background:none;border:none;color:var(--grey);padding:11px 20px;border-radius:999px;transition:background .3s,color .3s} .bill button[aria-pressed="true"]{background:var(--gold);color:#1a1400;font-weight:700} .bill button:focus-visible{outline:2px solid var(--gold);outline-offset:3px} /* tiers */ .tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:start;text-align:left} .tier{position:relative;z-index:1;border:1px solid var(--line);border-radius:16px;padding:28px 24px 26px;background:rgba(10,10,12,.7); transition:border-color .4s,box-shadow .4s,transform .4s} .tier:hover,.tier.tipopen{transform:translateY(-3px)} .tier:hover,.tier.tipopen,.tier:focus-within{z-index:20} .tier.best{border-color:rgba(212,168,86,.6);box-shadow:0 0 50px rgba(212,168,86,.16);background:rgba(16,13,7,.8)} .tier .flag{position:absolute;top:-11px;left:24px;font-family:var(--util);font-size:9px;font-weight:700;letter-spacing:.18em; text-transform:uppercase;color:#1a1400;background:var(--gold);border-radius:999px;padding:5px 12px} .tier .nm{font-family:var(--util);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-mid);margin-bottom:14px} .tier .pr{display:flex;align-items:baseline;gap:7px;margin-bottom:6px} .tier .pr b{font-family:var(--display);font-weight:600;font-size:clamp(38px,4.4vw,52px);line-height:1;color:#FFF8E8} .tier .pr span{font-family:var(--util);font-size:11px;letter-spacing:.12em;color:var(--grey)} .tier .sub{font-family:var(--util);font-size:10.5px;letter-spacing:.1em;color:var(--gold-mid);min-height:1.4em;margin-bottom:20px} .tier ul{list-style:none;margin:0 0 24px;padding:0;border-top:1px solid var(--line)} .tier li{display:grid;grid-template-columns:16px 1fr;gap:10px;align-items:start;padding:11px 0;border-bottom:1px solid var(--line); font-size:14.5px;line-height:1.5;color:#CFC9BE} .tier li i{font-style:normal;color:var(--gold);font-size:11px;line-height:1.7} .tier li.head{grid-template-columns:1fr;color:#9C968D;font-family:var(--util);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase} .tier li b{color:#FFF6DC;font-weight:600} .tier .go{display:block;width:100%;text-align:center;font-family:var(--body);font-size:15px;font-weight:700; border-radius:999px;padding:14px;text-decoration:none;cursor:pointer;border:1px solid rgba(212,168,86,.5); color:var(--gold-pale);background:rgba(212,168,86,.06);transition:background .3s,color .3s,transform .3s} .tier .go:hover{transform:translateY(-2px)} .tier.best .go{background:linear-gradient(180deg,#D7C582,#A1853E);color:#1a1400;border:none;box-shadow:0 10px 34px rgba(231,182,70,.32)} .freeline{max-width:640px;margin:30px auto 0;font-size:15px;line-height:1.65;color:#B9B4AB} .freeline b{color:var(--gold-pale);font-weight:600} .refline{max-width:640px;margin:16px auto 0;font-family:var(--util);font-size:11px;letter-spacing:.1em;line-height:1.7;color:var(--grey-dim)} .seeall{margin:34px auto 0;font-family:var(--util);font-size:11px;letter-spacing:.18em;text-transform:uppercase; background:none;border:1px solid rgba(212,168,86,.4);border-radius:999px;padding:12px 22px;color:var(--gold);cursor:pointer; transition:background .3s,color .3s} .seeall:hover{background:var(--gold);color:#1a1400} .grid{display:none;margin:34px auto 0;text-align:left;overflow-x:auto} .grid.on{display:block;animation:bin .5s ease} .grid table{width:100%;border-collapse:collapse;min-width:640px} .grid th,.grid td{padding:12px 10px;border-bottom:1px solid var(--line);font-size:13.5px;color:#BDB8AF;vertical-align:top} .grid th{font-family:var(--util);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-mid);text-align:left;white-space:nowrap} .grid td:first-child{color:#EFEADE;width:38%} .grid tr.hi td{background:rgba(212,168,86,.05)} .grid .y{color:var(--gold-pale)} .grid .n{color:#9C968D} @media(max-width:900px){ .tiers{grid-template-columns:1fr;gap:14px} .rec{flex-direction:column;gap:12px} } /* info tips on the tiers */ .ihold{position:relative;display:inline-block;vertical-align:baseline;margin-left:6px} .info{width:16px;height:16px;border-radius:99px;border:1px solid rgba(212,168,86,.6);background:rgba(212,168,86,.08); color:var(--gold);font-family:var(--util);font-size:9.5px;font-weight:700;line-height:1;cursor:pointer;padding:0; display:inline-grid;place-items:center;transition:background .3s,color .3s} .info:hover{background:var(--gold);color:#1a1400} .info:focus-visible{outline:2px solid var(--gold);outline-offset:2px} .tip{position:absolute;left:-10px;bottom:calc(100% + 10px);z-index:30;width:min(258px,72vw); background:#0c0b09;border:1px solid rgba(212,168,86,.45);border-radius:11px;padding:12px 13px; box-shadow:0 18px 44px rgba(0,0,0,.8);font-family:var(--body);font-size:12.5px;line-height:1.55;color:#D5CFC4; opacity:0;transform:translateY(6px);pointer-events:none;transition:opacity .25s ease,transform .25s ease;text-align:left} .tip b{color:var(--gold-pale);font-weight:600} .tip::after{content:'';position:absolute;left:14px;bottom:-6px;width:10px;height:10px;background:#0c0b09; border-right:1px solid rgba(212,168,86,.45);border-bottom:1px solid rgba(212,168,86,.45);transform:rotate(45deg)} .tier[data-tier="premium"] .tip{left:auto;right:-10px} .tier[data-tier="premium"] .tip::after{left:auto;right:14px} .ihold.on .tip{opacity:1;transform:none;pointer-events:auto} .ihold:hover .tip{opacity:1;transform:none;pointer-events:auto} @media(hover:none){.ihold:hover .tip{opacity:0;transform:translateY(6px);pointer-events:none} .tier[data-tier="premium"] .tip{left:auto;right:-10px} .tier[data-tier="premium"] .tip::after{left:auto;right:14px} .ihold.on .tip{opacity:1;transform:none;pointer-events:auto}} /* ---------------- barriers ---------------- */ .barriers{position:relative;z-index:62;padding:112px 0 30px;text-align:center} .barriers .eyebrow{display:block;margin-bottom:20px} .barriers h2{font-family:var(--display);font-weight:600;font-size:clamp(32px,4.6vw,60px);line-height:1.04;color:#FFF8E8;margin-bottom:16px} .barriers h2 em{font-style:italic;color:var(--gold)} .barriers .lede{margin:0 auto 40px;color:#E3DED2} .barriers .lede .hl{color:var(--c,#F3E4A8);font-weight:600; text-shadow:0 0 20px var(--c,#F3E4A8),0 2px 14px rgba(0,0,0,.7)} .orbwrap{position:relative;margin-bottom:50px} .orbwrap::before,.orbwrap::after{content:'';position:absolute;top:0;bottom:12px;width:70px;z-index:3;pointer-events:none} .orbwrap::before{left:0;background:linear-gradient(90deg,var(--ink),rgba(5,5,5,0))} .orbwrap::after{right:0;background:linear-gradient(270deg,var(--ink),rgba(5,5,5,0))} .orbs{display:flex;align-items:flex-start;gap:clamp(18px,3vw,40px);overflow-x:auto;scroll-snap-type:x mandatory; padding:10px 46px 12px;scrollbar-width:none;-ms-overflow-style:none} .orbs::-webkit-scrollbar{display:none} .cnav{position:absolute;top:calc(50% - 14px);transform:translateY(-50%);z-index:4;width:38px;height:38px;border-radius:99px; background:rgba(12,12,13,.85);border:1px solid rgba(212,168,86,.4);color:var(--gold);cursor:pointer; font-size:17px;line-height:1;display:grid;place-items:center; -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);transition:background .3s,color .3s,border-color .3s} .cnav:hover{background:var(--gold);color:#1a1400;border-color:var(--gold)} .cnav:focus-visible{outline:2px solid var(--gold);outline-offset:3px} .cnav.prev{left:-4px}.cnav.next{right:-4px} .ccount{font-family:var(--util);font-size:10px;letter-spacing:.24em;color:var(--grey-dim);margin-top:6px} .ccount b{color:var(--gold-pale);font-weight:500} .borb{background:none;border:none;padding:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:13px; flex:none;scroll-snap-align:center;width:clamp(88px,9vw,116px);position:relative} .borb .disc{position:relative;width:clamp(76px,8.4vw,104px);aspect-ratio:1;border-radius:50%; background:radial-gradient(circle at 38% 30%,#1b1026,#0a0710 70%); border:1px solid rgba(138,110,154,.38); box-shadow:inset 0 0 30px rgba(138,110,154,.22),0 0 24px rgba(138,110,154,.10); transition:transform .5s cubic-bezier(.16,1,.3,1),border-color .5s,box-shadow .5s,background .5s} .borb .disc::before,.borb .disc::after{content:'';position:absolute;top:42%;width:11%;height:5.5%;border-radius:99px; background:#C77BE0;box-shadow:0 0 10px #A44BC4;opacity:.85;transition:opacity .5s,background .5s,box-shadow .5s,border .5s} .borb .disc::before{left:27%;transform:rotate(-11deg)} .borb .disc::after{right:27%;transform:rotate(11deg)} .borb .mouth{position:absolute;left:50%;top:55%;transform:translateX(-50%);width:32%;height:17%; border-bottom:2px solid #F7E3AC;border-radius:0 0 99px 99px;opacity:0;transition:opacity .35s ease .12s} .borb .nm{font-family:var(--util);font-size:9px;letter-spacing:.18em;text-align:center;line-height:1.4; text-transform:uppercase;color:#AE92BF;transition:color .45s; min-height:2.8em;display:flex;align-items:flex-start;justify-content:center} .borb:hover .disc{transform:translateY(-4px)} .borb:focus-visible{outline:2px solid var(--gold);outline-offset:6px;border-radius:14px} .borb.top::before{content:'';position:absolute;top:-9px;left:50%;transform:translateX(-50%); width:5px;height:5px;border-radius:99px;background:var(--gold);box-shadow:0 0 10px rgba(212,168,86,.9)} .borb[aria-pressed="true"] .disc{ background:radial-gradient(circle at 38% 30%,#4a3a14,#0d0a05 72%); border-color:rgba(212,168,86,.85); box-shadow:inset 0 0 34px rgba(212,168,86,.30),0 0 46px rgba(212,168,86,.42); animation:bhappy .62s cubic-bezier(.34,1.56,.64,1) both} .borb[aria-pressed="true"] .disc::before,.borb[aria-pressed="true"] .disc::after{ width:17%;height:9%;top:37%;background:none;border-radius:99px 99px 0 0; border-top:2px solid #F7E3AC;box-shadow:none;opacity:1;transform:none} .borb[aria-pressed="true"] .disc::before{left:23%} .borb[aria-pressed="true"] .disc::after{right:23%} .borb[aria-pressed="true"] .mouth{opacity:1} .borb[aria-pressed="true"] .nm{color:var(--gold-pale)} @keyframes bhappy{0%{transform:translateY(0) scale(1)}45%{transform:translateY(-11px) scale(1.07)}100%{transform:translateY(-4px) scale(1)}} .bpanel{max-width:760px;margin:0 auto;min-height:320px;display:flex;flex-direction:column;align-items:center;text-align:center} .bfade{animation:bin .5s cubic-bezier(.16,1,.3,1)} @keyframes bin{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} .bpanel .hint{font-family:var(--display);font-style:italic;font-weight:500;font-size:clamp(20px,2.4vw,26px); color:#9C968D;margin:8px auto 0;max-width:28ch} .bpanel .q{font-family:var(--display);font-style:italic;font-weight:600;font-size:clamp(26px,3.3vw,40px); line-height:1.14;color:#EFEADE;margin:0 auto 26px;max-width:24ch;text-wrap:balance} .bpanel .arrow{width:1px;height:30px;background:linear-gradient(180deg,rgba(212,168,86,0),var(--gold));margin:0 auto 24px;flex:none} .bpanel .pills{display:flex;gap:7px;justify-content:center;margin:0 auto 18px;flex-wrap:wrap} .bpanel .pills span{font-family:var(--util);font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:#C9A761;background:#3D321E;border-radius:6px;padding:5px 10px} .bpanel h4{font-family:var(--body);font-size:clamp(19px,2.1vw,25px);font-weight:600;line-height:1.34;color:#FFF3D6; margin:0 auto 14px;max-width:30ch;text-wrap:balance} .bpanel p{font-size:15.5px;line-height:1.72;color:#CFC9BE;max-width:52ch;margin:0 auto;text-wrap:pretty} .bcta{display:inline-flex;align-items:center;gap:9px;margin-top:26px;text-decoration:none; font-family:var(--body);font-size:14px;font-weight:600;color:var(--gold-pale); border:1px solid rgba(212,168,86,.55);border-radius:999px;padding:12px 22px; background:rgba(212,168,86,.06);transition:background .3s,color .3s,transform .3s,box-shadow .3s} .bcta i{font-style:normal;transition:transform .3s} .bcta:hover{background:var(--gold);color:#1a1400;transform:translateY(-2px);box-shadow:0 10px 30px rgba(212,168,86,.3)} .bcta:hover i{transform:translateX(3px)} .bcta:focus-visible{outline:2px solid var(--gold);outline-offset:3px} @media(max-width:620px){ .orbs{gap:16px;padding:10px 34px 12px} .borb{width:84px} .borb .nm{font-size:8px;letter-spacing:.12em} .cnav{width:32px;height:32px;font-size:15px} .bpanel{min-height:330px} .bpanel .q{max-width:20ch} .bpanel p{max-width:38ch} } .after{position:relative;z-index:2;padding:104px 0 30px} .after .eyebrow{display:block;margin-bottom:20px} .after h2{font-family:var(--display);font-weight:600;font-size:clamp(28px,3.8vw,44px);color:var(--cream);line-height:1.14;margin-bottom:16px} .after .lede{margin:0 0 44px} .rows{border-top:1px solid var(--line)} .row{display:grid;grid-template-columns:180px 1fr;gap:26px;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--line)} .row .name{font-family:var(--display);font-size:26px;font-weight:600;color:var(--gold-pale)} .row .desc{font-size:14.5px;line-height:1.64;color:#9C968D;max-width:60ch} @media(max-width:680px){.row{grid-template-columns:1fr;gap:8px}} .close{position:relative;z-index:2;padding:100px 0 150px;text-align:center} .close .lede{margin:24px auto 36px} .cta{display:inline-block;font-family:var(--body);font-size:17px;font-weight:700;color:#1a1400; background:linear-gradient(180deg,#D7C582,#A1853E);border-radius:999px;padding:17px 38px;text-decoration:none; box-shadow:0 10px 44px rgba(231,182,70,.35);transition:transform .35s} .cta:hover{transform:translateY(-2px)} .fineprint{margin-top:18px;font-family:var(--util);font-size:11px;letter-spacing:.14em;color:var(--grey-dim)} /* ---------------- mobile pass ---------------- */ @media(max-width:760px){ .wrap{padding:0 18px} /* nav: keep the wordmark and the CTA on one line at 320px */ #kx-nav{padding:14px 16px !important} #kx-nav img{height:22px !important} #kx-nav .kx-mag{font-size:12px !important;padding:10px 16px !important} .hero{padding-top:104px} .hero .display{font-size:clamp(30px,8.4vw,44px)} .mission{font-size:14px;line-height:1.7} /* membership: the recommended tier leads, since there is no middle when stacked */ .mem{padding:80px 0 30px} .mem h1,.mem h2{font-size:clamp(26px,7.6vw,38px)} .rec{padding:18px;gap:12px;margin-bottom:28px} .rec p{font-size:14.5px} .bill{margin-bottom:26px} .bill button{padding:12px 16px;font-size:10px} .tiers{gap:12px} .tier{padding:24px 18px 22px} .tier.best{order:-1} .tier li{font-size:14px} .freeline,.refline{padding:0 2px} .grid table{min-width:560px} .grid th,.grid td{padding:10px 8px;font-size:12.5px} .grid td:first-child{width:44%} .grid::after{content:'Swipe the table sideways';display:block;margin-top:10px; font-family:var(--util);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--grey-dim)} /* loop */ .loop{padding:80px 0 30px} .loop-copy h2{font-size:clamp(26px,7.4vw,38px)} .loop-list b{font-size:16px} .loop-list span{font-size:14px} .loop-out span{font-size:9.5px;padding:7px 10px} /* barriers */ .barriers{padding:80px 0 20px} .barriers h2{font-size:clamp(26px,8vw,40px)} .barriers .lede{font-size:15.5px} } /* short screens: the pinned phone and its copy have to share the height */ @media(max-width:980px) and (max-height:760px){ .side{height:168px !important} .beat h2{font-size:21px} .beat p{font-size:13.5px;line-height:1.6} .beat .step b{font-size:26px} .phone{max-height:56vh !important} } @media(max-width:420px){ .side{height:200px} .beat p{font-size:14px} .tier .pr b{font-size:38px} .loop-centre b{font-size:40px} } /* the recommendation asks for attention */ @keyframes recPulse{ 0%,100%{border-color:rgba(79,195,247,.32);box-shadow:0 0 0 rgba(79,195,247,0)} 50%{border-color:rgba(79,195,247,.8);box-shadow:0 0 38px rgba(79,195,247,.22)} } @keyframes recDot{ 0%,100%{box-shadow:0 0 0 0 rgba(79,195,247,.45)} 70%{box-shadow:0 0 0 14px rgba(79,195,247,0)} } .rec{animation:recPulse 3.4s ease-in-out infinite} .rec i{animation:recDot 3.4s ease-in-out infinite} @media(prefers-reduced-motion:reduce){.rec,.rec i{animation:none}} /* ---------------- effects ---------------- */ /* cards arrive as you reach them */ .tier{opacity:0;transform:translateY(18px)} .tiers.lit .tier{opacity:1;transform:none; transition:opacity .6s ease,transform .7s cubic-bezier(.16,1,.3,1),border-color .4s,box-shadow .4s} .tiers.lit .tier:nth-child(1){transition-delay:.04s} .tiers.lit .tier:nth-child(2){transition-delay:.14s} .tiers.lit .tier:nth-child(3){transition-delay:.24s} .tiers.lit .tier:hover,.tiers.lit .tier.tipopen{transform:translateY(-3px)} /* light lands where you point */ .tier::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0; opacity:0;transition:opacity .45s ease; background:radial-gradient(420px circle at var(--px,50%) var(--py,0%),rgba(212,168,86,.10),transparent 62%)} .tier:hover::after{opacity:1} .tier > *{position:relative;z-index:1} /* the recommended card breathes */ @keyframes memBreathe{ 0%,100%{box-shadow:0 0 50px rgba(212,168,86,.16)} 50%{box-shadow:0 0 74px rgba(212,168,86,.30)} } .tiers.lit .tier.best{animation:memBreathe 5.2s ease-in-out infinite} /* the price rolls rather than snapping */ .pr b{font-variant-numeric:tabular-nums} .pr.rolling b{color:var(--gold-pale)} .sub{transition:opacity .3s ease} .sub.swap{opacity:0} /* the table wakes up under the cursor */ .grid tbody tr{transition:background .25s ease} .grid tbody tr:hover{background:rgba(212,168,86,.07)} .grid tbody tr:hover td:first-child{color:#FFF6DC} /* the billing toggle slides */ .bill{position:relative} .bill button{position:relative;z-index:1} /* eight tray items would run off a phone screen, so let them wrap */ #kx-orbtray{flex-wrap:wrap;justify-content:flex-end;max-width:min(66vw,720px)} /* a quiet cue so the menu is findable without a tap */ #kx-orbcue{position:fixed;right:clamp(24px,3vw,48px);bottom:calc(clamp(24px,3vw,48px) - 4px);z-index:151; font-family:var(--util,'Space Grotesk',monospace);font-size:9px;letter-spacing:.26em;text-transform:uppercase; color:rgba(212,168,86,.75);pointer-events:none;text-align:center;width:170px; opacity:0;transition:opacity .6s ease} #kx-orbcue.on{opacity:1} @media(max-width:560px){#kx-orbcue{width:130px;font-size:8px}} /* ---------------- orb on small screens ---------------- */ @media(max-width:760px){ /* the 170px orb is a desktop object; scale it down and stack the tray above it */ #kx-orbnav{height:auto !important;right:14px !important;bottom:14px !important;justify-content:flex-end !important; flex-direction:column !important;align-items:flex-end !important} #kx-orbnav > div:last-child{width:92px !important;height:92px !important} #kx-orbmaster{width:92px !important;height:92px !important} #kx-orbtray{flex-direction:column !important;align-items:flex-end !important; margin:0 6px 10px 0 !important;max-width:none !important;gap:8px !important} #kx-orbtray .kx-tray-item{padding:11px 15px !important;font-size:11px !important} #kx-orbcue{width:92px;right:14px;bottom:10px;font-size:8px;letter-spacing:.18em} } @media(max-width:420px){ #kx-orbnav > div:last-child,#kx-orbmaster{width:78px !important;height:78px !important} #kx-orbcue{width:78px} } @media(max-width:760px) and (orientation:landscape){ #kx-orbnav > div:last-child,#kx-orbmaster{width:70px !important;height:70px !important} #kx-orbcue{display:none} } @media(prefers-reduced-motion:reduce){ .tier{opacity:1;transform:none} .tiers.lit .tier.best{animation:none} .tier::after{display:none} } /* ---------------- chrome that gets out of the way ---------------- */ #kx-nav{pointer-events:none} #kx-nav > *{pointer-events:auto} #kx-nav .wm{transition:opacity .45s ease,transform .5s cubic-bezier(.16,1,.3,1)} #kx-nav .kx-mag{transition:transform .25s cubic-bezier(.16,1,.3,1),padding .35s ease,font-size .35s ease,box-shadow .35s} body.chrome-away #kx-nav{background:none;border-bottom-color:transparent} body.chrome-away #kx-nav .wm{opacity:0;transform:translateY(-8px);pointer-events:none} body.chrome-away #kx-nav .kx-mag{padding:9px 18px;font-size:12.5px} body.chrome-here #kx-nav{background:linear-gradient(180deg,rgba(5,5,5,.92),rgba(5,5,5,0)); -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)} /* the tour rail */ .rail{position:fixed;left:clamp(10px,1.6vw,22px);top:50%;transform:translateY(-50%);z-index:70; display:flex;flex-direction:column;gap:11px;opacity:0;pointer-events:none;transition:opacity .5s ease} .rail.on{opacity:1;pointer-events:auto} .rail button{position:relative;width:26px;height:14px;border:none;background:none;padding:0;cursor:pointer; display:grid;place-items:center} .rail i{display:block;width:7px;height:7px;border-radius:99px;background:#332f28; transition:background .35s,transform .35s,box-shadow .35s} .rail button:hover i{background:var(--gold-mid);transform:scale(1.2)} .rail button[aria-current] i{background:var(--gold);transform:scale(1.35);box-shadow:0 0 14px rgba(212,168,86,.85)} .rail button.done i{background:#6b5a2e} .rail span{position:absolute;left:26px;white-space:nowrap;font-family:var(--util);font-size:9.5px;letter-spacing:.18em; text-transform:uppercase;color:var(--gold-pale);background:rgba(8,8,8,.82);border:1px solid rgba(212,168,86,.3); border-radius:999px;padding:6px 11px;opacity:0;transform:translateX(-6px);pointer-events:none; transition:opacity .3s ease,transform .35s ease;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)} .rail button:hover span,.rail button:focus-visible span{opacity:1;transform:none} .rail button:focus-visible i{outline:2px solid var(--gold);outline-offset:4px} @media(max-width:760px){ .rail{left:8px;gap:8px} .rail button{width:18px;height:12px} .rail i{width:6px;height:6px} .rail span{display:none} } @media(prefers-reduced-motion:reduce){#kx-nav .wm,.rail{transition:none}} @media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important}} .mem{padding-top:140px} @media(max-width:760px){.mem{padding-top:110px}} /* ---------------- accessibility ---------------- */ .skip-link{position:absolute;left:-9999px;top:0;z-index:400;background:#D4A856;color:#1a1400; font-family:'Poppins',system-ui,sans-serif;font-weight:700;font-size:14px;padding:14px 22px;border-radius:0 0 12px 0;text-decoration:none} .skip-link:focus{left:0} .rail button{width:34px;height:24px} .info{position:relative} .info::before{content:'';position:absolute;left:50%;top:50%;width:26px;height:26px;transform:translate(-50%,-50%)} .bill button{min-height:44px} .tier .go,.bcta,.seeall,.loop-go{min-height:44px;display:inline-flex;align-items:center;justify-content:center} .cnav{min-height:38px} a:focus-visible,button:focus-visible,input:focus-visible,[tabindex]:focus-visible{ outline:3px solid #F3E4A8;outline-offset:3px} /* ---------------- reduced motion, complete ---------------- */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; animation-delay:0ms !important; transition-duration:.001ms !important; transition-delay:0ms !important; scroll-behavior:auto !important; } html{scroll-behavior:auto !important} /* anything that only exists as motion simply stops */ #kx-cursor,#kx-ring,.kx-hc-inner::before,.rail,.membloom{animation:none !important} .kx-hc-inner{transition:none !important} .tier,.tiers.lit .tier{opacity:1 !important;transform:none !important} .beat{transition:none !important} } .res{position:relative;z-index:62;padding:132px 0 80px} .res .eyebrow{display:block;margin-bottom:18px;text-align:center} .res h1{font-family:var(--display);font-weight:600;font-size:clamp(30px,4.4vw,54px);line-height:1.06;color:#FFF8E8;text-align:center;margin-bottom:14px} .res h1 em{font-style:italic;color:var(--gold)} .res .lede{margin:0 auto 34px;color:#E3DED2;text-align:center;max-width:54ch} .filters{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0 auto 34px;max-width:860px} .filters button{font-family:var(--util);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;cursor:pointer; background:none;border:1px solid rgba(212,168,86,.32);color:#B9B4AB;border-radius:999px;padding:0 16px;min-height:44px; transition:background .3s,color .3s,border-color .3s} .filters button:hover{border-color:var(--gold);color:#F3E4A8} .filters button[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:#1a1400;font-weight:700} .filters button:focus-visible{outline:3px solid var(--gold-pale);outline-offset:3px} .feat{max-width:900px;margin:0 auto 40px;border:1px solid rgba(212,168,86,.4);border-radius:18px;padding:30px; background:radial-gradient(120% 90% at 50% 0%,rgba(26,20,8,.6) 0%,rgba(10,10,12,.75) 60%,rgba(6,6,7,.85) 100%); box-shadow:0 0 46px rgba(212,168,86,.1)} .feat .tag,.card .tag{display:inline-block;font-family:var(--util);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase; color:#C9A761;background:#3D321E;border-radius:6px;padding:5px 10px;margin-bottom:12px} .feat h2{font-family:var(--body);font-size:clamp(20px,2.6vw,28px);font-weight:700;line-height:1.28;margin:0 0 12px} .feat h2 a{color:#FFF6DC;text-decoration:none} .feat h2 a:hover{color:var(--gold-pale)} .feat p{color:#CFC9BE;font-size:15.5px;line-height:1.7;margin:0 0 16px} .grid2{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;max-width:1180px;margin:0 auto} .card{border:1px solid var(--line);border-radius:14px;padding:22px;background:rgba(10,10,12,.6); transition:border-color .3s,transform .3s,background .3s;display:flex;flex-direction:column} .card:hover{border-color:rgba(212,168,86,.5);transform:translateY(-2px);background:rgba(14,13,10,.75)} .card h3{font-family:var(--body);font-size:17px;font-weight:600;line-height:1.35;margin:0 0 8px} .card h3 a{color:#EFEADE;text-decoration:none} .card:hover h3 a{color:#FFF6DC} .card p{color:#B9B4AB;font-size:14px;line-height:1.6;margin:0 0 14px} .card .go{margin-top:auto;font-family:var(--util);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold); text-decoration:none;min-height:44px;display:inline-flex;align-items:center} .card .go:hover{color:#F3E4A8} .card[hidden]{display:none} .count{text-align:center;font-family:var(--util);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase; color:var(--grey-dim);margin:26px 0 0} .hubs{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;max-width:900px;margin:56px auto 0} .hub{border:1px solid rgba(212,168,86,.4);border-radius:16px;padding:26px;text-decoration:none;display:block; background:linear-gradient(180deg,rgba(26,20,8,.5),rgba(8,8,9,.7));transition:transform .3s,border-color .3s} .hub:hover{transform:translateY(-3px);border-color:var(--gold)} .hub b{display:block;font-family:var(--display);font-size:26px;color:#FFF8E8;margin-bottom:4px} .hub span{font-family:var(--util);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-mid)} @media(max-width:760px){.res{padding:104px 0 60px}.feat{padding:22px}.grid2{grid-template-columns:1fr}} /* ---------------- movement and color ---------------- */ .card[data-cat="Advisors"]{--c:#6FB0E0} .card[data-cat="Advisors"] .tag{color:#6FB0E0;background:color-mix(in srgb,#6FB0E0 14%,#0b0b0c);border:1px solid color-mix(in srgb,#6FB0E0 34%,transparent)} .card[data-cat="Community"]{--c:#A6E0B4} .card[data-cat="Community"] .tag{color:#A6E0B4;background:color-mix(in srgb,#A6E0B4 14%,#0b0b0c);border:1px solid color-mix(in srgb,#A6E0B4 34%,transparent)} .card[data-cat="Education"]{--c:#B18BE4} .card[data-cat="Education"] .tag{color:#B18BE4;background:color-mix(in srgb,#B18BE4 14%,#0b0b0c);border:1px solid color-mix(in srgb,#B18BE4 34%,transparent)} .card[data-cat="Funding"]{--c:#FFE7A6} .card[data-cat="Funding"] .tag{color:#FFE7A6;background:color-mix(in srgb,#FFE7A6 14%,#0b0b0c);border:1px solid color-mix(in srgb,#FFE7A6 34%,transparent)} .card[data-cat="Guides"]{--c:#5FB6A6} .card[data-cat="Guides"] .tag{color:#5FB6A6;background:color-mix(in srgb,#5FB6A6 14%,#0b0b0c);border:1px solid color-mix(in srgb,#5FB6A6 34%,transparent)} .card[data-cat="Members"]{--c:#D2B4F0} .card[data-cat="Members"] .tag{color:#D2B4F0;background:color-mix(in srgb,#D2B4F0 14%,#0b0b0c);border:1px solid color-mix(in srgb,#D2B4F0 34%,transparent)} .card[data-cat="Mentorship"]{--c:#84D0C6} .card[data-cat="Mentorship"] .tag{color:#84D0C6;background:color-mix(in srgb,#84D0C6 14%,#0b0b0c);border:1px solid color-mix(in srgb,#84D0C6 34%,transparent)} .card[data-cat="Mindset"]{--c:#FF6367} .card[data-cat="Mindset"] .tag{color:#FF6367;background:color-mix(in srgb,#FF6367 14%,#0b0b0c);border:1px solid color-mix(in srgb,#FF6367 34%,transparent)} .card[data-cat="News"]{--c:#DCE2E8} .card[data-cat="News"] .tag{color:#DCE2E8;background:color-mix(in srgb,#DCE2E8 14%,#0b0b0c);border:1px solid color-mix(in srgb,#DCE2E8 34%,transparent)} .card[data-cat="Templates"]{--c:#F2933F} .card[data-cat="Templates"] .tag{color:#F2933F;background:color-mix(in srgb,#F2933F 14%,#0b0b0c);border:1px solid color-mix(in srgb,#F2933F 34%,transparent)} .card[data-cat="Tools"]{--c:#F0855A} .card[data-cat="Tools"] .tag{color:#F0855A;background:color-mix(in srgb,#F0855A 14%,#0b0b0c);border:1px solid color-mix(in srgb,#F0855A 34%,transparent)} .feat{--c:#F3E4A8} /* cards arrive as you reach them */ .card{opacity:0;transform:translateY(14px)} .grid2.lit .card{opacity:1;transform:none; transition:opacity .5s ease,transform .6s cubic-bezier(.16,1,.3,1),border-color .3s,background .3s} .grid2.lit .card:hover{transform:translateY(-3px)} /* light lands where you point, in the topic's own color */ .card{position:relative;overflow:hidden} .card::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s ease; background:radial-gradient(320px circle at var(--px,50%) var(--py,0%), color-mix(in srgb,var(--c,#D4A856) 16%,transparent),transparent 62%)} .card:hover::after{opacity:1} .card > *{position:relative;z-index:1} .card:hover{border-color:color-mix(in srgb,var(--c,#D4A856) 55%,transparent)} .card:hover h3 a{color:#fff} /* a hairline of the topic color down the left edge */ .card::before{content:'';position:absolute;left:0;top:18px;bottom:18px;width:2px;border-radius:2px; background:var(--c,#D4A856);opacity:.28;transition:opacity .35s,top .35s,bottom .35s} .card:hover::before{opacity:.9;top:8px;bottom:8px} /* the featured piece breathes, like Core on the membership page */ @keyframes resBreathe{0%,100%{box-shadow:0 0 44px rgba(212,168,86,.10)}50%{box-shadow:0 0 76px rgba(212,168,86,.26)}} .feat{animation:resBreathe 5.4s ease-in-out infinite} /* filtering fades rather than snapping */ .card{transition:opacity .35s ease,transform .4s cubic-bezier(.16,1,.3,1)} .card.going{opacity:0;transform:scale(.97) translateY(6px)} /* the filter chips carry their topic color when chosen */ .filters button[data-cat="Advisors"][aria-pressed="true"]{background:#6FB0E0;border-color:#6FB0E0;color:#0b0b0c} .filters button[data-cat="Community"][aria-pressed="true"]{background:#A6E0B4;border-color:#A6E0B4;color:#0b0b0c} .filters button[data-cat="Education"][aria-pressed="true"]{background:#B18BE4;border-color:#B18BE4;color:#0b0b0c} .filters button[data-cat="Funding"][aria-pressed="true"]{background:#FFE7A6;border-color:#FFE7A6;color:#0b0b0c} .filters button[data-cat="Guides"][aria-pressed="true"]{background:#5FB6A6;border-color:#5FB6A6;color:#0b0b0c} .filters button[data-cat="Members"][aria-pressed="true"]{background:#D2B4F0;border-color:#D2B4F0;color:#0b0b0c} .filters button[data-cat="Mentorship"][aria-pressed="true"]{background:#84D0C6;border-color:#84D0C6;color:#0b0b0c} .filters button[data-cat="Mindset"][aria-pressed="true"]{background:#FF6367;border-color:#FF6367;color:#0b0b0c} .filters button[data-cat="News"][aria-pressed="true"]{background:#DCE2E8;border-color:#DCE2E8;color:#0b0b0c} .filters button[data-cat="Templates"][aria-pressed="true"]{background:#F2933F;border-color:#F2933F;color:#0b0b0c} .filters button[data-cat="Tools"][aria-pressed="true"]{background:#F0855A;border-color:#F0855A;color:#0b0b0c} @media (prefers-reduced-motion: reduce){ .card{opacity:1 !important;transform:none !important} .feat{animation:none} .card::after{display:none} } /* ---------------- more of it ---------------- */ /* the chips wear their topic color all the time, not only when chosen */ .filters button[data-cat="Advisors"]{--c:#6FB0E0;color:#6FB0E0;border-color:color-mix(in srgb,#6FB0E0 40%,transparent)} .filters button[data-cat="Advisors"]:not([aria-pressed="true"]):hover{border-color:#6FB0E0;background:color-mix(in srgb,#6FB0E0 12%,transparent)} .filters button[data-cat="Community"]{--c:#A6E0B4;color:#A6E0B4;border-color:color-mix(in srgb,#A6E0B4 40%,transparent)} .filters button[data-cat="Community"]:not([aria-pressed="true"]):hover{border-color:#A6E0B4;background:color-mix(in srgb,#A6E0B4 12%,transparent)} .filters button[data-cat="Education"]{--c:#B18BE4;color:#B18BE4;border-color:color-mix(in srgb,#B18BE4 40%,transparent)} .filters button[data-cat="Education"]:not([aria-pressed="true"]):hover{border-color:#B18BE4;background:color-mix(in srgb,#B18BE4 12%,transparent)} .filters button[data-cat="Funding"]{--c:#FFE7A6;color:#FFE7A6;border-color:color-mix(in srgb,#FFE7A6 40%,transparent)} .filters button[data-cat="Funding"]:not([aria-pressed="true"]):hover{border-color:#FFE7A6;background:color-mix(in srgb,#FFE7A6 12%,transparent)} .filters button[data-cat="Guides"]{--c:#5FB6A6;color:#5FB6A6;border-color:color-mix(in srgb,#5FB6A6 40%,transparent)} .filters button[data-cat="Guides"]:not([aria-pressed="true"]):hover{border-color:#5FB6A6;background:color-mix(in srgb,#5FB6A6 12%,transparent)} .filters button[data-cat="Members"]{--c:#D2B4F0;color:#D2B4F0;border-color:color-mix(in srgb,#D2B4F0 40%,transparent)} .filters button[data-cat="Members"]:not([aria-pressed="true"]):hover{border-color:#D2B4F0;background:color-mix(in srgb,#D2B4F0 12%,transparent)} .filters button[data-cat="Mentorship"]{--c:#84D0C6;color:#84D0C6;border-color:color-mix(in srgb,#84D0C6 40%,transparent)} .filters button[data-cat="Mentorship"]:not([aria-pressed="true"]):hover{border-color:#84D0C6;background:color-mix(in srgb,#84D0C6 12%,transparent)} .filters button[data-cat="Mindset"]{--c:#FF6367;color:#FF6367;border-color:color-mix(in srgb,#FF6367 40%,transparent)} .filters button[data-cat="Mindset"]:not([aria-pressed="true"]):hover{border-color:#FF6367;background:color-mix(in srgb,#FF6367 12%,transparent)} .filters button[data-cat="News"]{--c:#DCE2E8;color:#DCE2E8;border-color:color-mix(in srgb,#DCE2E8 40%,transparent)} .filters button[data-cat="News"]:not([aria-pressed="true"]):hover{border-color:#DCE2E8;background:color-mix(in srgb,#DCE2E8 12%,transparent)} .filters button[data-cat="Templates"]{--c:#F2933F;color:#F2933F;border-color:color-mix(in srgb,#F2933F 40%,transparent)} .filters button[data-cat="Templates"]:not([aria-pressed="true"]):hover{border-color:#F2933F;background:color-mix(in srgb,#F2933F 12%,transparent)} .filters button[data-cat="Tools"]{--c:#F0855A;color:#F0855A;border-color:color-mix(in srgb,#F0855A 40%,transparent)} .filters button[data-cat="Tools"]:not([aria-pressed="true"]):hover{border-color:#F0855A;background:color-mix(in srgb,#F0855A 12%,transparent)} .filters button[aria-pressed="true"]{box-shadow:0 6px 22px color-mix(in srgb,var(--c,#D4A856) 30%,transparent)} .filters button .n{font-size:9px;opacity:.65;margin-left:7px;letter-spacing:.08em} .filters button[aria-pressed="true"] .n{opacity:.75} /* the section takes on the color of whatever you are pointing at */ .res{isolation:isolate} #reswash{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .6s ease,background .6s ease; background:radial-gradient(900px circle at 50% 22%,color-mix(in srgb,var(--wash,#D4A856) 12%,transparent),transparent 70%)} #reswash.on{opacity:1} /* surprise me */ .surprise{display:block;margin:34px auto 0;font-family:var(--util);font-size:10.5px;letter-spacing:.18em; text-transform:uppercase;cursor:pointer;background:none;border:1px dashed rgba(212,168,86,.5);color:var(--gold); border-radius:999px;padding:0 22px;min-height:44px;transition:background .3s,color .3s,border-style .3s} .surprise:hover{background:var(--gold);color:#1a1400;border-style:solid} .surprise:focus-visible{outline:3px solid var(--gold-pale);outline-offset:3px} /* the picked card announces itself */ @keyframes resPick{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--c,#D4A856) 60%,transparent)} 70%{box-shadow:0 0 0 18px transparent}100%{box-shadow:0 0 0 0 transparent}} .card.picked{animation:resPick 1.1s ease-out 2;border-color:var(--c,#D4A856) !important} /* the featured piece gets the sheen too */ .feat{position:relative;overflow:hidden} .feat::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s; background:radial-gradient(420px circle at var(--px,50%) var(--py,0%),rgba(243,228,168,.13),transparent 62%)} .feat:hover::after{opacity:1} .feat > *{position:relative;z-index:1} @media (prefers-reduced-motion: reduce){ #reswash{display:none} .card.picked{animation:none} .feat::after{display:none} } /* ---------------- footer ---------------- */ .sk-footer{position:relative;z-index:80;pointer-events:auto;margin-top:90px;padding:0; border-top:1px solid rgba(212,168,86,.2); background:linear-gradient(180deg,rgba(5,5,5,.35),rgba(5,5,5,.94) 45%)} .sk-inner{max-width:1180px;margin:0 auto;padding:54px 28px 34px; display:grid;grid-template-columns:1.75fr 1fr 1fr 1fr 1fr;gap:28px} /* Pages whose footer still has three nav columns rather than four keep the original four track grid, so they fill the row instead of leaving a gap where the Guides and tools column would sit. */ .sk-inner:not(:has(> nav:nth-of-type(4))){ grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px} .sk-brand{max-width:34ch} .sk-word{font-family:'Cormorant Garamond',Georgia,serif;font-size:30px;font-weight:600;color:#FFF8E8;letter-spacing:.01em;margin-bottom:10px} .sk-brand p{color:#B9B4AB;font-family:'Poppins',system-ui,sans-serif;font-size:14px;line-height:1.65;margin:0 0 18px} .sk-col h2{font-family:'Space Grotesk',monospace;font-size:10px;letter-spacing:.22em;text-transform:uppercase; color:#9C968D;margin:6px 0 12px;font-weight:500} .sk-col ul{list-style:none;margin:0;padding:0} .sk-col li{margin:0} .sk-col a{font-family:'Poppins',system-ui,sans-serif;font-size:14.5px;color:#CFC9BE;text-decoration:none; min-height:40px;display:inline-flex;align-items:center;transition:color .3s} .sk-col a:hover,.sk-col a:focus-visible{color:#F3E4A8} .sk-col a:focus-visible,.sk-social a:focus-visible{outline:3px solid #F3E4A8;outline-offset:3px;border-radius:6px} .sk-social{display:flex;gap:4px;flex-wrap:wrap} .sk-social a{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:999px; color:#B9B4AB;transition:color .3s,background .3s} .sk-social a:hover,.sk-social a:focus-visible{color:#1a1400;background:#D4A856} .sk-social svg{width:18px;height:18px;fill:currentColor} .sk-base{max-width:1180px;margin:0 auto;padding:18px 28px 34px;border-top:1px solid rgba(212,168,86,.12); display:flex;flex-wrap:wrap;gap:8px 26px;align-items:center; font-family:'Space Grotesk',monospace;font-size:10.5px;letter-spacing:.14em;color:#9C968D} .sk-base .sk-tag{margin-left:auto;color:#D4A856} @media(max-width:900px){ .sk-inner{grid-template-columns:1fr 1fr;gap:30px;padding:40px 20px 26px} .sk-brand{grid-column:1 / -1;max-width:none} } @media(max-width:560px){ .sk-footer{margin-top:60px} .sk-inner{grid-template-columns:1fr;gap:26px} .sk-base{padding:16px 20px 30px;gap:6px 18px} .sk-base .sk-tag{margin-left:0} } /* Every page section here uses a 4-value padding, which silently wiped out the 28px gutters .wrap provides. section.wrap outranks the class, so it sticks. */ section.wrap{padding-left:28px;padding-right:28px} @media(max-width:760px){ section.wrap{padding-left:18px;padding-right:18px} } /* A block with max-width needs margin auto or it hugs the left edge while the heading above it stays centred. */ .res .lede,.faq .lede,.join .lede,.app .lede,.legal .intro{margin-left:auto;margin-right:auto} .res .lede,.faq .lede,.join .lede,.app .lede{text-align:center} /* the veil here dims brightness only, no greyscale, so the eleven category colours survive; the cursor restores full brightness */ #kx-desat{z-index:40 !important; background:none !important; -webkit-backdrop-filter:brightness(.80) !important; backdrop-filter:brightness(.80) !important; -webkit-mask-image:radial-gradient(circle var(--r,300px) at var(--mx,50%) var(--my,40%),transparent 0,transparent 46%,#000 100%); mask-image:radial-gradient(circle var(--r,300px) at var(--mx,50%) var(--my,40%),transparent 0,transparent 46%,#000 100%)} #kx-ring{z-index:39 !important} #kx-cursor{z-index:950 !important;opacity:0;transition:width .3s,height .3s,opacity .4s} section.wrap{position:relative;z-index:1 !important} .sk-base .sk-tm{flex:1 1 100%;order:9;color:#847F77;font-size:9.5px;letter-spacing:.1em; line-height:1.6;margin-top:10px;text-transform:none;font-family:'Poppins',system-ui,sans-serif} @media(max-width:560px){.sk-base .sk-tm{font-size:9px}} /* ---------------- support ---------------- */ #kx-support{position:fixed;inset:0;z-index:1200;display:none;align-items:center;justify-content:center; background:rgba(0,0,0,.82);padding:22px} #kx-support.on{display:flex} #kx-support .box{width:min(520px,94vw);max-height:92vh;overflow:auto;border:1px solid rgba(212,168,86,.45); border-radius:18px;padding:28px;background:linear-gradient(180deg,#111010,#08080a); box-shadow:0 30px 90px rgba(0,0,0,.7)} #kx-support h2{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;font-size:28px;color:#FFF8E8;margin:0 0 6px} #kx-support .sub{color:#B9B4AB;font-size:14.5px;line-height:1.6;margin:0 0 22px} #kx-support label{display:block;font-family:'Space Grotesk',monospace;font-size:10px;letter-spacing:.18em; text-transform:uppercase;color:#D4A856;margin:0 0 7px} #kx-support input,#kx-support textarea{width:100%;box-sizing:border-box;background:#0b0b0c; border:1px solid rgba(212,168,86,.3);border-radius:12px;color:#F0EADD;font-family:'Poppins',sans-serif; font-size:16px;padding:13px 15px;margin:0 0 18px;min-height:50px} #kx-support textarea{min-height:130px;resize:vertical;line-height:1.6} #kx-support input:focus,#kx-support textarea:focus{outline:none;border-color:#D4A856; box-shadow:0 0 0 3px rgba(212,168,86,.18)} #kx-support input:focus-visible,#kx-support textarea:focus-visible{outline:3px solid #F3E4A8;outline-offset:2px} #kx-support .row{display:flex;gap:10px;align-items:center;margin-top:4px} #kx-support .send{flex:1;min-height:50px;border:none;border-radius:999px;cursor:pointer; background:linear-gradient(180deg,#D7C582,#A1853E);color:#1a1400;font-weight:700;font-size:15.5px; font-family:'Poppins',sans-serif} #kx-support .cancel{min-height:50px;padding:0 20px;border-radius:999px;cursor:pointer;background:none; border:1px solid rgba(212,168,86,.4);color:#D4A856;font-family:'Poppins',sans-serif;font-size:14.5px} #kx-support .send:focus-visible,#kx-support .cancel:focus-visible{outline:3px solid #F3E4A8;outline-offset:3px} #kx-support .note{color:#847F77;font-size:12px;line-height:1.6;margin:16px 0 0} #kx-support .done{text-align:center;padding:14px 0} #kx-support .done b{display:block;font-family:'Cormorant Garamond',Georgia,serif;font-size:26px;color:#FFF8E8;margin-bottom:8px} #kx-support .done p{color:#B9B4AB;font-size:15px;line-height:1.7;margin:0} /* WCAG 2.5.8 wants 44px; footer links were 40 and .cnav 38 */ .sk-col a{min-height:44px !important} .cnav{min-height:44px !important} .sk-social a{width:44px !important;height:44px !important} /* ---------------- mobile hardening ---------------- */ @media(max-width:760px){ html,body{overflow-x:hidden;max-width:100%} img,svg,video,iframe,canvas{max-width:100%;height:auto} /* gradient text goes solid, so nothing can vanish */ .kx-gold-text{background:none !important;color:#F3E4A8 !important; -webkit-text-fill-color:#F3E4A8 !important;animation:none !important} /* long urls and slugs must wrap rather than push the page sideways */ p,li,td,th,dd,dt,h1,h2,h3,h4,summary,a{overflow-wrap:anywhere;word-break:normal} /* wide tables scroll inside their own box */ table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%} } /* calculators — own namespace, nothing here matches a theme script selector */ /* an author display rule outranks the browser rule for [hidden] */ .calcs [hidden]{display:none !important} .calcs .cbackrow{display:flex;justify-content:center;margin:0 0 22px} .calcs .cback{display:inline-flex;align-items:center;gap:8px;min-height:44px;text-decoration:none; font-family:var(--util);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase; color:var(--grey);transition:color .25s} .calcs .cback:hover{color:var(--gold-pale)} .calcs .cback svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2; stroke-linecap:round;stroke-linejoin:round} /* jump chips: same metrics as the blog index filter chips */ .calcs .cjumps{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0 auto 34px;max-width:860px} .calcs .cjump{font-family:var(--util);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase; cursor:pointer;background:none;border:1px solid rgba(212,168,86,.32);color:#B9B4AB; border-radius:999px;padding:0 16px;min-height:44px; transition:background .3s,color .3s,border-color .3s} .calcs .cjump:hover{border-color:var(--gold);color:#F3E4A8} .calcs .cjump:focus-visible{outline:3px solid var(--gold-pale);outline-offset:3px} .calcs .cjump[data-c="#F0855A"]{--c:#F0855A;color:#F0855A;border-color:color-mix(in srgb,#F0855A 40%,transparent)} .calcs .cjump[data-c="#F0855A"]:hover{border-color:#F0855A;background:color-mix(in srgb,#F0855A 12%,transparent)} .calcs .cjump[data-c="#F0855A"][aria-pressed="true"]{background:#F0855A;border-color:#F0855A;color:#0b0b0c;font-weight:700} .calcs .cjump[data-c="#FFE7A6"]{--c:#FFE7A6;color:#FFE7A6;border-color:color-mix(in srgb,#FFE7A6 40%,transparent)} .calcs .cjump[data-c="#FFE7A6"]:hover{border-color:#FFE7A6;background:color-mix(in srgb,#FFE7A6 12%,transparent)} .calcs .cjump[data-c="#FFE7A6"][aria-pressed="true"]{background:#FFE7A6;border-color:#FFE7A6;color:#0b0b0c;font-weight:700} .calcs .cjump[data-c="#5FB6A6"]{--c:#5FB6A6;color:#5FB6A6;border-color:color-mix(in srgb,#5FB6A6 40%,transparent)} .calcs .cjump[data-c="#5FB6A6"]:hover{border-color:#5FB6A6;background:color-mix(in srgb,#5FB6A6 12%,transparent)} .calcs .cjump[data-c="#5FB6A6"][aria-pressed="true"]{background:#5FB6A6;border-color:#5FB6A6;color:#0b0b0c;font-weight:700} .calcs .cjump[data-c="#B18BE4"]{--c:#B18BE4;color:#B18BE4;border-color:color-mix(in srgb,#B18BE4 40%,transparent)} .calcs .cjump[data-c="#B18BE4"]:hover{border-color:#B18BE4;background:color-mix(in srgb,#B18BE4 12%,transparent)} .calcs .cjump[data-c="#B18BE4"][aria-pressed="true"]{background:#B18BE4;border-color:#B18BE4;color:#0b0b0c;font-weight:700} /* each calculator carries the colour of its jump chip */ .calcs .calc[id="startup"]{--c:#F0855A} .calcs .calc[id="breakeven"]{--c:#FFE7A6} .calcs .calc[id="hourly"]{--c:#5FB6A6} .calcs .calc[id="pricing"]{--c:#B18BE4} .calcs .calc .col{color:color-mix(in srgb,var(--c,#D4A856) 78%,#947c4a)} .calcs .calc .cov{color:var(--c,#F3E4A8)} .calcs .calc:hover{border-color:color-mix(in srgb,var(--c,#D4A856) 45%,transparent)} /* hub tiles, matching .hubs and .hub */ .calcs .chubs{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px; max-width:900px;margin:56px auto 0} .calcs .chub{color:#E3DED2;border:1px solid rgba(212,168,86,.4);border-radius:16px;padding:26px;text-decoration:none; display:block;background:linear-gradient(180deg,rgba(26,20,8,.5),rgba(8,8,9,.7)); transition:transform .3s,border-color .3s} .calcs .chub:hover{transform:translateY(-3px);border-color:var(--gold)} .calcs .chub b{display:block;font-family:var(--display);font-size:26px;color:#FFF8E8;margin-bottom:4px} .calcs .chub span{font-family:var(--util);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase; color:var(--gold-mid)} .calcs .calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,318px);gap:34px; align-items:start;padding:30px;margin:0 auto 16px;max-width:1180px;border-radius:14px; border:1px solid rgba(205,170,99,.32);background:linear-gradient(180deg,#0d0b06,#070706)} .calcs .calc h2{font-family:var(--display);font-weight:600;font-size:clamp(24px,3.1vw,34px); line-height:1.12;color:#FFF8E8;margin:0 0 8px;text-align:left} .calcs .cdek{font-size:15.5px;line-height:1.62;color:#B9B4AB;margin:0 0 22px;max-width:54ch} .calcs .crow{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:7px 0} .calcs .crow label{flex:1 1 210px;font-size:15px;line-height:1.45;color:#CFC9BE} .calcs .chint{display:block;font-family:var(--util);font-size:10.5px;letter-spacing:.04em; color:var(--grey);margin-top:2px} .calcs .cin{display:inline-flex;align-items:center;flex:0 0 162px;min-height:46px;overflow:hidden; border:1px solid rgba(205,170,99,.32);border-radius:10px;background:#070706} .calcs .cin:focus-within{border-color:var(--gold);outline:2px solid rgba(212,168,86,.32);outline-offset:1px} .calcs .cu{font-family:var(--util);font-size:12px;color:#947c4a;padding:0 2px 0 13px} .calcs .cin input{width:100%;min-height:44px;border:0;background:transparent;color:#FFF8E8; font-family:var(--body);font-size:16px;padding:0 12px 0 6px} .calcs .cin input::-webkit-outer-spin-button, .calcs .cin input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} .calcs .cin input:focus{outline:none} .calcs .cout{border:1px solid rgba(212,168,86,.34);border-radius:14px;padding:22px; background:linear-gradient(160deg,rgba(26,20,8,.62),rgba(8,8,9,.72))} .calcs .col{font-family:var(--util);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase; color:#947c4a;margin:0 0 6px} .calcs .cov{font-family:var(--display);font-weight:600;font-size:clamp(30px,4vw,42px);line-height:1.04; color:var(--gold-pale);margin:0 0 4px;word-break:break-word} .calcs .cos{font-size:13.5px;line-height:1.55;color:#B9B4AB;margin:0 0 16px} .calcs .cout dl{margin:0 0 16px;padding-top:14px;border-top:1px solid rgba(212,168,86,.22)} .calcs .cout dt{font-family:var(--util);font-size:10.5px;letter-spacing:.07em;color:var(--grey);margin-top:9px} .calcs .cout dd{margin:1px 0 0;font-size:16px;font-weight:600;color:#FFF8E8;min-height:20px} .calcs .ccopy{width:100%;min-height:44px;cursor:pointer;border-radius:999px;font-weight:600;font-size:13.5px; font-family:var(--body);border:1px solid rgba(212,168,86,.45);color:var(--gold-pale); background:rgba(212,168,86,.08);transition:border-color .3s,color .3s} .calcs .ccopy:hover{border-color:var(--gold);color:#FFF8E8} .calcs .ccopy.ok{background:rgba(212,168,86,.24);color:#FFF8E8} .calcs .cfaq{max-width:62ch;margin:56px auto 0;text-align:left} .calcs .cfaq h2{font-family:var(--display);font-weight:600;font-size:28px;color:#FFF8E8;margin:0 0 12px;text-align:center} .calcs .cfaq details{border-bottom:1px solid rgba(205,170,99,.2);padding:13px 0} .calcs .cfaq summary{cursor:pointer;font-weight:600;color:#FFF8E8;font-size:15.5px;min-height:32px} .calcs .cfaq p{margin:9px 0 0;color:#B9B4AB;font-size:15px;line-height:1.62} @media(max-width:900px){.calcs .calc{grid-template-columns:1fr;gap:22px;padding:22px}} /* ---- mobile ---- */ @media(max-width:760px){ .calcs .cjumps{gap:6px} .calcs .cjump{min-height:44px;font-size:11px;padding:0 14px} .calcs .calc{padding:20px 16px;border-radius:12px} .calcs .calc h2{font-size:23px} .calcs .cdek{font-size:15px;margin-bottom:16px} /* label above the field, so the number is never squeezed */ .calcs .crow{gap:6px 12px;padding:9px 0;border-bottom:1px solid rgba(212,168,86,.08)} .calcs .crow label{flex:1 1 100%;font-size:14.5px} .calcs .cin{flex:1 1 100%;min-height:52px} .calcs .cin input{min-height:50px;font-size:16px} .calcs .cout{position:sticky;bottom:8px;padding:18px; background:linear-gradient(160deg,rgba(26,20,8,.96),rgba(8,8,9,.97)); -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)} .calcs .cov{font-size:30px} .calcs .ccopy{min-height:48px} .calcs .chub{padding:22px} .calcs .chub b{font-size:22px} .calcs .cfaq summary{min-height:44px;display:flex;align-items:center} } @media(max-width:400px){ .calcs .cjump{padding:0 12px;letter-spacing:.1em} .calcs .calc{padding:18px 13px} } @media print{.calcs .cjumps,.calcs .ccopy{display:none}} /* ---- the bar is back to bar height ---- it was padded to about 174px so it would fully contain the orb. but the bar paints a gradient across the whole width, so that became a 174px dark band sitting over the page and dimming everything under it while you scroll. the bar is a bar again. the orb simply overhangs it, which is what a floating control does, and it does not need the background to follow it. */ #kx-nav{ padding-top:22px !important; padding-bottom:22px !important} @media(max-width:820px){ #kx-nav{padding-top:18px !important;padding-bottom:18px !important} } /* the content clearance goes back to clearing a normal bar, not the old inflated one */ main > section:first-of-type, main > .wrap:first-of-type{padding-top:132px !important} @media(max-width:820px){ main > section:first-of-type, main > .wrap:first-of-type{padding-top:118px !important} } /* ---- width and height attributes must not fight the stylesheet ---- the SEO pass added intrinsic width and height to every image, which is right for layout stability. but those attributes are presentational hints: when a rule sets only one axis, the OTHER axis still takes the attribute value. the phone logo has height:15px in CSS and width="2164" on the tag, so it drew 2164px wide and stretched across the header. this lets the stylesheet win on both axes while keeping the attributes for aspect-ratio, so nothing stretches and layout shift is still prevented. */ /* the rule has to sit BELOW any real styling, so it only fills in the axis nobody set. a bare element selector loses to every class rule, which is exactly what is wanted here. */ img{width:auto;height:auto} /* ---- one back link, the same on every page ---- there were four different class names, four different labels and four pages with none at all. this is the market-data treatment, which was the most considered of them, applied everywhere under one class. */ .kx-backrow{display:flex;justify-content:center;margin:0 0 22px} .kx-bk{ display:inline-flex;align-items:center;gap:8px;min-height:44px; text-decoration:none;font-weight:400; font-family:var(--util,'Space Grotesk',ui-monospace,monospace); font-size:10.5px;letter-spacing:.18em;text-transform:uppercase; color:var(--grey,#9C968D);transition:color .25s} .kx-bk:hover{color:var(--gold-pale,#F3E4A8)} .kx-bk:focus-visible{outline:3px solid #F3E4A8;outline-offset:3px;border-radius:6px} .kx-bk svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2; stroke-linecap:round;stroke-linejoin:round;flex:none} /* ---- the footer hover reads again ---- the hover rule never broke. what happened is that the warm pass moved the resting colour from #CFC9BE to #D4C9B1, doubling its warmth from 17 to 35 and pushing it toward the gold of the hover state. luminance was untouched, so the contrast audit saw nothing wrong, but the two colours stopped looking like different states. the hover now separates on brightness as well as hue, and picks up an underline so the change is unmistakable rather than a subtle tint. */ .sk-col a{ border-bottom:1px solid transparent; transition:color .22s ease, border-color .22s ease} .sk-col a:hover, .sk-col a:focus-visible{ color:#FFF6DC !important; border-bottom-color:rgba(243,228,168,.55)} /* the social icons already invert on hover, so they only need the timing */ .sk-social a{transition:color .22s ease, background .22s ease} /* ---- hidden has to actually hide ---- the photo preview is marked hidden until someone picks a file, but .preview{display:flex} is an author rule and the [hidden] rule comes from the user-agent stylesheet, so flex won. the empty img rendered as a broken image with its alt text beside it. this restores the expected behaviour for every element on the site, not just this one, since the same trap applies anywhere a class sets display on something that also gets hidden. */ [hidden]{display:none !important} /* ---- the toggle's selected state gets the lift the other pills have ---- resources and events both give a pressed chip box-shadow:0 6px 22px color-mix(in srgb, 30%,transparent) and font-weight 700. this toggle had the fill and the weight but no shadow, so the selected side sat flat and read as a coloured label rather than a pressed control. */ .bill button{transition:background .25s ease,color .25s ease,box-shadow .3s ease} .bill button[aria-pressed="true"]{ box-shadow:0 6px 22px rgba(212,168,86,.30) !important} @media(prefers-reduced-motion:reduce){ .bill button{transition:none} } /* the homepage leaves the document scrolling normally and clips nothing above the orb. matching that. */ html, body, #kx-root{overflow-x:visible !important} main{overflow-x:clip} @supports not (overflow:clip){ main{overflow-x:hidden} } /* ---- the menu lives in the bar ---- Replaces the floating orb and its tray. The orb had to be positioned against the viewport and the tray against the orb, and every size change meant three numbers had to agree. A row of links inside a bar that is already there has none of that: the layout places them. Below 760px the links collapse behind a button and open as a full-width panel under the bar, so nothing floats over the content. */ #kx-nav{gap:18px} .kx-links{display:flex;align-items:center;gap:clamp(14px,2vw,30px);margin-left:auto} .kx-links a,.kx-links span{ font-family:var(--util,'Space Grotesk',monospace); font-size:11px;letter-spacing:.16em;text-transform:uppercase; text-decoration:none;color:#BDB49F;white-space:nowrap; padding:10px 2px;min-height:44px;display:inline-flex;align-items:center; transition:color .25s} .kx-links a:hover{color:#FFF6DC} .kx-links a:focus-visible{outline:2px solid var(--gold,#D4A856);outline-offset:3px;border-radius:4px} /* the page you are on is text, not a link */ .kx-links span{color:var(--gold,#D4A856);position:relative} .kx-links span::after{ content:"";position:absolute;left:2px;right:2px;bottom:6px;height:1px; background:var(--gold,#D4A856);opacity:.7} /* the button that opens the panel on small screens */ .kx-burger{ display:none;margin-left:auto; min-width:44px;min-height:44px;padding:0 12px; border:1px solid rgba(212,168,86,.42);border-radius:999px; background:rgba(212,168,86,.06);cursor:pointer; font-family:var(--util,'Space Grotesk',monospace); font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:#E1D7BE; align-items:center;gap:8px; transition:background .25s,border-color .25s,color .25s} .kx-burger:hover{background:#D4A856;border-color:#F3E4A8;color:#1B1400} .kx-burger i{ display:inline-block;width:14px;height:1px;background:currentColor;position:relative} .kx-burger i::before,.kx-burger i::after{ content:"";position:absolute;left:0;width:14px;height:1px;background:currentColor} .kx-burger i::before{top:-4px} .kx-burger i::after{top:4px} .kx-burger[aria-expanded="true"] i{background:transparent} .kx-burger[aria-expanded="true"] i::before{top:0;transform:rotate(45deg)} .kx-burger[aria-expanded="true"] i::after{top:0;transform:rotate(-45deg)} @media(max-width:760px){ .kx-burger{display:inline-flex} .kx-links{ position:absolute;top:100%;left:0;right:0; flex-direction:column;align-items:stretch;gap:0; margin:0;padding:6px 0 10px; background:#0A0806; border-bottom:1px solid rgba(212,168,86,.28); box-shadow:0 24px 50px rgba(0,0,0,.55); max-height:0;overflow:hidden; transition:max-height .32s ease} .kx-links a,.kx-links span{ padding:0 clamp(20px,5vw,32px);min-height:52px;font-size:12px; border-bottom:1px solid rgba(212,168,86,.10)} .kx-links a:last-child,.kx-links span:last-child{border-bottom:none} .kx-links span::after{display:none} #kx-nav.kx-open .kx-links{max-height:70vh;overflow-y:auto} } /* the orb and its tray are gone */ #kx-orbnav,#kx-orbcue{display:none !important} @media(prefers-reduced-motion:reduce){ .kx-links{transition:none} .kx-burger,.kx-burger i::before,.kx-burger i::after{transition:none} } /* ---- hover: the word turns gold and a gold rule slides under it ---- As written, hover only changed the colour to cream and there was no underline at all; the rule under the current page was a separate thing that never appeared on hover. Both now happen. The rule is drawn on the link itself with a scaled pseudo-element, so it is exactly as wide as the word rather than a fixed length, and it grows from the left rather than appearing all at once. */ .kx-links a,.kx-links span{ position:relative; transition:color .22s ease} .kx-links a::after{ content:""; position:absolute; left:2px;right:2px; bottom:8px; height:1px; background:var(--gold,#D4A856); transform:scaleX(0); transform-origin:left center; transition:transform .28s cubic-bezier(.16,1,.3,1); pointer-events:none} .kx-links a:hover{color:var(--gold,#D4A856)} .kx-links a:hover::after{transform:scaleX(1)} /* keyboard users get the same feedback, not just the focus ring */ .kx-links a:focus-visible{color:var(--gold,#D4A856)} .kx-links a:focus-visible::after{transform:scaleX(1)} /* the current page keeps its own rule, always on and slightly brighter */ .kx-links span::after{ content:""; position:absolute; left:2px;right:2px; bottom:8px; height:1px; background:var(--gold-pale,#F3E4A8); opacity:.85; transform:none} @media(max-width:760px){ /* in the stacked panel a full-width rule under a row reads as a divider, so hover moves to a gold left edge and the colour change instead */ .kx-links a::after,.kx-links span::after{display:none} .kx-links a,.kx-links span{ border-left:2px solid transparent; transition:color .22s ease,border-color .22s ease,background .22s ease} .kx-links a:hover,.kx-links a:focus-visible{ color:var(--gold,#D4A856); border-left-color:var(--gold,#D4A856); background:rgba(212,168,86,.06)} .kx-links span{ color:var(--gold,#D4A856); border-left-color:var(--gold-pale,#F3E4A8); background:rgba(212,168,86,.05)} } @media(prefers-reduced-motion:reduce){ .kx-links a::after{transition:none} .kx-links a,.kx-links span{transition:none} } /* ---- only the current page is highlighted ---- Three separate causes were making an item look permanently lit. 1. On a touch screen :hover sticks to whatever you last tapped, so after tapping a menu item it stayed gold and underlined. Hover rules are now inside @media(hover:hover), so they only apply on devices that really hover. Touch gets :active instead, which clears itself. 2. The stacked panel gives every row a 2px transparent left border so the hover edge does not shift the text. Written as a shorthand, the colour resolved to currentColor in some engines, which drew a coloured edge on every row. The colour is now set on its own line. 3. The gold treatment is keyed to [aria-current="page"] rather than to the element being a span, so there is one condition deciding it. */ /* nothing is lit unless it is the current page */ .kx-links a{color:#BDB49F} .kx-links a::after{transform:scaleX(0)} @media(hover:hover){ .kx-links a:hover{color:var(--gold,#D4A856)} .kx-links a:hover::after{transform:scaleX(1)} } .kx-links a:focus-visible{color:var(--gold,#D4A856)} .kx-links a:focus-visible::after{transform:scaleX(1)} /* a tap lights it for as long as the finger is down, then releases */ .kx-links a:active{color:var(--gold,#D4A856)} /* the current page, and only the current page */ .kx-links [aria-current="page"]{color:var(--gold,#D4A856)} .kx-links [aria-current="page"]::after{ content:"";position:absolute;left:2px;right:2px;bottom:8px;height:1px; background:var(--gold-pale,#F3E4A8);opacity:.85;transform:none} @media(max-width:760px){ .kx-links a,.kx-links span{ border-left-style:solid; border-left-width:2px; border-left-color:transparent} @media(hover:hover){ .kx-links a:hover{ border-left-color:var(--gold,#D4A856); background:rgba(212,168,86,.06)} } .kx-links a:active{ border-left-color:var(--gold,#D4A856); background:rgba(212,168,86,.06)} .kx-links a:focus-visible{ border-left-color:var(--gold,#D4A856); background:rgba(212,168,86,.06)} .kx-links [aria-current="page"]{ border-left-color:var(--gold-pale,#F3E4A8); background:rgba(212,168,86,.05)} /* a plain link must never carry the current-page tint */ .kx-links a:not([aria-current="page"]){background:transparent} } /* ---- gold means "you are pointing at this", nothing else ---- The current page and the hover state were both gold with a gold rule, so on the homepage Home looked lit permanently and pointing at another item just produced a second lit item. Nothing distinguished the pointer. Gold is now reserved for the pointer. The current page is marked in a quieter way: brighter than a plain link so you can still see where you are, with a dim rule underneath, but not gold. Only ever one gold item on screen. */ /* where you are: cream, not gold */ .kx-links [aria-current="page"]{ color:#E8DEC4 !important; cursor:default} .kx-links [aria-current="page"]::after{ background:rgba(232,222,196,.42) !important; opacity:1 !important; transform:none !important} /* what you are pointing at: gold, and the only gold thing */ @media(hover:hover){ .kx-links a:hover{color:var(--gold,#D4A856) !important} .kx-links a:hover::after{ background:var(--gold,#D4A856) !important; transform:scaleX(1) !important} } .kx-links a:active{color:var(--gold,#D4A856) !important} .kx-links a:focus-visible{color:var(--gold,#D4A856) !important} .kx-links a:focus-visible::after{ background:var(--gold,#D4A856) !important; transform:scaleX(1) !important} @media(max-width:760px){ .kx-links [aria-current="page"]{ border-left-color:rgba(232,222,196,.5) !important; background:rgba(255,255,255,.03) !important} @media(hover:hover){ .kx-links a:hover{ border-left-color:var(--gold,#D4A856) !important; background:rgba(212,168,86,.08) !important} } .kx-links a:active,.kx-links a:focus-visible{ border-left-color:var(--gold,#D4A856) !important; background:rgba(212,168,86,.08) !important} } /* ---- one rule for the underline, one colour for hover ---- Two things were still wrong. The current page carried a permanent underline. Three earlier blocks each drew an ::after on it, so removing one left the others. Every ::after on a current item is switched off here, in one place. Hover used #D4A856, which is the mid gold and sits close to the plain link colour at small sizes. It is now the pale gold, which is brighter than the current-page cream so the pointer is unmistakable. */ /* the current page: cream, and no rule under it */ .kx-links [aria-current="page"]{ color:#9C968D !important; cursor:default} .kx-links [aria-current="page"]::after, .kx-links [aria-current="page"]::before{ content:none !important; display:none !important; background:none !important; transform:none !important} /* the pointer: pale gold, with the rule sliding under it */ .kx-links a::after{ background:#FFD166 !important; height:1.5px !important; bottom:7px !important} @media(hover:hover){ .kx-links a:hover{color:#FFD166 !important} .kx-links a:hover::after{transform:scaleX(1) !important} } .kx-links a:active{color:#FFD166 !important} .kx-links a:focus-visible{color:#FFD166 !important} .kx-links a:focus-visible::after{transform:scaleX(1) !important} @media(max-width:760px){ /* no rule at all in the stacked panel; the left edge does the work */ .kx-links a::after,.kx-links span::after{display:none !important} .kx-links [aria-current="page"]{ border-left-color:rgba(156,150,141,.55) !important; background:rgba(255,255,255,.03) !important} @media(hover:hover){ .kx-links a:hover{ color:#FFD166 !important; border-left-color:#FFD166 !important; background:rgba(212,168,86,.10) !important} } .kx-links a:active,.kx-links a:focus-visible{ color:#FFD166 !important; border-left-color:#FFD166 !important; background:rgba(212,168,86,.10) !important} } /* ---- one bar, the same on every page ---- It had drifted badly. Across the 14 pages: z-index was 100 on seven and 850 on seven, side padding was 56px on three and 0 on eleven, and the frosted background was present on eleven and missing on three. Hence "bigger on some pages, smaller on others". Three specific faults, fixed here. 1. flex-wrap:wrap let the links panel wrap onto a second row INSIDE the bar rather than dropping below it. That was the extra strip underneath. The bar is nowrap; the panel is positioned, so it does not need to wrap. 2. z-index:850 put the bar above almost everything. A fixed element that high spans the full width and intercepts touches near the top of the screen, which is what the advisor carousel was losing its drags to. 100 is above the page and below the modals, which is where a bar belongs. 3. The bar and logo faded out as you scrolled down, so navigation vanished exactly when someone was deep in a page. It stays put now. That also removes the half-faded, blurred logo, because there is no transition to catch mid-way. */ #kx-nav{ position:fixed !important; top:0 !important;left:0 !important;right:0 !important; z-index:100 !important; display:flex !important; align-items:center !important; justify-content:space-between !important; flex-wrap:nowrap !important; gap:16px !important; padding:14px clamp(16px,4vw,48px) !important; background:rgba(6,5,2,.90) !important; -webkit-backdrop-filter:blur(3px) !important; backdrop-filter:blur(3px) !important; border-bottom:1px solid rgba(212,168,86,.18) !important; transition:none !important} /* the bar no longer fades, so neither does the wordmark */ #kx-nav .wm, body.chrome-away #kx-nav, body.chrome-away #kx-nav .wm{ opacity:1 !important; transform:none !important; pointer-events:auto !important; background:rgba(6,5,2,.90) !important; border-bottom-color:rgba(212,168,86,.18) !important; transition:none !important} body.chrome-away #kx-nav .wm,#kx-nav .wm{background:none !important} #kx-nav > a:first-child img{height:34px !important;width:auto !important;display:block} @media(max-width:760px){ #kx-nav{padding:11px 16px !important} #kx-nav > a:first-child img{height:28px !important} } /* nothing sits under the bar */ body{padding-top:0} /* ---- the bar has to sit above the page, below the modals ---- I lowered it from 850 to 100 to stop it intercepting touches over the carousel. That fixed the carousel and broke the menu: the footer is at 200, the cursor at 950, the old cue at 901, so the dropdown panel opened behind page content and looked like nothing happened. 500 clears everything on the page (the highest is the footer at 200) and stays below the modals: the film at 1000 and the support sheet at 1200. The carousel and the page body have no z-index of their own, so the bar being above them costs nothing; what caused the carousel problem was 850, which put the bar above things that needed to receive touches. The panel is given its own stacking so it is never trapped behind a sibling inside the bar. */ #kx-nav{z-index:500 !important} .kx-links{z-index:2} .kx-burger{position:relative;z-index:3} /* ---- less continuous work on a phone ---- Two changes, both scoped so desktop is untouched. 1. backdrop-filter is switched off below 900px. There are 328 uses of it across the site and each one makes the browser re-blur everything behind the element on every frame it changes. On a fixed bar that means a full-width blur recomputing on every scroll frame. A solid background looks near identical and costs nothing. 2. Animations stop while the page is in the background. Without this they keep running when you switch apps or lock the screen, which is a large part of why the phone stays warm after you have put it down. */ @media(max-width:900px){ *,*::before,*::after{ -webkit-backdrop-filter:none !important; backdrop-filter:none !important} /* the bar relied on the blur for legibility, so it gets a solid ground */ #kx-nav{background:#080705 !important} /* large-radius blur is the most expensive paint on a phone GPU */ [style*="blur(130px)"],[style*="blur(120px)"]{filter:blur(17px) !important} } /* nothing animates while the page is not being looked at */ html.kx-idle *, html.kx-idle *::before, html.kx-idle *::after{ animation-play-state:paused !important; transition:none !important} /* ---- a selected pill keeps its colour, hovered or not ---- The per-category :hover rules sit later in the file than the selected colours, so hover won on specificity ties. On a touch screen :hover sticks to whatever you last tapped, which meant a freshly selected pill got the 12% translucent hover background while still carrying the near-black text the solid state expects. Dark text on an almost-transparent pill is why the words disappeared. Two changes. Hover only applies where hovering is real, and it never applies to the pill that is already selected. */ @media(hover:hover){ .filters button[aria-pressed="true"]:hover{ background:var(--sel-bg, var(--gold)) !important; border-color:var(--sel-bg, var(--gold)) !important; color:#0C0B08 !important} } /* touch: no lingering hover state at all */ @media(hover:none){ .filters button:hover{ background:transparent; border-color:rgba(212,168,86,.28)} .filters button[aria-pressed="true"]:hover{ background:var(--sel-bg, var(--gold)); border-color:var(--sel-bg, var(--gold)); color:#0C0B08} } /* each category carries its own colour, so the rules above resolve to it */ .filters button[data-cat="Advisors"] {--sel-bg:#6FB0E0} .filters button[data-cat="Community"] {--sel-bg:#A6E0B4} .filters button[data-cat="Education"] {--sel-bg:#B18BE4} .filters button[data-cat="Funding"] {--sel-bg:#FFE7A6} .filters button[data-cat="Guides"] {--sel-bg:#5FB6A6} .filters button[data-cat="Members"] {--sel-bg:#D2B4F0} .filters button[data-cat="Mentorship"]{--sel-bg:#84D0C6} .filters button[data-cat="Mindset"] {--sel-bg:#FF6367} .filters button[data-cat="News"] {--sel-bg:#DCE2E8} .filters button[data-cat="Templates"] {--sel-bg:#F2933F} .filters button[data-cat="Tools"] {--sel-bg:#F0855A} .filters button[data-cat="all"] {--sel-bg:#D4A856} /* and the selected state itself, stated last so nothing later can dilute it */ .filters button[aria-pressed="true"]{ background:var(--sel-bg, var(--gold)) !important; border-color:var(--sel-bg, var(--gold)) !important; color:#0C0B08 !important; font-weight:700 !important} .filters button[aria-pressed="true"] .n{opacity:.75} /* Everything had no colour of its own, so selecting it left a transparent pill with near-black text. It takes the site gold. */ .filters button[data-cat="all"][aria-pressed="true"]{ background:#D4A856 !important; border-color:#D4A856 !important; color:#1B1400 !important} /* ---- which page you are on ---- Three earlier blocks each set this and the last one won, leaving the current item at #9C968D, dimmer than a plain link at #BDB49F. So the one thing that should stand out was the least visible thing in the bar. It is now the brightest item, in gold, on a gold ground, with a bar above it. Hover stays distinct because it is pale gold with an underline, so the two never read the same. */ .kx-links [aria-current="page"]{ color:#FFD166 !important; font-weight:600 !important; position:relative; background:rgba(212,168,86,.10) !important; border-radius:6px; padding-left:9px !important; padding-right:9px !important; cursor:default} /* The line sits where hover puts its line, at the bottom of the word. It was on top before, which meant the current page was marked above the word and the hovered one below it, pointing in opposite directions. It is thicker and fully gold, against hover's 1.5px pale gold, so the two are still telling you different things. */ .kx-links [aria-current="page"]::before{ content:"" !important; display:block !important; position:absolute; left:6px;right:6px; bottom:5px; height:2.5px; border-radius:2px; background:#FFD166 !important; transform:none !important} /* the sliding hover rule is switched off on the current item, so there is one line under it rather than two at slightly different heights */ .kx-links [aria-current="page"]::after{ content:none !important; display:none !important} /* hover keeps its own look: pale gold with the sliding rule */ @media(hover:hover){ .kx-links a:hover{color:#F3E4A8 !important} } @media(max-width:760px){ /* in the stacked panel a top bar reads as a divider, so the current row takes a gold left edge and a stronger tint instead */ .kx-links [aria-current="page"]{ border-radius:0; background:rgba(212,168,86,.13) !important; border-left:3px solid #FFD166 !important; padding-left:calc(clamp(20px,5vw,32px) - 3px) !important} .kx-links [aria-current="page"]::before{display:none !important} } /* ---- the cursor field ---- Two numbers matter here and I had only been looking at one of them. The ring was 420px in the original markup, which read as a spotlight, and I dropped it to 38px, which was almost nothing. 160px sits at 38% of the original: a visible field around the pointer that does not light the page behind it. The dot itself was 36px, then 18px, now 24px. Applied on every page from one rule, since the previous version only existed on index.html. */ #kx-cursor{width:24px !important;height:24px !important} #kx-ring{width:160px !important;height:160px !important} /* the same disc rules resources and library use, copied so all six pages in this group are drawn by identical declarations */ /* ---- the four tools, as discs ---- they were boxed cards with the same border, radius and padding as the 63 article cards below, so they read as four more articles. these borrow the barrier orb from how-it-works instead: a disc with a soft inner glow, eyes, and the name underneath. same geometry, but in the site gold rather than the barrier violet, because these are destinations not moods. */ .res .hubdiscs{ display:flex;justify-content:center;align-items:flex-start; gap:clamp(22px,4vw,52px); margin:30px auto 34px; max-width:820px; flex-wrap:wrap} .res .hubdisc{ /* the anchor styles its children but never itself, so it fell back to the browser default #0000EE underneath. same bug as the glossary hub links. */ color:#9C968D; display:flex;flex-direction:column;align-items:center;gap:13px; width:clamp(88px,9vw,116px); text-decoration:none;flex:none} .res .hd-disc{ position:relative; width:clamp(76px,8.4vw,104px); aspect-ratio:1;border-radius:50%; background:radial-gradient(circle at 38% 30%,#221A0B,#0B0805 70%); /* .42 gave a 2.32:1 rim, under the 3:1 a control boundary needs to be perceivable. .62 clears it while staying quiet. */ border:1px solid rgba(212,168,86,.62); box-shadow:inset 0 0 30px rgba(212,168,86,.20), 0 0 24px rgba(212,168,86,.10); transition:transform .5s cubic-bezier(.16,1,.3,1),border-color .5s,box-shadow .5s} /* the eyes */ .res .hd-disc::before,.res .hd-disc::after{ content:'';position:absolute;top:42%; width:11%;height:5.5%;border-radius:99px; background:#F3E4A8;box-shadow:0 0 10px #D4A856; opacity:.85;transition:opacity .5s,background .5s,box-shadow .5s} .res .hd-disc::before{left:33%} .res .hd-disc::after{right:33%} /* the smile, which only appears on hover */ .res .hd-mouth{ position:absolute;left:50%;top:55%;transform:translateX(-50%); width:32%;height:17%; border-bottom:2px solid #F7E3AC;border-radius:0 0 99px 99px; opacity:0;transition:opacity .35s ease .12s} .res .hd-nm{ font-family:var(--util);font-size:9px;letter-spacing:.18em; text-align:center;line-height:1.4;text-transform:uppercase; color:#9C968D;transition:color .45s} .res .hubdisc:hover .hd-disc, .res .hubdisc:focus-visible .hd-disc{ transform:translateY(-4px); border-color:rgba(212,168,86,.9); box-shadow:inset 0 0 34px rgba(212,168,86,.30), 0 0 40px rgba(212,168,86,.28)} .res .hubdisc:hover .hd-mouth, .res .hubdisc:focus-visible .hd-mouth{opacity:1} .res .hubdisc:hover .hd-nm, .res .hubdisc:focus-visible .hd-nm{color:#F3E4A8} .res .hubdisc:focus-visible{outline:3px solid #F3E4A8;outline-offset:6px;border-radius:14px}@media(max-width:560px){ /* three across then one alone looked unbalanced. capping the row at two discs gives a tidy 2x2 on a phone. */ .res .hubdiscs{gap:20px 26px;max-width:240px;margin:24px auto 28px} .res .hubdisc{width:88px} .res .hd-disc{width:72px} .res .hd-nm{font-size:8.5px;letter-spacing:.14em} }@media(prefers-reduced-motion:reduce){ .res .hd-disc,.res .hd-mouth,.res .hd-nm{transition:none} .res .hubdisc:hover .hd-disc{transform:none} } /* Five discs rather than the original four, kept on a single line. On a narrow screen the row scrolls sideways rather than wrapping, which is what the original 560px rule did when it capped the row at two. */ .res .hubdiscs{ display:flex !important; flex-wrap:nowrap !important; align-items:flex-start; justify-content:center; gap:clamp(14px,3.4vw,44px) !important; max-width:none !important; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; padding:4px 10px 12px} .res .hubdiscs::-webkit-scrollbar{display:none} .res .hubdisc{flex:none}@media(max-width:560px){ .res .hubdiscs{ justify-content:flex-start; gap:16px !important; scroll-snap-type:x proximity} .res .hubdisc{scroll-snap-align:center} } .res .hubdiscs{margin:30px auto 40px !important}@media(max-width:760px){ .res .hubdiscs{margin:24px auto 30px !important} .res .rsearch{margin:0 auto 16px !important} .res .rfilters{margin:0 auto 22px !important} .res .rgrid{margin:0 auto !important} } /* Five discs rather than the original four, kept on a single line. On a narrow screen the row scrolls sideways rather than wrapping, which is what the original 560px rule did when it capped the row at two. */ .res .hubdiscs{ display:flex !important; flex-wrap:nowrap !important; align-items:flex-start; justify-content:center; gap:clamp(14px,3.4vw,44px) !important; max-width:none !important; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; padding:4px 10px 12px} .res .hubdiscs::-webkit-scrollbar{display:none} .res .hubdisc{flex:none} @media(max-width:560px){ .res .hubdiscs{ justify-content:flex-start; gap:16px !important; scroll-snap-type:x proximity} .res .hubdisc{scroll-snap-align:center} } /* aspect-ratio gives the disc its height in a current browser. This is the same value written out, for engines that ignore it and would otherwise collapse the disc to a line of text. */ .hd-disc{height:clamp(76px,8.4vw,104px)} @media(max-width:560px){ .hd-disc{height:76px;width:76px} }