/* MyOffice landing page (v1.6). Display: Bricolage Grotesque. Text: Instrument Sans. Brand navy, signal red, site-drawing grid. */
.mk{--mk-navy:#1D274E;--mk-deep:#141C3A;--mk-red:#D93A20;--mk-flame:#F94C30;--mk-cyan:#3BB3E8;--mk-text:"Instrument Sans","Segoe UI",Roboto,Arial,sans-serif;--mk-display:"Bricolage Grotesque","Instrument Sans","Segoe UI",sans-serif;
  font-family:var(--mk-text);font-size:16.5px;line-height:1.6;color:var(--ink);background:var(--bg)}
.mk h1,.mk h2,.mk h3{font-family:var(--mk-display);letter-spacing:-.015em;line-height:1.1;color:inherit}
.mk-in{max-width:1180px;margin:0 auto;padding:0 24px}
.mk-narrow{max-width:780px}
.mk p{max-width:68ch}

/* nav */
.mk-nav{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--card) 92%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.mk-nav .mk-in{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px}
.mk-logo{display:flex;align-items:center;gap:10px;font-family:var(--mk-display);font-weight:800;font-size:1.25rem;color:var(--ink);text-decoration:none}
.mk-mark{width:28px;height:28px;display:block}
.mk-nav nav{display:flex;align-items:center;gap:18px}
.mk-nav nav a{color:var(--ink);text-decoration:none;font-size:.95rem}
.mk-nav nav a:not(.mk-btn):hover{color:var(--mk-red)}
.mk-nav nav a.on{color:var(--mk-red)}
.mk-nav .lang-toggle{margin:0;color:var(--ink)}

/* buttons */
.mk-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--mk-red);color:#fff!important;border:2px solid var(--mk-red);border-radius:10px;padding:10px 18px;font-weight:600;text-decoration:none;cursor:pointer;font-size:1rem;transition:background .15s}
.mk-btn:hover{background:#B4260F;border-color:#B4260F}
.mk-btn.sm{padding:6px 14px;font-size:.92rem}
.mk-btn.lg{padding:14px 24px;font-size:1.05rem}
.mk-btn.ghost{background:transparent;border-color:rgba(255,255,255,.5)}.mk-btn.ghost:hover{background:rgba(255,255,255,.1)}
.mk-btn.ghost-dark{background:transparent;color:var(--ink)!important;border-color:var(--line)}.mk-btn.ghost-dark:hover{border-color:var(--ink)}
.mk-btn:focus-visible,.mk-pains button:focus-visible,.mk-needs input:focus-visible,.mk-staff input:focus-visible,.mk-faq summary:focus-visible{outline:3px solid var(--mk-cyan);outline-offset:2px}

/* hero: navy with the faint grid of a site drawing */
.mk-hero{background-color:var(--mk-navy);background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:32px 32px;color:#fff;padding:64px 0 40px}
.mk-hero-copy{max-width:860px}
.mk-hero h1{font-size:clamp(2.3rem,5.2vw,4.1rem);font-weight:800;margin:0 0 20px;color:#fff}
.mk-lead{font-size:1.15rem;color:#C9CFE2;margin:0 0 26px}
.mk-cta{display:flex;flex-wrap:wrap;gap:12px}
.mk-fine{font-size:.88rem;color:var(--muted);margin:12px 0 0}
.mk-hero .mk-fine,.mk-note{color:#A9B1C9}
.mk-note{font-size:.82rem;margin:14px 0 0}

/* the problem switcher */
.mk-switch{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:28px;margin-top:52px;align-items:start}
.mk-pains-h{font-family:var(--mk-display);font-size:1.25rem;font-weight:700;margin:0 0 10px;color:#fff}
.mk-pains{display:flex;flex-direction:column;gap:2px}
.mk-pains button{all:unset;box-sizing:border-box;cursor:pointer;padding:10px 14px 10px 16px;border-left:3px solid rgba(255,255,255,.18);color:#BFC6DB;font-size:.98rem;line-height:1.45;border-radius:0 8px 8px 0}
.mk-pains button:hover{color:#fff;background:rgba(255,255,255,.05)}
.mk-pains button[aria-selected=true]{border-left-color:var(--mk-flame);background:rgba(255,255,255,.09);color:#fff}
.mk-window{background:var(--card);color:var(--ink);border-radius:14px;overflow:hidden;box-shadow:0 30px 60px rgba(5,10,30,.45),0 0 0 1px rgba(255,255,255,.08);position:sticky;top:84px}
.mk-bar{display:flex;align-items:center;gap:6px;padding:9px 12px;background:var(--soft);border-bottom:1px solid var(--line)}
.mk-bar i{width:10px;height:10px;border-radius:50%;background:var(--line)}
.mk-bar span{margin-left:10px;font-size:.78rem;color:var(--muted)}
.mk-app{display:grid;grid-template-columns:168px minmax(0,1fr);min-height:388px}
.mk-side{list-style:none;margin:0;padding:12px 8px;background:var(--mk-navy);color:#fff;font-size:.82rem;display:flex;flex-direction:column;gap:2px;box-shadow:inset -3px 0 0 var(--mk-flame)}
.mk-side li{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:7px;opacity:.72}
.mk-side li.on{opacity:1;background:rgba(255,255,255,.15);font-weight:600;box-shadow:inset 3px 0 0 var(--mk-flame)}
.mk-side .ui-ic{background:none!important;width:auto;height:auto;padding:0;color:inherit;display:inline-flex}
.mk-panels{padding:20px 22px;background:var(--bg)}
.mk-app-name{font-family:var(--mk-display);font-weight:700;font-size:1.3rem;margin:0 0 12px}
.mk-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:6px 14px}
.mk-card-h{font-weight:600;font-size:.9rem;color:var(--muted);margin:8px 0 4px}
.mk-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--line);font-size:.93rem}
.mk-row:first-of-type{border-top:0}
.mk-row b{font-variant-numeric:tabular-nums;font-weight:600}
.mk-row em{font-style:normal}
.mk-fix{margin:16px 2px 0;font-size:1rem;line-height:1.55}
.mk-panel[hidden]{display:none}

/* sections */
.mk-sec{padding:84px 0}
.mk-alt{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.mk-sec h2{font-size:clamp(1.8rem,3.4vw,2.6rem);font-weight:800;margin:0 0 14px}
.mk-sub{font-size:1.08rem;color:var(--muted);margin:0 0 36px}

/* app catalogue: the old way crossed out above what each app does */
.mk-catalog{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 44px}
.mk-group h3{font-size:1.2rem;margin:0 0 6px;padding-bottom:8px;border-bottom:2px solid var(--ink)}
.mk-group ul{list-style:none;margin:0;padding:0}
.mk-group li{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);align-items:start}
.mk-group li .ui-ic{background:none!important;width:auto;height:auto;padding:2px 0 0;color:var(--mk-navy)}
:root[data-theme=dark] .mk-group li .ui-ic{color:var(--mk-cyan)}
.mk-group li b{display:block;font-size:1.04rem}
.mk-group li span{display:block;font-size:.93rem;color:var(--muted)}
.mk-was{text-decoration:line-through;text-decoration-color:var(--mk-red);text-decoration-thickness:2px;margin:2px 0 4px;color:var(--ink)!important;opacity:.75}
.mk-group li small{font-size:.78rem;color:var(--muted);white-space:nowrap;padding-top:4px}

/* package finder: the answer looks like a quotation slip */
.mk-finder{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:start}
.mk-needs{border:0;padding:0;margin:0 0 22px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 16px}
.mk-needs legend{font-weight:600;margin-bottom:8px;padding:0}
.mk-needs label{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:9px;cursor:pointer;background:var(--bg);font-size:.95rem}
.mk-needs label:has(input:checked){border-color:var(--mk-navy);background:color-mix(in srgb,var(--mk-navy) 8%,var(--card))}
.mk-needs input{width:18px;height:18px;margin:0;accent-color:var(--mk-red)}
.mk-staff{display:block;font-weight:600}
.mk-staff output{font-family:var(--mk-display);font-size:1.5rem;font-weight:800;margin-left:8px;font-variant-numeric:tabular-nums}
.mk-staff input{width:100%;margin-top:8px;accent-color:var(--mk-red)}
.mk-quote{background:var(--mk-deep);color:#fff;border-radius:14px;padding:26px 26px 22px;position:sticky;top:84px;box-shadow:0 20px 40px rgba(10,16,40,.25)}
.mk-quote p{margin:0}
.mk-quote-pkg{color:#AEB6CE;font-weight:600}
.mk-quote-price{font-family:var(--mk-display);font-weight:800;font-size:2.6rem;line-height:1.1;margin:4px 0!important}
.mk-quote-price span{font-variant-numeric:tabular-nums}
.mk-quote-sub{color:#C9CFE2;font-size:.95rem}
.mk-quote ul{list-style:none;padding:0;margin:14px 0}
.mk-quote-lines{border-top:1px dashed rgba(255,255,255,.3);border-bottom:1px dashed rgba(255,255,255,.3);padding:10px 0!important}
.mk-quote-lines li{display:flex;justify-content:space-between;gap:12px;font-size:.92rem;padding:3px 0}
.mk-quote-lines b{font-variant-numeric:tabular-nums;font-weight:600}
.mk-quote-h{font-weight:600;color:#AEB6CE;font-size:.9rem}
.mk-quote-was li{font-size:.92rem;padding:2px 0 2px 22px;position:relative;color:#DCE1EE}
.mk-quote-was li::before{content:"";position:absolute;left:2px;top:.75em;width:12px;height:2px;background:var(--mk-flame)}
.mk-quote .mk-btn{width:100%;margin-top:6px}
.mk-quote .mk-fine{color:#A9B1C9}

/* proof */
.mk-split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:48px;align-items:center}
.mk-ticks{list-style:none;padding:0;margin:16px 0 0}
.mk-ticks li{padding:4px 0 4px 26px;position:relative}
.mk-ticks li::before{content:"";position:absolute;left:3px;top:.62em;width:11px;height:6px;border-left:2px solid var(--mk-red);border-bottom:2px solid var(--mk-red);transform:rotate(-45deg)}
.mk-shots{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.mk-shots img{width:100%;border-radius:10px;border:1px solid var(--line);box-shadow:var(--shadow);background:#fff}
.mk-shots img:last-child{margin-top:40px}

/* steps (a real sequence, so numbered) */
.mk-steps{list-style:none;counter-reset:s;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.mk-steps li{counter-increment:s;border-top:3px solid var(--ink);padding-top:14px}
.mk-steps li::before{content:counter(s);font-family:var(--mk-display);font-weight:800;font-size:2rem;color:var(--mk-red);display:block;line-height:1;margin-bottom:8px}
.mk-steps b{display:block;font-size:1.1rem;margin-bottom:4px}.mk-steps span{color:var(--muted)}

/* pricing */
.mk-plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch}
.mk-plan{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:24px;display:flex;flex-direction:column}
.mk-plan.best{border:2px solid var(--mk-navy);box-shadow:0 14px 34px rgba(29,39,78,.14)}
:root[data-theme=dark] .mk-plan.best{border-color:var(--mk-cyan)}
.mk-plan h3{font-size:1.25rem;margin:0 0 8px}
.mk-price{font-family:var(--mk-display);font-weight:800;font-size:2.1rem;margin:0;line-height:1.1}
.mk-price span{font-family:var(--mk-text);font-weight:400;font-size:.95rem;color:var(--muted)}
.mk-plan .mk-ticks{flex:1;margin-bottom:18px;font-size:.94rem}
.mk-addon{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:20px;padding:20px 24px;border:1px dashed var(--muted);border-radius:14px}
.mk-addon h3{margin:0 0 4px;font-size:1.15rem}.mk-addon p{margin:0}

/* questions */
.mk-faq{border-bottom:1px solid var(--line)}
.mk-faq summary{cursor:pointer;padding:16px 0;font-weight:600;font-size:1.05rem;list-style:none;display:flex;justify-content:space-between;gap:16px}
.mk-faq summary::-webkit-details-marker{display:none}
.mk-faq summary::after{content:"+";font-family:var(--mk-display);font-size:1.4rem;line-height:1;color:var(--mk-red)}
.mk-faq[open] summary::after{content:"–"}
.mk-faq p{margin:0 0 16px;color:var(--muted)}

/* final call */
.mk-final{background:var(--mk-navy);color:#fff;padding:80px 0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:32px 32px}
.mk-final h2{font-size:clamp(1.9rem,3.6vw,2.8rem);font-weight:800;margin:0 0 12px;color:#fff}
.mk-final p{color:#C9CFE2;font-size:1.1rem;margin:0 0 24px}

/* tablet and phone */
@media (max-width:980px){
  .mk-switch{grid-template-columns:1fr}
  .mk-pains{flex-direction:row;overflow-x:auto;gap:8px;padding-bottom:6px;scroll-snap-type:x mandatory}
  .mk-pains-h{flex:0 0 100%;display:none}
  .mk-pains button{flex:0 0 78%;scroll-snap-align:start;border:1px solid rgba(255,255,255,.2);border-radius:10px;font-size:.92rem}
  .mk-pains button[aria-selected=true]{border-color:var(--mk-flame)}
  .mk-window{position:static}
  .mk-finder,.mk-split{grid-template-columns:1fr}
  .mk-quote{position:static}
  .mk-catalog{grid-template-columns:1fr}
  .mk-plans{grid-template-columns:1fr}
  .mk-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .mk-in{padding:0 18px}
  .mk-nav nav a:not(.mk-btn):not(.keep):not(.lang-toggle){display:none}
  .mk-nav nav{gap:10px}
  .mk-hero{padding:40px 0 28px}
  .mk-app{grid-template-columns:1fr}
  .mk-side{flex-direction:row;overflow-x:auto;padding:8px;box-shadow:inset 0 -3px 0 var(--mk-flame)}
  .mk-side li{white-space:nowrap}
  .mk-side li:not(.on){display:none}
  .mk-panels{padding:16px}
  .mk-row{grid-template-columns:minmax(0,1fr) auto;font-size:.88rem}
  .mk-row em{grid-column:2}
  .mk-sec{padding:56px 0}
  .mk-needs{grid-template-columns:1fr}
  .mk-steps{grid-template-columns:1fr}
  .mk-addon{flex-direction:column;align-items:flex-start}
  .mk-shots img:last-child{margin-top:0}
}
@media (prefers-reduced-motion:reduce){.mk-btn{transition:none}.mk-pains{scroll-snap-type:none}}
.mk-nudge{margin:10px 0 14px;padding:10px 12px;border-radius:10px;background:rgba(27,175,122,.14);color:inherit;font-size:.92rem;line-height:1.4;border-left:3px solid #1baf7a}

/* "What an HR app won't do for you": a table on wide screens, stacked cards on phones */
.mk-vs{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--card)}
.mk-vs-row{display:grid;grid-template-columns:1.05fr 1.7fr 1fr 1fr;border-top:1px solid var(--line)}
.mk-vs-row>*{padding:14px 16px;font-size:.95rem;line-height:1.45}
.mk-vs-row b{font-family:var(--mk-display);font-size:1.02rem}
.mk-vs-row .us{background:color-mix(in srgb,var(--mk-red) 6%,transparent);border-left:3px solid var(--mk-red);color:var(--ink)}
.mk-vs-row .them,.mk-vs-row .old{color:var(--muted)}
.mk-vs-row em{display:none;font-style:normal;font-weight:600}
.mk-vs-head{border-top:0;background:var(--soft,rgba(0,0,0,.03))}
.mk-vs-head span{font-weight:700;font-size:.85rem;color:var(--muted)}.mk-vs-head span:nth-child(2){color:var(--mk-red);background:color-mix(in srgb,var(--mk-red) 6%,transparent);border-left:3px solid var(--mk-red)}
.mk-perhead{font-weight:600;margin:-18px 0 30px}
@media (max-width:760px){
  .mk-vs-head{display:none}
  .mk-vs-row{grid-template-columns:1fr}.mk-vs-row:nth-child(2){border-top:0}
  .mk-vs-row>*{padding:6px 16px}.mk-vs-row b{padding-top:16px}.mk-vs-row .old{padding-bottom:16px}
  .mk-vs-row em{display:inline}
}

/* launch promotion */
.mk-promo{display:inline-block;max-width:760px;margin:0 0 16px;padding:7px 14px;border-radius:12px;background:color-mix(in srgb,var(--mk-red) 10%,transparent);color:var(--mk-red);font-weight:600;font-size:.92rem}
.mk-price .was-price{color:var(--muted);font-weight:500;font-size:.5em;margin-left:8px;text-decoration-thickness:2px}
.mk-hero .mk-promo{background:rgba(255,255,255,.12);color:#fff}
.mk-addon .mk-price span{display:block;margin-top:2px}
.mk-addon .mk-price .was-price{display:inline}