/* HiddenRoles.co — design system ported from the prototype.
   Mobile-first. Phone-frame on desktop, full-screen on phones. */

:root{
  --green:#12C16C; --green-d:#0B9655; --green-dk:#04331E;
  --ink:#16241C; --ink-60:rgba(22,36,28,.6); --ink-45:rgba(22,36,28,.45);
  --ink-08:rgba(22,36,28,.08); --ink-14:rgba(22,36,28,.14);
  --bg:#FBFAF5; --card:#FFFFFF; --green-l:#E4F7EE; --beige:#F3F1E9;
  --red:#D43A3F; --red-l:#FCEDED; --backdrop:#E8E3D5;
  --r-sm:8px; --r-md:14px; --r-lg:18px; --r-xl:24px;
  --shadow-card:0 1px 3px rgba(22,36,28,.05);
  --shadow-btn:0 12px 28px rgba(18,193,108,.32);
  --shadow-sheet:0 -10px 40px rgba(22,36,28,.18);
  --shadow-modal:0 24px 60px rgba(22,36,28,.32);
  --ease:cubic-bezier(.22,.61,.36,1);
  --font:'Manrope',-apple-system,system-ui,sans-serif;
  --font-h:'Bricolage Grotesque','Manrope',sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:var(--font); color:var(--ink); background:var(--backdrop);
  min-height:100dvh; display:flex; align-items:center; justify-content:center;
  background-image:radial-gradient(80% 60% at 50% 0,#F2EEDF 0,var(--backdrop) 70%);
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit; cursor:pointer; border:none; background:none}
input{font-family:inherit}
a{color:inherit; text-decoration:none}

/* Phone frame */
#phone{
  position:relative; width:440px; max-width:100vw; height:900px; max-height:96dvh;
  background:var(--bg); border-radius:40px; overflow:hidden;
  box-shadow:0 30px 90px rgba(22,36,28,.18), inset 0 0 0 1px rgba(255,255,255,.6);
}
#scroll{position:absolute; inset:0; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch}
.screen{min-height:100%; animation:hr-screen .32s var(--ease) both}
@media (max-width:480px){
  body{background:var(--bg)}
  #phone{width:100vw; height:100dvh; max-height:none; border-radius:0}
}
@media (prefers-reduced-motion:reduce){ *{animation-duration:.001ms!important} }

/* Typography */
h1,h2,h3{font-family:var(--font-h); margin:0; letter-spacing:-.02em; line-height:1.1}
.h-hero{font-size:34px; font-weight:800}
.h-xl{font-size:26px; font-weight:800}
.h-lg{font-size:21px; font-weight:800}
.muted{color:var(--ink-60)}
.tiny{font-size:12px}
.center{text-align:center}

/* Buttons */
.btn{display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
  padding:17px; border-radius:var(--r-md); font-weight:800; font-size:16px; transition:transform .12s var(--ease)}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--green); color:var(--green-dk); box-shadow:var(--shadow-btn)}
.btn-primary.pulse{animation:hr-pulse 2.6s infinite}
.btn-secondary{background:var(--card); color:#1a1a1a; border:1px solid var(--ink-14); box-shadow:0 1px 2px rgba(22,36,28,.04); font-weight:700}
.btn-ghost{background:none; color:var(--ink-60); font-weight:700; font-size:14px; box-shadow:none}
.btn-applied{background:var(--green-l); color:var(--green-d); border:1.5px solid var(--green); font-weight:800}

/* Inputs */
.field{width:100%; padding:15px 16px; border-radius:var(--r-md); border:1px solid var(--ink-14);
  background:var(--card); font-size:15px; color:var(--ink); outline:none}
.field:focus{border-color:var(--green)}

/* Badges / pills */
.badge{display:inline-flex; align-items:center; gap:5px; border-radius:7px; padding:5px 11px; font-size:11.5px; font-weight:700}
.badge-match{background:var(--green); color:#fff}
.badge-style{background:var(--green-l); color:var(--green-d)}
.badge-flat{background:var(--beige); color:rgba(22,36,28,.75)}
.badge-new{background:#fff3; color:#fff}
.pill{display:inline-flex; align-items:center; gap:6px; background:var(--green-l); border:1px solid rgba(18,193,108,.3); color:var(--green-d); border-radius:999px; padding:6px 14px; font-weight:700; font-size:12.5px}

/* Generic card */
.card{background:var(--card); border:1px solid var(--ink-08); border-radius:var(--r-lg); box-shadow:var(--shadow-card)}
.pad{padding:18px}

/* Logo box */
.logo{width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:18px; flex:0 0 auto; overflow:hidden; background-size:cover; background-position:center}

/* Job card */
.jobcard{background:#fff; border:1px solid var(--ink-08); border-radius:var(--r-lg); padding:16px; margin-bottom:12px; cursor:pointer; position:relative; box-shadow:var(--shadow-card); transition:transform .12s var(--ease)}
.jobcard:active{transform:scale(.99)}
.jobcard .heart{position:absolute; top:12px; right:12px; width:30px; height:30px; display:flex; align-items:center; justify-content:center; font-size:18px}
.jobcard .row{display:flex; gap:13px; align-items:flex-start}
.jobcard .role{font-size:15.5px; font-weight:800; color:var(--ink); line-height:1.2; padding-right:30px}
.jobcard .company{font-size:13px; color:var(--ink-60); margin-top:2px}
.jobcard .tags{display:flex; flex-wrap:wrap; gap:7px; margin-top:12px}
.jobcard .foot{display:flex; justify-content:space-between; align-items:center; padding-top:11px; margin-top:12px; border-top:1px solid var(--ink-08); font-size:12px; color:var(--ink-45)}
.tag-new{background:var(--green-l); color:var(--green-d); border-radius:5px; padding:2px 6px; font-size:10px; font-weight:800; margin-left:6px}

/* Chips row */
.chips{display:flex; gap:8px; overflow-x:auto; padding:4px 0; scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto; min-height:38px; display:flex; align-items:center; padding:9px 16px; border-radius:999px; font-size:13px; font-weight:700; white-space:nowrap; border:1px solid var(--ink-14); background:#fff; color:var(--ink-60)}
.chip.on{background:var(--ink); color:#fff; border-color:var(--ink)}

/* Toggles */
.toggle{width:44px; height:26px; border-radius:999px; background:var(--ink-14); position:relative; transition:background .15s; flex:0 0 auto}
.toggle.on{background:var(--green)}
.toggle .knob{position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; transition:left .15s; box-shadow:0 1px 3px rgba(22,36,28,.25)}
.toggle.on .knob{left:21px}

/* Work-style selector */
.ws{text-align:center; padding:14px 6px; border-radius:16px; border:1.5px solid var(--ink-08); background:#fff; box-shadow:0 1px 2px rgba(22,36,28,.04); font-weight:700; font-size:13px}
.ws.on{border-color:var(--green); background:var(--green-l); box-shadow:none}

/* Progress bar */
.progress{height:6px; background:var(--ink-08); border-radius:999px; overflow:hidden}
.progress>span{display:block; height:100%; background:var(--green); transition:width .35s var(--ease)}

/* Sticky header */
.sticky{position:sticky; top:0; z-index:20; background:rgba(251,250,245,.82); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px)}

/* Bottom tab bar */
.tabbar{position:absolute; left:0; right:0; bottom:0; z-index:30; display:flex; background:rgba(255,255,255,.92); backdrop-filter:blur(14px); border-top:1px solid var(--ink-08); padding:8px 0 calc(8px + env(safe-area-inset-bottom))}
.tab{flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; font-size:10.5px; font-weight:700; color:var(--ink-45); padding:4px}
.tab.on{color:var(--green-d)}
.tab .ic{font-size:20px}

/* Blur / lock overlay */
.blur{filter:blur(7px); opacity:.85; pointer-events:none; user-select:none}
.lockwrap{position:relative}
.lockover{position:absolute; inset:0; z-index:15; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; text-align:center; padding:28px;
  background:linear-gradient(180deg, rgba(251,250,245,0) 0%, rgba(251,250,245,.72) 42%, var(--bg) 80%)}

/* Bottom sheet */
.sheet-backdrop{position:absolute; inset:0; z-index:40; background:rgba(22,36,28,.4); backdrop-filter:blur(2px); display:flex; align-items:flex-end}
.sheet{width:100%; max-height:92%; overflow-y:auto; background:var(--bg); border-top-left-radius:26px; border-top-right-radius:26px; box-shadow:var(--shadow-sheet); animation:hr-slideup .28s var(--ease) both; padding:8px 20px 28px}
.handle{width:40px; height:4px; border-radius:999px; background:var(--ink-14); margin:8px auto 14px}

/* Modal */
.modal-backdrop{position:absolute; inset:0; z-index:60; background:rgba(22,36,28,.5); backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; padding:24px; animation:hr-toast .2s ease both}
.modal{width:100%; background:var(--bg); border-radius:var(--r-xl); box-shadow:var(--shadow-modal); padding:26px; text-align:center; animation:hr-pop .45s var(--ease) both}

/* Toast */
.toast{position:absolute; left:50%; bottom:84px; transform:translateX(-50%); z-index:80; background:var(--ink); color:#fff; padding:12px 18px; border-radius:999px; font-size:13.5px; font-weight:700; box-shadow:0 8px 24px rgba(22,36,28,.3); animation:hr-toast .25s ease both; white-space:nowrap}

/* Support widget */
.support-fab{position:absolute; right:16px; bottom:84px; z-index:50; width:52px; height:52px; border-radius:50%; background:var(--green); color:var(--green-dk); display:flex; align-items:center; justify-content:center; font-size:22px; box-shadow:var(--shadow-btn)}

/* Marquee / ticker */
.marquee{overflow:hidden; white-space:nowrap}
.marquee>span{display:inline-block; padding-left:100%; animation:hr-marquee 22s linear infinite; font-weight:700; color:var(--ink-60); font-size:13px}
.dot{width:8px; height:8px; border-radius:50%; background:var(--green); display:inline-block; animation:hr-blink 1.4s infinite}

/* Avatars */
.avatars{display:flex}
.avatars>div{width:30px; height:30px; border-radius:50%; border:2px solid var(--bg); margin-left:-8px; color:#fff; font-weight:800; font-size:12px; display:flex; align-items:center; justify-content:center}

/* Confetti */
.confetti{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:70}
.confetti i{position:absolute; top:-10px; width:9px; height:14px; border-radius:2px; animation:hr-confetti linear forwards}

/* FAQ */
.faq{border-bottom:1px solid var(--ink-08); padding:16px 0}
.faq .q{display:flex; justify-content:space-between; align-items:center; font-weight:800; font-size:15px}
.faq .a{font-size:14px; color:var(--ink-60); margin-top:10px; line-height:1.5}

/* Utility */
.stack>*+*{margin-top:12px}
.flex{display:flex} .between{justify-content:space-between} .aic{align-items:center}
.gap8{gap:8px} .gap12{gap:12px} .wrap{flex-wrap:wrap}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.hidden{display:none!important}

/* Animations */
@keyframes hr-screen{from{opacity:0; transform:translateX(14px)} to{opacity:1; transform:none}}
@keyframes hr-slideup{from{transform:translateY(102%)} to{transform:none}}
@keyframes hr-pulse{0%,100%{box-shadow:0 0 0 0 rgba(18,193,108,.45)} 50%{box-shadow:0 0 0 14px rgba(18,193,108,0)}}
@keyframes hr-shimmer{0%{background-position:-400px 0} 100%{background-position:400px 0}}
@keyframes hr-marquee{0%{transform:translateX(0)} 100%{transform:translateX(-100%)}}
@keyframes hr-blink{0%,100%{opacity:1} 50%{opacity:.2}}
@keyframes hr-toast{from{opacity:0; transform:translate(-50%,10px)} to{opacity:1; transform:translate(-50%,0)}}
@keyframes hr-pop{0%{transform:scale(.92)} 60%{transform:scale(1.04)} 100%{transform:scale(1)}}
@keyframes hr-confetti{to{transform:translateY(940px) rotate(640deg); opacity:.9}}
.shimmer{background:linear-gradient(90deg,#eee 25%,#f6f6f6 37%,#eee 63%); background-size:800px 100%; animation:hr-shimmer 1.3s infinite}