/* ==========================================================================
   LeaveCalc sitewide UI layer (typography + buttons).
   Loaded as the LAST stylesheet in <head>, after each page's own inline
   <style>, on purpose: every rule below is written to win on the normal
   CSS cascade (same-specificity selectors placed later win) rather than by
   piling on !important. Where a rule only needs to nudge a default that no
   page overrides more specifically, :where() keeps its specificity at zero
   so a page-specific style can still beat it if it ever needs to.

   Scope: fonts, headings/body type, and one shared button/input/segmented-
   control language across ~240 static pages, public/app/ (the web app),
   for-employers/, countries/ (+ public-holidays/, leave-rules/, which load
   countries.css), and sick-leave/. No page markup was touched to ship this;
   everything here targets classes and ids that already exist in the pages.
   ========================================================================== */

/* ---------------------------------------------------------------- fonts */
@font-face{
  font-family:"Inter";
  src:url("/assets/fonts/InterVariable-latin.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0100-017F,U+2000-206F,U+20A0-20CF,U+2190-2193,U+2212,U+2215,U+2122,U+2197,U+2248,U+2265,U+2713,U+1F852;
}
@font-face{
  font-family:"Inter";
  src:url("/assets/fonts/InterVariable-Italic-latin.woff2") format("woff2");
  font-weight:100 900;
  font-style:italic;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0100-017F,U+2000-206F,U+20A0-20CF,U+2190-2193,U+2212,U+2215,U+2122,U+2197,U+2248,U+2265,U+2713,U+1F852;
}
@font-face{
  font-family:"Inter";
  src:url("/assets/fonts/InterVariable.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0180-02BA,U+02BD-02C5,U+02C7-02D9,U+02DB,U+02DD-1FFF,U+2070-209F,U+20D0-2121,U+2123-218F,U+2194-2196,U+2198-2211,U+2213-2214,U+2216-2247,U+2249-2264,U+2266-2712,U+2716-2B06,U+2B08-1F851,U+1F853-10FFFF;
}
@font-face{
  font-family:"Inter";
  src:url("/assets/fonts/InterVariable-Italic.woff2") format("woff2");
  font-weight:100 900;
  font-style:italic;
  font-display:swap;
  unicode-range:U+0180-02BA,U+02BD-02C5,U+02C7-02D9,U+02DB,U+02DD-1FFF,U+2070-209F,U+20D0-2121,U+2123-218F,U+2194-2196,U+2198-2211,U+2213-2214,U+2216-2247,U+2249-2264,U+2266-2712,U+2716-2B06,U+2B08-1F851,U+1F853-10FFFF;
}

:root{
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  /* Site accent tokens, restated here so every page has --accent-deep even
     the ones (index.html, app.css, sick-leave.css) whose own :root never
     defined it. Values match what for-employers/employers.css and
     countries/countries.css already ship, so this is a no-op there. */
  --accent:#D97706; --accent-dark:#B45309; --accent-deep:#92400E;
  --accent-soft:#FFF7E6; --accent-line:#FBDFA6;
}

html{
  font-family:var(--sans);
  font-feature-settings:"cv11","ss01","cv02","cv03","cv04";
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

/* ---------------------------------------------------------------- type */
:where(body){
  font-size:15px;
  line-height:1.55;
}
:where(h1,h2,h3,h4,h5,h6){
  font-weight:700;
  letter-spacing:-.02em;
}
:where(h1){
  font-weight:700;
  letter-spacing:-.03em;
}
:where(h2,h3){
  font-weight:650;
}
/* Small-caps / uppercase eyebrows keep their tracking (don't let the -.02em
   heading rule above leak onto them via inheritance from a wrapping tag). */
:where(.eyebrow,.eh-tag,.eb-eyebrow,.gl,[class$="-eyebrow"],[class*="eyebrow "]){
  letter-spacing:.08em;
  font-weight:800;
}

@media(max-width:640px){
  :where(body){font-size:14.5px}
}

/* ==========================================================================
   Buttons

   Contrast note: white text on the raw accent #D97706 measures ~3.2:1,
   which fails WCAG AA for normal-weight small text (needs 4.5:1; even the
   "large text" 3:1 minimum only just scrapes by, and 15px/600 does not
   reliably qualify as "large"). #B45309 (the site's existing --accent-dark
   token) on white measures ~5:1, which passes AA normal text comfortably.
   So the filled button uses --accent-dark as its base fill, not --accent;
   --accent-deep (#92400E, ~6.8:1) is the hover/press shade; #D97706 itself
   is kept for borders, rings, small badges and other non-text accents
   where contrast against white text isn't in play.
   ========================================================================== */

/* ---- Primary (filled) --------------------------------------------------
   Every existing "main action" button/link on the site, whatever class or
   id the page happened to give it. Plain (non-:where) selectors on purpose:
   these need to beat a page's own same-specificity class rule by source
   order, and several of them (ids, .calcbtn) are the literal button a
   visitor is meant to press. */
#calc,
.calcbtn,
.btn.primary,
.btn-p,
.ctabtn.pri,
.wbtn.pri,
a.tier.tier-hot,
.emp-bridge a.eb-btn,
.emp-hub a.eh-btn,
input[type="submit"],
button[type="submit"]{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:var(--accent-dark);
  color:#fff;
  font-family:var(--sans);
  font-weight:600;
  font-size:15px;
  line-height:1.2;
  padding:12px 20px;
  border:none;
  border-radius:12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),
             0 1px 2px rgba(15,23,42,.08),
             0 8px 20px -12px rgba(217,119,6,.7);
  cursor:pointer;
  text-decoration:none;
  white-space:nowrap;
  transition:background 160ms ease-out,box-shadow 160ms ease-out,transform 160ms ease-out;
}
#calc:hover,
.calcbtn:hover,
.btn.primary:hover,
.btn-p:hover,
.ctabtn.pri:hover,
.wbtn.pri:hover,
a.tier.tier-hot:hover,
.emp-bridge a.eb-btn:hover,
.emp-hub a.eh-btn:hover,
input[type="submit"]:hover,
button[type="submit"]:hover{
  background:var(--accent-deep);
  color:#fff;
  transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),
             0 2px 4px rgba(15,23,42,.1),
             0 12px 24px -12px rgba(146,64,14,.75);
}
#calc:active,
.calcbtn:active,
.btn.primary:active,
.btn-p:active,
.ctabtn.pri:active,
.wbtn.pri:active,
a.tier.tier-hot:active,
.emp-bridge a.eb-btn:active,
.emp-hub a.eh-btn:active,
input[type="submit"]:active,
button[type="submit"]:active{
  transform:translateY(0);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.25);
}
#calc:focus-visible,
.calcbtn:focus-visible,
.btn.primary:focus-visible,
.btn-p:focus-visible,
.ctabtn.pri:focus-visible,
.wbtn.pri:focus-visible,
a.tier.tier-hot:focus-visible,
.emp-bridge a.eb-btn:focus-visible,
.emp-hub a.eh-btn:focus-visible,
input[type="submit"]:focus-visible,
button[type="submit"]:focus-visible{
  outline:2px solid #B45309;
  outline-offset:2px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),
             0 1px 2px rgba(15,23,42,.08);
}
#calc:disabled,
.calcbtn:disabled,
.btn.primary:disabled,
.btn-p:disabled,
.ctabtn.pri[aria-disabled="true"],
.wbtn.pri:disabled,
input[type="submit"]:disabled,
button[type="submit"]:disabled{
  opacity:.5;
  cursor:not-allowed;
  transform:none;
}

/* ---- Secondary / ghost --------------------------------------------------
   White-surface outline buttons: everything that was already styled as a
   quiet, bordered action (downloads, "add another", tab toggles, the
   pricing-tier rows that aren't the highlighted one, the app's own .btn
   default and its dark/danger variants for shape only). :where() here: the
   color rules for .btn.dark/.btn.danger stay page/app.css-owned, this layer
   only unifies radius, padding and motion. */
:where(.btn:not(.primary):not(.btn-p),
       .btn-s,
       .ctabtn.sec,
       .wbtn.sec,
       .hbtn,
       .lc-btn,
       .rbtn,
       .formsbtn,
       .qs-btn,
       .icsbtn,
       .addbtn,
       .menu-btn,
       a.tier:not(.tier-hot)){
  border-radius:12px;
  transition:background 160ms ease-out,border-color 160ms ease-out,color 160ms ease-out,transform 160ms ease-out,box-shadow 160ms ease-out;
}
:where(.btn:not(.primary):not(.btn-p):not(.dark):not(.danger),
       .btn-s,
       .ctabtn.sec,
       .wbtn.sec,
       .hbtn,
       .lc-btn,
       .rbtn,
       .formsbtn,
       .qs-btn,
       .menu-btn){
  background:var(--surface,#fff);
  color:var(--ink,#0F172A);
  border:1px solid var(--line,#E2E8F0);
}
:where(.btn:hover:not(.primary):not(.btn-p):not(.dark):not(.danger),
       .btn-s:hover,
       .ctabtn.sec:hover,
       .wbtn.sec:hover,
       .hbtn:hover,
       .lc-btn:hover,
       .rbtn:hover,
       .formsbtn:hover,
       .qs-btn:hover,
       .menu-btn:hover,
       a.tier:not(.tier-hot):hover){
  border-color:var(--accent-dark,#B45309);
  background:var(--bg,#F1F5F9);
  color:var(--ink,#0F172A);
}
:where(.btn:active:not(.primary):not(.btn-p),
       .btn-s:active,
       .ctabtn.sec:active,
       .wbtn.sec:active,
       .hbtn:active,
       .lc-btn:active,
       .rbtn:active,
       .formsbtn:active,
       .qs-btn:active,
       .menu-btn:active){
  transform:translateY(0);
}
:where(.btn:focus-visible,
       .btn-s:focus-visible,
       .ctabtn.sec:focus-visible,
       .wbtn.sec:focus-visible,
       .hbtn:focus-visible,
       .lc-btn:focus-visible,
       .rbtn:focus-visible,
       .formsbtn:focus-visible,
       .qs-btn:focus-visible,
       .icsbtn:focus-visible,
       .addbtn:focus-visible,
       .menu-btn:focus-visible,
       a.tier:focus-visible){
  outline:2px solid #B45309;
  outline-offset:2px;
  box-shadow:none;
}
:where(.btn:disabled,
       .btn-s:disabled,
       .ctabtn.sec:disabled,
       .wbtn.sec:disabled,
       .hbtn:disabled,
       .rbtn:disabled,
       .formsbtn:disabled,
       .qs-btn:disabled,
       .addbtn:disabled){
  opacity:.5;
  cursor:not-allowed;
}

/* Icon-only round buttons (close/info glyphs): keep their circle/square
   shape, just fold them into the same transition language. */
:where(.xbtn,.itbtn){
  transition:background 160ms ease-out,border-color 160ms ease-out,color 160ms ease-out;
}

/* ---- Text links with an arrow -------------------------------------------
   "See more ->" style links. Two flavors already exist in the markup:
   1. .go / .gobtn already end their own text with a literal arrow
      character ("Calculate entitlement \2192", "...eligibility &rarr;").
      Nothing to append there without doubling the glyph, so the whole
      label nudges right on hover instead - same affordance, no markup edit.
   2. .eb-link / .eh-link (the employer-bridge card's secondary link,
      e.g. "Start free") carry no arrow at all, so they get one via
      ::after and only that glyph translates on hover. */
:where(.go,.gobtn){
  display:inline-block;
  transition:transform 160ms ease-out,color 160ms ease-out;
}
:where(.go:hover,.gobtn:hover){
  transform:translateX(3px);
}
:where(.eb-link,.eh-link){
  display:inline-flex;
  align-items:center;
  gap:5px;
  transition:color 160ms ease-out;
}
:where(.eb-link::after,.eh-link::after){
  content:"\2192";
  display:inline-block;
  transition:transform 160ms ease-out;
}
:where(.eb-link:hover::after,.eh-link:hover::after){
  transform:translateX(3px);
}

/* ==========================================================================
   Inputs, selects, segmented controls, pills
   ========================================================================== */
:where(input[type="text"],input[type="email"],input[type="password"],
       input[type="date"],input[type="number"],input[type="search"],
       input[type="url"],input[type="tel"],select){
  border-radius:12px;
  border:1px solid var(--field,#7C8BA1);
  font-size:15px;
  min-height:44px; /* min, not fixed: pages that add their own vertical padding (e.g. .sel select, 13px) must not clip the text */
  box-sizing:border-box;
  line-height:1.3;
}
:where(textarea){
  border-radius:12px;
  border:1px solid var(--field,#7C8BA1);
  font-size:15px;
  min-height:44px;
}
:where(input[type="text"]:focus,input[type="email"]:focus,input[type="password"]:focus,
       input[type="date"]:focus,input[type="number"]:focus,input[type="search"]:focus,
       input[type="url"]:focus,input[type="tel"]:focus,select:focus,textarea:focus){
  outline:none;
  border-color:var(--accent,#D97706);
  box-shadow:0 0 0 3px rgba(217,119,6,.2);
}

/* Segmented controls (.seg, app.css) and pills share the same 12px/999px
   radius language as the buttons above, wherever they turn up. */
:where(.seg){
  border-radius:12px;
}
:where(.seg button,.seg label span){
  border-radius:9px;
}
:where(.pill){
  border-radius:999px;
}
:where(.cc-btn,.tabbtn){
  transition:color 160ms ease-out,border-color 160ms ease-out,background 160ms ease-out;
}

@media(prefers-reduced-motion:reduce){
  #calc,.calcbtn,.btn,.btn-p,.btn-s,.ctabtn,.wbtn,.hbtn,.lc-btn,.rbtn,.formsbtn,
  .qs-btn,.icsbtn,.addbtn,.menu-btn,.xbtn,.itbtn,a.tier,.go,.gobtn,.eb-link,.eh-link,
  input,select,textarea{
    transition:none!important;
  }
  #calc:hover,.calcbtn:hover,.btn.primary:hover,.btn-p:hover,.ctabtn.pri:hover,
  .wbtn.pri:hover,a.tier.tier-hot:hover,.emp-bridge a.eb-btn:hover,.emp-hub a.eh-btn:hover,
  .go:hover,.gobtn:hover,.eb-link:hover::after,.eh-link:hover::after{
    transform:none;
  }
}

/* ==========================================================================
   FOLD  (expandable sections + FAQ cards + region picker)
   Added by tools/fold_sections.py, which wraps long explainer sections as

     <details class="fold"><summary class="fold-sum"><h2>..</h2>
       <span class="fold-prev">first sentence</span><span class="fold-chev"></span></summary>
       <div class="fold-body">..original content..</div></details>

   The text stays in the HTML (crawlers index <details> content); this layer is
   only the look. Existing FAQ items (details.faq on calculators, details.qa on
   leave-rules pages) get the same card language. Behaviour (region picker,
   open-by-hash) lives in /assets/ui.js. Written to win on source order, like
   the rest of this file, so it comes last.
   ========================================================================== */

/* ---- card shell: fold + FAQ items ---- */
.fold,
details.faq,
details.qa{
  interpolate-size:allow-keywords;
  background:var(--surface,#fff);
  border:1px solid var(--line,#E2E8F0);
  border-radius:14px;
  padding:16px 20px;
  box-shadow:none;
  transition:border-color 160ms ease-out,box-shadow 160ms ease-out;
}
.fold{margin:14px 0 0}
.fold:first-child{margin-top:0}
.fold + .fold{margin-top:10px}
details.faq,
details.qa{margin:0 0 10px;max-width:none}
/* leave-rules pages wrap their .qa items in div.faq, which draws its own top rule */
.faq:has(> details.qa){border-top:0;margin-top:0}
.fold:hover,
details.faq:hover,
details.qa:hover{
  border-color:#CBD5E1;
  box-shadow:inset 3px 0 0 rgba(217,119,6,.6);
}

/* ---- summary row ---- */
.fold-sum,
details.faq > summary,
details.qa > summary{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:2px 14px;
  margin:0;
  padding:0;
  cursor:pointer;
  list-style:none;
  border-radius:8px;
  -webkit-tap-highlight-color:transparent;
}
.fold-sum::-webkit-details-marker,
details.faq > summary::-webkit-details-marker,
details.qa > summary::-webkit-details-marker{display:none}
.fold-sum::marker,
details.faq > summary::marker,
details.qa > summary::marker{content:""}
.fold-sum:focus-visible,
details.faq > summary:focus-visible,
details.qa > summary:focus-visible{
  outline:2px solid #B45309;
  outline-offset:6px;
}
details.faq > summary,
details.qa > summary{
  flex-wrap:nowrap;
  justify-content:space-between;
  gap:14px;
  font-size:16px;
  font-weight:650;
  line-height:1.35;
  letter-spacing:-.01em;
  color:var(--ink,#0F172A);
}
details.faq > summary:hover,
details.qa > summary:hover{color:var(--ink,#0F172A)}

/* the section heading keeps its element, id and weight; only size and margins change */
.fold .fold-sum h2{
  flex:1 1 0;
  min-width:0;
  margin:0;
  padding:0;
  font-size:18px;
  line-height:1.3;
  letter-spacing:-.015em;
  color:var(--ink,#0F172A);
  text-wrap:balance;
}
.fold .fold-sum h2 a{color:inherit}
.fold-chev{order:2}
.fold-prev{
  order:3;
  flex:1 1 100%;
  min-width:0;
  margin:0;
  font-size:14px;
  line-height:1.4;
  font-weight:400;
  letter-spacing:0;
  color:#64748B;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.fold[open] > .fold-sum .fold-prev{display:none}

/* ---- chevron: 10px, drawn with borders, turns 180deg when open ---- */
.fold-chev,
details.faq > summary::after,
details.qa > summary::after{
  content:"";
  display:block;
  flex:none;
  box-sizing:border-box;
  width:10px;
  height:10px;
  margin:0 4px 0 0;
  padding:0;
  border:solid #64748B;
  border-width:0 2px 2px 0;
  border-radius:0;
  background:none;
  color:transparent;
  font-size:0;
  transform:none;
  translate:0 -3px;
  rotate:45deg;
  transition:rotate 200ms ease,translate 200ms ease,border-color 160ms ease-out;
}
.fold:hover > .fold-sum .fold-chev,
details.faq:hover > summary::after,
details.qa:hover > summary::after{border-color:#B45309}
.fold[open] > .fold-sum .fold-chev,
details.faq[open] > summary::after,
details.qa[open] > summary::after{
  transform:none;
  translate:0 3px;
  rotate:225deg;
  background:none;
  border-color:#64748B;
}
.fold[open]:hover > .fold-sum .fold-chev,
details.faq[open]:hover > summary::after,
details.qa[open]:hover > summary::after{border-color:#B45309}

/* ---- body ---- */
.fold-body{padding-top:14px}
.fold-body > :first-child{margin-top:0}
.fold-body > :last-child{margin-bottom:0}
/* cards that were the section's own frame: drop the frame, the fold is the card */
.methodcard:has(> .fold:only-child){padding:0;background:none;border:0;box-shadow:none}
.sec:has(> .fold:only-child){padding-top:10px}
.fold-body > .sources{margin:0;padding:0;border:0;box-shadow:none;background:none}
details.faq .fa,
details.qa > p{
  margin:0;
  padding:12px 28px 0 0;
  font-size:14.5px;
  line-height:1.6;
  color:var(--ink-soft,#334155);
  max-width:none;
}
details.faq .fa p{margin:0 0 8px}
details.faq .fa p:last-child{margin-bottom:0}

/* ---- open: fade in and animate height (::details-content), instant elsewhere ---- */
@supports selector(::details-content){
  .fold::details-content,
  details.faq::details-content,
  details.qa::details-content{
    block-size:0;
    opacity:0;
    overflow:clip;
    transition:block-size 260ms ease,opacity 260ms ease,content-visibility 260ms allow-discrete;
  }
  .fold[open]::details-content,
  details.faq[open]::details-content,
  details.qa[open]::details-content{
    block-size:auto;
    opacity:1;
  }
}

/* ---- region picker (public-holidays: By state / region / province ...) ---- */
.fold-pick{
  display:block;
  box-sizing:border-box;
  width:100%;
  max-width:360px;
  height:44px;
  margin:18px 0 0;
  padding:0 40px 0 14px;
  border:1px solid var(--line,#E2E8F0);
  border-radius:12px;
  background:var(--surface,#fff) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2364748B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center / 12px 8px;
  -webkit-appearance:none;
  appearance:none;
  font-family:var(--sans);
  font-size:15px;
  color:var(--ink,#0F172A);
  cursor:pointer;
}
.fold-pick[hidden]{display:none}
.fold-pick:hover{border-color:#CBD5E1}
.fold-pick + .fold-groups{margin-top:14px}
/* one visible card: plain block, or the grid gap would stack up between the hidden groups */
.fold-groups.is-picking{display:block;max-width:560px}
.fold-group{min-width:0}
.fold-group > .reg{height:100%;box-sizing:border-box}

@media(max-width:640px){
  .fold,
  details.faq,
  details.qa{padding:14px 16px}
  .fold .fold-sum h2{font-size:17px}
  .fold-pick{max-width:none}
}

@media(prefers-reduced-motion:reduce){
  .fold,
  details.faq,
  details.qa,
  .fold::details-content,
  details.faq::details-content,
  details.qa::details-content,
  .fold-chev,
  details.faq > summary::after,
  details.qa > summary::after{
    transition:none!important;
  }
}
/* ==== end FOLD ==== */

/* ==========================================================================
   SIDE NAV  (country groups, For teams)
   The markup is generated by tools/build_side_nav.py (one source of truth, 285 pages):
     <li class="grp"><details class="side-grp"><summary>..</summary><ul class="side-sub">..</ul></details></li>
   Groups are native <details>, so the links are in the HTML with or without JS. ui.js only opens
   the group that matches the visitor's country when no group is open. Desktop look: the same quiet
   rows as before, a small chevron on group rows, links indented. Mobile (<= 960px): the sidebar
   is a top bar with the logo, "For employers" and a Menu button (CSS-only checkbox toggle);
   the groups sit in the panel that opens under the bar.
   ========================================================================== */
.side-toggle,
.side-nav li.side-menu{display:none}

.side-nav li.row > a,
.side-nav details.side-grp > summary{
  padding:7px 10px;
}
.side-nav details.side-grp > summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border-radius:8px;
  color:var(--ink-soft,#334155);
  font-size:13.5px;
  font-weight:600;
  cursor:pointer;
  list-style:none;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.side-nav details.side-grp > summary::-webkit-details-marker{display:none}
.side-nav details.side-grp > summary::marker{content:""}
.side-nav details.side-grp > summary::after{
  content:"";
  flex:none;
  width:6px;
  height:6px;
  margin-right:3px;
  border:solid var(--muted,#64748B);
  border-width:0 1.6px 1.6px 0;
  rotate:-45deg;
  transition:rotate 180ms ease;
}
.side-nav details.side-grp > summary:hover{background:var(--line-soft,#EEF2F6);color:var(--ink,#0F172A)}
.side-nav details.side-grp[open] > summary{color:var(--ink,#0F172A)}
.side-nav details.side-grp[open] > summary::after{rotate:45deg}
.side-nav details.side-grp > summary:focus-visible,
.side-nav a:focus-visible{outline:2px solid var(--accent-dark,#B45309);outline-offset:-2px}

.side-nav .side-sub{
  list-style:none;
  margin:1px 0 6px;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:1px;
}
.side-nav .side-sub a{
  padding:6px 10px 6px 22px;
  font-size:13px;
  font-weight:500;
}
.side-nav .side-sub li.sl{
  padding:12px 10px 4px 22px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.02em;
  color:var(--muted,#64748B);
}

@media(prefers-reduced-motion:reduce){
  .side-nav details.side-grp > summary::after{transition:none}
}

@media(max-width:960px){
  .side-toggle{
    display:block;
    position:absolute;
    width:1px;
    height:1px;
    margin:-1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    border:0;
    padding:0;
  }
  .side-nav{display:contents}
  .side-nav > li{order:3;flex:0 0 100%;display:none}
  .side-nav > li.emp{order:1;flex:0 0 auto;display:block;margin-right:8px}
  .side-nav > li.side-menu{order:2;flex:0 0 auto;display:block;margin-left:auto}
  .side-toggle:checked ~ .side-nav > li:not(.emp):not(.side-menu){display:block}
  .side-toggle:checked ~ .side-nav > li.home{margin-top:8px;padding-top:8px;border-top:1px solid var(--line-soft,#EEF2F6)}
  .side-logo{margin-right:6px}

  .side-nav a{white-space:normal;padding:9px 12px;border-radius:8px;background:none}
  .side-nav li.emp a{padding:7px 12px;border-radius:999px;background:var(--line-soft,#EEF2F6);white-space:nowrap}
  .side-nav li.emp .probadge,
  .side-nav li.emp .ico{display:none}
  .side-nav li.row > a,
  .side-nav details.side-grp > summary{padding:9px 12px}
  .side-nav .side-sub a{padding:8px 12px 8px 26px}
  .side-nav .side-sub li.sl{padding:12px 12px 4px 26px}
  .side-nav li.gl{padding:18px 12px 6px}

  .side-nav li.side-menu label{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:7px 14px;
    border-radius:999px;
    background:var(--ink,#0F172A);
    color:#fff;
    font-size:13.5px;
    font-weight:600;
    cursor:pointer;
    user-select:none;
    -webkit-tap-highlight-color:transparent;
  }
  .side-nav li.side-menu label::after{
    content:"";
    width:6px;
    height:6px;
    margin-top:-3px;
    border:solid #fff;
    border-width:0 1.6px 1.6px 0;
    rotate:45deg;
    transition:rotate 180ms ease,margin 180ms ease;
  }
  .side-toggle:checked ~ .side-nav li.side-menu label::after{rotate:225deg;margin-top:3px}
  .side-toggle:focus-visible ~ .side-nav li.side-menu label{outline:2px solid var(--accent-dark,#B45309);outline-offset:2px}
}
/* ==== end SIDE NAV ==== */

/* ==========================================================================
   SIDE ACCOUNT  (Log in / Start free)
   Markup: tools/build_side_nav.py, <div class="side-acct"> inside the aside (after the Menu checkbox).
   Desktop: a slim header strip fixed at the top of the content area (right of the sidebar), the two
   controls at its right end like a classic SaaS header: "Log in" quiet (hairline outline), "Start free" the
   filled brand pill. The strip is translucent with a blur, so content scrolling under it stays calm;
   body gets 52px of top padding so it never covers a heading. Fill is --accent-dark (#B45309, white text
   5.0:1, see the Buttons note above), hover --accent-deep. The site is light only, no dark mode to handle.
   Mobile (<= 960px): the controls are part of the top bar, between "For employers" and Menu.
     > 520px: "Log in" link + small "Start free" pill in the bar.
     <= 520px: only "Log in" stays in the bar; "Start free" is the first row of the opened Menu panel.
     <= 680px: "For employers" leaves the bar (it would not fit) and is the second row of the panel.
   ========================================================================== */
body:has(.side-acct){padding-top:52px}
.side-acct{
  position:fixed;
  top:0;
  left:var(--side-w,236px);
  right:0;
  height:52px;
  z-index:25;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  padding:0 28px;
  background:rgba(241,245,249,.9);
  background:color-mix(in srgb,var(--bg,#F1F5F9) 88%,transparent);
  -webkit-backdrop-filter:saturate(1.4) blur(12px);
  backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--line-soft,#EEF2F6);
}
.side-acct a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  height:34px;
  padding:0 16px;
  border-radius:999px;
  font-size:13.5px;
  font-weight:600;
  line-height:1;
  white-space:nowrap;
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
  transition:background 160ms ease-out,border-color 160ms ease-out,box-shadow 160ms ease-out,color 160ms ease-out;
}
.side-acct .acct-login{
  background:var(--surface,#fff);
  color:var(--ink,#0F172A);
  border:1px solid #CBD5E1;
}
.side-acct .acct-login:hover{background:var(--line-soft,#EEF2F6);border-color:#94A3B8}
.side-acct .acct-start{
  background:var(--accent-dark,#B45309);
  color:#fff;
  border:1px solid var(--accent-dark,#B45309);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 1px 2px rgba(15,23,42,.08),0 6px 14px -8px rgba(217,119,6,.7);
}
.side-acct .acct-start:hover{background:var(--accent-deep,#92400E);border-color:var(--accent-deep,#92400E)}
.side-acct a:focus-visible{outline:2px solid var(--accent-dark,#B45309);outline-offset:2px}
@media(prefers-reduced-motion:reduce){.side-acct a{transition:none}}
@media print{.side-acct{display:none}body:has(.side-acct){padding-top:0}}

@media(max-width:960px){
  body:has(.side-acct){padding-top:0}
  .side-acct{display:contents}
  .side-acct a{flex:0 0 auto;height:auto}
  .side-acct .acct-login{
    order:2;
    margin-left:auto;
    padding:7px 10px;
    border-color:transparent;
    background:none;
    border-radius:999px;
    color:var(--ink-soft,#334155);
    font-size:13.5px;
  }
  .side-acct .acct-login:hover{background:var(--line-soft,#EEF2F6);color:var(--ink,#0F172A);border-color:transparent}
  .side-acct .acct-start{order:2;margin-left:2px;padding:7px 13px;font-size:13.5px}
  .side-nav > li.side-menu{margin-left:4px}
}
@media(max-width:680px){
  .side-nav > li.emp{display:none}
  .side-toggle:checked ~ .side-nav > li.emp{order:3;flex:0 0 100%;display:block;margin:0}
  .side-toggle:checked ~ .side-nav > li.emp a{padding:9px 12px;border-radius:8px;background:none;white-space:normal}
}
@media(max-width:520px){
  .side-logo{margin-right:2px;padding-right:10px}
  .side-acct .acct-start{display:none}
  .side-toggle:checked ~ .side-acct .acct-start{
    display:flex;
    order:3;
    flex:1 1 100%;
    justify-content:center;
    margin:12px 0 4px;
    padding:12px 16px;
    font-size:14.5px;
    border-radius:12px;
  }
}

@media(max-width:340px){
  .side{padding-left:10px;padding-right:10px}
  .side-logo{padding-right:6px;margin-right:0}
  .side-word{font-size:15px}
  .side-acct .acct-login{padding:7px 6px;font-size:13px}
  .side-nav li.side-menu label{padding:7px 11px}
}

/* ==========================================================================
   LANGUAGE  (SITE-SPEC-I18N.md)
   Switcher at the bottom of the sidebar (in the Menu panel on a phone), the small EN tag on a link that leaves
   the language, the one-line suggestion bar (assets/lang.js) and the notes translated pages get.
   Markup: tools/build_side_nav.py (switcher, EN tag), assets/lang.js (bar), tools/i18n/transforms.py (notes).
   ========================================================================== */
.entag{display:inline-block;margin-left:7px;padding:0 5px;border:1px solid var(--line,#E2E8F0);border-radius:5px;
  background:var(--surface,#fff);font-size:9.5px;font-weight:700;letter-spacing:.05em;line-height:15px;
  color:var(--muted,#64748B);vertical-align:1px}
.side-nav a.on .entag{border-color:var(--accent-line,#FBDFA6)}

.side-lang{margin-top:auto;padding:10px 0 2px;border-top:1px solid var(--line-soft,#EEF2F6);position:relative}
.side-lang + .side-foot{margin-top:0;border-top:0;padding-top:8px}
details.lang-sw{position:relative}
details.lang-sw > summary{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;cursor:pointer;
  list-style:none;user-select:none;-webkit-tap-highlight-color:transparent;
  font-size:13.5px;font-weight:600;color:var(--ink-soft,#334155)}
details.lang-sw > summary::-webkit-details-marker{display:none}
details.lang-sw > summary::marker{content:""}
details.lang-sw > summary .ico{width:17px;height:17px;color:var(--muted,#64748B)}
details.lang-sw > summary::after{content:"";margin-left:auto;flex:none;width:6px;height:6px;margin-right:3px;
  border:solid var(--muted,#64748B);border-width:0 1.6px 1.6px 0;rotate:-135deg;transition:rotate 180ms ease}
details.lang-sw[open] > summary::after{rotate:45deg}
details.lang-sw > summary:hover{background:var(--line-soft,#EEF2F6);color:var(--ink,#0F172A)}
details.lang-sw > summary:focus-visible,
.lang-list a:focus-visible{outline:2px solid var(--accent-dark,#B45309);outline-offset:-2px}
.lang-list{list-style:none;margin:0;padding:6px;position:absolute;left:0;right:0;bottom:calc(100% + 6px);z-index:5;
  background:var(--surface,#fff);border:1px solid var(--line,#E2E8F0);border-radius:10px;
  box-shadow:0 1px 2px rgba(15,23,42,.05),0 10px 26px -12px rgba(15,23,42,.28)}
.lang-list a,.lang-list .lang-on{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;
  border-radius:7px;font-size:13.5px;font-weight:600;text-decoration:none;color:var(--ink-soft,#334155)}
.lang-list a:hover{background:var(--line-soft,#EEF2F6);color:var(--ink,#0F172A)}
.lang-list .lang-on{background:var(--accent-soft,#FFF7E6);color:var(--accent-dark,#B45309)}
.lang-list .lang-on::after{content:"";width:5px;height:9px;margin-right:3px;border:solid currentColor;border-width:0 1.8px 1.8px 0;rotate:45deg}

.lang-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 30px;
  background:var(--accent-soft,#FFF7E6);border-bottom:1px solid var(--accent-line,#FBDFA6);
  font-size:13.5px;line-height:1.4;color:var(--ink-soft,#334155)}
.lang-bar p{margin:0}
.lang-bar a{margin-left:4px;color:var(--accent-dark,#B45309);font-weight:700;text-decoration:none}
.lang-bar a:hover{text-decoration:underline}
.lang-x{flex:none;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:0;border-radius:7px;
  background:none;color:var(--muted,#64748B);cursor:pointer}
.lang-x:hover{background:rgba(180,83,9,.1);color:var(--ink,#0F172A)}
.lang-x:focus-visible,.lang-bar a:focus-visible{outline:2px solid var(--accent-dark,#B45309);outline-offset:1px}
.lang-x .ico{width:16px;height:16px}

.vd-lang{margin:8px 0 0;font-size:12.5px;line-height:1.45;color:var(--muted,#64748B)}
.i18n-note{margin:0 0 18px;padding:10px 14px;border:1px solid var(--line,#E2E8F0);border-left:3px solid var(--accent,#D97706);
  border-radius:8px;background:var(--surface,#fff);font-size:13.5px;line-height:1.5;color:var(--ink-soft,#334155)}
.i18n-note a{color:var(--accent-dark,#B45309);font-weight:600}
.us-short .us-links{margin-top:14px}
/* long words (German compounds) must not push a phone screen wider: break them only when nothing else fits */
html:not(:lang(en)) :is(h1,h2,h3,h4){overflow-wrap:anywhere}

@media(prefers-reduced-motion:reduce){details.lang-sw > summary::after{transition:none}}
@media(max-width:960px){
  .side-lang{order:3;flex:0 0 100%;display:none;margin:0;padding:6px 0 8px;border-top:0;border-bottom:1px solid var(--line-soft,#EEF2F6)}
  .side-toggle:checked ~ .side-lang{display:block}
  .side:has(.side-lang) .side-nav > li:not(.emp):not(.side-menu){order:4}
  .side:has(.side-lang) .side-nav > li.home{margin-top:0;padding-top:0;border-top:0}
  .side-lang + .side-foot{display:none}
  details.lang-sw > summary{padding:9px 12px}
  .lang-list{position:static;padding:2px 0 0;border:0;box-shadow:none;background:none}
  .lang-list a,.lang-list .lang-on{padding:9px 12px 9px 38px}
  details.lang-sw > summary::after{rotate:45deg}
  details.lang-sw[open] > summary::after{rotate:225deg}
  .lang-bar{padding:9px 18px}
}
@media print{.lang-bar,.side-lang{display:none}}
/* ==== end LANGUAGE ==== */

/* ==== a11y: contrast (2026-10-06, accessibility audit) ====
   Muted small text (#64748B) was 4.34:1 on the page background #F1F5F9 and 4.23:1 on #EEF2F6; this value is 5.34:1 and 5.20:1.
   Pages that give --muted in their own :root rule still get it because this file loads last. */
:root{--muted:#586679;--bad:#B91C1C}      /* --bad: red text on its pink tint was 4.41:1, this is 5.91:1 */
.foot .byline{color:var(--muted)}
/* Focus, borders and the orange wordmark (wave 5): orange text and rings use the darker brand orange #B45309 (5.0:1 on white);
   fields have a border of at least 3:1 (#7C8BA1 = 3.5:1 on white); the "Calc" in the logo is orange text, so it uses the dark orange too. */
.side-word span,.flogo span,.mk-logo b span{color:var(--accent-dark,#B45309)}
.rb-label{color:#586679}
.seg button.active,.newbadge{background:var(--accent-dark,#B45309)}
.ctabtn:not(.sec):not(.pri):not(.ghost){background:var(--accent-dark,#B45309)}
a.dl{background:var(--accent-dark,#B45309)}
a.dl small{color:#fff;opacity:1}
.xl-t td.hist,.xl-t td.sn,.xl-t td.rn{color:#586679}
.wc .d.w{background:#64748B}
.xlink a{color:#92400E}
.xl-tabs .more{color:#586679}
.side-nav a.on,.side-nav a[aria-current="page"]{color:#92400E}
:where(input[type="text"],input[type="email"],input[type="password"],input[type="date"],input[type="number"],input[type="search"],input[type="url"],input[type="tel"],select,textarea):focus-visible{outline:2px solid var(--accent-dark,#B45309);outline-offset:1px}
/* ==== end a11y ==== */