/* ---------------------------------------------------------------------------
   שכר משמרות — calculator site. Tokens from the app's light palette
   (src/theme/palette.ts): green brand, mint primary, gold money.
   Light theme, RTL (logical properties only), mobile-first. Heebo self-hosted.

   Two presentations, picked by the benchmark panels (2026-10-31):
   - below 1100px: an app bar with a <details> menu, the calculator card
     overlapping the hero band, open long-form sections (tinted panels for
     sections with a table), segmented radio tracks;
   - from 1100px: an inline nav, the hero text beside the card (which overlaps
     the band's lower edge), the first explanation section as a tinted callout
     in the hero column, the long form with a heading rail and tinted table bands.
   Shared at-rules come first; each presentation is one width-scoped block.

   Constraints this file keeps (see test/smoke/smoke.ts, build/shipped-render.ts):
   - no generated text: pseudo-element `content` is only ever "" or none;
   - the rendered text (innerText at 1280px) is bound by claims: never change
     whether a text element is inline- or block-level, or hide/show anything;
   - no sticky/fixed positioning; no mask/clip/overflow:hidden around page text;
   - text sits on an ancestor with a solid background-color (contrast check).
--------------------------------------------------------------------------- */

@font-face {
  font-family: 'Heebo';
  src: url('/assets/fonts/heebo-variable.129e54db68.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Phones: one line of tabs under the brand row, scrolling sideways. The edge where more
   tabs hide fades out and carries a drawn chevron (scroll-driven where supported, else
   the end edge only). */
@property --fade-start {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

@property --fade-end {
  syntax: '<length>';
  inherits: false;
  initial-value: 64px;
}

@keyframes nav-fade {
  0% {
    --fade-start: 0px;
    --fade-end: 64px;
  }

  12% {
    --fade-start: 40px;
  }

  88% {
    --fade-end: 64px;
  }

  100% {
    --fade-start: 40px;
    --fade-end: 0px;
  }
}

@keyframes nav-more {
  85% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

/* ============================================================ phones, tablets */

@media (max-width: 1099.98px) {
  :root {
    --bg: #f5f8f6;
    --card: #ffffff;
    --alt: #eef3f0;
    --tint: #ecf4ef;
    --track: #edf1ef;
    --ink: #0f1c16;
    --text: #24322b;
    --muted: #56645c;
    --border: #e3e9e5;
    --control: #d6dfda;
    --brand: #0a7948;
    --brand-pressed: #075e38;
    --brand-soft: #e2f4ea;
    --deep: #0c3a2b;
    --deep-2: #0a2c21;
    --primary: #34ce85;
    --on-primary: #06130c;
    --gold: #846013;
    --gold-soft: #fbf1dc;
    --warn: #8a5200;
    --warn-soft: #fcefd8;
    --danger: #b42727;
    --danger-soft: #fbe5e5;
    --font: 'Heebo', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    --radius: 12px;
    --radius-lg: 20px;
    --gutter: 18px;
    --read: 720px;
    --elev: 0 2px 6px rgba(12, 58, 43, 0.05), 0 24px 48px -24px rgba(12, 58, 43, 0.3);
  }

  * {
    box-sizing: border-box;
  }

  [hidden] {
    display: none !important;
  }

  html {
    -webkit-text-size-adjust: 100%;
  }

  body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 17px;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  a {
    color: var(--brand);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
  }

  a:hover {
    color: var(--brand-pressed);
    text-decoration-thickness: 2px;
  }

  :focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
    border-radius: 4px;
  }

  img {
    max-width: 100%;
    height: auto;
  }

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .skip {
    position: absolute;
    inset-inline-start: 8px;
    top: -120px;
    background: var(--card);
    color: var(--brand-pressed);
    font-weight: 700;
    padding: 10px 16px;
    border-radius: 10px;
    z-index: 10;
  }

  .skip:focus {
    top: 8px;
  }

  /* ------------------------------------------------------------- header */

  .top {
    background: var(--card);
    border-bottom: 1px solid var(--border);
  }

  .top-in {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 1240px;
    margin-inline: auto;
    padding: 10px var(--gutter);
    min-height: 60px;
  }

  .brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--deep);
    text-decoration: none;
    font-weight: 750;
    font-size: 18px;
    letter-spacing: -0.01em;
    line-height: 1.2;
    padding-block: 2px;
  }

  .brand:hover {
    color: var(--deep);
  }

  .brand img {
    width: 30px;
    height: 30px;
    border-radius: 8px;
  }

  /* Phones and tablets: an app bar (brand + menu button); the inline nav and the
     header action are desktop-only. */
  .nav,
  .top-cta {
    display: none;
  }

  /* The menu: a no-JS <details> drawer that drops below the app bar (an overlay only
     while open; closed, it renders nothing). */
  .menu {
    margin-inline-start: auto;
  }

  .menu > summary {
    list-style: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--deep);
    cursor: pointer;
  }

  .menu > summary::-webkit-details-marker {
    display: none;
  }

  .menu > summary:hover,
  .menu[open] > summary {
    background: var(--alt);
  }

  /* A drawn three-bar icon that turns into a cross when open (no text). */
  .menu-icon {
    position: relative;
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: background-color 0.15s;
  }

  .menu-icon::before,
  .menu-icon::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform 0.15s, top 0.15s;
  }

  .menu-icon::before {
    top: -5px;
  }

  .menu-icon::after {
    top: 5px;
  }

  .menu[open] .menu-icon {
    background-color: transparent;
  }

  .menu[open] .menu-icon::before {
    top: 0;
    transform: rotate(45deg);
  }

  .menu[open] .menu-icon::after {
    top: 0;
    transform: rotate(-45deg);
  }

  .menu-nav {
    position: absolute;
    z-index: 20;
    top: 100%;
    inset-inline: 0;
    display: grid;
    gap: 2px;
    padding: 8px var(--gutter) 14px;
    background: var(--card);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 18px 32px -18px rgba(12, 58, 43, 0.35);
  }

  .menu-nav a {
    display: block;
    padding: 12px 14px;
    border-radius: var(--radius);
    color: var(--ink);
    font-size: 17px;
    font-weight: 500;
    line-height: 1.3;
    text-decoration: none;
  }

  .menu-nav a:hover {
    background: var(--alt);
  }

  .menu-nav a[aria-current='page'] {
    background: var(--brand-soft);
    color: var(--brand-pressed);
    font-weight: 700;
    box-shadow: inset -3px 0 0 var(--brand);
  }

  /* --------------------------------------------------------------- layout */

  main {
    display: block;
    padding-bottom: 64px;
  }

  .article {
    display: grid;
    grid-template-columns: [full-start] minmax(var(--gutter), 1fr) [main-start] minmax(0, 760px) [main-end] minmax(var(--gutter), 1fr) [full-end];
    align-content: start;
    overflow-wrap: break-word;
  }

  .article > * {
    grid-column: main;
    min-width: 0;
  }

  /* Reading column: everything after the hero and the calculator (zero-specificity
     selector, so per-element rules such as the section bands override it). */
  .article > :where(:not(.hero):not([data-calc])) {
    width: 100%;
    max-width: var(--read);
    margin-inline: auto;
  }

  /* ----------------------------------------------------------------- hero */

  .hero {
    grid-column: full;
    grid-row: 1;
    display: grid;
    grid-template-columns: subgrid;
    align-content: start;
    padding-block: 24px 36px;
    background-color: #0f4733;
    background-image:
      radial-gradient(ellipse 70% 100% at 100% 0%, rgba(52, 206, 133, 0.26), rgba(52, 206, 133, 0) 70%),
      radial-gradient(ellipse 60% 80% at 0% 100%, rgba(52, 206, 133, 0.12), rgba(52, 206, 133, 0) 70%),
      linear-gradient(180deg, #145a40 0%, #0d3f2e 100%);
    color: #e3f2ea;
  }

  .hero > * {
    grid-column: main;
    min-width: 0;
    /* On the reading column's edges (wider than it: the calculator card, not the text). */
    margin-inline: max(0px, (100% - var(--read)) / 2);
  }

  /* Calculator pages: the card overlaps the band's lower edge. */
  .article:has(> [data-calc]) .hero {
    padding-bottom: 72px;
  }

  .crumbs {
    font-size: 14px;
    line-height: 1.5;
    color: #d3efe1;
    margin-block: 0 10px;
  }

  .crumbs a {
    color: #d3efe1;
    text-decoration-color: rgba(211, 239, 225, 0.45);
  }

  .crumbs a:hover {
    color: #ffffff;
  }

  h1,
  h2,
  h3,
  h4 {
    color: var(--ink);
    line-height: 1.25;
    letter-spacing: -0.01em;
  }

  .hero h1 {
    color: #ffffff;
    font-size: clamp(24px, 6.2vw, 48px);
    font-weight: 700;
    line-height: 1.22;
    letter-spacing: -0.012em;
    margin-block: 0 12px;
    text-wrap: balance;
  }

  .lead {
    font-size: 15.5px;
    font-weight: 400;
    line-height: 1.7;
    color: #eaf6ef;
    margin-block: 0 18px;
    text-wrap: pretty;
  }

  .updated {
    justify-self: start;
    margin-block: 0;
    padding: 3px 14px 3px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: #b9dccb;
    font-size: 13.5px;
    line-height: 1.6;
    font-variant-numeric: tabular-nums;
  }

  .updated::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--primary);
    margin-inline-end: 8px;
    vertical-align: 1px;
  }

  /* ----------------------------------------------------------- long form */

  h2 {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 14px;
    text-wrap: balance;
  }

  h3 {
    font-size: 19px;
    font-weight: 700;
    margin: 28px 0 8px;
  }

  /* The explanation: open sections split by hairlines; a section with a table is a tinted panel. */
  .article > .body {
    margin-top: 20px;
  }

  .body > section {
    padding-block: 40px 24px;
    border-top: 1px solid var(--border);
    line-height: 1.8;
  }

  .body > section:first-child,
  .body > section:has(> table),
  .body > section:has(> table) + section {
    border-top: 0;
  }

  .body > section:has(> table) {
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    background: var(--tint);
  }

  p,
  ul,
  ol {
    margin: 0 0 16px;
  }

  ul,
  ol {
    padding-inline-start: 24px;
  }

  li {
    margin-bottom: 8px;
    padding-inline-start: 2px;
  }

  li::marker {
    color: var(--brand);
    font-weight: 700;
  }

  strong {
    color: var(--ink);
    font-weight: 700;
  }

  .muted {
    color: var(--muted);
    font-size: 14px;
  }

  .money,
  td,
  .lines dd {
    font-variant-numeric: tabular-nums;
  }

  /* ------------------------------------------------------------- tables */

  .table-wrap,
  .article table {
    display: block;
    overflow-x: auto;
  }

  table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    margin: 18px 0 26px;
    font-size: 15px;
    line-height: 1.55;
    background: var(--card);
    border: 1px solid #e6ece8;
    border-radius: var(--radius);
  }

  /* Long-form tables are their own horizontal scroller: the frame hugs the table, capped at the column. */
  .article table {
    width: max-content;
    max-width: 100%;
  }

  .article .table-wrap table {
    display: table;
    width: 100%;
  }

  .table-wrap {
    margin: 14px 0 22px;
  }

  .table-wrap > table {
    margin: 0;
  }

  caption {
    text-align: start;
    font-weight: 700;
    font-size: 15px;
    color: var(--ink);
    padding: 12px 14px 4px;
  }

  th,
  td {
    text-align: start;
    padding: 9px 12px;
    border-bottom: 1px solid #edf1ee;
    vertical-align: top;
  }

  tr:last-child > td,
  tr:last-child > th[scope='row'] {
    border-bottom: 0;
  }

  thead th,
  tr:first-child > th:not([scope='row']) {
    background: #eef7f2;
    color: #0b4d31;
    font-size: 13.5px;
    font-weight: 700;
    white-space: nowrap;
    border-bottom-color: #dcefe4;
  }

  th {
    font-weight: 700;
    color: var(--ink);
  }

  tbody tr:nth-child(even) > td,
  tbody tr:nth-child(even) > th {
    background: #f8fbf9;
  }

  /* ---------------------------------------------------------- calculator */

  /* The card: one elevation, no outline. */
  [data-calc] {
    position: relative;
    z-index: 1;
    grid-row: 2;
    margin-top: -44px;
    background: var(--card);
    border-radius: var(--radius-lg);
    padding: 22px 16px 20px;
    box-shadow: var(--elev);
  }

  .calc-fallback p {
    margin: 0;
  }

  .calc-ready .calc-fallback {
    display: none;
  }

  .calc-form {
    display: grid;
    gap: 24px;
  }

  .calc-fields {
    display: grid;
    gap: 24px;
  }

  .field {
    display: grid;
    align-content: start;
    gap: 7px;
    margin: 0;
    min-width: 0;
  }

  /* Pay type + amount: the same rhythm as the other form groups. */
  .rate {
    display: grid;
    gap: 20px;
  }

  /* Groups are flat: a label over their fields, never a box inside the card. */
  fieldset {
    border: 0;
    padding: 0;
    margin: 0;
    /* fieldsets default to min-width: min-content and would push the page wide */
    min-width: 0;
  }

  /* Two selects (month, year) always share one row. */
  .month .row-fields {
    grid-template-columns: 1fr 1fr;
  }

  /* Grid/flex children may shrink below their content; wide content scrolls inside .table-wrap. */
  .calc-form,
  .calc-fields,
  .calc-result,
  .calc-result > *,
  .result-main,
  .compare > *,
  .row-fields > *,
  .day-grid > *,
  .break-row > *,
  .shift-row,
  [data-calc],
  main,
  .article {
    min-width: 0;
  }

  .table-wrap {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  legend {
    font-weight: 600;
    font-size: 15px;
    color: var(--ink);
    padding: 0;
    margin-bottom: 9px;
    line-height: 1.45;
  }

  label {
    font-weight: 600;
    font-size: 15px;
    color: var(--ink);
    line-height: 1.45;
  }

  .field-help {
    margin: 0;
    color: #66746c;
    font-size: 13px;
    line-height: 1.7;
  }

  /* Net: the secondary options (under-18, extra credit points, pension) sit below a hairline,
     with quieter labels, apart from the primary inputs (month, gross, residency, gender). */
  [data-page='net'] .calc-fields > .check:nth-child(5) {
    border-top: 1px solid var(--border);
    padding-top: 24px;
  }

  [data-page='net'] .calc-fields > :nth-child(n + 5) label:not(.radio label),
  [data-page='net'] .calc-fields > :nth-child(n + 5) legend {
    font-size: 14.5px;
    color: #33423a;
  }

  .field-error {
    margin: 0;
    color: var(--danger);
    font-size: 14px;
    font-weight: 600;
  }

  input[type='text'],
  input[type='date'],
  input[type='time'],
  input[type='month'],
  select {
    font: inherit;
    font-size: 16px;
    line-height: 1.3;
    min-height: 48px;
    padding: 10px 14px;
    border: 1px solid var(--control);
    border-radius: var(--radius);
    background: var(--card);
    color: var(--ink);
    width: 100%;
    max-width: 100%;
    transition: border-color 0.15s, box-shadow 0.15s;
  }

  input[type='text']:hover,
  input[type='date']:hover,
  input[type='time']:hover,
  input[type='month']:hover,
  select:hover {
    border-color: #b9c7bf;
  }

  input[type='text']:focus,
  input[type='date']:focus,
  input[type='time']:focus,
  input[type='month']:focus,
  select:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(52, 206, 133, 0.25);
  }

  input::placeholder {
    color: #7b8a82;
  }

  input[aria-invalid='true'],
  select[aria-invalid='true'] {
    border-color: var(--danger);
    background: var(--danger-soft);
  }

  /* Radio groups as a segmented control: one connected track (each option's 4px spread
     joins its neighbour across the 4px gap), the options adjoining segments, the chosen
     one a raised green segment. Real inputs (appearance:none, a drawn dot); unselected
     options keep ink text, so nothing reads as disabled. Long options wrap into a stack. */
  .radios {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 4px;
    align-items: stretch;
    padding: 4px;
  }

  .radios legend {
    width: 100%;
    margin-bottom: 12px;
  }

  .radio {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    min-height: 42px;
    padding-inline-start: 12px;
    border-radius: 10px;
    background: var(--track);
    box-shadow: 0 0 0 4px var(--track);
    color: var(--ink);
    cursor: pointer;
    transition: background-color 0.12s, color 0.12s;
  }

  .radio:hover {
    background: #e3eae6;
  }

  .radio:has(input:checked) {
    background: var(--brand);
    color: #ffffff;
    box-shadow: 0 2px 6px -1px rgba(10, 121, 72, 0.45), 0 0 0 4px var(--track);
  }

  .radio:has(input:focus-visible) {
    outline: 3px solid var(--primary);
    outline-offset: 5px;
  }

  .radio label {
    padding: 9px 9px 9px 14px;
    font-weight: 600;
    color: inherit;
    line-height: 1.4;
    cursor: pointer;
  }

  .radio input[type='radio'] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1.5px solid #8fa398;
    background: var(--card);
    transition: border-width 0.12s, border-color 0.12s;
  }

  .radio input[type='radio']:checked {
    border: 4.5px solid #ffffff;
    background: var(--brand);
    box-shadow: 0 0 0 1px #ffffff;
  }

  .radio input[type='radio']:focus-visible {
    outline: none;
  }

  .check label {
    cursor: pointer;
  }

  .check {
    display: flex;
    gap: 10px;
    align-items: center;
  }

  input[type='radio'],
  input[type='checkbox'] {
    width: 20px;
    height: 20px;
    margin: 0;
    flex: none;
    accent-color: var(--brand);
  }

  .row-fields {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }

  .day-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  }

  .day-grid legend,
  .day-grid > .field-help {
    grid-column: 1 / -1;
  }

  .shift-row {
    border-top: 1px solid var(--border);
    padding-top: 16px;
    margin-top: 16px;
  }

  .shift-row:first-child {
    border-top: 0;
    margin-top: 0;
    padding-top: 0;
  }

  .shift-title {
    margin: 0 0 8px;
    font-size: 16px;
  }

  .breaks-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    font-weight: 600;
    font-size: 15px;
    color: var(--ink);
  }

  .break-row {
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr 1fr auto;
    align-items: end;
    margin-top: 6px;
  }

  details > summary {
    cursor: pointer;
  }

  .week-settings > summary {
    font-weight: 600;
    color: var(--brand-pressed);
    padding: 6px 0;
  }

  .week-settings > summary::marker {
    color: var(--brand);
  }

  .week-settings[open] > summary {
    margin-bottom: 10px;
  }

  .week-advanced,
  .week-settings > fieldset {
    margin-bottom: 12px;
  }

  .week-advanced {
    display: grid;
    gap: 14px;
  }

  button {
    font: inherit;
    cursor: pointer;
  }

  .calc-actions {
    display: flex;
  }

  .btn-primary {
    background: var(--brand);
    color: #ffffff;
    border: 0;
    border-radius: var(--radius);
    min-height: 50px;
    padding: 12px 36px;
    font-weight: 700;
    font-size: 17px;
    letter-spacing: 0.01em;
    transition: background-color 0.12s;
  }

  .btn-primary:hover {
    background: var(--brand-pressed);
  }

  .btn-primary:active {
    transform: translateY(1px);
  }

  .btn-secondary {
    background: var(--brand-soft);
    color: var(--brand-pressed);
    border: 0;
    border-radius: var(--radius);
    min-height: 44px;
    padding: 8px 18px;
    font-weight: 700;
    margin-top: 10px;
    transition: background-color 0.12s;
  }

  .btn-secondary:hover {
    background: #d3eedf;
  }

  .load-demo {
    margin-top: 0;
  }

  .btn-link {
    background: none;
    border: 0;
    color: var(--brand);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    padding: 6px 2px;
    min-height: 36px;
  }

  .btn-link:hover {
    color: var(--brand-pressed);
  }

  .remove {
    color: var(--muted);
    font-weight: 500;
  }

  .example-note {
    background: var(--gold-soft);
    border-radius: var(--radius);
    padding: 10px 14px;
    margin: 0;
  }

  .error-summary {
    background: var(--danger-soft);
    color: var(--danger);
    border-radius: var(--radius);
    padding: 12px 14px;
  }

  .error-summary ul {
    margin: 4px 0 0;
  }

  /* --------------------------------------------------------------- results */

  .calc-result {
    display: grid;
    gap: 18px;
    margin-top: 22px;
    border-top: 1px solid var(--border);
    padding-top: 20px;
  }

  .result-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px 16px;
    background: var(--gold-soft);
    border-radius: 16px;
    padding: 16px 18px;
    margin: 0 0 16px;
    color: #4d3b10;
    font-weight: 600;
  }

  .result-hero strong {
    font-size: clamp(28px, 7vw, 38px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--gold);
    font-variant-numeric: tabular-nums;
  }

  .assumptions {
    background: var(--alt);
    border-radius: var(--radius);
    padding: 14px 16px;
    font-size: 14px;
    line-height: 1.65;
  }

  .assumptions summary {
    font-weight: 700;
    font-size: 15px;
    color: var(--ink);
  }

  .assumptions summary::marker {
    color: var(--brand);
  }

  .notice {
    background: var(--warn-soft);
    color: var(--warn);
    border-radius: var(--radius);
    padding: 12px 14px;
    margin: 0 0 16px;
    font-size: 15px;
  }

  .notice ul {
    margin: 4px 0 0;
  }

  .assumptions h3 {
    font-size: 15px;
    margin: 0 0 6px;
  }

  .assumptions h3 + ul {
    margin-bottom: 12px;
  }

  .flags li {
    color: var(--warn);
  }

  .lines {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0 14px;
    margin: 0 0 16px;
  }

  .lines dt,
  .lines dd {
    padding-block: 7px;
    border-bottom: 1px solid var(--border);
  }

  .lines dt {
    color: var(--muted);
  }

  .lines dd {
    margin: 0;
    font-weight: 700;
    color: var(--ink);
    text-align: end;
  }

  .lines dd.money {
    color: var(--gold);
  }

  .week-total {
    font-weight: 700;
  }

  .verdict {
    font-weight: 700;
    border-radius: var(--radius);
    padding: 10px 14px;
  }

  .verdict.bad {
    background: var(--danger-soft);
    color: var(--danger);
  }

  .verdict.ok {
    background: var(--brand-soft);
    color: var(--brand-pressed);
  }

  .compare {
    display: grid;
    gap: 14px;
  }

  @media (min-width: 640px) {
    .compare {
      grid-template-columns: 1fr 1fr;
    }
  }

  .compare-col {
    border-radius: var(--radius);
    padding: 12px 14px;
    background: #f8fbf9;
  }

  .compare-col h3 {
    margin-top: 0;
  }

  /* ------------------------------------------------------------ CTA, disclaimer */

  .cta {
    display: grid;
    gap: 12px;
    margin-top: 48px;
    margin-bottom: 0;
    padding: 26px 22px;
    border-radius: var(--radius-lg);
    background-color: var(--deep);
    background-image:
      radial-gradient(ellipse 80% 120% at 100% 0%, rgba(52, 206, 133, 0.24), rgba(52, 206, 133, 0) 65%),
      linear-gradient(160deg, #0e4331, var(--deep-2));
    color: #d3ebdf;
  }

  .cta h2 {
    margin: 0;
    font-size: 22px;
    color: #ffffff;
  }

  .cta p {
    margin: 0;
  }

  .badges {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-top: 6px;
  }

  .badges a {
    display: inline-flex;
    border-radius: 9px;
    transition: transform 0.12s;
  }

  .badges a:hover {
    transform: translateY(-1px);
  }

  .badges img {
    height: 44px;
    width: auto;
  }

  .disclaimer {
    margin-top: 28px;
    margin-bottom: 0;
    font-size: 14px;
    line-height: 1.7;
    color: var(--muted);
    background: var(--alt);
    border-radius: var(--radius);
    padding: 14px 18px;
  }

  .article > .body + .disclaimer {
    margin-top: 40px;
  }

  /* ---------------------------------------------------------------- footer */

  .foot {
    background-color: var(--deep-2);
    color: #a9c9b9;
    font-size: 14.5px;
    line-height: 1.6;
  }

  .foot-in {
    max-width: 1240px;
    margin-inline: auto;
    padding: 36px var(--gutter) 40px;
    display: grid;
    gap: 24px;
  }

  .foot-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 24px;
  }

  .foot-col {
    display: grid;
    align-content: start;
    gap: 8px;
  }

  .foot a {
    color: #d3e7dc;
    text-decoration: none;
  }

  .foot a:hover {
    color: #ffffff;
    text-decoration: underline;
  }

  .foot a[aria-current='page'] {
    color: #ffffff;
    font-weight: 700;
  }

  .foot-contact {
    margin: 0;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    color: #a9c9b9;
  }

  @media (min-width: 900px) {
    .foot-in {
      grid-template-columns: 1fr auto;
      align-items: start;
      padding: 48px 32px;
    }

    .foot-nav {
      grid-template-columns: auto auto;
      justify-content: start;
      gap: 8px 80px;
    }

    .foot-contact {
      padding-top: 0;
      border-top: 0;
      text-align: end;
    }
  }

  /* ------------------------------------------------------- summary + mobile cards */

  .calc-summary {
    margin: 0 0 12px;
    font-weight: 700;
  }

  .calc-summary:empty {
    margin: 0;
  }

  .calc-summary a {
    color: var(--gold);
  }

  .shift-cards {
    display: none;
    gap: 10px;
    margin: 10px 0 18px;
  }

  .shift-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 14px;
    background: #fbfcfb;
  }

  .shift-card h4 {
    margin: 0 0 6px;
    font-size: 15px;
  }

  .shift-card .lines {
    margin: 0;
    /* One value column of the same width in every card, values aligned to its end. */
    grid-template-columns: minmax(0, 1fr) minmax(11ch, max-content);
  }

  .shift-card .lines dt,
  .shift-card .lines dd {
    padding-block: 4px;
  }

  .shift-card .lines dd {
    text-align: end;
  }

  @media (max-width: 599px) {
    .shift-table {
      display: none;
    }

    .shift-cards {
      display: grid;
    }

    /* Phones: compact tables (they scroll sideways inside their frame). */
    .article table {
      font-size: 14px;
    }

    .article th,
    .article td {
      padding: 8px 10px;
    }
  }

  /* ------------------------------------------------------------ larger screens */

  @media (min-width: 640px) {
    :root {
      --gutter: 28px;
    }

    body {
      font-size: 18px;
    }

    .hero {
      padding-block: 40px 48px;
    }

    .article:has(> [data-calc]) .hero {
      padding-bottom: 88px;
    }

    .lead {
      font-size: 18px;
    }

    h2 {
      font-size: 28px;
    }

    h3 {
      font-size: 20px;
    }

    .body > section {
      padding-block: 52px 32px;
    }

    .body > section:has(> table) {
      margin-block: 8px;
      padding-inline: 36px;
      border-radius: var(--radius-lg);
    }

    table {
      font-size: 15.5px;
    }

    th,
    td {
      padding: 10px 14px;
    }

    [data-calc] {
      margin-top: -56px;
      padding: 28px 28px 26px;
    }

    .cta {
      padding: 32px 36px;
    }

    .cta h2 {
      font-size: 25px;
    }
  }
}

/* ==================================================================== desktop */

@media (min-width: 1100px) {
  :root {
    --bg: #f5f8f6;
    --card: #ffffff;
    --alt: #eef3f0;
    --tint: #ecf4ef;
    --track: #edf1ef;
    --ink: #0f1c16;
    --text: #24322b;
    --muted: #56645c;
    --border: #e3e9e5;
    --control: #d6dfda;
    --brand: #0a7948;
    --brand-pressed: #075e38;
    --brand-soft: #e2f4ea;
    --deep: #0c3a2b;
    --deep-2: #0a2c21;
    --primary: #34ce85;
    --on-primary: #06130c;
    --gold: #846013;
    --gold-soft: #fbf1dc;
    --warn: #8a5200;
    --warn-soft: #fcefd8;
    --danger: #b42727;
    --danger-soft: #fbe5e5;
    --font: 'Heebo', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    --radius: 12px;
    --radius-lg: 20px;
    --gutter: 18px;
    --read: 720px;
    --elev: 0 2px 6px rgba(12, 58, 43, 0.05), 0 24px 48px -24px rgba(12, 58, 43, 0.3);
  }

  * {
    box-sizing: border-box;
  }

  [hidden] {
    display: none !important;
  }

  html {
    -webkit-text-size-adjust: 100%;
  }

  body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 17px;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  a {
    color: var(--brand);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
  }

  a:hover {
    color: var(--brand-pressed);
    text-decoration-thickness: 2px;
  }

  :focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
    border-radius: 4px;
  }

  img {
    max-width: 100%;
    height: auto;
  }

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .skip {
    position: absolute;
    inset-inline-start: 8px;
    top: -120px;
    background: var(--card);
    color: var(--brand-pressed);
    font-weight: 700;
    padding: 10px 16px;
    border-radius: 10px;
    z-index: 10;
  }

  .skip:focus {
    top: 8px;
  }

  /* ------------------------------------------------------------- header */

  .top {
    background: var(--card);
    border-bottom: 1px solid var(--border);
  }

  .top-in {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    max-width: 1240px;
    margin-inline: auto;
    padding: 10px var(--gutter) 0;
    timeline-scope: --tabs;
  }

  .brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--deep);
    text-decoration: none;
    font-weight: 800;
    font-size: 19px;
    letter-spacing: -0.01em;
    line-height: 1.2;
    padding-block: 2px;
  }

  .brand:hover {
    color: var(--deep);
  }

  .brand img {
    width: 34px;
    height: 34px;
    border-radius: 9px;
  }

  /* The header's action: a jump to the calculator (this page's, or the home one).
     Phones: a quiet text link; desktop: one solid button, no shadow. */
  .top-cta {
    order: 1;
    margin-inline-start: auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 40px;
    padding: 6px 2px;
    color: var(--brand);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
  }

  /* A drawn chevron pointing down to the calculator (no text). */
  .top-cta::after {
    content: '';
    width: 6px;
    height: 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
  }

  .top-cta:hover {
    color: var(--brand-pressed);
  }

  .nav {
    order: 2;
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    flex: 1 0 100%;
    margin-inline: calc(var(--gutter) * -1);
    margin-top: 6px;
    padding: 0 var(--gutter);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
    scroll-timeline: --tabs inline;
    border-top: 1px solid var(--border);
    --fade-start: 0px;
    --fade-end: 64px;
    -webkit-mask-image: linear-gradient(to left, transparent 0, #000 var(--fade-start), #000 calc(100% - var(--fade-end)), transparent 100%);
    mask-image: linear-gradient(to left, transparent 0, #000 var(--fade-start), #000 calc(100% - var(--fade-end)), transparent 100%);
    font-size: 14.5px;
    line-height: 1.2;
  }

  .nav::-webkit-scrollbar {
    display: none;
  }

  /* The "more tabs" chevron at the end edge of the tab row. */
  .top-in::after {
    content: '';
    position: absolute;
    inset-inline-end: 10px;
    bottom: 17px;
    width: 8px;
    height: 8px;
    border-left: 2px solid var(--brand);
    border-bottom: 2px solid var(--brand);
    transform: rotate(45deg);
    pointer-events: none;
  }

  @supports (animation-timeline: scroll()) {
    .nav {
      animation: nav-fade linear both;
      animation-timeline: --tabs;
    }

    .top-in::after {
      animation: nav-more linear both;
      animation-timeline: --tabs;
    }
  }

  .nav a {
    flex: none;
    scroll-snap-align: start;
    color: #4a5951;
    text-decoration: none;
    font-weight: 500;
    white-space: nowrap;
    padding: 12px 10px 11px;
    box-shadow: inset 0 -3px 0 transparent;
  }

  .nav a:hover {
    color: var(--ink);
  }

  .nav a[aria-current='page'] {
    color: var(--brand-pressed);
    font-weight: 700;
    box-shadow: inset 0 -3px 0 var(--brand);
  }

  @media (min-width: 1100px) {
    .top-in {
      flex-wrap: nowrap;
      gap: 16px;
      padding: 14px 32px;
    }

    .top-in::after {
      content: none;
    }

    .brand {
      font-size: 20px;
    }

    .nav {
      order: 0;
      flex: 0 1 auto;
      margin-block: 0;
      margin-inline: auto 0;
      padding: 0;
      overflow: visible;
      border-top: 0;
      animation: none;
      -webkit-mask-image: none;
      mask-image: none;
      gap: 4px;
      font-size: 15.5px;
    }

    .nav a {
      padding: 9px 15px;
      border-radius: 999px;
      box-shadow: none;
      color: #3f4e46;
    }

    .nav a:hover {
      background: var(--alt);
    }

    .nav a[aria-current='page'] {
      background: var(--brand-soft);
      font-weight: 600;
      box-shadow: none;
    }

    .top-cta {
      margin-inline-start: 12px;
      min-height: 42px;
      padding: 9px 18px;
      border-radius: 999px;
      background: var(--brand);
      color: #ffffff;
    }

    .top-cta:hover {
      background: var(--brand-pressed);
      color: #ffffff;
    }
  }

  /* --------------------------------------------------------------- layout */

  main {
    display: block;
    padding-bottom: 64px;
  }

  .article {
    display: grid;
    grid-template-columns: [full-start] minmax(var(--gutter), 1fr) [main-start] minmax(0, 760px) [main-end] minmax(var(--gutter), 1fr) [full-end];
    align-content: start;
    overflow-wrap: break-word;
  }

  .article > * {
    grid-column: main;
    min-width: 0;
  }

  /* Reading column: everything after the hero and the calculator (zero-specificity
     selector, so per-element rules such as the section bands override it). */
  .article > :where(:not(.hero):not([data-calc])) {
    width: 100%;
    max-width: var(--read);
    margin-inline: auto;
  }

  /* ----------------------------------------------------------------- hero */

  .hero {
    grid-column: full;
    grid-row: 1;
    display: grid;
    grid-template-columns: subgrid;
    align-content: start;
    padding-block: 28px 40px;
    background-color: var(--deep);
    background-image:
      radial-gradient(ellipse 70% 100% at 100% 0%, rgba(52, 206, 133, 0.22), rgba(52, 206, 133, 0) 70%),
      radial-gradient(ellipse 50% 70% at 0% 0%, rgba(52, 206, 133, 0.08), rgba(52, 206, 133, 0) 70%),
      linear-gradient(180deg, #0e4331 0%, var(--deep-2) 100%);
    color: #e3f2ea;
  }

  .hero > * {
    grid-column: main;
    min-width: 0;
    /* On the reading column's edges (wider than it: the calculator card, not the text). */
    margin-inline: max(0px, (100% - var(--read)) / 2);
  }

  /* Calculator pages: the card overlaps the band's lower edge. */
  .article:has(> [data-calc]) .hero {
    padding-bottom: 72px;
  }

  .crumbs {
    font-size: 14px;
    line-height: 1.5;
    color: #a9d6c0;
    margin-block: 0 10px;
  }

  .crumbs a {
    color: #d3efe1;
    text-decoration-color: rgba(211, 239, 225, 0.45);
  }

  .crumbs a:hover {
    color: #ffffff;
  }

  h1,
  h2,
  h3,
  h4 {
    color: var(--ink);
    line-height: 1.25;
    letter-spacing: -0.01em;
  }

  .hero h1 {
    color: #ffffff;
    font-size: clamp(29px, 7.2vw, 48px);
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -0.012em;
    margin-block: 0 12px;
    text-wrap: balance;
  }

  .lead {
    font-size: 17px;
    font-weight: 350;
    line-height: 1.7;
    color: #d8eee2;
    margin-block: 0 18px;
    text-wrap: pretty;
  }

  .updated {
    justify-self: start;
    margin-block: 0;
    padding: 3px 14px 3px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: #b9dccb;
    font-size: 13.5px;
    line-height: 1.6;
    font-variant-numeric: tabular-nums;
  }

  .updated::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--primary);
    margin-inline-end: 8px;
    vertical-align: 1px;
  }

  /* ----------------------------------------------------------- long form */

  h2 {
    font-size: 25px;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 14px;
    text-wrap: balance;
  }

  h3 {
    font-size: 19px;
    font-weight: 700;
    margin: 28px 0 8px;
  }

  /* Open sections split by hairlines; a section that holds a table sits on a tinted band. */
  .body > section {
    padding-block: 44px 28px;
    border-top: 1px solid var(--border);
  }

  .article > [data-calc] + .body > section:first-child,
  .hero + .body > section:first-child {
    margin-top: 16px;
    border-top: 0;
  }

  .body > section:has(> table) {
    grid-column: full;
    max-width: none;
    padding-inline: var(--gutter);
    background: var(--tint);
    border-top: 0;
  }

  .body > section:has(> table) + section {
    border-top: 0;
  }

  p,
  ul,
  ol {
    margin: 0 0 16px;
  }

  ul,
  ol {
    padding-inline-start: 24px;
  }

  li {
    margin-bottom: 8px;
    padding-inline-start: 2px;
  }

  li::marker {
    color: var(--brand);
    font-weight: 700;
  }

  strong {
    color: var(--ink);
    font-weight: 700;
  }

  .muted {
    color: var(--muted);
    font-size: 14px;
  }

  .money,
  td,
  .lines dd {
    font-variant-numeric: tabular-nums;
  }

  /* ------------------------------------------------------------- tables */

  .table-wrap,
  .article table {
    display: block;
    overflow-x: auto;
  }

  table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    margin: 18px 0 26px;
    font-size: 15px;
    line-height: 1.55;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
  }

  /* Long-form tables are their own horizontal scroller: the frame hugs the table, capped at the column. */
  .article table {
    width: max-content;
    max-width: 100%;
  }

  .article .table-wrap table {
    display: table;
    width: 100%;
  }

  .table-wrap {
    margin: 14px 0 22px;
  }

  .table-wrap > table {
    margin: 0;
  }

  caption {
    text-align: start;
    font-weight: 700;
    font-size: 15px;
    color: var(--ink);
    padding: 12px 14px 4px;
  }

  th,
  td {
    text-align: start;
    padding: 9px 12px;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
  }

  tr:last-child > td,
  tr:last-child > th[scope='row'] {
    border-bottom: 0;
  }

  thead th,
  tr:first-child > th:not([scope='row']) {
    background: var(--brand-soft);
    color: #0b4d31;
    font-size: 13.5px;
    font-weight: 700;
    white-space: nowrap;
    border-bottom-color: #cfeadb;
  }

  th {
    font-weight: 700;
    color: var(--ink);
  }

  tbody tr:nth-child(even) > td,
  tbody tr:nth-child(even) > th {
    background: #f8fbf9;
  }

  /* ---------------------------------------------------------- calculator */

  /* The card: one elevation, no outline. */
  [data-calc] {
    position: relative;
    z-index: 1;
    grid-row: 2;
    margin-top: -44px;
    background: var(--card);
    border-radius: var(--radius-lg);
    padding: 22px 16px 20px;
    box-shadow: var(--elev);
  }

  .calc-fallback p {
    margin: 0;
  }

  .calc-ready .calc-fallback {
    display: none;
  }

  .calc-form {
    display: grid;
    gap: 20px;
  }

  .calc-fields {
    display: grid;
    gap: 20px;
  }

  .field {
    display: grid;
    align-content: start;
    gap: 7px;
    margin: 0;
    min-width: 0;
  }

  /* Pay type + amount: the same rhythm as the other form groups. */
  .rate {
    display: grid;
    gap: 20px;
  }

  /* Groups are flat: a label over their fields, never a box inside the card. */
  fieldset {
    border: 0;
    padding: 0;
    margin: 0;
    /* fieldsets default to min-width: min-content and would push the page wide */
    min-width: 0;
  }

  /* Two selects (month, year) always share one row. */
  .month .row-fields {
    grid-template-columns: 1fr 1fr;
  }

  /* Grid/flex children may shrink below their content; wide content scrolls inside .table-wrap. */
  .calc-form,
  .calc-fields,
  .calc-result,
  .calc-result > *,
  .result-main,
  .compare > *,
  .row-fields > *,
  .day-grid > *,
  .break-row > *,
  .shift-row,
  [data-calc],
  main,
  .article {
    min-width: 0;
  }

  .table-wrap {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  legend {
    font-weight: 600;
    font-size: 15px;
    color: var(--ink);
    padding: 0;
    margin-bottom: 9px;
    line-height: 1.45;
  }

  label {
    font-weight: 600;
    font-size: 15px;
    color: var(--ink);
    line-height: 1.45;
  }

  .field-help {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.55;
  }

  .field-error {
    margin: 0;
    color: var(--danger);
    font-size: 14px;
    font-weight: 600;
  }

  input[type='text'],
  input[type='date'],
  input[type='time'],
  input[type='month'],
  select {
    font: inherit;
    font-size: 16px;
    line-height: 1.3;
    min-height: 48px;
    padding: 10px 14px;
    border: 1px solid var(--control);
    border-radius: var(--radius);
    background: var(--card);
    color: var(--ink);
    width: 100%;
    max-width: 100%;
    transition: border-color 0.15s, box-shadow 0.15s;
  }

  input[type='text']:hover,
  input[type='date']:hover,
  input[type='time']:hover,
  input[type='month']:hover,
  select:hover {
    border-color: #b9c7bf;
  }

  input[type='text']:focus,
  input[type='date']:focus,
  input[type='time']:focus,
  input[type='month']:focus,
  select:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(52, 206, 133, 0.25);
  }

  input::placeholder {
    color: #7b8a82;
  }

  input[aria-invalid='true'],
  select[aria-invalid='true'] {
    border-color: var(--danger);
    background: var(--danger-soft);
  }

  /* Radio groups as a segmented control: a soft track (each option's 4px spread joins the
     next across the 4px gap), the chosen option a white pill. The native control stays
     visible as a small dot. */
  .radios {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 4px;
    align-items: stretch;
    padding: 4px;
  }

  .radios legend {
    width: 100%;
    margin-bottom: 9px;
  }

  .radio {
    display: inline-flex;
    gap: 9px;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    min-height: 40px;
    padding: 6px 12px;
    border-radius: 9px;
    background: var(--track);
    box-shadow: 0 0 0 4px var(--track);
    color: #3c4a43;
    cursor: pointer;
    transition: background-color 0.12s;
  }

  .radio:hover {
    background: #e4eae7;
  }

  .radio:has(input:checked) {
    background: var(--card);
    color: var(--ink);
    box-shadow: 0 1px 3px rgba(12, 58, 43, 0.14), 0 0 0 4px var(--track);
  }

  .radio:has(input:focus-visible) {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
  }

  .radio label {
    font-weight: 600;
    color: inherit;
    cursor: pointer;
  }

  .radio input[type='radio'] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1.5px solid #a7b5ad;
    background: var(--card);
    transition: border-width 0.12s, border-color 0.12s;
  }

  .radio input[type='radio']:checked {
    border: 5px solid var(--brand);
  }

  .radio input[type='radio']:focus-visible {
    outline: none;
  }

  .check label {
    cursor: pointer;
  }

  .check {
    display: flex;
    gap: 10px;
    align-items: center;
  }

  input[type='radio'],
  input[type='checkbox'] {
    width: 20px;
    height: 20px;
    margin: 0;
    flex: none;
    accent-color: var(--brand);
  }

  .row-fields {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }

  .day-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  }

  .day-grid legend,
  .day-grid > .field-help {
    grid-column: 1 / -1;
  }

  .shift-row {
    border-top: 1px solid var(--border);
    padding-top: 16px;
    margin-top: 16px;
  }

  .shift-row:first-child {
    border-top: 0;
    margin-top: 0;
    padding-top: 0;
  }

  .shift-title {
    margin: 0 0 8px;
    font-size: 16px;
  }

  .breaks-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    font-weight: 600;
    font-size: 15px;
    color: var(--ink);
  }

  .break-row {
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr 1fr auto;
    align-items: end;
    margin-top: 6px;
  }

  details > summary {
    cursor: pointer;
  }

  .week-settings > summary {
    font-weight: 600;
    color: var(--brand-pressed);
    padding: 6px 0;
  }

  .week-settings > summary::marker {
    color: var(--brand);
  }

  .week-settings[open] > summary {
    margin-bottom: 10px;
  }

  .week-advanced,
  .week-settings > fieldset {
    margin-bottom: 12px;
  }

  .week-advanced {
    display: grid;
    gap: 14px;
  }

  button {
    font: inherit;
    cursor: pointer;
  }

  .calc-actions {
    display: flex;
  }

  .btn-primary {
    background: var(--brand);
    color: #ffffff;
    border: 0;
    border-radius: var(--radius);
    min-height: 50px;
    padding: 12px 36px;
    font-weight: 700;
    font-size: 17px;
    letter-spacing: 0.01em;
    transition: background-color 0.12s;
  }

  .btn-primary:hover {
    background: var(--brand-pressed);
  }

  .btn-primary:active {
    transform: translateY(1px);
  }

  .btn-secondary {
    background: var(--brand-soft);
    color: var(--brand-pressed);
    border: 0;
    border-radius: var(--radius);
    min-height: 44px;
    padding: 8px 18px;
    font-weight: 700;
    margin-top: 10px;
    transition: background-color 0.12s;
  }

  .btn-secondary:hover {
    background: #d3eedf;
  }

  .load-demo {
    margin-top: 0;
  }

  .btn-link {
    background: none;
    border: 0;
    color: var(--brand);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    padding: 6px 2px;
    min-height: 36px;
  }

  .btn-link:hover {
    color: var(--brand-pressed);
  }

  .remove {
    color: var(--muted);
    font-weight: 500;
  }

  .example-note {
    background: var(--gold-soft);
    border-radius: var(--radius);
    padding: 10px 14px;
    margin: 0;
  }

  .error-summary {
    background: var(--danger-soft);
    color: var(--danger);
    border-radius: var(--radius);
    padding: 12px 14px;
  }

  .error-summary ul {
    margin: 4px 0 0;
  }

  /* --------------------------------------------------------------- results */

  .calc-result {
    display: grid;
    gap: 18px;
    margin-top: 22px;
    border-top: 1px solid var(--border);
    padding-top: 20px;
  }

  .result-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px 16px;
    background: var(--gold-soft);
    border-radius: 16px;
    padding: 16px 18px;
    margin: 0 0 16px;
    color: #4d3b10;
    font-weight: 600;
  }

  .result-hero strong {
    font-size: clamp(28px, 7vw, 38px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--gold);
    font-variant-numeric: tabular-nums;
  }

  .assumptions {
    background: var(--alt);
    border-radius: var(--radius);
    padding: 14px 16px;
    font-size: 14px;
    line-height: 1.65;
  }

  .assumptions summary {
    font-weight: 700;
    font-size: 15px;
    color: var(--ink);
  }

  .assumptions summary::marker {
    color: var(--brand);
  }

  .notice {
    background: var(--warn-soft);
    color: var(--warn);
    border-radius: var(--radius);
    padding: 12px 14px;
    margin: 0 0 16px;
    font-size: 15px;
  }

  .notice ul {
    margin: 4px 0 0;
  }

  .assumptions h3 {
    font-size: 15px;
    margin: 0 0 6px;
  }

  .assumptions h3 + ul {
    margin-bottom: 12px;
  }

  .flags li {
    color: var(--warn);
  }

  .lines {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0 14px;
    margin: 0 0 16px;
  }

  .lines dt,
  .lines dd {
    padding-block: 7px;
    border-bottom: 1px solid var(--border);
  }

  .lines dt {
    color: var(--muted);
  }

  .lines dd {
    margin: 0;
    font-weight: 700;
    color: var(--ink);
    text-align: end;
  }

  .lines dd.money {
    color: var(--gold);
  }

  .week-total {
    font-weight: 700;
  }

  .verdict {
    font-weight: 700;
    border-radius: var(--radius);
    padding: 10px 14px;
  }

  .verdict.bad {
    background: var(--danger-soft);
    color: var(--danger);
  }

  .verdict.ok {
    background: var(--brand-soft);
    color: var(--brand-pressed);
  }

  .compare {
    display: grid;
    gap: 14px;
  }

  @media (min-width: 640px) {
    .compare {
      grid-template-columns: 1fr 1fr;
    }
  }

  .compare-col {
    border-radius: var(--radius);
    padding: 12px 14px;
    background: #f8fbf9;
  }

  .compare-col h3 {
    margin-top: 0;
  }

  /* ------------------------------------------------------------ CTA, disclaimer */

  .cta {
    display: grid;
    gap: 12px;
    margin-top: 48px;
    margin-bottom: 0;
    padding: 26px 22px;
    border-radius: var(--radius-lg);
    background-color: var(--deep);
    background-image:
      radial-gradient(ellipse 80% 120% at 100% 0%, rgba(52, 206, 133, 0.24), rgba(52, 206, 133, 0) 65%),
      linear-gradient(160deg, #0e4331, var(--deep-2));
    color: #d3ebdf;
  }

  .cta h2 {
    margin: 0;
    font-size: 22px;
    color: #ffffff;
  }

  .cta p {
    margin: 0;
  }

  .badges {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-top: 6px;
  }

  .badges a {
    display: inline-flex;
    border-radius: 9px;
    transition: transform 0.12s;
  }

  .badges a:hover {
    transform: translateY(-1px);
  }

  .badges img {
    height: 44px;
    width: auto;
  }

  .disclaimer {
    margin-top: 28px;
    margin-bottom: 0;
    font-size: 14px;
    line-height: 1.7;
    color: var(--muted);
    background: var(--alt);
    border-radius: var(--radius);
    padding: 14px 18px;
  }

  .article > .body + .disclaimer {
    margin-top: 40px;
  }

  /* ---------------------------------------------------------------- footer */

  .foot {
    background-color: var(--deep-2);
    color: #a9c9b9;
    font-size: 14.5px;
    line-height: 1.6;
  }

  .foot-in {
    max-width: 1240px;
    margin-inline: auto;
    padding: 36px var(--gutter) 40px;
    display: grid;
    gap: 24px;
  }

  .foot-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 24px;
  }

  .foot-col {
    display: grid;
    align-content: start;
    gap: 8px;
  }

  .foot a {
    color: #d3e7dc;
    text-decoration: none;
  }

  .foot a:hover {
    color: #ffffff;
    text-decoration: underline;
  }

  .foot a[aria-current='page'] {
    color: #ffffff;
    font-weight: 700;
  }

  .foot-contact {
    margin: 0;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    color: #a9c9b9;
  }

  @media (min-width: 900px) {
    .foot-in {
      grid-template-columns: 1fr auto;
      align-items: start;
      padding: 48px 32px;
    }

    .foot-nav {
      grid-template-columns: auto auto;
      justify-content: start;
      gap: 8px 80px;
    }

    .foot-contact {
      padding-top: 0;
      border-top: 0;
      text-align: end;
    }
  }

  /* ------------------------------------------------------- summary + mobile cards */

  .calc-summary {
    margin: 0 0 12px;
    font-weight: 700;
  }

  .calc-summary:empty {
    margin: 0;
  }

  .calc-summary a {
    color: var(--gold);
  }

  .shift-cards {
    display: none;
    gap: 10px;
    margin: 10px 0 18px;
  }

  .shift-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 14px;
    background: #fbfcfb;
  }

  .shift-card h4 {
    margin: 0 0 6px;
    font-size: 15px;
  }

  .shift-card .lines {
    margin: 0;
    /* One value column of the same width in every card, values aligned to its end. */
    grid-template-columns: minmax(0, 1fr) minmax(11ch, max-content);
  }

  .shift-card .lines dt,
  .shift-card .lines dd {
    padding-block: 4px;
  }

  .shift-card .lines dd {
    text-align: end;
  }

  /* ------------------------------------------------------------ larger screens */

  @media (min-width: 640px) {
    :root {
      --gutter: 28px;
    }

    body {
      font-size: 18px;
    }

    .hero {
      padding-block: 40px 48px;
    }

    .article:has(> [data-calc]) .hero {
      padding-bottom: 88px;
    }

    .lead {
      font-size: 19px;
    }

    h2 {
      font-size: 28px;
    }

    h3 {
      font-size: 20px;
    }

    .body > section {
      padding-block: 56px 36px;
    }

    .article > [data-calc] + .body > section:first-child,
    .hero + .body > section:first-child {
      margin-top: 24px;
    }

    table {
      font-size: 15.5px;
    }

    th,
    td {
      padding: 10px 14px;
    }

    [data-calc] {
      margin-top: -56px;
      padding: 28px 28px 26px;
    }

    .cta {
      padding: 32px 36px;
    }

    .cta h2 {
      font-size: 25px;
    }
  }

  /* Desktop: hero text and the calculator side by side inside the band; the long form
     uses the width (heading rail + 720px text column, tables across both). */
  @media (min-width: 1100px) {
    .article {
      grid-template-columns:
        [full-start] max(32px, (100% - 1180px) / 2)
        [main-start hero-start] minmax(0, 5fr)
        [hero-end] 64px
        [calc-start] minmax(0, 7fr)
        [calc-end main-end] max(32px, (100% - 1180px) / 2)
        [full-end];
    }

    .hero {
      padding-block: 56px 64px;
    }

    .article:has(> [data-calc]) {
      grid-template-rows: auto 1fr;
    }

    .article:has(> [data-calc]) .hero {
      padding-top: 44px;
      padding-bottom: 64px;
    }

    .article:has(> [data-calc]) .hero > * {
      grid-column: hero;
      margin-inline: 0;
    }

    /* Trust pages: the hero text starts where the section rail starts. */
    .article:not(:has(> [data-calc])) .hero > * {
      margin-inline: max(0px, (100% - 1084px) / 2);
    }

    .article:not(:has(> [data-calc])) .hero > .lead {
      max-width: 760px;
    }

    .hero h1 {
      font-size: 48px;
    }

    .article:has(> [data-calc]) .hero h1 {
      font-size: clamp(38px, 3.3vw, 46px);
    }

    h2 {
      font-size: 30px;
    }

    [data-calc] {
      grid-column: calc;
      grid-row: 1 / span 2;
      align-self: start;
      margin-top: 40px;
      padding: 26px 30px 24px;
    }

    /* Long form: heading in a side rail, text at a 720px measure, tables across both. */
    .body > section {
      grid-column: main;
      max-width: none;
      width: auto;
      margin-inline: 0;
      display: grid;
      grid-template-columns: [rail-start] minmax(0, 300px) [rail-end] 64px [body-start] minmax(0, 720px) [body-end];
      justify-content: center;
      align-content: start;
      padding-block: 64px 40px;
    }

    .body > section > * {
      grid-column: body-start / body-end;
      max-width: none;
      margin-inline: 0;
    }

    .body > section > h2 {
      grid-column: rail-start / rail-end;
      grid-row: 1;
      align-self: start;
      font-size: 28px;
      line-height: 1.3;
      margin: 0;
    }

    .body > section > table {
      grid-column: rail-start / body-end;
      justify-self: start;
      max-width: 100%;
      font-size: 16px;
    }

    .body > section:has(> table) {
      grid-column: full;
      padding-inline: 32px;
    }

    /* The first explanation section fills the hero column beside the card (DOM order
       unchanged), as a tinted callout; not on the minimum-wage page, whose short card
       leaves no empty column. */
    body:not([data-page='minwage']) .article > [data-calc] + .body > section:first-child {
      grid-column: hero;
      grid-row: 2;
      align-self: start;
      display: block;
      margin-top: 40px;
      padding: 30px 30px 12px;
      background: var(--tint);
      border: 0;
      border-radius: var(--radius-lg);
    }

    body:not([data-page='minwage']) .article > [data-calc] + .body > section:first-child > h2 {
      font-size: 24px;
      margin-bottom: 14px;
    }

    body:not([data-page='minwage']) .article > [data-calc] + .body > section:first-child > table {
      font-size: 15px;
    }

    body:not([data-page='minwage']) .article > [data-calc] + .body > section:first-child + section {
      border-top: 0;
    }

    /* A denser card: short fields share a row. */
    .calc-form,
    .calc-fields {
      gap: 16px;
    }

    .calc-fields {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      column-gap: 18px;
    }

    .calc-fields > * {
      grid-column: 1 / -1;
    }

    [data-page='net'] .calc-fields > :is(.month, .field:has(> input[type='text']), .radios:not(:last-child)),
    [data-page='minwage'] .calc-fields > .field:not(.radios),
    [data-page='overtime'] .calc-fields > :is(.field:has(> input[type='date']), .week),
    :is([data-page='home'], [data-page='rest'], [data-page='night']) .calc-fields > :is(.week, .week-settings:not([open])) {
      grid-column: auto;
    }

    .week-settings:not([open]) {
      align-self: end;
    }

    .rate {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      column-gap: 18px;
    }

    input[type='text'],
    input[type='date'],
    input[type='time'],
    input[type='month'],
    select {
      min-height: 46px;
    }

    /* The app pitch as a wide banner: text on the start side, badges on the end side. */
    .cta {
      max-width: 1084px;
      grid-template-columns: minmax(0, 1fr) auto;
      column-gap: 48px;
      align-items: center;
      padding: 36px 44px;
    }

    .cta > .badges {
      grid-column: 2;
      grid-row: 1 / span 2;
      margin-top: 0;
    }

    /* The fine print spans the same 1084px frame; its text keeps a readable measure. */
    .disclaimer {
      max-width: 1084px;
      padding-inline-end: 260px;
    }
  }

  /* Round-5 markup on this presentation: the menu drawer is phone-only, and the
     explanation wrapper (.body) takes no box, so its sections are the article grid's
     items exactly as before the wrapper existed (DOM and text unchanged). */
  .menu {
    display: none;
  }

  .body {
    display: contents;
  }

  :where(.body > *) {
    grid-column: main;
    min-width: 0;
    width: 100%;
    max-width: var(--read);
    margin-inline: auto;
  }
}