/* collabix.ai — hand-written layer: fonts, base, header, footer, components, responsive overrides. gen.css holds the page classes (x1…) that came out of the Claude Design export; this file comes first. */ /* each family ships ONE variable file per subset (the per-weight files were byte-identical copies, so the browser fetched the same font up to four times) */ @font-face{font-family:"Bricolage Grotesque";font-weight:500 800;font-display:swap;src:url("/assets/fonts/BricolageGrotesque-700-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Bricolage Grotesque";font-weight:500 800;font-display:swap;src:url("/assets/fonts/BricolageGrotesque-700-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:"Instrument Sans";font-weight:400 600;font-display:swap;src:url("/assets/fonts/InstrumentSans-400-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Instrument Sans";font-weight:400 600;font-display:swap;src:url("/assets/fonts/InstrumentSans-400-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} :root{--cream:var(--t-canvas);--ink:var(--t-ink);--blue:var(--t-accent);--rust:var(--t-rust);--sun:var(--t-sun);--line:var(--t-line);--line2:var(--t-line2);--sand:var(--t-sand);--sand2:var(--t-sand2);--mute:var(--t-mute);--body:var(--t-body);--head:var(--t-head);--text:var(--t-text)} *{box-sizing:border-box} html{scroll-behavior:smooth;scroll-padding-top:100px;-webkit-text-size-adjust:100%} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--text);-webkit-font-smoothing:antialiased;overflow-x:hidden} /* the page's link colour has zero specificity: any class (a button, a nav item) always wins, as Jeroen's inline styles did */ :where(a){color:var(--t-accent-text)}:where(a):hover{color:var(--ink)} button{font-family:inherit} img{max-width:100%;height:auto} .sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden} .skip{position:absolute;top:10px;left:10px;z-index:999;transform:translateY(-200%);padding:10px 14px;border-radius:999px;background:var(--ink);color:var(--t-cream);font-weight:600;text-decoration:none} .skip:focus{transform:none;color:var(--t-cream)} a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--t-focus);outline-offset:3px} .wrap{max-width:1120px;margin:0 auto} .grow{flex:1} main{display:block} /* buttons */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;font-weight:600;font-size:15px;line-height:1.2;padding:15px 24px;border-radius:999px;border:0;cursor:pointer;white-space:nowrap;transition:transform .15s ease,box-shadow .15s ease} .btn:hover{transform:translateY(-1px)} .btn-primary{background:var(--blue);color:var(--t-cream)}.btn-primary:hover{color:var(--t-cream);box-shadow:0 10px 24px -14px var(--t-accent-glow70)} .btn-cream{background:var(--t-cream);color:var(--t-accent)}.btn-cream:hover{color:var(--t-accent)} .btn-ghost-cream{background:transparent;color:var(--t-cream);border:1px solid var(--t-on-accent-55)}.btn-ghost-cream:hover{color:var(--t-cream);border-color:var(--t-cream)} .btn-light{background:var(--t-card);color:var(--ink);border:1px solid var(--line2)}.btn-light:hover{color:var(--ink)} /* lockup + AVA */ .lockup{display:inline-flex;align-items:center;gap:.3em;font-family:var(--head);font-weight:800;font-size:21px;letter-spacing:-.045em;line-height:1;color:var(--t-accent-text)} .lockup .mark{width:1.3em;height:1.3em;display:block;overflow:visible;flex:none} .brand{text-decoration:none;display:flex} .brand-sm .lockup{font-size:18px} .ava{position:relative;display:block;flex:none;width:var(--s,22px);height:var(--s,22px);border-radius:50%;background:var(--blue)} .ava svg{position:absolute;left:19%;top:19%;width:62%;height:62%;overflow:visible} .ava--ring{box-shadow:0 0 0 2px var(--t-card),0 0 0 3px var(--t-line2)} /* header */ .hdr{position:sticky;top:14px;z-index:30;padding:0 20px;margin-top:14px} .hdr-bar{max-width:1040px;margin:0 auto;height:60px;padding:0 9px 0 20px;display:flex;align-items:center;gap:14px;background:var(--t-glass78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:999px;box-shadow:0 8px 30px -14px var(--t-sh18)} .hdr-nav{display:flex;gap:24px;align-items:center;font-size:14px} .hdr-nav a{text-decoration:none;color:var(--body);font-weight:500} .hdr-nav a:hover,.hdr-nav a[aria-current]{color:var(--ink)} .hdr-nav a[aria-current]{font-weight:600} .hdr-actions{display:flex;gap:6px;align-items:center} .lang{display:flex;align-items:center;gap:7px;padding:0 4px 0 2px;font-size:13px;letter-spacing:.02em} .lang-on{color:var(--t-accent-text);font-weight:700} .lang-sep{color:var(--t-sep)} .lang a{text-decoration:none;color:var(--mute);font-weight:500}.lang a:hover{color:var(--ink)} .hdr-login{text-decoration:none;color:var(--ink);font-weight:500;font-size:14px;padding:10px 14px;white-space:nowrap} .hdr-book{font-size:14px;padding:11px 18px} .hdr-menu{display:none;border:1px solid var(--line2);cursor:pointer;width:42px;height:42px;border-radius:50%;background:var(--t-card);color:var(--ink);align-items:center;justify-content:center;padding:0} .hdr-menu-ic{position:relative;width:16px;height:2px;background:currentColor;border-radius:2px;display:block} .hdr-menu-ic::before,.hdr-menu-ic::after{content:"";position:absolute;left:0;width:16px;height:2px;background:currentColor;border-radius:2px;transition:transform .2s ease} .hdr-menu-ic::before{top:-5px}.hdr-menu-ic::after{top:5px} .hdr-menu[aria-expanded="true"] .hdr-menu-ic{background:transparent} .hdr-menu[aria-expanded="true"] .hdr-menu-ic::before{transform:translateY(5px) rotate(45deg)} .hdr-menu[aria-expanded="true"] .hdr-menu-ic::after{transform:translateY(-5px) rotate(-45deg)} .hdr-drop{max-width:1040px;margin:8px auto 0;padding:10px 22px 16px;background:var(--t-card);border:1px solid var(--line);border-radius:24px;box-shadow:0 18px 40px -18px var(--t-sh30);display:flex;flex-direction:column} .hdr-drop[hidden]{display:none} .hdr-drop a{text-decoration:none;color:var(--ink);font-weight:600;font-size:17px;padding:12px 6px;border-bottom:1px solid var(--sand2)} .hdr-drop .hdr-drop-login{font-weight:500;font-size:16px;border-bottom:0} .lang-drop{padding:14px 6px 4px;border-top:1px solid var(--sand2);font-size:15px} .lang-drop a{font-size:15px;padding:0;border:0} .lang-dd{position:relative;font-size:13px;letter-spacing:.02em} .lang-dd>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:4px;min-height:40px;padding:0 6px;border-radius:999px;color:var(--t-accent-text);font-weight:700} .lang-dd>summary::-webkit-details-marker{display:none} .lang-dd>summary svg{width:12px;height:12px;transition:transform .15s}.lang-dd[open]>summary svg{transform:rotate(180deg)} .lang-dd>summary:focus-visible{outline:2px solid var(--blue);outline-offset:2px} .lang-list{position:absolute;right:0;top:calc(100% + 6px);z-index:60;min-width:190px;display:flex;flex-direction:column;padding:6px;background:var(--t-cream,var(--t-canvas));border:1px solid var(--sand2);border-radius:14px;box-shadow:0 14px 34px -14px var(--t-sh35)} .lang-item{display:flex;align-items:center;min-height:40px;padding:0 12px;border-radius:10px;text-decoration:none;color:var(--body);font-weight:500;white-space:nowrap} a.lang-item:hover{background:var(--sand);color:var(--ink)} .lang-item.on{color:var(--t-accent-text);font-weight:700} .lang-dd-drop{padding:14px 6px 4px;border-top:1px solid var(--sand2);font-size:15px} .lang-dd-drop .lang-list{position:static;box-shadow:none;border:0;padding:4px 0 0;background:transparent} .en-tag{font-size:.85em;opacity:.7} .ftr-mt{font-size:12.5px;color:var(--mute);margin:0 0 10px}.ftr-mt a{color:inherit} .impressum{font-size:12.5px;line-height:1.6;color:var(--mute);margin:0 0 14px} .impressum p{margin:0 0 6px}.impressum>summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:6px;min-height:32px;margin:0}.impressum>summary::-webkit-details-marker{display:none}.impressum>summary::after{content:'+';font-weight:400}.impressum[open]>summary::after{content:'−'}.impressum[open]>summary{margin-bottom:6px} .lang-hint{display:flex;align-items:center;justify-content:center;gap:6px 14px;flex-wrap:wrap;padding:6px 52px 6px 16px;position:relative;background:var(--ink,var(--t-ink-bg));color:var(--t-on-accent);font-size:14px;line-height:1.4;text-align:center} .lang-hint a{color:var(--t-on-accent);font-weight:700} .lang-hint button{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:inherit;cursor:pointer;font-size:20px;line-height:1;min-width:40px;min-height:40px;border-radius:999px}.lang-hint a{min-height:32px;display:inline-flex;align-items:center} @media (max-width:999px){.hdr-nav,.hdr-actions .lang,.hdr-actions .lang-dd,.hdr-login{display:none}.hdr-menu{display:flex}} @media (max-width:420px){.hdr-book{display:none}} /* footer + ask form */ .ftr{padding:64px 20px 48px;color:var(--mute);font-size:14px} .ftr .wrap{display:flex;flex-direction:column;gap:40px} .ask{display:flex;flex-wrap:wrap;justify-content:space-between;gap:28px;align-items:flex-end} .ask-head{display:flex;flex-direction:column;gap:6px} .ask-title{margin:0;font-family:var(--head);font-weight:700;font-size:22px;color:var(--ink);letter-spacing:-.025em} .ask-form{flex:1 1 360px;max-width:560px;display:flex;flex-direction:column;gap:8px} .ask-row{display:flex;gap:6px;flex-wrap:wrap;padding:6px;background:var(--t-card);border:1px solid var(--line);border-radius:26px} .ask-in{flex:1 1 150px;min-width:0;border:0;outline:0;background:var(--sand);font:inherit;padding:12px 16px;border-radius:999px;color:var(--ink);resize:none;line-height:1.4} .ask-in::placeholder{color:var(--t-faint)} .ask-in:focus-visible{outline-offset:0} .ask-q{flex:2 1 180px;max-height:160px;overflow:auto} .ask-send{flex:1 0 auto;font-size:14px;padding:12px 22px} .ask-topic{margin:0 0 2px 14px;font-size:13px;font-weight:600;color:var(--t-accent-text)} .ask-err{margin:0 0 0 14px;color:var(--t-err);font-size:13.5px} .ask-ok{margin:0;padding:14px 18px;background:var(--t-card);border:1px solid var(--line);border-radius:18px;color:var(--ink);font-size:15px} /* footer: brand + three link columns, then one quiet line with the legal details (BW 3:15d) */ .ftr-main{display:grid;grid-template-columns:minmax(0,38ch) repeat(3,max-content);justify-content:space-between;gap:32px clamp(32px,6vw,96px);border-top:1px solid var(--line2);padding-top:40px} .ftr-brand{display:flex;flex-direction:column;gap:14px;max-width:34ch} .ftr-tag{margin:0;font-size:14.5px;line-height:1.55;color:var(--body)} .ftr-contact{margin:0;display:flex;flex-wrap:wrap;gap:6px 18px} .ftr-col{display:flex;flex-direction:column;gap:10px} .ftr-h{margin:0 0 4px;font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)} :is(.ftr-col,.ftr-contact) a{color:var(--mute);text-decoration:none;font-weight:500;font-size:14.5px;width:fit-content} :is(.ftr-col,.ftr-contact) a:hover{color:var(--ink)} .ftr-base{border-top:1px solid var(--line);padding-top:18px} .ftr-reg{font-style:normal;font-size:12.5px;line-height:1.6;color:var(--mute);display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px 24px} @media (max-width:860px){.ftr-main{grid-template-columns:repeat(3,minmax(0,1fr));justify-content:stretch}.ftr-brand{grid-column:1/-1;max-width:none}} @media (max-width:520px){.ftr-main{grid-template-columns:1fr 1fr}.ftr-col:last-child{grid-column:1/-1}} .footnote-wrap{padding:40px 20px 0} .footnote{margin:0;font-size:12.5px;line-height:1.6;color:var(--mute);max-width:80ch} /* FAQ / accordions */ .faq{background:var(--t-card);border:1px solid var(--line);border-radius:18px;overflow:hidden} .faq-h{margin:0;font:inherit} .faq-btn{all:unset;cursor:pointer;box-sizing:border-box;width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 24px} .faq-btn:focus-visible{outline:2px solid var(--t-focus);outline-offset:-4px;border-radius:18px} .faq-q{font-family:var(--head);font-weight:600;font-size:19px;letter-spacing:-.02em;line-height:1.3;color:var(--ink);min-width:0} /* plus/minus drawn as two bars, not glyphs: a font's «–» sits lower than its «+», so the minus looked off-centre */ .faq-icon{flex:none;width:30px;height:30px;border-radius:50%;background:var(--sand2);color:var(--ink);position:relative} .faq-icon::before,.faq-icon::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;border-radius:1px;background:currentColor} .faq-icon::after{transform:rotate(90deg)} .faq.open .faq-icon{background:var(--blue);color:var(--t-cream)} .faq.open .faq-icon::after{display:none} .faq-body[hidden]{display:none} .faq-a{margin:0;padding:0 24px 24px;font-size:16px;line-height:1.62;color:var(--body);max-width:64ch;text-wrap:pretty} .faq-btn--today{padding:20px 24px} .faq-today{flex:1;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px} .faq-today .faq-q{font-weight:700} .faq-sub{font-size:14.5px;color:var(--mute)} .dots{list-style:none;margin:0;padding:0 24px 22px;display:flex;flex-direction:column;gap:8px} .dots li{display:flex;gap:10px;align-items:baseline;font-size:15.5px;line-height:1.5;color:var(--t-body2)} .dots li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--blue);transform:translateY(-2px)} .faq-list{display:flex;flex-direction:column;gap:10px} .faq-list[hidden]{display:none} .tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:6px} .tab{cursor:pointer;font-size:14px;font-weight:600;padding:9px 16px;border-radius:999px;border:1px solid var(--line);background:var(--t-card);color:var(--ink)} .tab.on{background:var(--blue);border-color:var(--blue);color:var(--t-cream)} /* connectors */ .cx-row{display:grid;grid-template-columns:minmax(0,180px) minmax(0,1fr);gap:16px;align-items:center;padding:16px 0;border-bottom:1px solid var(--sand2)} .cx-name{font-size:14px;font-weight:600;color:var(--mute)} .cx-tools{display:flex;flex-wrap:wrap;gap:8px} .cx-tool{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;padding:8px 14px;background:var(--sand);border-radius:999px} .cx-tool img{width:18px;height:18px} .cx-soon .cx-tool{background:var(--t-card);border:1px dashed var(--t-line3);color:var(--mute)} @media (max-width:560px){.cx-row{grid-template-columns:1fr;gap:8px}} /* pricing calculator */ .calc{padding:8px 20px 0} .calc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));gap:16px;align-items:start} .card{background:var(--t-card);border:1px solid var(--line);border-radius:24px} .calc-form{padding:clamp(18px,3vw,28px) clamp(20px,3.4vw,32px);display:flex;flex-direction:column;margin:0} .seg{display:flex;padding:4px;background:var(--sand);border-radius:999px;flex-wrap:wrap;align-self:flex-start;margin-bottom:6px} .seg-btn{border:0;cursor:pointer;font-size:14px;font-weight:600;padding:9px 18px;border-radius:999px;background:transparent;color:var(--body);display:flex;align-items:center;gap:8px} .seg-btn.on{background:var(--blue);color:var(--t-cream)} .seg-tag{font-size:11.5px;font-weight:600;padding:3px 8px;border-radius:999px;background:var(--t-accent-wash);color:var(--t-accent-text)} .calc-top{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:flex-start;justify-content:space-between} .seg-cur .cur-btn{border:0;cursor:pointer;font-size:13px;font-weight:600;letter-spacing:.02em;padding:9px 14px;border-radius:999px;background:transparent;color:var(--body);min-height:40px} .seg-cur .cur-btn.on{background:var(--blue);color:var(--t-cream)} .cur-hint{align-self:flex-end;border:0;background:none;cursor:pointer;font-size:13px;font-weight:600;color:var(--t-accent-text);padding:2px 0;margin:-4px 0 4px;text-decoration:underline;text-underline-offset:3px} .price-tax{display:block;font-size:12.5px;opacity:.75;margin-top:6px} .seg-btn.on .seg-tag{background:var(--t-cream);color:var(--t-accent)} .cf{display:flex;flex-direction:column;gap:3px;padding:12px 0;border-bottom:1px solid var(--sand2)} .cf:last-child{border-bottom:0} .cf-row{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap} .cf-label{font-size:16px;font-weight:600;color:var(--ink);min-width:0;line-height:1.35} .cf-help{font-size:13px;line-height:1.4;color:var(--mute)} .stepper{display:flex;align-items:center;gap:4px;padding:4px;background:var(--sand);border-radius:999px;flex:none} .step{border:0;cursor:pointer;width:40px;height:40px;border-radius:50%;background:var(--t-card);color:var(--ink);font-size:18px;line-height:1} .step-in{width:60px;border:0;outline:0;background:transparent;text-align:center;font:inherit;font-size:17px;font-weight:600;color:var(--ink)} .switch{flex:none;border:0;cursor:pointer;width:56px;height:32px;border-radius:999px;background:var(--t-line3);padding:3px;display:flex;justify-content:flex-start;transition:background .2s} .switch[aria-checked="true"]{background:var(--blue);justify-content:flex-end} .knob{width:26px;height:26px;border-radius:50%;background:var(--t-card);box-shadow:0 1px 3px var(--t-sh25)} .cf-more{all:unset;cursor:pointer;align-self:flex-start;display:flex;align-items:center;gap:6px;margin-top:4px;font-size:13px;font-weight:600;color:var(--t-accent-text)} .cf-more:focus-visible{outline:2px solid var(--t-focus);outline-offset:3px} .cf-info{margin-top:6px;padding:14px 16px;background:var(--sand);border-radius:14px;display:flex;flex-direction:column;gap:8px} .cf-info[hidden]{display:none} .cf-info strong{font-size:14px;font-weight:600;color:var(--ink)} .cf-info p{margin:0;font-size:14px;line-height:1.55;color:var(--body);text-wrap:pretty} .cf-info .cf-info-small{font-size:12.5px;color:var(--mute)} .price{position:sticky;top:96px;background:var(--blue);border-radius:24px;padding:clamp(22px,3.4vw,32px);display:flex;flex-direction:column;gap:14px;color:var(--t-cream);box-shadow:0 40px 80px -40px var(--t-accent-glow55)} .price-k{font-size:14px;font-weight:600} .price-main{display:flex;flex-direction:column;gap:14px} .price-main[hidden],.price-talk[hidden]{display:none} .price-total-row{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap} .price-total{font-family:var(--head);font-weight:700;font-size:clamp(44px,5.4vw,60px);letter-spacing:-.045em;line-height:1} .price-unit{font-size:16px} .price-year{font-size:14px;line-height:1.45;margin-top:-8px} .price-lines{display:flex;flex-direction:column;gap:9px;border-top:1px solid var(--t-on-accent-28);padding-top:14px} .pl{display:flex;flex-direction:column;gap:3px} .pl-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:15px;line-height:1.45} .pl-label{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;min-width:0} .pl-label s{opacity:.6}.pl-label b{font-weight:600} .pl-amt{flex:none;font-weight:600;white-space:nowrap} .pl-note{font-size:13px;line-height:1.4;opacity:.82} .price-incl{font-size:14.5px;line-height:1.5;border-top:1px solid var(--t-on-accent-28);padding-top:12px} .price-cta{margin-top:auto;display:flex;flex-wrap:wrap;gap:8px} .price-cta .btn{flex:1 1 120px;font-size:15px;padding:14px 18px} .price-talk{display:flex;flex-direction:column;gap:22px;justify-content:center;flex:1} .price-talk-h{font-family:var(--head);font-weight:700;font-size:clamp(28px,3.2vw,38px);letter-spacing:-.035em;line-height:1.1;text-wrap:balance} .price-talk .btn{align-self:flex-start} .ext-toggle{all:unset;box-sizing:border-box;cursor:pointer;width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 18px;color:var(--t-cream)} .ext-toggle:focus-visible{outline:2px solid var(--t-cream);outline-offset:-4px;border-radius:16px} #ext-more[hidden]{display:none} /* home: decisions feed (built by site.js) */ .feed{width:100%;background:var(--t-glass90);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:18px;padding:14px;box-shadow:0 24px 50px -20px var(--t-sh40);display:flex;flex-direction:column;gap:12px;min-height:200px} .feed-top{display:flex;flex-direction:column;gap:8px} .feed-h{display:flex;justify-content:space-between;align-items:center;gap:8px} .feed-t{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--ink)} .feed-t::before{content:"";width:22px;height:22px;flex:none} .pill{font-size:11px;font-weight:600;padding:3px 9px;border-radius:999px;white-space:nowrap} .pill-sun{background:var(--sun);color:var(--t-on-sun)}.pill-blue{background:var(--t-accent-wash);color:var(--t-accent-text)} .feed-n{display:flex;align-items:baseline;gap:6px} .feed-num{font-family:var(--head);font-weight:700;font-size:30px;letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums} .feed-of{font-size:13px;color:var(--mute)} .feed-bar{height:4px;background:var(--line);border-radius:2px;overflow:hidden} .feed-bar i{display:block;height:100%;background:var(--blue);transition:width .3s} .feed-list{height:312px;display:flex;flex-direction:column;justify-content:flex-start;overflow:hidden} .feed[data-feed="compact"] .feed-list{height:96px} .feed-list.done{justify-content:center} .fc{overflow:hidden;flex:none} .fc-in{background:var(--t-card);border:1px solid var(--line);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:7px;box-shadow:0 10px 24px -16px var(--t-sh35)} .fc.ok .fc-in{border-color:var(--t-accent-wash)} .fc-h{display:flex;justify-content:space-between;align-items:center;gap:8px} .fc-kind{font-size:11px;color:var(--mute)} .fc-t{display:flex;gap:7px;align-items:baseline;font-size:13.5px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .fc-t i{font-style:normal;font-size:11.5px;color:var(--t-accent-text)} .fc-a{height:24px;display:flex;align-items:center;gap:5px} .fc-a img{width:14px;height:14px} .fc-a .in{font-size:11.5px;color:var(--t-body2)} .fc-ap{font-size:11px;font-weight:600;padding:5px 11px;background:var(--blue);color:var(--t-cream);border-radius:999px;transition:transform .1s} .fc.press .fc-ap{transform:scale(.88)} .fc-ed{font-size:11px;padding:4px 9px;border:1px solid var(--line2);border-radius:999px;color:var(--ink)} .feed-done{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center} .feed[data-feed="compact"] .feed-done{gap:5px} .feed-done .ok{width:44px;height:44px;border-radius:50%;background:var(--blue);color:var(--t-cream);display:flex;align-items:center;justify-content:center;font-size:22px} .feed[data-feed="compact"] .feed-done .ok{width:30px;height:30px;font-size:16px} .feed-done b{font-family:var(--head);font-weight:700;font-size:20px;letter-spacing:-.02em;color:var(--ink)} .feed[data-feed="compact"] .feed-done b{font-size:17px} .feed-done span{font-size:12.5px;color:var(--body)} /* home: responsive bits the React runtime used to switch */ .only-narrow{display:none} @media (max-width:819px){.only-wide{display:none}.only-narrow{display:block}.hero-img{aspect-ratio:4/3.3!important;object-position:28% 40%!important}} @media (max-width:899px){.stack-left,.stack-card{position:static!important}.stack{gap:16px!important;padding-bottom:0!important}} /* product toys */ .q-done-row[hidden],.q-open[hidden],.q-done[hidden],[data-up-done][hidden]{display:none} /* legal pages */ .legal-hero{background:var(--t-hero);margin-top:-74px;padding:150px 20px 56px} .legal-hero .wrap{max-width:760px} .eyebrow{display:inline-flex;align-items:center;padding:7px 8px;background:var(--t-card);border:1px solid var(--line);border-radius:999px} .eyebrow span{padding:3px 9px;background:var(--t-accent-wash);color:var(--t-accent-text);border-radius:999px;font-weight:600;font-size:12px} .legal-hero h1{margin:20px 0 0;font-family:var(--head);font-weight:700;font-size:clamp(36px,5vw,60px);letter-spacing:-.045em;line-height:1;color:var(--ink);text-wrap:balance} .legal-hero .lead{margin:16px 0 0;font-size:18px;line-height:1.6;color:var(--body);max-width:60ch;text-wrap:pretty} .legal-hero .updated{margin:14px 0 0;font-size:14px;color:var(--mute)} .legal{max-width:760px;margin:0 auto;padding:24px 20px 64px} .legal h2{margin:44px 0 0;font-family:var(--head);font-weight:700;font-size:26px;letter-spacing:-.03em;line-height:1.15;color:var(--ink)} .legal h3{margin:28px 0 0;font-family:var(--head);font-weight:600;font-size:19px;letter-spacing:-.02em;color:var(--ink)} .legal p,.legal ul,.legal ol{margin:14px 0 0;font-size:16.5px;line-height:1.65;color:var(--body)} .legal ul,.legal ol{padding-left:22px} .legal li{margin-top:8px} .legal a{color:var(--t-accent-text);font-weight:500} .legal table{width:100%;border-collapse:collapse;margin-top:16px;font-size:15px;line-height:1.5} .legal th,.legal td{text-align:left;vertical-align:top;padding:10px 12px;border-top:1px solid var(--line2);color:var(--body)} .legal th{color:var(--ink);font-weight:600;font-size:13.5px;letter-spacing:.02em} .legal .note{padding:18px 20px;background:var(--sand2);border-radius:16px;color:var(--t-body2)} .legal .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:12px;margin-top:20px} .legal .card-s{background:var(--t-card);border:1px solid var(--line);border-radius:18px;padding:20px;display:flex;flex-direction:column;gap:6px} .legal .card-s b{font-family:var(--head);font-size:18px;letter-spacing:-.02em;color:var(--ink)} .legal .card-s span{font-size:15px;line-height:1.55;color:var(--body)} .nf{min-height:70vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:120px 20px 80px} .nf h1{margin:0;font-family:var(--head);font-weight:800;font-size:clamp(72px,16vw,160px);letter-spacing:-.06em;line-height:.9;color:var(--t-accent-text)} .nf p{margin:18px auto 28px;max-width:40ch;font-size:18px;line-height:1.55;color:var(--body)} .nf nav{display:flex;flex-wrap:wrap;justify-content:center;gap:8px} /* consent */ .consent{position:fixed;left:18px;bottom:18px;z-index:300;max-width:340px;padding:18px 20px;border-radius:20px;background:var(--t-card);border:1px solid var(--line);box-shadow:0 18px 50px -20px var(--t-sh35);font-size:13.5px;line-height:1.45;color:var(--body);outline:none} .consent p{margin:0} .consent-btns{display:flex;gap:10px;margin-top:14px} .consent-btns button{flex:1;min-height:44px;border-radius:999px;border:1px solid transparent;font-weight:600;cursor:pointer;font-size:14px} .consent-allow{background:var(--blue);color:var(--t-cream)} .consent-decline{background:var(--t-card);color:var(--ink);border-color:var(--line2)!important} @media (max-width:420px){.consent{left:10px;right:10px;max-width:none}} /* keyframes from the export (Home cards) */ @keyframes cxMarq{from{transform:translateX(0)}to{transform:translateX(-50%)}} @keyframes cxType{0%{max-width:0}25%,90%{max-width:220px}96%,100%{max-width:0}} @keyframes cxBlink{0%{opacity:1}100%{opacity:0}} @keyframes cxA{0%,10%{opacity:0;transform:translateY(8px)}18%,90%{opacity:1;transform:none}96%,100%{opacity:0}} @keyframes cxB{0%,25%{opacity:0;transform:translateY(8px)}33%,90%{opacity:1;transform:none}96%,100%{opacity:0}} @keyframes cxC{0%,40%{opacity:0;transform:translateY(8px)}48%,90%{opacity:1;transform:none}96%,100%{opacity:0}} @keyframes cxD{0%,55%{opacity:0;transform:translateY(8px)}63%,90%{opacity:1;transform:none}96%,100%{opacity:0}} @keyframes cxPulse{0%,100%{box-shadow:0 0 0 0 rgba(199,91,57,.45)}50%{box-shadow:0 0 0 6px rgba(199,91,57,0)}} @keyframes cxPress{0%,52%{transform:none}56%{transform:scale(.88)}60%,100%{transform:none}} @keyframes cxOut{0%,60%{opacity:1}64%,96%{opacity:0}100%{opacity:1}} @keyframes cxIn{0%,62%{opacity:0;transform:translateY(6px)}68%,92%{opacity:1;transform:none}97%,100%{opacity:0}} @media (prefers-reduced-motion:reduce){[data-cx-anim]{animation:none!important}[data-cx-in]{display:none!important}} /* founders: 4:3 photos fill the card frame */ .founder-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} /* calculator: tips + who-runs radios; price card extra line */ .tip{margin-top:4px} .tip-btn{all:unset;cursor:pointer;font-size:13px;font-weight:600;color:var(--t-accent-text)} .tip-btn::after{content:" ▾";font-size:11px} .tip-btn[aria-expanded="true"]::after{content:" ▴"} .tip-btn:focus-visible{outline:2px solid var(--t-focus);outline-offset:3px} .tip-body{margin:6px 0 0;padding:12px 14px;background:var(--sand);border-radius:12px;font-size:13.5px;line-height:1.5;color:var(--body)} .tip-body[hidden]{display:none} .cf-who{border:0;margin:0;padding:12px 0;min-width:0} .cf-who legend{padding:0;margin-bottom:8px} .who{display:flex;gap:8px;flex-wrap:wrap} .who-opt{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border:1px solid var(--line2);border-radius:999px;background:var(--t-card);cursor:pointer;font-size:14.5px;font-weight:500} .who-opt:has(input:checked){background:var(--blue);border-color:var(--blue);color:var(--t-cream)} .who-opt input{position:absolute;opacity:0;width:1px;height:1px} .who-opt:has(input:focus-visible){outline:2px solid var(--t-focus);outline-offset:3px} .price-more{font-size:13px;line-height:1.5;opacity:.82} /* form: the plan chip above the fields */ .ask-chip{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:0 0 4px 14px;font-size:13.5px} .ask-chip[hidden]{display:none} .ask-chip-k{font-weight:600;color:var(--t-accent-text)} .ask-chip-v{color:var(--ink);padding:3px 10px;background:var(--t-card);border:1px solid var(--line);border-radius:999px;font-weight:500} /* look switcher (light/dark + theme) */ .look{position:relative;display:flex;align-items:center;gap:2px} .look-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;border:0;background:transparent;color:var(--body);cursor:pointer;padding:0} .look-btn:hover{background:var(--sand);color:var(--ink)} .look-btn svg{width:18px;height:18px} .look-btn .ic-moon{display:none} [data-mode="dark"] .look-btn .ic-sun{display:none} [data-mode="dark"] .look-btn .ic-moon{display:block} .look-menu{position:absolute;right:0;top:44px;min-width:200px;padding:6px;background:var(--t-card);border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 40px -18px var(--t-sh30);display:flex;flex-direction:column;z-index:40} .look-menu[hidden]{display:none} .look-menu button{all:unset;cursor:pointer;padding:10px 12px;border-radius:10px;font-size:14px;font-weight:500;color:var(--ink);display:flex;align-items:center;gap:10px} .look-menu button::before{content:"";width:8px;height:8px;border-radius:50%;border:1.5px solid var(--line2)} .look-menu button.on::before{background:var(--blue);border-color:var(--blue)} .look-menu button:hover,.look-menu button:focus-visible{background:var(--sand);outline:none} .look-link{margin:4px 6px 4px;padding:8px 6px 4px;border-top:1px solid var(--sand2);font-size:12.5px;color:var(--mute);text-decoration:none} .look-link:hover{color:var(--ink)} .look-drop{padding:14px 6px 4px;border-top:1px solid var(--sand2);gap:10px} .look-seg{display:inline-flex;gap:4px;padding:3px;background:var(--sand);border-radius:999px} .look-seg button{border:0;background:transparent;cursor:pointer;padding:7px 12px;border-radius:999px;font-size:13.5px;font-weight:600;color:var(--body)} .look-seg button.on{background:var(--blue);color:var(--t-cream)} [data-mode="dark"] .look-menu{background:var(--t-card)} @media (max-width:999px){.hdr-actions .look{display:none}} /* the palette switcher shows only in the theme lab (?theme in the URL, theme.js sets html[data-lab]) */ html:not([data-lab]) :is([data-theme-menu],#themeMenu,.look-seg){display:none!important} /* home: the before/in/after list follows the card in view (site.js) and scrolls to it on click */ .stack-left .x29 span{cursor:pointer;transition:color .2s;position:relative;padding-left:14px} .stack-left .x29 span::before{content:"";position:absolute;left:0;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--t-line2);transition:background .2s,transform .2s} .stack-left .x29 span:hover{color:var(--t-ink)} .stack-left .x29 span.on{color:var(--t-ink);font-weight:600} .stack-left .x29 span.on::before{background:var(--t-accent);transform:scale(1.3)} /* solutions: four cards sit two by two, never three and one */ @media (min-width:700px){.x202:has(> :nth-child(4)):not(:has(> :nth-child(5))){grid-template-columns:repeat(2,minmax(0,1fr))}} .x72.x72-quiet{color:var(--t-mute)} /* Home's kind label is quiet in Jeroen's 28 Oct export; Product keeps the blue */ /* interaction states (Codex UI audit, 28 Oct): one action family for and