/* Carerix page (carerix.html). One question per section: how it works, when it starts, what you see in Carerix,
   what an automation is made of, favourite recipes, the scan, getting started.
   Step kinds keep one colour everywhere: Carerix teal, message green, AI violet, logic amber, a person cream. */
:root{--k-cx:#00747E;--k-cx-bg:#E6F4F5;--k-msg:#157A4A;--k-msg-bg:#E4F6EC;--k-ai:#6243C9;--k-ai-bg:#EFEAFD;--k-lg:#8F5A0E;--k-lg-bg:#FBF1DE;--k-you:#8A5A00;--k-you-bg:#FFF4D6}
.cr-sec .sec-h{margin-bottom:36px}
#scan{background:var(--soft)}

/* hero: a Carerix match filling up, line by line (plays once) */
.cr-trust{margin-top:2px}
.cr-rec{max-width:460px;margin-left:auto;border-radius:24px;background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);overflow:hidden}
.cr-rec-bar{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--line);background:#FBFBF8}
.cr-rec-bar img{height:18px;width:auto}
.cr-rec-bar span{font-size:13px;font-weight:600;color:var(--muted)}
.cr-rec-h{display:flex;align-items:center;gap:12px;padding:18px 20px 10px}
.cr-rec-h b{display:block;font-family:var(--display);font-weight:600;font-size:19px}
.cr-rec-h small{font-size:14px;color:var(--muted)}
.cr-av{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--k-cx-bg);color:#00747E;font:600 15px var(--display)}
.cr-stage{margin-left:auto;display:grid}
.cr-stage i{grid-area:1/1;font-style:normal;font-size:13px;font-weight:600;padding:5px 12px;border-radius:999px;background:#F0F1EC;color:var(--muted);text-align:center}
.cr-stage i+i{background:var(--k-msg-bg);color:#11643F;opacity:0}
.cr-feed{list-style:none;margin:0;padding:6px 20px 8px;display:grid;gap:0}
.cr-feed li{position:relative;display:grid;grid-template-columns:52px 1fr;align-items:center;gap:8px;padding:9px 0 9px 22px;font-size:15px;border-top:1px solid #F0F1EC}
.cr-feed li:first-child{border-top:0}
.cr-feed li::before{content:"";position:absolute;left:2px;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:var(--c)}
.cr-feed time{font:600 14px var(--display);font-variant-numeric:tabular-nums;color:var(--muted)}
.cr-feed .cx{--c:var(--k-cx)}.cr-feed .msg{--c:var(--k-msg)}.cr-feed .ai{--c:var(--k-ai)}.cr-feed .you{--c:#E9A23B}
.cr-feed li.you{background:var(--k-you-bg);margin:4px -20px 0;padding-left:42px;padding-right:20px;border-top:0}
.cr-feed li.you::before{left:22px}
.cr-rec-f{display:flex;align-items:center;gap:8px;margin:0;padding:12px 20px;border-top:1px solid var(--line);font-size:13.5px;font-weight:600;color:var(--muted);background:#FBFBF8}
.cr-hd svg{display:block;width:14px;height:18px;color:var(--ink)}
@media (prefers-reduced-motion:no-preference){
  .cr-feed li{animation:crIn .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.5s + var(--i) * .7s)}
  .cr-feed li:nth-child(1){--i:0}.cr-feed li:nth-child(2){--i:1}.cr-feed li:nth-child(3){--i:2}.cr-feed li:nth-child(4){--i:3}.cr-feed li:nth-child(5){--i:4}.cr-feed li:nth-child(6){--i:5}
  .cr-stage i:first-child{animation:crOut .4s ease 3.3s both}
  .cr-stage i+i{animation:crPop .5s cubic-bezier(.2,.8,.2,1.4) 3.3s both}
}
@media (prefers-reduced-motion:reduce){.cr-stage i:first-child{opacity:0}.cr-stage i+i{opacity:1}}
@keyframes crIn{from{opacity:0;transform:translateY(8px)}}
@keyframes crOut{to{opacity:0}}
@keyframes crPop{from{opacity:0;transform:scale(.6)}to{opacity:1}}

/* 1. how it works: three columns, arrows between */
.cr-how{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.cr-how>li{position:relative;padding:26px;border-radius:24px;background:var(--panel);border:1px solid var(--line)}
.cr-how>li.hd{background:var(--ink);border-color:var(--ink);color:#FFFFFF}
.cr-how>li:not(:last-child)::after{content:"";position:absolute;z-index:1;top:50%;right:-23px;width:18px;height:18px;margin-top:-9px;border-top:3px solid var(--teal);border-right:3px solid var(--teal);transform:rotate(45deg)}
.cr-n{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--teal);color:#0F132F;font:600 16px var(--display);margin-bottom:14px}
.cr-how h3{font-size:21px;line-height:1.25;margin-bottom:16px}
.cr-how ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.cr-how ul li{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;background:var(--bg);font-size:15.5px;font-weight:500}
.cr-how .hd ul li{background:rgba(255,255,255,.08);color:#E6EBF5}
.cr-how .back ul li{background:var(--k-cx-bg)}
.cr-how .d{flex:none;width:10px;height:10px;border-radius:50%}
.d.msg{background:#5DD36D}.d.ai{background:#B48CFF}.d.lg{background:#E9C27A}.d.you{background:#FFF1C9}
@media (max-width:900px){.cr-how{grid-template-columns:1fr;gap:30px}.cr-how>li:not(:last-child)::after{top:auto;bottom:-22px;right:auto;left:50%;margin:0 0 0 -9px;transform:rotate(135deg)}}

/* 2. when it starts: vertical tabs, one recipe at a time */
.cr-pick{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:28px;align-items:start}
.cr-pick-tabs{display:grid;gap:8px}
.cr-pick-tabs button{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:14px 16px;border-radius:16px;border:1px solid var(--line);background:var(--panel);color:var(--ink);cursor:pointer;font:inherit;transition:background .2s,border-color .2s,box-shadow .2s}
.cr-pick-tabs button:hover{border-color:var(--teal)}
.cr-pick-tabs button[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:#FFFFFF;box-shadow:0 12px 28px rgba(15,19,47,.18)}
.cr-pick-tabs button:focus-visible{outline:2px solid var(--deep);outline-offset:2px}
.cr-pick-tabs .ic{flex:none;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--k-cx-bg);color:#00747E}
.cr-pick-tabs [aria-selected="true"] .ic{background:rgba(125,194,202,.2);color:var(--teal)}
.cr-pick-tabs .ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cr-pick-tabs b{display:block;font-family:var(--display);font-weight:500;font-size:17px}
.cr-pick-tabs small{font-size:13.5px;color:var(--muted)}
.cr-pick-tabs [aria-selected="true"] small{color:#C9D3E4}
.cr-recipe{padding:30px;border-radius:24px;background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow)}
.cr-recipe[hidden]{display:none}
html.ready .cr-recipe{animation:crIn .4s cubic-bezier(.2,.8,.2,1)}
.cr-say{font:500 clamp(19px,1.8vw,23px)/1.4 var(--display);margin:0 0 24px;max-width:36ch}
.cr-recipe ol{list-style:none;margin:0;padding:0;display:grid;gap:0}
.cr-recipe ol li{position:relative;display:grid;grid-template-columns:76px minmax(0,1fr);column-gap:14px;padding:14px 18px;border-radius:14px;background:var(--bg-k);margin-bottom:22px}
.cr-recipe ol li:not(:last-child)::after{content:"";position:absolute;left:46px;bottom:-20px;width:2px;height:18px;background:#D6D9CF}
.cr-recipe ol li:last-child{margin-bottom:0}
.cr-recipe ol li>span{grid-row:span 2;align-self:center;font-size:12.5px;font-weight:600;color:var(--fg-k)}
.cr-recipe ol b{font-family:var(--display);font-weight:500;font-size:18px}
.cr-recipe ol small{font-size:14px;color:var(--muted)}
.cr-recipe .when{--bg-k:var(--ink);--fg-k:var(--teal);color:#FFFFFF}
.cr-recipe .when small{color:#C9D3E4}
.cr-recipe .msg{--bg-k:var(--k-msg-bg);--fg-k:var(--k-msg)}
.cr-recipe .ai{--bg-k:var(--k-ai-bg);--fg-k:var(--k-ai)}
.cr-recipe .lg{--bg-k:var(--k-lg-bg);--fg-k:var(--k-lg)}
.cr-recipe .cx{--bg-k:var(--k-cx-bg);--fg-k:#00747E;box-shadow:inset 0 0 0 2px #B9DFE2}
.cr-dates{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:22px 0 0;font-size:14px;color:var(--muted)}
.cr-dates i{font-style:normal;font-weight:500;color:var(--ink);padding:4px 10px;border-radius:999px;background:var(--bg);border:1px solid var(--line)}
@media (max-width:900px){
  .cr-pick{grid-template-columns:1fr;gap:16px}
  .cr-pick-tabs{display:flex;overflow-x:auto;gap:8px;padding-bottom:4px;scrollbar-width:none}
  .cr-pick-tabs::-webkit-scrollbar{display:none}
  .cr-pick-tabs button{flex:none;width:auto;padding:10px 14px 10px 10px}
  .cr-pick-tabs small{display:none}
  .cr-pick-tabs .ic{width:34px;height:34px}
  .cr-pick-tabs b{font-size:15px;white-space:nowrap}
  .cr-recipe{padding:22px 18px}
  .cr-recipe ol li{grid-template-columns:58px minmax(0,1fr);padding:12px 14px}
  .cr-recipe ol li:not(:last-child)::after{left:36px}
}

/* 3. inside Carerix: a candidate record with numbered pins and a legend */
.cr-screen-wrap{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:40px;align-items:center}
.cr-screen{position:relative;border-radius:20px;background:var(--panel);border:1px solid var(--line);box-shadow:0 24px 60px rgba(15,19,47,.12);font-size:14px}
.cr-scr-top{display:flex;align-items:center;gap:16px;padding:12px 18px;border-bottom:1px solid var(--line);background:#FBFBF8;border-radius:20px 20px 0 0}
.cr-scr-top img{height:17px;width:auto}
.cr-crumb{color:var(--muted);font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cr-act{position:relative;margin-left:auto;flex:none;padding:7px 14px;border-radius:9px;background:var(--ink);color:#FFFFFF;font-weight:600;font-size:13.5px}
.cr-scr-menu{position:absolute;z-index:2;right:18px;top:54px;width:200px;display:grid;padding:6px;border-radius:12px;background:var(--panel);border:1px solid var(--line);box-shadow:0 16px 36px rgba(15,19,47,.16)}
.cr-scr-menu span{padding:8px 10px;border-radius:8px;font-size:13.5px}
.cr-scr-menu span:nth-child(2){background:var(--k-cx-bg);font-weight:600}
.cr-scr-menu .k{font-size:12px;font-weight:600;color:var(--deep-ink);padding-bottom:4px}
.cr-scr-tabs{display:flex;gap:4px;padding:10px 18px 0;border-bottom:1px solid var(--line)}
.cr-scr-tabs span{position:relative;padding:8px 12px;color:var(--muted);font-weight:500;border-bottom:2px solid transparent;margin-bottom:-1px}
.cr-scr-tabs span.on{color:var(--ink);border-color:var(--deep)}
.cr-scr-tabs span i{font-style:normal;font-size:11px;font-weight:600;padding:1px 6px;border-radius:999px;background:#157A4A;color:#FFFFFF;margin-left:4px}
.cr-scr-body{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:18px}
.cr-fields{margin:0;display:grid;gap:0;align-content:start}
.cr-fields div{position:relative;display:grid;gap:2px;padding:9px 10px;border-radius:10px}
.cr-fields dt{font-size:12.5px;color:var(--muted)}
.cr-fields dd{margin:0;font-weight:600;display:flex;align-items:center;gap:8px}
.cr-fields .hd{background:var(--k-cx-bg)}
.cr-fields dd span{font-size:11px;font-weight:600;color:#00747E;background:#FFFFFF;border-radius:999px;padding:1px 7px}
.cr-chat{display:grid;gap:7px;align-content:start;padding:12px;border-radius:14px;background:#EFE8DE}
.cr-chat p{margin:0;max-width:90%;padding:7px 10px;border-radius:10px;font-size:13.5px;line-height:1.35}
.cr-chat .in{background:#FFFFFF;justify-self:start;border-top-left-radius:3px}
.cr-chat .me{background:#D9FDD3;justify-self:end;border-top-right-radius:3px}
.cr-log{position:relative;grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cr-log p{margin:0;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:#FBFBF8;font-size:13.5px;color:var(--muted);line-height:1.4}
.cr-log b{display:block;color:var(--ink);font-size:13px;margin-bottom:2px}
.cr-log p+p{background:var(--k-you-bg);border-color:#F1D98F}
.cr-pin{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--k-lg);color:#FFFFFF;font:600 13px var(--display);font-style:normal;box-shadow:0 0 0 3px #FFFFFF}
.cr-screen .cr-pin{position:absolute;z-index:3}
.cr-act .cr-pin{top:-10px;right:-10px}
.cr-scr-tabs .cr-pin{top:-8px;right:-6px}
.cr-fields .cr-pin{top:50%;right:-12px;margin-top:-12px}
.cr-log>.cr-pin{top:-10px;left:-10px}
.cr-legend{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.cr-legend li{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start}
.cr-legend .cr-pin{width:30px;height:30px;font-size:15px;box-shadow:none}
.cr-legend b{display:block;font-family:var(--display);font-weight:500;font-size:18px;margin-bottom:2px}
.cr-legend small{font-size:15px;color:var(--muted);line-height:1.5}
.cr-objs{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:36px;padding:18px 22px;border-radius:18px;background:var(--panel);border:1px solid var(--line)}
.cr-objs>span{font-weight:600;font-size:15px}
.cr-objs ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.cr-objs li{font-size:13.5px;font-weight:500;padding:4px 11px;border-radius:999px;background:var(--k-cx-bg);color:#00545C}
@media (max-width:1000px){.cr-screen-wrap{grid-template-columns:1fr;gap:28px}}
@media (max-width:600px){
  .cr-scr-body{grid-template-columns:1fr;padding:14px}
  .cr-log{grid-template-columns:1fr}
  .cr-scr-menu{top:50px;right:10px;width:180px}
  .cr-crumb{display:none}
  .cr-scr-tabs{overflow:hidden;padding-inline:10px}
  .cr-scr-tabs span{padding:8px 8px}
}

/* 4. building blocks: one example on the left, the four kinds of steps on the right */
.cr-build{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:32px;align-items:start}
.cr-example{padding:24px;border-radius:24px;background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow)}
.cr-example-h{margin:0 0 16px;font-weight:600;font-size:14px;color:var(--deep-ink)}
.cr-example ol{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.cr-example li{position:relative;display:flex;align-items:center;gap:12px;padding:10px 14px 10px 10px;border-radius:14px;background:var(--bg-k);border-left:4px solid var(--fg-k)}
.cr-example li:not(:last-child)::after{content:"";position:absolute;left:28px;bottom:-11px;width:2px;height:10px;background:#D6D9CF}
.cr-example .ic{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:#FFFFFF;color:var(--fg-k)}
.cr-example .ic svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cr-example b{font-weight:600;font-size:15.5px}
.cr-example em{margin-left:auto;flex:none;font-style:normal;font-size:12px;font-weight:600;color:var(--fg-k)}
.cr-example .when{--bg-k:var(--ink);--fg-k:var(--teal);color:#FFFFFF}
.cr-example .when .ic{background:rgba(125,194,202,.2)}
.cr-example .msg,.cr-kinds .msg{--bg-k:var(--k-msg-bg);--fg-k:var(--k-msg)}
.cr-example .ai,.cr-kinds .ai{--bg-k:var(--k-ai-bg);--fg-k:var(--k-ai)}
.cr-example .lg,.cr-kinds .lg{--bg-k:var(--k-lg-bg);--fg-k:var(--k-lg)}
.cr-example .cx,.cr-kinds .cx{--bg-k:var(--k-cx-bg);--fg-k:#00747E}
.cr-kinds{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cr-kinds div{padding:20px;border-radius:18px;background:var(--panel);border:1px solid var(--line);border-top:4px solid var(--fg-k)}
.cr-kinds h3{display:flex;align-items:center;gap:8px;font-size:18px;margin-bottom:8px}
.cr-kinds h3::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--fg-k)}
.cr-kinds p{margin:0;font-size:15px;line-height:1.55;color:var(--muted)}
@media (max-width:1000px){.cr-build{grid-template-columns:1fr}}
@media (max-width:560px){.cr-kinds{grid-template-columns:1fr}.cr-example{padding:16px}.cr-example b{font-size:14.5px}}

/* 5. favourites as recipes: when → then → in Carerix */
.cr-recipes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:24px}
.cr-rc{display:grid;gap:8px;padding:20px;border-radius:20px;background:var(--panel);border:1px solid var(--line);color:var(--ink);text-decoration:none;transition:border-color .2s,box-shadow .2s,transform .2s}
.cr-rc:hover{border-color:var(--teal);box-shadow:var(--shadow);transform:translateY(-2px)}
.cr-rc:focus-visible{outline:2px solid var(--deep);outline-offset:3px}
.cr-rc>b{font-family:var(--display);font-weight:500;font-size:19px;margin-bottom:4px}
.cr-rc>span{position:relative;display:block;padding:8px 12px 8px 74px;border-radius:10px;font-size:14.5px;line-height:1.35}
.cr-rc>span::before{position:absolute;left:12px;top:8px;font-size:12px;font-weight:600}
.cr-rc .w{background:var(--ink);color:#FFFFFF}.cr-rc .w::before{content:"When";color:var(--teal)}
.cr-rc .t{background:var(--k-msg-bg)}.cr-rc .t::before{content:"Then";color:var(--k-msg)}
.cr-rc .r{background:var(--k-cx-bg)}.cr-rc .r::before{content:"Carerix";color:#00747E}
.cr-more{margin:20px 0 0;font-size:15px;color:var(--muted)}
.cr-more a{color:var(--deep-ink);font-weight:500}
@media (max-width:1000px){.cr-recipes{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.cr-recipes{grid-template-columns:1fr}}

/* 6. get started: three cards, each with a small picture */
.cr-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;counter-reset:cs}
.cr-steps li{position:relative;padding:22px;border-radius:22px;background:var(--panel);border:1px solid var(--line);counter-increment:cs}
.cr-steps h3{display:flex;align-items:center;gap:10px;font-size:19px;margin:18px 0 6px}
.cr-steps h3::before{content:counter(cs);display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;background:var(--teal);color:#0F132F;font:600 15px var(--display)}
.cr-steps p{margin:0;font-size:15px;color:var(--muted)}
.cr-vis{display:flex;align-items:center;gap:12px;height:76px;padding:0 16px;border-radius:16px;background:var(--bg);border:1px solid var(--line)}
.cr-vis img{height:16px;width:auto}
.cr-vis b{display:block;font-size:15px}
.cr-vis small{font-size:12.5px;color:var(--muted)}
.cr-mk{flex:1;padding-left:12px;border-left:1px solid var(--line)}
.cr-inst{padding:7px 14px;border-radius:9px;background:var(--deep-ink);color:#FFFFFF;font-size:13.5px;font-weight:600}
.cr-vis.pl>span:first-child,.cr-vis.tg>span:first-child{flex:1}
.cr-bundle{display:flex;gap:6px;align-items:flex-end}
.cr-bundle i{width:22px;height:26px;border-radius:6px;background:#E1E4DC}
.cr-bundle i:nth-child(2){height:36px}.cr-bundle i:nth-child(3){height:46px}
.cr-bundle i.on{background:var(--teal)}
.cr-tog{width:52px;height:30px;border-radius:999px;background:#157A4A;position:relative}
.cr-tog i{position:absolute;top:3px;right:3px;width:24px;height:24px;border-radius:50%;background:#FFFFFF}
@media (max-width:900px){.cr-steps{grid-template-columns:1fr}}
/* the Action menu sits above the chat in the right column, pointing up at the button */
.cr-side{display:grid;gap:12px;align-content:start}
.cr-screen .cr-scr-menu{position:relative;top:auto;right:auto;width:auto;margin-top:-6px}
.cr-screen .cr-scr-menu::before{content:"";position:absolute;right:28px;top:-7px;width:12px;height:12px;background:var(--panel);border-left:1px solid var(--line);border-top:1px solid var(--line);transform:rotate(45deg)}