/* Layout: a stack of coloured paper. The seven stripes mark the left edge of the opening and
   closing spreads, lime is the one loud field, and everything between is calm and readable. */
:root{
  --lime:#CFD600; --yellow:#FFCB05; --orange:#DB7A0E; --coral:#F2472E; --red:#B3140F; --maroon:#8C2331; --teal:#2E7D77; --ink:#2A2930; --paper:#F3F4E6;
  --bg:#F5F6E9; --surface:#FFFFFF; --soft:#ECEED9; --fg:#2A2930; --muted:#5F6057; --line:#DCDFC8; --link:#1F6A64;
  --shadow:0 1px 2px rgba(42,41,48,.06),0 18px 40px rgba(42,41,48,.10);
  --display:"Bricolage Grotesque","Trebuchet MS",system-ui,sans-serif;
  --body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
}
@media (prefers-color-scheme:dark){:root{--bg:#1A191E;--surface:#25242A;--soft:#201F25;--fg:#F1F2E4;--muted:#A9AA9E;--line:#3A3941;--link:#7FD1C9;--shadow:0 0 0 1px #33323a;color-scheme:dark}}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--display);margin:0;letter-spacing:-.02em;text-wrap:balance}
h1{font-size:clamp(2.4rem,1.2rem + 5vw,4.6rem);font-weight:800;line-height:1.02}
h2{font-size:clamp(1.8rem,1.1rem + 2.6vw,3rem);font-weight:800;line-height:1.08}
h3{font-size:1.1rem;font-weight:700;letter-spacing:-.01em}
p{margin:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.in{max-width:1160px;margin-inline:auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.eyebrow{font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:12px;opacity:.75}
.sub{font-size:1.15rem;max-width:62ch;margin-top:14px;color:var(--muted)}
.fine{font-size:.9rem;opacity:.8}
.word{font-family:var(--display);font-weight:800;font-size:1.35rem;letter-spacing:-.03em}
.word b{font-weight:500;color:var(--teal)}

.btn{display:inline-block;text-decoration:none;font-weight:700;border-radius:12px;padding:9px 16px;border:2px solid transparent;white-space:nowrap}
.btn.lg{padding:13px 22px;font-size:1.05rem}
.btn.dark{background:var(--ink);color:var(--paper)}
.btn.dark:hover{background:#000}
.btn.line{border-color:var(--ink);color:var(--ink)}
.btn.line:hover{background:rgba(42,41,48,.08)}

.nav{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--lime) 92%,transparent);backdrop-filter:blur(8px);color:var(--ink)}
.nav .in{display:flex;align-items:center;gap:24px;padding-block:12px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.logo svg{border-radius:8px}
.nav .word b{color:var(--ink);opacity:.6}
.links{display:flex;gap:22px;margin-left:auto;font-weight:600;font-size:.95rem}
.links a{text-decoration:none}
.links a:hover{text-decoration:underline;text-underline-offset:4px}

.stripes{position:absolute;inset:0 auto 0 0;display:flex}
.stripes i{width:clamp(7px,1.5vw,22px)}
.stripes i:nth-child(1){background:var(--red)}.stripes i:nth-child(2){background:var(--yellow)}.stripes i:nth-child(3){background:var(--orange)}.stripes i:nth-child(4){background:var(--coral)}
.stripes i:nth-child(5){background:var(--maroon)}.stripes i:nth-child(6){background:var(--teal)}.stripes i:nth-child(7){background:var(--ink)}

.hero{position:relative;background:var(--lime);color:var(--ink);overflow:hidden}
.hero .in,.closing .in{padding-left:max(calc(clamp(7px,1.5vw,22px) * 7 + 28px),env(safe-area-inset-left,0px))}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:40px;align-items:center;padding-block:clamp(48px,7vw,96px)}
.pitch{display:flex;flex-direction:column;gap:20px}
.lead{font-size:clamp(1.1rem,1rem + .5vw,1.35rem);max-width:54ch}
.cta{display:flex;gap:12px;flex-wrap:wrap}
.collage{position:relative;min-height:520px}
.shot{position:absolute;background:#fff;color:#2A2930;border-radius:18px;box-shadow:var(--shadow);padding:18px;display:flex;flex-direction:column;gap:8px;font-size:.92rem;width:min(340px,86%)}
.shot h3{font-size:1.05rem}
.shot.s1{top:0;right:0;transform:rotate(2deg);border-top:6px solid var(--coral)}
.shot.s2{top:212px;left:0;transform:rotate(-2.5deg)}
.shot.s3{top:348px;right:4%;transform:rotate(1.2deg);width:min(310px,80%)}
.shot.flat{position:static;transform:none;width:auto}
.tag{align-self:flex-start;font-size:.72rem;font-weight:700;padding:2px 9px;border-radius:99px}
.tag.urgent{background:#FBE3DE;color:#BF2E1A}
.mini{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#63645B}
.pillbtn{align-self:flex-start;background:#2A2930;color:#F3F4E6;font-weight:700;font-size:.82rem;padding:5px 11px;border-radius:8px}
.who{display:flex;gap:10px;align-items:flex-start}
.av{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:.72rem;font-weight:700;color:#fff}
.a1{background:var(--red)}.a2{background:var(--teal)}.a3{background:var(--maroon)}
.react{display:flex;gap:12px;align-items:center;font-size:.8rem;color:#63645B;flex-wrap:wrap}
.val{background:var(--yellow);color:#2A2930;font-weight:700;padding:2px 8px;border-radius:6px}
.reply{background:#ECEED9;border-radius:10px;padding:6px 10px;font-size:.88rem}
.bubble{background:#ECEED9;border-radius:14px;padding:8px 12px;max-width:88%;align-self:flex-start}
.bubble.me{background:#2A2930;color:#F3F4E6;align-self:flex-end}
.confirm{border:1px solid #DCDFC8;border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:5px}
.confirm span:not(.pillbtn){font-size:.8rem;color:#63645B}

.band{padding-block:clamp(56px,7vw,104px)}
.band.soft{background:var(--soft)}
.band.lime{background:var(--lime);color:var(--ink)}
.band.lime .sub{color:var(--ink);opacity:.8}
.band.dark{background:var(--ink);color:var(--paper)}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:36px;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.grid article{padding:22px 22px 26px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.grid article p{color:var(--muted);font-size:.98rem}
.grid article:nth-child(7n+1) h3{color:var(--coral)}.grid article:nth-child(7n+2) h3{color:var(--teal)}.grid article:nth-child(7n+3) h3{color:var(--orange)}
.grid article:nth-child(7n+4) h3{color:var(--maroon)}.grid article:nth-child(7n+5) h3{color:var(--red)}.grid article:nth-child(7n+6) h3{color:var(--link)}.grid article:nth-child(7n) h3{color:var(--coral)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:48px;align-items:center}
.ticks{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.ticks li{padding-left:28px;position:relative}
.ticks li::before{content:"";position:absolute;left:0;top:.55em;width:14px;height:4px;background:currentColor;border-radius:2px;opacity:.7}
.feed{display:flex;flex-direction:column;gap:14px}
.poll{display:flex;flex-direction:column;gap:6px}
.poll span{position:relative;display:flex;justify-content:space-between;gap:10px;padding:7px 11px;border:1px solid #DCDFC8;border-radius:10px;overflow:hidden;font-size:.88rem;isolation:isolate}
.poll span::before{content:"";position:absolute;inset:0 auto 0 0;width:var(--w);background:#D7E9E6;z-index:-1}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin-top:34px}
.panel{background:#35343C;border-radius:20px;padding:26px;display:flex;flex-direction:column;gap:14px}
.panel h3{font-size:1.35rem;color:var(--lime)}
.panel p{color:#D6D7CA}
.chat{display:flex;flex-direction:column;gap:8px;font-size:.92rem}
.band.dark .bubble{background:#4A4952;color:#F3F4E6}
.band.dark .bubble.me{background:var(--lime);color:var(--ink)}
.note{font-size:.9rem;border-top:1px solid #4A4952;padding-top:12px}
.checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;color:#F3F4E6}
.checks li{display:flex;gap:10px;align-items:baseline}
.dot{flex:none;width:9px;height:9px;border-radius:50%;background:var(--teal);transform:translateY(-1px)}
.dot.high{background:var(--coral)}.dot.mid{background:var(--yellow)}
.autos{margin-top:34px}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips span{border:1px solid #5A5962;border-radius:99px;padding:6px 14px;font-size:.92rem}
.slip{background:var(--surface);border-radius:20px;box-shadow:var(--shadow);padding:24px;display:flex;flex-direction:column;gap:14px}
.slip header{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:12px}
.slip header span{color:var(--muted)}
.slip dl{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px 16px;margin:0;font-variant-numeric:tabular-nums}
.slip dd{margin:0;text-align:right}
.slip .tot{font-weight:700;border-top:1px solid var(--line);padding-top:8px}
.slip p{background:var(--soft);border-radius:12px;padding:12px;font-size:.92rem}
.steps{list-style:none;counter-reset:step;margin:34px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px}
.steps li{counter-increment:step;background:var(--surface);border-radius:18px;padding:24px;display:flex;flex-direction:column;gap:8px}
.steps li::before{content:counter(step);font-family:var(--display);font-weight:800;font-size:2.2rem;line-height:1;color:var(--coral)}
.steps p,.trust p{color:var(--muted)}
.trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px;margin-top:40px}
.trust article{border-top:3px solid var(--teal);padding-top:14px;display:flex;flex-direction:column;gap:6px}
.next{margin-top:40px;padding:20px 22px;border:1px dashed var(--line);border-radius:16px}
.next p:last-child{color:var(--muted)}
.closing{position:relative;background:var(--lime);color:var(--ink);overflow:hidden}
.closing .in{padding-block:clamp(56px,7vw,96px);display:flex;flex-direction:column;gap:22px;align-items:flex-start}
.foot{background:var(--ink);color:var(--paper)}
.foot .in{display:flex;gap:18px;align-items:center;flex-wrap:wrap;padding-block:22px;font-size:.92rem}
.foot .word b{color:var(--lime)}
.foot a{margin-left:auto;font-weight:700}

@media (max-width:900px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .links{display:none}.nav .btn{margin-left:auto}
  .hero-grid,.split{grid-template-columns:minmax(0,1fr)}
  .collage{min-height:0;display:flex;flex-direction:column;gap:14px}
  .shot{position:static;transform:none!important;width:auto!important}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media (prefers-reduced-motion:no-preference){
  .shot{animation:rise .7s both cubic-bezier(.2,.7,.2,1)}
  .shot.s2{animation-delay:.12s}.shot.s3{animation-delay:.24s}
  @keyframes rise{from{translate:0 18px}to{translate:0 0}}
}
@media (max-width:560px){.grid{grid-template-columns:minmax(0,1fr)}}

/* ---- the BeyondHR logo: the "b" mark and the wordmark ---- */
.word{font-family:'Poppins',var(--display);font-weight:700;letter-spacing:-.035em}
.word b{font-weight:700}
.mark{width:auto;flex:none;border-radius:0}
.logo .mark,.brandbar .mark{border-radius:0}
.logo .mark{color:var(--ink);border-radius:0}
.nav .word b{color:#fff;opacity:1}

/* ---- live demo, questions, credits ---- */
.demo-people{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-top:30px}
.demo-people article{background:var(--surface);border-radius:18px;padding:24px;display:flex;flex-direction:column;gap:10px;align-items:flex-start;box-shadow:0 1px 0 var(--line)}
.demo-people .btn{margin-top:auto}
.demo-people .fine{margin:0;word-break:break-all}
.muted{color:var(--muted)}
.faq{margin-top:30px;display:flex;flex-direction:column;gap:10px;max-width:860px}
.faq details{background:var(--surface);border-radius:14px;padding:4px 20px}
.faq summary{cursor:pointer;list-style:none;padding:14px 0;display:flex;align-items:center;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";margin-left:auto;font-family:var(--display);font-weight:800;font-size:1.4rem;color:var(--coral)}
.faq details[open] summary::after{content:"–"}
.faq h3{font-size:1.08rem;margin:0}
.faq p{color:var(--muted);padding:0 0 16px;margin:0;max-width:70ch}
.foot .credit{padding-top:0;padding-bottom:20px;font-size:.85rem;opacity:.85;display:block}
.foot .credit a{margin-left:0;font-weight:700;text-decoration:underline}

/* ---- readable text: brand colours darkened just enough for small headings ---- */
:root{--coral-ink:#C4321A;--orange-ink:#A65A06;--teal-ink:#24675F}
@media (prefers-color-scheme:dark){:root{--coral-ink:#FF8A73;--orange-ink:#F2A54A;--teal-ink:#7FD1C9}}
.grid article:nth-child(7n+1) h3,.grid article:nth-child(7n) h3{color:var(--coral-ink)}
.grid article:nth-child(7n+2) h3{color:var(--teal-ink)}
.grid article:nth-child(7n+3) h3{color:var(--orange-ink)}
.shot .t{font-family:var(--display);font-weight:700;font-size:1.05rem;letter-spacing:-.01em;line-height:1.25;margin:0}