:root{--bg:#F7F7F4;--panel:#FFFFFF;--sunk:#F3F3F0;--sunk2:#EDECEA;--line:rgba(14,17,23,.12);--line2:rgba(14,17,23,.05);--txt:#0E1117;--txt2:#3B465C;--muted:#525760;--slate:#0E1117;--slate2:#171B23;--slateline:#2A3038;--slatetxt:#D5D8DC;--slatemute:#8C9198;--acc:#00C896;--acc2:#00936E;--acchov:#00B888;--accbg:rgba(0,200,150,.12);--accline:rgba(0,200,150,.35);--accsoft:rgba(0,200,150,.55);--yes:#007F60;--likely:#4F51CD;--unclear:#975E09;--no:#9C212C;--grp:#F3F3F0;--glow:rgba(0,200,150,.10);--col:1280px;--col6:1280px;--adm:#F59E0B;--adm2:#D97706;--admbg:#FEF3C7;--admline:#FDE68A;--topbg:rgba(247,247,244,.95);--bandbg:rgba(255,255,255,.5);--closebg:#0E1117;--hovbg:#F8FAFD;--mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace} /* The designed dark palette, copied from the Make file's theme.css. Only a page that opts in - head(title,{themed:true}) plus the header toggle - ever stamps .dark on . */ .dark{--bg:#111318;--panel:#1A1B21;--sunk:#1E1F27;--sunk2:#1E1F27;--line:rgba(255,255,255,.08);--line2:rgba(255,255,255,.05);--txt:#EDECEA;--txt2:#C7CBD4;--muted:#8C909E;--grp:#1E1F27;--accbg:rgba(0,200,150,.14);--topbg:rgba(17,19,24,.95);--bandbg:rgba(26,27,33,.5);--closebg:#0A0B0F;--hovbg:rgba(255,255,255,.03);--acc2:#35D6A6;--yes:#007F60} *{box-sizing:border-box}body{margin:0;font:16px/1.55 "Inter",system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--bg);color:var(--txt);min-height:100vh;display:flex;flex-direction:column;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}main{flex:1 0 auto;width:100%} h1,h2,h3,h4{font-family:"Fraunces",Georgia,serif;font-weight:600;letter-spacing:-.01em} .mono{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace} a{color:var(--acc);text-decoration:none}a:hover{color:var(--acc2);text-decoration:underline;text-underline-offset:2px} header{border-bottom:1px solid var(--slateline);background:var(--slate);position:sticky;top:0;z-index:5} header .wrap{display:flex;gap:20px;align-items:center;padding:0 20px;height:56px;max-width:var(--col);margin:0 auto} header .brand{display:inline-flex;align-items:center;gap:10px;font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:16.5px;letter-spacing:-.02em;color:#F2F5FA}header .brand:hover{text-decoration:none;color:#fff} header nav{display:flex;gap:2px} header nav a{padding:6px 11px;border-radius:6px;color:var(--slatemute);font-size:13.5px} header nav a:hover{background:rgba(255,255,255,.07);color:#EDF1F8;text-decoration:none} header nav a.active{background:rgba(45,78,219,.24);color:var(--accsoft);font-weight:600} header nav a.adm{color:#B7A2F5}header nav a.adm.active{background:rgba(110,75,232,.26);color:#CBBBFF} header .right{margin-left:auto;color:var(--slatemute);font-size:12px;display:flex;gap:10px;align-items:center} header .right .adm-txt{color:var(--accsoft);font-family:"JetBrains Mono",monospace;font-size:11.5px} header .right button.ghost,header .right .btn.ghost{background:transparent;border-color:var(--slateline);color:var(--slatetxt)} header .right button.ghost:hover,header .right .btn.ghost:hover{background:rgba(255,255,255,.08);color:#fff} header .right button.ghost.adm,header .right .btn.ghost.adm{border-color:#3C3068;color:#C4B4F8} header .right a{color:var(--slatetxt)}header .right a:hover{color:#fff} main{padding:18px 20px;max-width:var(--col);margin:0 auto} /* Admin-only UI: one amber accent on whatever only admins see - nav, sub-nav, buttons, panels, columns, pills */ header nav a.adm{color:var(--adm2)}header nav a.adm.active{color:var(--adm2);font-weight:600} .adm-txt{color:var(--adm2)} button.adm,.btn.adm{background:var(--adm);color:#1b1300}button.ghost.adm,.btn.ghost.adm{background:transparent;color:var(--adm2);border-color:var(--admline)}button.ghost.adm:hover,.btn.ghost.adm:hover{background:var(--admbg)} a.adm{color:var(--adm2)} th.adm{color:var(--adm2);background:var(--admbg)}td.adm,tr[data-grp] td.adm{background:var(--admbg)} .pill.adm{background:var(--adm);color:#1b1300} .stat.adm{border-color:var(--admline);background:linear-gradient(var(--admbg),var(--admbg)),var(--panel)} form.card.adm{border-color:var(--admline)}table.adm{border-color:var(--admline)}table.adm th{color:var(--adm2)} .subnav.adm{border-bottom-color:var(--admline)}.subnav.adm a.active{color:var(--adm2);border-bottom-color:var(--adm)} tr.review td{box-shadow:inset 3px 0 0 var(--adm)} /* Whole admin-area pages (Config, Embedding, AI log, Users, Companies, Sources, Refresh log) */ .adm-area table{border-color:var(--admline)}.adm-area th{color:var(--adm2)}.adm-area form.card{border-color:var(--admline)}.adm-area .filters{border-color:var(--admline)} .adm-area button:not(.ghost),.adm-area .btn:not(.ghost){background:var(--adm);color:#1b1300}.adm-area button.ghost:hover,.adm-area .btn.ghost:hover{border-color:var(--admline)} .adm-area h2{color:var(--adm2)} fieldset.cfg{grid-column:1/3;display:grid;grid-template-columns:160px 1fr;gap:10px 14px;margin:0;padding:12px 14px 14px;border:1px solid var(--line);border-radius:10px}fieldset.cfg legend{padding:0 6px;font-weight:600;font-size:15px}fieldset.cfg label{color:var(--muted);padding-top:6px}fieldset.cfg+fieldset.cfg{margin-top:4px}fieldset.cfg div>input:not([type=checkbox]),fieldset.cfg div>select{width:100%} .subnav{display:flex;gap:4px;margin:-6px 0 14px;border-bottom:1px solid var(--line);flex-wrap:wrap}.subnav a{padding:6px 10px;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px}.subnav a:hover{text-decoration:none;color:var(--txt)}.subnav a.active{color:var(--acc2);border-bottom-color:var(--acc)} .filters{display:flex;flex-direction:column;gap:8px;margin-bottom:12px;background:var(--panel);border:1px solid var(--line);padding:10px 12px;border-radius:10px} .frow{display:flex;flex-wrap:wrap;gap:8px;align-items:center} .filters input[type=text],.filters select,form.card input,form.card select,form.card textarea{background:var(--bg);color:var(--txt);border:1px solid var(--line);border-radius:7px;padding:6px 9px;font:inherit} .filters label{display:flex;gap:5px;align-items:center;color:var(--muted);font-size:13px} /* The design's primary button: mint with ink-dark text, and the text stays #0E1117 in dark mode too (text-[#0E1117] in the Make file, not a token) - light on mint would not read. */ button,.btn{background:var(--acc);color:#0E1117;border:1px solid var(--acc);border-radius:9px;padding:7px 14px;font:600 13.5px/1.35 "Inter",sans-serif;cursor:pointer} button:hover,.btn:hover{background:var(--acchov);border-color:var(--acchov);color:#0E1117;text-decoration:none} button.ghost,.btn.ghost{background:var(--panel);border:1px solid var(--line);color:var(--txt)} button.ghost:hover,.btn.ghost:hover{background:var(--sunk);color:var(--txt);border-color:#C6D0DE} button.sm,.btn.sm{padding:3px 9px;font-size:12px;border-radius:5px} button:disabled{opacity:.45;cursor:default} table{width:100%;border-collapse:collapse;background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden} th,td{padding:9px 12px;border-bottom:1px solid var(--line2);text-align:left;vertical-align:top} th{font:500 10.5px/1.2 "JetBrains Mono",monospace;color:var(--muted);text-transform:uppercase;letter-spacing:.11em;background:var(--sunk);border-bottom:1px solid var(--line)} tr:hover td{background:var(--hovbg)} tr[data-grp] td{background:var(--grp)} tr[data-grp]:hover td{background:#EFF3F9} .kwwrap{flex:1} .co{display:inline-flex;align-items:center;gap:7px;white-space:nowrap} /* Role and company share one column: logo, title, then employer and country beneath. */ .rcw{display:flex;gap:10px;align-items:flex-start} .rcw>.logo,.rcw>.logo.ph{margin-top:2px} .rcsp{width:20px;flex:none} .rcm{flex:1;min-width:0} .rct{font-weight:600;font-size:14px;line-height:1.35} .rcc{font-size:12.5px;color:var(--muted);margin-top:2px;display:flex;align-items:center;gap:5px;flex-wrap:wrap;line-height:1.4} .rcc a{color:var(--txt2);font-weight:500}.rcc a:hover{color:var(--acc)} .rcc b{font-weight:500;color:var(--txt2)} .arrow{color:#B4BDCA;margin-right:4px} .tags{margin-top:3px}.logo{width:20px;height:20px;border-radius:5px;object-fit:contain;background:#fff;flex:none}.logo.ph{display:inline-flex;align-items:center;justify-content:center;background:var(--line);color:var(--muted);font-size:11px;font-weight:700;border-radius:5px;width:20px;height:20px} .tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}.tablewrap>table{min-width:720px} tr.blur{cursor:pointer}tr.blur td.title{position:relative} .lockd{color:transparent;text-shadow:0 0 8px var(--txt);user-select:none;font-weight:600} .lock{vertical-align:-2px;margin-left:5px;color:var(--muted)} tr.blur td .peek{display:none;position:absolute;left:10px;top:50%;transform:translateY(-50%);z-index:2;color:var(--acc2);background:var(--panel);border:1px solid var(--acc);border-radius:8px;padding:6px 10px;font-size:13px;font-weight:600;white-space:nowrap;box-shadow:0 10px 24px -10px rgba(16,24,39,.28)} tr.blur:hover td .peek{display:inline-block} .wall{position:sticky;bottom:16px;margin:16px auto;max-width:560px;text-align:center;padding:22px;box-shadow:0 20px 44px -18px rgba(16,24,39,.35)} .pager{margin:10px 2px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}.pager .off{opacity:.4;padding:2px 7px} .pill{display:inline-block;padding:1px 8px;border-radius:999px;font-size:11px;font-weight:600;color:#fff}.p-yes{background:var(--yes)}.p-likely{background:var(--likely)}.p-unclear{background:var(--unclear)}.p-no{background:var(--no)}.p-new{background:transparent;color:var(--acc2);border:1px solid var(--accsoft)}.p-gray{background:#6b7280} .p-loc{background:transparent;border:1px solid var(--line);color:var(--txt);font-weight:500;margin:1px 2px 1px 0;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom} .kwwrap{display:inline-flex;flex-wrap:wrap;gap:4px;align-items:center;background:var(--bg);border:1px solid var(--line);border-radius:7px;padding:4px 8px;min-width:300px;cursor:text} .kwwrap input{border:0 !important;background:transparent !important;outline:none;flex:1;min-width:130px;padding:2px;color:var(--txt);font:inherit} .more{position:relative;color:var(--muted);font-size:12px;white-space:nowrap} .more .tip{position:absolute;left:0;top:100%;margin-top:4px;z-index:20;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:8px 10px;min-width:240px;max-width:420px;font-size:12px;line-height:1.5;color:var(--txt);box-shadow:0 4px 14px rgba(0,0,0,.35);white-space:normal;opacity:0;visibility:hidden;transform:translateY(-2px);transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s} .more:hover .tip,.more:focus-visible .tip{opacity:1;visibility:visible;transform:none;transition:opacity .2s ease,transform .2s ease} button.more.audittog{background:none;border:0;padding:0;font:inherit;cursor:pointer} button.more.audittog[aria-expanded="true"] .pill{outline:2px solid var(--acc);outline-offset:1px} tr.auditdet>td{background:var(--sunk);border-top:0} .auditbox{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;padding:10px 4px} .auditbox>div>b{display:block;font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:5px} @media (prefers-reduced-motion:reduce){.more .tip{transition:none}}td.posted{white-space:nowrap}td.posted .tip{left:auto;right:0}.more.adm{text-decoration:underline dotted var(--adm2);text-underline-offset:3px}.more.adm .tip{border-color:var(--admline)} .tag{display:inline-block;padding:1px 6px;border-radius:4px;font:500 11px/1.65 "JetBrains Mono",ui-monospace,monospace;background:var(--sunk);color:var(--txt2);border:1px solid var(--line);margin:3px 3px 0 0} details.grp{margin:16px 0}details.grp summary{cursor:pointer;font-weight:600;font-size:15px;margin:0 2px 6px}details.grp>table{margin-top:6px} .qnav{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border:1px solid var(--admline);background:var(--admbg);border-radius:9px;padding:8px 12px;margin:0 0 14px} .qnav .pos{color:var(--adm2);font-weight:600}.qnav .keys{margin-left:auto;color:var(--muted);font-size:12px} .qnav kbd{border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;padding:0 4px;font:inherit;font-size:11px} .qnav .btn.sm[aria-disabled="true"]{opacity:.4;pointer-events:none} .albar{border-top:1px dashed var(--line);padding-top:10px;margin-top:2px}.albar a.on{color:var(--acc2);font-weight:600} .alcard{display:flex;justify-content:space-between;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:10px}.alcard.off{opacity:.6} table.adm tr.warn td{background:rgba(245,158,11,.08)}table.adm tr.bad td{background:rgba(239,68,68,.09)} td.err-cell{color:var(--no)}th.rt,td.rt{text-align:right;white-space:nowrap} button.xpand{padding:1px 6px;line-height:1.2;min-width:24px} table.runev tr.sub td{padding:0 10px 10px}.subcap{margin:2px 0 6px}table.adm table.sub{margin:0;border-width:1px} ul.caps{padding-left:18px}ul.caps ul{padding-left:18px;color:var(--muted);margin:2px 0 8px} fieldset.cfg input:disabled{color:var(--muted);background:var(--grp);border-style:dashed;cursor:default} .opnw{display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px}.opnw input{min-width:0} .opnw a.opn{padding:5px 9px;line-height:1}.opnw a.opn[aria-hidden="true"]{visibility:hidden;pointer-events:none} .coactions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line)} .coactions>.small{margin-right:2px} details.catdd{position:relative;display:inline-block;margin:0} details.catdd summary{list-style:none;cursor:pointer;background:var(--bg);color:var(--txt);border:1px solid var(--line);border-radius:7px;padding:6px 9px;font:inherit} details.catdd summary::-webkit-details-marker{display:none} details.catdd summary::after{content:" ▾";color:var(--muted);font-size:11px} details.catdd>div{position:absolute;z-index:15;margin-top:4px;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:8px 12px;min-width:190px;box-shadow:0 10px 24px -10px rgba(16,24,39,.28)} tr.off td{opacity:.5} .muted{color:var(--muted)}.small{font-size:12px}.title a{font-weight:600;color:var(--txt)}.title a:hover{color:var(--acc2)} .actions{white-space:nowrap}.actions form{display:inline}.actions button{margin-right:3px}.actions select{font-size:12px;padding:3px 4px} .stats{display:flex;gap:28px;flex-wrap:wrap;margin-bottom:12px}.statgrp{display:flex;gap:8px;flex-wrap:wrap}.stattl{flex-basis:100%;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}.stat{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 14px;min-width:120px}.stat b{display:block;font-size:20px} form.card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:16px;display:grid;grid-template-columns:160px 1fr;gap:10px 14px;max-width:900px}form.card label{color:var(--muted);padding-top:6px}form.card .full{grid-column:1/3} pre.log{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px;white-space:pre-wrap;font-size:12px;max-height:500px;overflow:auto} .flash{background:rgba(34,197,94,.12);border:1px solid var(--yes);padding:8px 12px;border-radius:8px;margin-bottom:12px} .err{background:rgba(239,68,68,.12);border:1px solid var(--no);padding:8px 12px;border-radius:8px;margin-bottom:12px} .note{margin:0 0 10px} /* sign-in card and dialog, drawn to the design's modal */ .login{max-width:448px;margin:11vh auto;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:28px;position:relative;box-shadow:0 25px 50px -12px rgba(0,0,0,.25)} .authhead{display:flex;align-items:center;gap:8px;margin-bottom:20px} .authhead b{font:600 15px/1 "Inter",system-ui,sans-serif;letter-spacing:-.025em} .marktile{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;flex:none} .login h2{font-size:22px;margin:0 0 6px;letter-spacing:-.02em} .login p.muted{margin:0 0 24px;font-size:13px;line-height:1.625} .login label{display:block;font-size:14px;font-weight:500;margin-bottom:6px} .login input{width:100%;margin:0 0 12px;background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:12px 14px;font:400 14px/1.4 "Inter",sans-serif;color:var(--txt)} .login input:focus{outline:0;border-color:var(--acc);box-shadow:0 0 0 3px rgba(0,200,150,.3)} .btn.google{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;padding:12px 14px;border-radius:16px;font-size:14px} button.dark,.btn.dark{background:var(--txt);border-color:var(--txt);color:var(--bg);border-radius:16px;padding:12px 14px;font-size:14px} button.dark:hover,.btn.dark:hover{background:rgba(14,17,23,.85);border-color:transparent;color:var(--bg)} .orline{display:flex;align-items:center;gap:12px;margin:14px 0;color:var(--muted);font-size:12px} .orline::before,.orline::after{content:"";flex:1;height:1px;background:var(--line)} dialog.login{position:fixed;inset:0;margin:auto;width:calc(100% - 32px);max-height:calc(100dvh - 32px);overflow-y:auto;color:var(--txt);padding:0}dialog.login>div{padding:28px}dialog.login::backdrop{background:rgba(14,17,23,.3);backdrop-filter:blur(4px)}dialog.login .x{position:absolute;top:16px;right:16px;margin:0} dialog.login .x button{width:32px;height:32px;border-radius:999px;background:var(--sunk2);border:0;color:var(--muted);padding:0;font-size:13px} dialog.login .x button:hover{background:var(--sunk);color:var(--txt)} .land{display:flex;flex-direction:column;min-height:100vh} /* The landing bar, 1:1 with the design: bg-background/95 + backdrop-blur-md over a border-b, contents in the max-w-6xl column (1152px). */ .land .top{width:100%;position:sticky;top:0;z-index:40;background:var(--topbg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)} .land .top .wrap{max-width:var(--col6);margin:0 auto;width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 20px;height:56px} .land .top .brand{display:inline-flex;align-items:center;gap:8px;font:600 15px/1 "Inter",system-ui,sans-serif;letter-spacing:-.025em;color:var(--txt)} .land .top .brand:hover{text-decoration:none;color:var(--txt)} .land .top .right{display:flex;gap:12px;align-items:center} .land .top .right a{color:var(--muted);font-size:14px;font-weight:500} .land .top .right a:hover{color:var(--txt);text-decoration:none} @media(max-width:639px){.land .top .wrap{height:auto;min-height:56px;flex-wrap:wrap;padding-top:10px;padding-bottom:10px}.land .top .right{width:100%;justify-content:flex-end}.land .top .right a:first-child{margin-right:auto}header .wrap{height:auto;min-height:56px;flex-wrap:wrap;padding-top:10px;padding-bottom:10px}header nav{order:3;width:100%;overflow:auto;white-space:nowrap}header .right{flex-wrap:wrap}} /* the dark-mode toggle: moon in light, sun in dark, exactly the two lucide glyphs the design uses */ .tgl{width:32px;height:32px;border-radius:12px;border:0;padding:0;display:inline-flex;align-items:center;justify-content:center;background:transparent;color:var(--muted);cursor:pointer} .tgl:hover{color:var(--txt);background:rgba(237,236,234,.6)} .dark .tgl:hover{background:rgba(30,31,39,.6)} html:not(.dark) .tgl .sun{display:none}.dark .tgl .moon{display:none} /* One centered column. Plain block flow: the old landing stacked its sections in one .col with a 64px flex gap, which the redesign inherited as phantom space between a section's kicker, its heading and its cards - each section owns its spacing now. */ .col{width:100%;max-width:var(--col);margin:0 auto;padding:0 20px} /* ---- landing, 1:1 with the Figma Make Landing.tsx. Values are the design's Tailwind classes spelled out; breakpoints are Tailwind's own (sm 640, md 768, lg 1024), written mobile-first. ---- */ .land .col{max-width:var(--col6)} .land .colnarrow{max-width:var(--col);margin:0 auto;padding:0 20px;text-align:center} .kicker{font-family:var(--mono);font-size:11px;color:var(--muted);margin:0 0 8px} /* the design's mint CTA (px-6 py-3 rounded-xl text-sm), with the arrow slide standing in for its hover:gap-3 */ .btn.cta{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border-radius:16px;font-size:14px;font-weight:600} .btn .ar{display:inline-block;transition:transform .15s}.btn:hover .ar{transform:translateX(4px)} .hero2{position:relative;overflow:hidden;padding:56px 0 40px} .hero2::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle,var(--txt) 1.2px,transparent 1.2px);background-size:30px 30px;opacity:.028} .hero2 .glow{position:absolute;border-radius:50%;pointer-events:none} .hero2 .glow.a{top:-128px;left:-128px;width:500px;height:500px;background:radial-gradient(circle,rgba(0,200,150,.09) 0%,transparent 70%)} .hero2 .glow.b{bottom:-80px;right:0;width:400px;height:400px;background:radial-gradient(circle,rgba(99,102,241,.06) 0%,transparent 70%)} .h2grid{position:relative;display:grid;grid-template-columns:1fr;gap:48px;align-items:center} .hright{display:none} .eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:28px;font-family:var(--mono);font-size:12px;color:var(--muted)} .eyebrow .dot{width:10px;height:10px;border-radius:50%;background:var(--acc);flex:none} .hleft h1{font-size:clamp(27px,8.6vw,48px);line-height:1.04;letter-spacing:-.025em;font-weight:600;margin:0 0 20px;white-space:nowrap} .hleft h1 em{font-style:normal;color:var(--acc)} .hleft .sub{font-size:16px;color:var(--muted);line-height:1.625;margin:0 0 32px;max-width:28rem;text-wrap:pretty} .hleft .sub i{font-style:italic} /* the country picker, dressed as a shell command (gap-2 bg-card border rounded-xl px-3.5 py-3 max-w-xs) */ .cmd{display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);border-radius:16px; padding:12px 14px;width:100%;max-width:100%;margin-bottom:20px;box-shadow:0 1px 2px 0 rgba(0,0,0,.05);transition:border-color .15s} .cmd:hover{border-color:rgba(0,200,150,.4)} .cmd:focus-within{border-color:var(--acc);box-shadow:0 0 0 3px rgba(0,200,150,.16)} .cmd .dollar{color:var(--acc);font-family:var(--mono);font-size:14px;flex:none} .cmd label{font-family:var(--mono);font-size:13px;color:var(--muted);flex:none} .cmd .blank{position:relative;flex:1 1 210px;min-width:0;display:flex;align-items:center} .cmd .blank select{appearance:none;-webkit-appearance:none;width:100%;border:0;background:transparent;font-family:var(--mono);font-size:13px;font-weight:600;color:var(--txt);padding:0 20px 0 0;outline:0;cursor:pointer;text-overflow:ellipsis;white-space:nowrap;overflow:hidden} #selectedCountry{display:none;font:600 13px/1.6 var(--mono);padding-right:24px;overflow-wrap:anywhere} .cmd.enhanced #selectedCountry{display:block;width:100%} .cmd.enhanced select{position:absolute;inset:0;opacity:0;height:100%} #countryStatus{font-size:13px;color:var(--muted);margin:12px 0 0;min-height:1.5em} .code.checking .cterm{animation:preview-check 1s ease-in-out infinite} @keyframes preview-check{50%{opacity:.45}} @media(prefers-reduced-motion:reduce){.code.checking .cterm{animation:none}} .cmd .blank .chev{position:absolute;right:0;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--muted);opacity:.6} /* the code editor (rounded-2xl, the design's exact shadow stack) */ .code{border-radius:16px;overflow:hidden;background:#0D1117;box-shadow:0 32px 64px rgba(0,0,0,.35),0 0 0 1px rgba(48,54,61,.9),0 0 80px rgba(0,200,150,.07)} .cbar{display:flex;align-items:center;gap:8px;padding:12px 16px;background:#161B22;border-bottom:1px solid #21262D} .cbar i{width:12px;height:12px;border-radius:50%;flex:none} .cbar b{margin-left:auto;font-family:var(--mono);font-size:11px;font-weight:400;color:#6C7B8B} .cbody{margin:0;padding:20px;font-family:var(--mono);font-size:12.5px;line-height:1.9;color:#CACACC;overflow-x:auto;white-space:pre-wrap;overflow-wrap:anywhere} .c-cm{color:#546E7A}.c-kw{color:#C792EA}.c-op{color:#89DDFF}.c-str{color:#C3E88D}.c-num{color:#F78C6C} .c-fn{color:#82AAFF}.c-fn2{color:#00C896}.c-ok{color:#28C840}.c-dim{color:#6C7B8B}.c-out{color:#CACACC} .cur{display:inline-block;width:7px;height:15px;background:var(--acc);vertical-align:-2px;margin-left:2px} .cterm{padding:12px 20px;border-top:1px solid #21262D;background:#0A0E14;font-family:var(--mono);font-size:11px;line-height:1.8;color:#546E7A;white-space:pre-wrap} /* the design's motion: a blinking caret, a panel that drifts, a grid that breathes, a pinging dot. All of it is decoration, so all of it stops for prefers-reduced-motion. */ .cur{animation:blink 1.1s step-end infinite} @keyframes blink{0%,100%{opacity:1}50%{opacity:0}} .hright{animation:floatUp 5s ease-in-out infinite} @keyframes floatUp{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}} .hero2::before{animation:gridPulse 6s ease-in-out infinite} @keyframes gridPulse{0%,100%{opacity:.028}50%{opacity:.048}} .eyebrow .dot{animation:ping 2.4s cubic-bezier(0,0,.2,1) infinite} @keyframes ping{0%{box-shadow:0 0 0 0 rgba(0,200,150,.5)}70%,100%{box-shadow:0 0 0 10px rgba(0,200,150,0)}} .doable{display:flex;align-items:center;gap:8px;margin:0 0 20px;font-size:14px;color:var(--muted)} .cyc{display:inline-flex;align-items:center;font-family:var(--mono);font-size:12px;font-weight:600; padding:4px 12px;border-radius:999px;border:1px solid rgba(0,200,150,.3);background:rgba(0,200,150,.1);color:var(--acc2); transition:opacity .2s ease,transform .2s ease} @media (prefers-reduced-motion:reduce){ .cur,.hright,.hero2::before,.eyebrow .dot{animation:none} .cyc{transition:none} } /* logo strip: 52px slots, a neutral square standing in until the logo loads (the design fades each in) */ .ticker{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--panel);padding:16px 0} .ticker .track{display:flex;align-items:center;width:max-content;animation:tick 38s linear infinite} .ticker .tk{display:inline-flex;align-items:center;justify-content:center;width:52px;flex:none} .ticker .tkbox{position:relative;width:22px;height:22px;flex:none} .ticker .tkbox::before{content:"";position:absolute;inset:0;border-radius:4px;background:var(--sunk2);opacity:.9} .ticker img{position:absolute;inset:0;width:22px;height:22px;object-fit:contain;border-radius:4px;filter:grayscale(1);opacity:0;transition:opacity .3s} @keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media (prefers-reduced-motion:reduce){.ticker .track{animation:none}} /* the numbers (py-14 bg-card/50, text-3xl values over mono labels, hover to mint) */ .band{padding:56px 0;background:var(--bandbg)} .figs{display:grid;grid-template-columns:repeat(2,1fr);gap:32px} .fig b{display:block;font-family:"Fraunces",Georgia,serif;font-size:30px;font-weight:600;letter-spacing:-.02em;margin-bottom:4px;transition:color .3s} .fig:hover b{color:var(--acc)} .fig span{font-family:var(--mono);font-size:11px;color:var(--muted)} /* how it works (py-16; header block mb-12; three rounded-2xl p-6 cards, gap-6) */ .how{padding:64px 0;border-top:1px solid var(--line)} .how h2{font-size:30px;letter-spacing:-.02em;margin:0 0 48px;line-height:1.2} .how h2 em{font-style:normal;color:var(--acc)} .steps{display:grid;grid-template-columns:1fr;gap:24px} .step{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:24px;transition:box-shadow .2s,transform .2s} .step:hover{box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);transform:translateY(-4px)} .stephead{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:20px} .step .num{font-family:"Fraunces",Georgia,serif;font-size:32px;font-weight:600;line-height:1;color:rgba(0,200,150,.133)} .step .badge{font-family:var(--mono);font-size:10px;font-weight:600;padding:4px 10px;border-radius:999px;background:rgba(0,200,150,.094);color:#00C896} /* each layer's own accent, at the design's hex alphas (num = accent22, badge bg = accent18, badge text = accent) */ .step:nth-child(2) .num{color:rgba(99,102,241,.133)}.step:nth-child(2) .badge{background:rgba(99,102,241,.094);color:#6366F1} .step:nth-child(3) .num{color:rgba(245,158,11,.133)}.step:nth-child(3) .badge{background:rgba(245,158,11,.094);color:#F59E0B} .step h3{font-size:16px;margin:0 0 8px} .step p{font-size:13px;color:var(--muted);line-height:1.625;margin:0} /* example list, the design's rounded-2xl card: role+company, tech tags, remote pill, category, posted */ .preview{padding:56px 0;border-top:1px solid var(--line)} .prehead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px} .prehead .kicker{margin:0;font-size:12px} .prehead .kicker b{color:var(--txt);font-weight:500} .seeall{display:inline-flex;align-items:center;gap:4px;font-size:14px;font-weight:500;color:var(--acc2);flex:none;white-space:nowrap}.seeall:hover{color:var(--acc)} .preview .tablewrap{background:var(--panel);border:1px solid var(--line);border-radius:16px 16px 0 0} .preview table{border:0;background:transparent} .preview th{font-family:inherit;font-size:13px;font-weight:500;letter-spacing:normal;text-transform:none;padding:16px 20px;background:transparent} .preview td{padding:16px 20px;border-bottom:1px solid var(--line)} .preview tr:hover td{background:rgba(237,236,234,.1)} .dark .preview tr:hover td{background:rgba(30,31,39,.1)} .preview .logo,.preview .logo.ph{width:32px;height:32px;border-radius:12px;font-size:12px} .preview .rcw{gap:12px;align-items:center} .preview .rcw>.logo,.preview .rcw>.logo.ph{margin-top:0} .preview .rcc{font-size:12px} .ttags{display:flex;flex-wrap:wrap;gap:4px;align-items:center} .ttags .tag{margin:0;font-size:10px;font-weight:500;line-height:1.5;padding:2px 6px;border:0;border-radius:4px;background:var(--sunk2);color:var(--muted)} .ttags .more{cursor:default;font-size:10px;color:var(--muted);background:var(--sunk2);border-radius:4px;padding:2px 6px} .ttags .more .tip{display:flex;flex-wrap:wrap;gap:4px;min-width:120px} .pill.rp-yes{background:#00936E}.pill.rp-likely{background:#4F51CD} .pill.rp-yes,.pill.rp-likely{padding:4px 12px;font-size:11px} /* the company line holds one line - a long name ellipsizes, the full name rides the tooltip */ .preview .rcc{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* Tinted company headers disclose roles connected beneath the company logo. */ .preview tr.grp{cursor:pointer} .glogo{position:relative;width:32px;height:32px;border-radius:12px;overflow:hidden;flex:none;display:inline-flex} /* The twisty is ALWAYS visible and sits before the logo, where the eye lands first: it was a wash over the logo revealed on hover, which is no cue at a glance and none at all on a touch screen. */ .gtwisty{display:flex;align-items:center;color:var(--muted);flex:0 0 auto} .gtwisty .gchev{width:14px;height:14px;transition:transform .15s} tr.grp.closed .gtwisty .gchev{transform:rotate(-90deg)} .gcue{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.4);color:#fff;opacity:0;transition:opacity .15s;border-radius:12px} tr.grp:hover .gcue{opacity:1} .gchev{width:16px;height:16px;transition:transform .15s} tr.grp.closed .gchev{transform:rotate(-90deg)} .pill.p-count{background:transparent;border:0;color:var(--muted);font-weight:400;font-size:14px;padding:0;margin-left:6px} .preview{--group-head:#F4F5F7;--group-line:#CDD1DA} .dark .preview{--group-head:#202127;--group-line:#454852} .preview tr.grp,.preview tr.grp:hover td{background:var(--group-head)} .preview tr.grp td{padding-top:21px;padding-bottom:21px;border-bottom:1px solid var(--line)} .preview .gtwisty{padding:0;border:0;background:transparent;cursor:pointer;width:12px} .preview .gtwisty:focus-visible{outline:2px solid var(--acc);outline-offset:3px} .preview tr:not(.grp):not(.gchild) td.title{padding-left:44px} .preview tr.gchild td{background:var(--panel);padding-top:28px;padding-bottom:28px} .preview tr.gchild:hover td{background:var(--panel)} .preview tr.gchild td.title{position:relative;padding-left:102px} .preview tr.gchild td.title::before{content:"";position:absolute;left:59px;top:0;bottom:0;border-left:1px solid var(--group-line)} .preview tr.gchild td.title::after{content:"";position:absolute;left:59px;top:50%;width:16px;border-top:1px solid var(--group-line)} .preview tr.gchild[data-last] td.title::before{bottom:50%} .preview tr.grp .rcw{align-items:center} .preview tr.gchild .rct{font-size:14px;font-weight:500} /* the veil hides WHO is hiring, nothing else: the employer's name and logo blur (the name is scrambled server-side too), while the role, tags and dates stay readable - the teaser's rule. */ .preview tr.ex.fade .logo,.preview tr.ex.fade .logo.ph{filter:blur(3px)} .preview tr.ex.fade .rcc,.preview tr.ex.fade .gco{filter:blur(3.5px);user-select:none} /* a clear row's title is a link into the viewer, in ink like the jobs page */ .preview .rct a{color:var(--txt)}.preview .rct a:hover{color:var(--acc2);text-decoration:none} .preview .pill.p-new{font-size:10px;font-weight:600;padding:2px 8px;background:transparent;border-color:rgba(0,200,150,.5)} .preview td.small{font-size:13px} .unlock{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap; border:1px solid var(--line);border-top:0;border-radius:0 0 16px 16px;padding:24px 20px;margin-top:-1px; background:linear-gradient(to bottom,rgba(255,255,255,.4),#FFFFFF)} .dark .unlock{background:linear-gradient(to bottom,rgba(26,27,33,.4),#1A1B21)} .unlock p{margin:0;font-size:13px;color:var(--muted);max-width:46em} .unlock .btn{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border-radius:16px;font-size:14px;font-weight:600} /* closing panel (py-20 md:py-28) - near-black in both schemes (#0E1117 light, #0A0B0F dark) */ .closing{padding:80px 0;background:var(--closebg)} .closing .kicker{color:rgba(0,200,150,.6);margin:0 0 20px} .closing h2{font-size:36px;line-height:1.25;letter-spacing:-.01em;color:#fff;margin:0 0 20px} .closing h2 em{font-style:normal;color:var(--acc)} .closing .lede{font-size:15px;color:rgba(255,255,255,.45);line-height:1.625;margin:0 auto 32px;max-width:512px;text-wrap:pretty} .closing .btn{display:inline-flex;align-items:center;gap:8px;padding:14px 32px;border-radius:16px;font-size:14px;font-weight:600} .closing .fineprint{margin:20px 0 0;font-family:var(--mono);font-size:11px;color:rgba(255,255,255,.2)} /* Tailwind's own breakpoints, mobile-first, as the design uses them */ @media (min-width:640px){ .land .col,.land .colnarrow,.land .top .wrap,.land footer.site{padding-left:32px;padding-right:32px} .hleft h1{font-size:60px} .closing h2{font-size:48px} } @media (min-width:768px){ .figs{grid-template-columns:repeat(4,1fr)} .steps{grid-template-columns:repeat(3,1fr)} .closing{padding:112px 0} } @media (min-width:1024px){ .hero2{padding:80px 0 64px} .h2grid{grid-template-columns:1fr 1fr;gap:64px} .hright{display:block} .hleft h1{font-size:66px} } /* phones: the desktop-only fragments stay home, and the example table becomes a card list */ @media (max-width:639px){.mobhide{display:none}} @media (max-width:767px){ .preview .tablewrap{overflow:visible} .preview table{display:block;min-width:0;width:100%} .preview thead{display:none} .preview tbody{display:block} .preview tr.ex{display:block;padding:14px 16px;border-bottom:1px solid var(--line)} .preview tr.ex[hidden]{display:none} .preview tr.ex:last-child{border-bottom:0} .preview td{display:block;padding:0;border:0} .preview td+td{margin-top:8px} .preview td:empty{display:none} .preview tr.grp td{padding:0;border:0} .preview tr:not(.grp):not(.gchild) td.title{padding-left:24px} .preview tr.gchild{position:relative;padding-left:76px} .preview tr.gchild td,.preview tr.gchild td.title{position:static;padding:0;background:transparent} .preview tr.gchild td.title::before,.preview tr.gchild td.title::after{left:55px} .preview tr.gchild td.title::after{top:25px;width:12px} .preview tr.gchild[data-last] td.title::before{bottom:calc(100% - 25px)} .preview td.posted{white-space:normal} /* every stat line says what it is, so a card reads without the table's column headers */ .preview td.c-remote::before{content:"Remote"} .preview td.c-cat::before{content:"Category"} .preview td.posted::before{content:"First seen"} .preview td.c-remote::before,.preview td.c-cat::before,.preview td.posted::before{ display:inline-block;font:600 10px/1.6 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-right:8px;min-width:64px} } /* Fast, theme-true tooltips: 150ms in, quick fade, inverted ground - the browser's native title takes seconds and cannot be styled. Same contract as the SPA's theme.css. */ [data-tip]{position:relative} .floating-tooltip{position:fixed;z-index:1000;width:max-content;max-width:min(260px,calc(100vw - 16px));overflow-wrap:anywhere;padding:6px 10px;border-radius:10px;font:400 12px/1.45 "Inter",system-ui,sans-serif;letter-spacing:normal;text-transform:none;white-space:normal;text-align:left;background:var(--txt);color:var(--bg);box-shadow:0 8px 24px -12px rgba(0,0,0,.4);pointer-events:none} main.legal{width:100%;max-width:var(--col);margin:0 auto;padding:32px 20px 64px}main.legal h1{font-size:32px;letter-spacing:-.5px;margin:0 0 6px}main.legal h3{margin:22px 0 6px}main.legal p,main.legal li{color:var(--txt);text-wrap:pretty}main.legal ul{padding-left:20px} footer.site{margin-top:auto;max-width:var(--col);width:100%;margin-left:auto;margin-right:auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:16px 20px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)} .cookie{position:fixed;left:16px;bottom:16px;z-index:30;max-width:420px;display:flex;gap:12px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:13px;box-shadow:0 14px 32px -14px rgba(16,24,39,.3)}.cookie[hidden]{display:none}.cookie a{color:var(--acc2)} footer.site .made{text-align:center}footer.site .links{display:flex;gap:16px;justify-content:flex-end;flex-wrap:nowrap;white-space:nowrap}footer.site a{color:var(--muted)}footer.site a:hover{color:var(--txt);text-decoration:none} /* on the landing the bottom bar keeps the design's max-w-6xl column and h-14 height */ .land footer.site{max-width:var(--col6);min-height:56px;padding-top:8px;padding-bottom:8px} @media (max-width:767px){footer.site .made{display:none}} @media (max-width:640px){footer.site{grid-template-columns:1fr;text-align:center}footer.site .links{justify-content:center}} :root{--site-width:1280px;--col:var(--site-width);--col6:var(--site-width)} .site-container{box-sizing:border-box;width:100%;max-width:var(--site-width);margin-left:auto;margin-right:auto;padding-left:20px;padding-right:20px} .site-header{position:sticky;top:0;z-index:40;width:100%;background:var(--card,var(--panel));border-bottom:1px solid var(--border,var(--line));padding:0;color:var(--foreground,var(--txt))} .site-header .site-container{display:flex;align-items:center;flex-wrap:wrap;gap:8px 20px;min-height:64px;padding-top:8px;padding-bottom:8px} .site-header .site-brand{display:inline-flex;align-items:center;gap:8px;color:var(--foreground,var(--txt));font:600 16px/1.2 Inter,system-ui,sans-serif;text-decoration:none;white-space:nowrap;flex:none} .site-header .site-brand .marktile{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;flex:none} .site-header .site-brand svg{width:26px;height:28px;flex:none} .site-header .site-menu{width:auto;order:initial;overflow:visible;white-space:normal;display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:4px;margin:0 0 0 auto;padding:0;min-width:0} .site-header .site-menu a,.site-header .site-menu button{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid transparent;border-radius:8px;padding:6px 10px;min-height:36px;color:var(--muted-foreground,var(--muted));background:transparent;font:500 14px/1.4 Inter,system-ui,sans-serif;text-decoration:none;white-space:nowrap;cursor:pointer} .site-header .site-menu a:hover,.site-header .site-menu button:hover,.site-header .site-menu [aria-current=page]{color:var(--foreground,var(--txt));background:var(--input-background,var(--sunk))} .site-header .site-menu a:focus-visible,.site-header .site-menu button:focus-visible{outline:2px solid #00936e;outline-offset:3px} .site-header .site-menu form{margin:0;display:flex} .site-header .site-menu .nav-signin{background:#00c896;color:#0e1117;font-weight:600} .site-header .site-menu .nav-signin:hover{background:#00b888;color:#0e1117} .site-header .site-menu .nav-theme{width:36px;padding:8px} .site-header .nav-theme svg{width:18px;height:18px} html:not(.dark) .site-header .nav-sun,.dark .site-header .nav-moon{display:none} .site-header .site-menu .pro-nav{color:#07523f;border-color:#5cccad;font-weight:600;background:linear-gradient(110deg,#c7f5e9 20%,#f2fff9 45%,#a8e9d9 70%);background-size:250% 100%;animation:pro-highlight 7s ease-in-out infinite} .dark .site-header .site-menu .pro-nav{color:#b2ffe5;border-color:#327b68;background-image:linear-gradient(110deg,#173b32 20%,#286953 45%,#143a32 70%)} .site-header .site-menu .pro-nav:hover{box-shadow:0 0 0 2px #00c89626} @keyframes pro-highlight{0%,70%,100%{background-position:0% 50%}35%{background-position:100% 50%}} @media(prefers-reduced-motion:reduce){.site-header .site-menu .pro-nav{animation:none}} @media(min-width:640px){.site-container,main.legal,footer.site{padding-left:32px;padding-right:32px}} @media(max-width:639px){.site-header .site-brand > span:last-child{display:none}.site-header .site-container{gap:8px}.site-header.signed-in .site-menu{flex-basis:100%}.site-header .site-menu a,.site-header .site-menu button{padding-left:8px;padding-right:8px}}