/* BestHirePath home page sheet.
   Moved verbatim out of index.html's <head> on 27 Oct 2026: the home page's above-the-fold
   live-count sentence could not sit inside the first 15000 characters of the served HTML while
   a 7.6 kB inline <style> sat in front of it. Same rules, same order in the cascade (this file is
   linked exactly where the <style> block was, after /assets/site.css), so nothing renders
   differently. Edit this file, not index.html, when changing home-page styles. */

  :root 
  :root {
    --navy: #0F2A44;
    --navy-soft: #1B3A57;
    --orange: #F26419;
    --orange-soft: #FDE7DA;
    --sand: #F3E3CB;
    --sand-soft: #FBF5EC;
    --offwhite: #FBFAF7;
    --ink: #1C2531;
    --mid: #4C5A68;
    --line: #E6DCCD;
    --radius: 16px;
    --shadow: 0 2px 14px rgba(15,42,68,0.07);
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body {
    background: var(--offwhite);
    color: var(--ink);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
  }
  .container { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
  a { color: var(--navy); }

  /* NAV */
  nav {
    position: sticky; top: 0; z-index: 100;
    background: rgba(251,250,247,0.94); backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
  }

  section { padding: 64px 0; }
  .tint { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  h1 { font-size: 2.5rem; font-weight: 800; line-height: 1.18; letter-spacing: -0.8px; color: var(--navy); }
  h2 { font-size: 1.7rem; font-weight: 800; letter-spacing: -0.4px; color: var(--navy); margin-bottom: 10px; }
  h3 { font-size: 1.1rem; font-weight: 800; color: var(--navy); }
  .lede { color: var(--mid); font-size: 1.02rem; }
  .sec-head { max-width: 720px; margin-bottom: 28px; }

  /* HERO */
  .hero { padding: 56px 0 40px; }
  .flagline { font-size: 0.9rem; font-weight: 700; color: var(--mid); letter-spacing: 0.5px; margin-bottom: 14px; }
  .hero h1 span { color: var(--orange); }
  .hero .lede { font-size: 1.12rem; margin: 16px 0 26px; max-width: 640px; }
  .doors { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 8px; }
  .door {
    background: #fff; border: 1px solid var(--line); border-left: 5px solid var(--navy);
    border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow);
  }
  .door.b { border-left-color: var(--orange); }
  .door h3 { margin-bottom: 6px; }
  .door p { color: var(--mid); font-size: 0.94rem; margin-bottom: 16px; }
  .btn {
    display: inline-block; padding: 12px 22px; border-radius: 50px; font-weight: 700;
    font-size: 0.92rem; text-decoration: none; border: 2px solid transparent;
  }
  .btn-solid { background: var(--navy); color: #fff; }
  .btn-solid:hover { background: var(--orange); }
  .btn-ghost { border-color: var(--line); color: var(--navy); background: #fff; }
  .btn-ghost:hover { border-color: var(--navy); }

  /* TRUST STRIP */
  .trust { background: var(--navy); color: #EAF0F5; padding: 26px 0; }
  .trust .container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .trust b { color: #fff; display: block; font-size: 0.95rem; margin-bottom: 4px; }
  .trust p { font-size: 0.88rem; color: #C7D5E1; line-height: 1.55; }

  /* LISTS + CARDS */
  .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
  .grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); }
  .card h3 { margin-bottom: 6px; }
  .card p { color: var(--mid); font-size: 0.92rem; }
  ul.plain { list-style: none; }
  ul.plain li { padding: 9px 0 9px 26px; position: relative; color: var(--mid); font-size: 0.94rem; border-bottom: 1px dashed var(--line); }
  ul.plain li:last-child { border-bottom: none; }
  ul.plain li::before { content: "✓"; position: absolute; left: 0; color: var(--orange); font-weight: 800; }
  .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; counter-reset: none; }
  .steps .step { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); }
  .steps .step h3 { font-size: 1.02rem; margin: 8px 0 6px; }
  .steps .step p { font-size: 0.94rem; color: var(--muted); margin: 0; }
  .steps .num { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--navy); color: #fff; font-weight: 800; }
  @media (max-width: 900px) { .steps { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }
  .pill { display: inline-block; background: var(--orange-soft); color: #A63C08; font-weight: 800; font-size: 0.85rem; letter-spacing: 0.6px; text-transform: uppercase; padding: 4px 10px; border-radius: 50px; margin-bottom: 10px; }
  .promise { background: var(--sand-soft); border: 1px solid var(--sand); border-radius: var(--radius); padding: 16px 20px; font-weight: 700; color: var(--navy); margin-top: 22px; }

  /* TABLES */
  .tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); }
  table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
  th, td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
  thead th { background: var(--navy); color: #fff; font-size: 0.875rem; letter-spacing: 0.4px; text-transform: uppercase; }
  tbody tr:nth-child(even) { background: var(--sand-soft); }
  tbody tr:last-child td { border-bottom: none; }
  td.num { font-weight: 800; color: var(--navy); white-space: nowrap; }
  .us { background: var(--orange-soft) !important; }
  .us td { font-weight: 700; color: var(--navy); }
  .footnote { font-size: 0.875rem; color: var(--mid); margin-top: 12px; }
  .sub { font-size: 0.875rem; color: var(--mid); font-weight: 500; }

  /* PRICING CARDS */
  .tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .tier { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); display: flex; flex-direction: column; }
  .tier .name { font-size: 0.875rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: var(--orange); }
  .tier .amt { font-size: 1.9rem; font-weight: 800; color: var(--navy); margin: 6px 0 2px; }
  .tier .amt small { font-size: 0.85rem; color: var(--mid); font-weight: 600; }
  .tier ul { margin-top: 14px; }
  .tier .tagline { font-size: 0.85rem; color: var(--mid); min-height: 34px; }

  /* LEGAL */
  .note { background: var(--sand-soft); border: 1px solid var(--sand); border-left: 5px solid var(--navy); border-radius: var(--radius); padding: 20px 22px; margin-bottom: 16px; }
  .note h3 { margin-bottom: 6px; }
  .note p { color: var(--mid); font-size: 0.93rem; }
  .note p + p { margin-top: 8px; }
  .fineprint { font-size: 0.85rem; color: var(--mid); margin-top: 14px; max-width: 760px; }

  @media (max-width: 820px) {
    h1 { font-size: 1.95rem; }
    h2 { font-size: 1.4rem; }
    .doors, .grid2, .grid3, .tiers, .trust .container { grid-template-columns: 1fr; }
    .nav-links { display: none; }
    section { padding: 46px 0; }
  }

  /* EYE CHECK, 13 Oct 2026. On a 390px phone the 3-column comparison table ("What other Singapore
     boards charge an employer") was 42px wider than the screen, so its third column printed cut
     mid-word: measured live, cell padding was 14px, the table's content was 390px inside a 348px box
     and the last column's right edge sat at 411px on a 390px screen (a reader saw "candida", "appli",
     "Singpas"). This sheet is the one that actually styles this page — it loads after
     /assets/site.css and its th,td rule wins — so the phone override has to live here. 7px of
     padding brings the whole table inside the screen (measured after: content 348px, 0px hidden).
 Desktop and tablet padding are untouched. */
  @media (max-width: 640px) {
    th, td { padding: 11px 7px; }
  }