/*
 * Inside Software UI facelift
 * Keeps the existing Poppins typography and established teal/charcoal palette.
 * Loaded across every page by include-partials.js so legacy pages receive one
 * consistent responsive presentation without a framework migration.
 */

:root {
  /* ── Type scale ───────────────────────────────────────────────────────────
     Before this existed the site carried 21 distinct PROSE font sizes (11, 12,
     13, 13.5, 14, 15, 16, 17, 18, 19, 20, 22, 23, 24, 26, 28, 32, 34, 42, 44,
     64px) plus 96 inline font-size overrides across 48 pages. <h3> alone was set
     inline at 16, 17, 18 AND 22px on different pages, and .muted at 12, 13, 14
     and 18px. Steps of a single pixel do not read as hierarchy -- they read as a
     mistake, which is precisely how the site looked.

     Six fixed steps, 2px apart at the bottom where small differences are hard to
     tell apart deliberately, widening as they climb. Headings stay responsive via
     clamp. Nothing is set inline any more.

     Mock chrome (roster/attendance/dash/phone internals) is deliberately excluded
     and keeps its 9-12px sizing: that is a miniature of a UI, not prose. */
  --fs-micro: 0.6875rem;  /* 11px - eyebrows, avatar initials, micro-labels */
  --fs-xs:    0.8125rem;  /* 13px - captions, legal fine print, helper text */
  --fs-sm:    0.9375rem;  /* 15px - meta, card body, dense supporting copy  */
  --fs-base:  1.0625rem;  /* 17px - default body prose                     */
  --fs-lg:    1.1875rem;  /* 19px - h3, standfirst, small lead             */
  --fs-xl:    1.4375rem;  /* 23px - large h3, section sub-heading           */

  --facelift-page: #ffffff;
  --facelift-soft: #f7faf9;
  --facelift-soft-teal: #eefaf7;
  --facelift-ink: var(--charcoal, #263238);
  --facelift-muted: #5f6f76;
  --facelift-teal: var(--teal, #00bfa5);
  --facelift-teal-deep: var(--teal-deep, #007f72);
  --facelift-border: var(--inside-border, #dfe7e5);
  --facelift-radius-sm: 12px;
  --facelift-radius: 20px;
  --facelift-radius-lg: 30px;
  --facelift-shadow-sm: 0 8px 24px rgba(24, 57, 54, 0.07);
  --facelift-shadow: 0 24px 70px rgba(24, 57, 54, 0.12);
  --facelift-container: 1180px;
  --facelift-gutter: clamp(20px, 4vw, 48px);
  /* Section rhythm. Was clamp(72px, 9vw, 124px) — up to 124px top AND bottom
     meant ~248px of dead space between content blocks, which read as broken
     rather than spacious. Retuned to the 56-88px band used by most current
     SaaS marketing sites; --facelift-section-tight is for sections holding
     one short block (a callout, a single paragraph) that do not earn full
     rhythm. */
  --facelift-section: clamp(56px, 6vw, 88px);
  --facelift-section-tight: clamp(32px, 3.5vw, 52px);
  /* Readable prose measure. 60-75 characters per line is the established
     readability range; 68ch sits mid-band for Poppins at our body size. */
  --facelift-measure: 68ch;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
}

body {
  background: var(--facelift-page);
  color: var(--facelift-ink);
  font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: var(--fs-base);
  line-height: 1.7;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

body.menu-open { overflow: hidden; }

::selection {
  color: var(--facelift-ink);
  background: rgba(0, 191, 165, 0.22);
}

a { text-underline-offset: 0.2em; }

img, svg, video { max-width: 100%; }

.container {
  width: min(calc(100% - (var(--facelift-gutter) * 2)), var(--facelift-container));
  margin-inline: auto;
}

main { overflow: clip; }

/* ── Layout primitives ────────────────────────────────────────────────────
   Problem these solve: pages were narrowing `.container` itself via inline
   `style="max-width:NNNpx"` in 9 different sizes. Because `.container` is
   centred (margin-inline:auto), narrowing it MOVES ITS LEFT EDGE — so every
   section started at a different x position and the page read as misaligned.

   Rule: never narrow `.container`. Keep one page width, and constrain the
   READING MEASURE on the text instead. Left edges then line up down the
   whole page, which is what makes a marketing page look composed.

   .measure         left-aligned prose column at a readable line length
   .measure-narrow  tighter column for intros//callouts
   .measure-center  genuinely centred content (centred heroes, CTAs)
   .stack           vertical rhythm without per-element inline margins
   .section-tight   for a section holding one short block
   ------------------------------------------------------------------------ */
.measure { max-width: var(--facelift-measure); }
.measure-narrow { max-width: 56ch; }
.measure-center { max-width: var(--facelift-measure); margin-inline: auto; }

.stack > * { margin-block: 0; }
.stack > * + * { margin-top: 1rem; }
.stack > * + h2,
.stack > * + h3 { margin-top: 2.25rem; }
.stack > h2 + *,
.stack > h3 + * { margin-top: 0.75rem; }
.stack > * + .btn-row,
.stack > * + .before-after,
.stack > * + .implementation-timeline,
.stack > * + .lf-bullets,
.stack > * + .lf-steps,
.stack > * + .related-links,
.stack > * + .table-scroll,
.stack > * + .grid { margin-top: 2rem; }
.stack--tight > * + * { margin-top: 0.65rem; }

/* Sections that previously narrowed `.container` inline now carry
   .is-measured (or .is-measured-center). The reading measure is applied to
   PROSE children only — grids, tables, figures and comparison blocks must keep
   the full container width or they crush. */
.container.is-measured > p,
.container.is-measured > h1,
.container.is-measured > h2,
.container.is-measured > h3,
.container.is-measured > h4,
.container.is-measured > ul,
.container.is-measured > ol,
.container.is-measured > .lead,
.container.is-measured > .eyebrow,
.container.is-measured > .body-text { max-width: var(--facelift-measure); }

.container.is-measured-center > p,
.container.is-measured-center > h1,
.container.is-measured-center > h2,
.container.is-measured-center > h3,
.container.is-measured-center > .lead,
.container.is-measured-center > .body-text {
  max-width: var(--facelift-measure);
  margin-inline: auto;
}

/* ⚠ The declaration block above was destroyed on 2026-09-11 when .direct-answer
   was removed from this selector list: the regex deleted `selector { ...block... }`
   but the block belonged to the WHOLE comma-separated list, leaving a trailing
   comma. A CSS comment does NOT terminate a selector list, so the list ran on
   through the comment below and swallowed `.on-dark { color: #fff }` — painting
   every prose child of .is-measured-center white on a white page. Invisible text
   on the pricing hero for four days. Never delete the last selector in a list
   without re-checking the block is still attached. */

/* Dark-section text scope.
   `.muted` is declared `color: var(--facelift-muted) !important`, so an inline
   light colour on a dark background LOSES to it and renders dark-grey-on-near-
   black — illegible. Put .on-dark on any dark band and let this own the colours
   instead of fighting !important inline. Body text sits at 0.78 alpha, which
   clears WCAG AA against the --dark-surface background. */
.on-dark { color: #fff; }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4, .on-dark strong { color: #fff; }
.on-dark p, .on-dark li { color: rgba(255, 255, 255, 0.78); }
.on-dark .muted { color: rgba(255, 255, 255, 0.72) !important; }
.on-dark .eyebrow { color: #5FEAD4 !important; }
.on-dark .eyebrow::before { background: #5FEAD4 !important; }

.section-tight { padding-block: var(--facelift-section-tight) !important; }
.section-flush-top { padding-top: 0 !important; }
.section-flush-bottom { padding-bottom: 0 !important; }


.section,
.lf-section {
  padding-block: var(--facelift-section) !important;
}

.section-soft,
.lf-section-soft {
  background: var(--facelift-soft) !important;
}

section[style*="border-top"] {
  border-color: rgba(38, 50, 56, 0.09) !important;
}

h1, h2, h3, h4 {
  color: var(--facelift-ink);
  letter-spacing: -0.035em;
  line-height: 1.15;
  text-wrap: balance;
}

h1 {
  /* 20ch forced sentence-style headlines ("Guest experience depends on having
     the right people, in the right roles, at the right time.") into 4-5 towering
     lines. 28ch lands them at 2-3 balanced lines and puts the headline's pixel
     line-length in line with the 68ch body measure. */
  max-width: 28ch;
  font-size: clamp(2.1rem, 2.9vw, 2.75rem) !important;
  font-weight: 700;
}

h2 {
  font-size: clamp(1.75rem, 2.6vw, 2.5rem) !important;
  font-weight: 650;
}

h3 {
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  font-weight: 600;
}

p { text-wrap: pretty; }

.lead {
  max-width: 62ch;
  margin-top: clamp(20px, 3vw, 28px);
  color: var(--facelift-muted);
  font-size: clamp(1.08rem, 1.7vw, 1.3rem) !important;
  line-height: 1.7;
}

.body-text,
.muted {
  color: var(--facelift-muted) !important;
}

/* Hero prose that is not the lead. Without this a bare <p> in a hero had NO
   size rule at all: it fell back to the browser's 16px default at --charcoal,
   while .lead resolves to ~20.8px at --facelift-muted. The supporting paragraph
   therefore rendered smaller AND darker than the lead above it — inverted
   hierarchy, which is why the two read as unrelated blocks. This makes it one
   designed step down: same colour family, same measure, same line-height
   rhythm. Affects about, agency, multi-outlet and requests-approvals, where
   callout copy was folded into hero prose. */
.lf-hero p:not(.lead):not(.eyebrow):not(.muted):not(.price-note) {
  font-size: clamp(1rem, 1.15vw, 1.0625rem);
  line-height: 1.7;
  color: var(--facelift-muted);
  max-width: 62ch;
}
/* .stack's default 1rem gap is tight between a ~21px lead and ~17px body set at
   line-height 1.75; the two paragraphs read as one block. The CTA keeps the
   2rem gap .stack already gives .btn-row, so the hero reads
   headline → lead → supporting copy → action. */
.lf-hero .stack > .lead + p { margin-top: 1.4rem; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  margin-bottom: 18px;
  color: var(--facelift-teal-deep) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  line-height: 1.15;
  letter-spacing: 0.13em !important;
  text-transform: uppercase;
}

.eyebrow::before {
  width: 22px;
  height: 2px;
  margin-right: 10px;
  border-radius: 999px;
  background: var(--facelift-teal);
  content: "";
}

.grid {
  gap: clamp(20px, 3vw, 32px) !important;
}

.card {
  position: relative;
  height: 100%;
  padding: clamp(24px, 3vw, 34px) !important;
  border: 1px solid rgba(38, 50, 56, 0.09) !important;
  border-radius: var(--facelift-radius) !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: var(--facelift-shadow-sm);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

@media (hover: hover) {
  .card:hover {
    transform: translateY(-4px);
    border-color: rgba(0, 127, 114, 0.2) !important;
    box-shadow: var(--facelift-shadow);
  }
}

.icon-box {
  display: grid;
  width: 42px;
  height: 42px;
  margin-bottom: 22px;
  place-items: center;
  border-radius: 13px !important;
  background: var(--facelift-soft-teal) !important;
  color: var(--facelift-teal-deep) !important;
  font-size: 0.82rem;
  font-weight: 700;
}

.check-list { margin-top: 24px; }
.check-item {
  align-items: flex-start !important;
  padding-block: 11px;
  border-bottom: 1px solid rgba(38, 50, 56, 0.08);
  color: var(--facelift-muted);
}
.check-item:last-child { border-bottom: 0; }
.tick { color: var(--facelift-teal-deep) !important; }

.btn,
.btn-ghost {
  min-height: 48px;
  border-radius: 12px !important;
  font-family: inherit;
  font-weight: 600 !important;
  transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

.btn { padding: 12px 21px !important; }
.btn-sm { min-height: 42px; padding: 9px 17px !important; }
.btn-primary {
  border-color: var(--facelift-teal-deep) !important;
  background: var(--facelift-teal-deep) !important;
  box-shadow: 0 10px 22px rgba(0, 127, 114, 0.2);
}
.btn-teal {
  border-color: var(--facelift-teal) !important;
  background: var(--facelift-teal) !important;
  color: #102d2a !important;
}
.btn-outline { border-color: rgba(38, 50, 56, 0.18) !important; }
.btn-ghost {
  display: inline-flex;
  align-items: center;
  padding-inline: 4px;
  color: var(--facelift-teal-deep) !important;
}

@media (hover: hover) {
  .btn:hover, .btn-ghost:hover { transform: translateY(-2px); }
  .btn-primary:hover { box-shadow: 0 14px 30px rgba(0, 127, 114, 0.26); }
}

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid rgba(0, 191, 165, 0.34) !important;
  outline-offset: 3px;
}

/* Header and navigation */
.site-header {
  position: sticky !important;
  z-index: 1000;
  top: 0;
  border-bottom: 1px solid rgba(38, 50, 56, 0.08) !important;
  background: #fff !important;
  box-shadow: 0 4px 22px rgba(24, 57, 54, 0.04);
}

.nav { min-height: 74px !important; }
.logo {
  color: var(--facelift-ink) !important;
  font-size: 1.38rem !important;
  font-weight: 700;
  letter-spacing: -0.055em;
}
.nav-links { gap: 2px !important; }
.nav-item > button,
.nav-actions > a:not(.btn) {
  min-height: 42px;
  padding: 9px 12px !important;
  border-radius: 10px;
  color: #405057 !important;
  font-family: inherit;
  font-size: 0.86rem !important;
  font-weight: 500;
}
.nav-item > button:hover,
.nav-item.open > button,
.nav-actions > a:not(.btn):hover {
  background: var(--facelift-soft);
  color: var(--facelift-ink) !important;
}

/* Dropdown/mega-menu visual card.
   IMPORTANT: .nav-dropdown and .mega-menu are POSITIONING wrappers only
   (position:absolute + an 8px offset gap). Styling them as well as their
   *-inner children produced two nested bordered, shadowed boxes — the
   "double border" / phantom outer box. Visual treatment belongs on the
   inner card ONLY. Never move border/background/shadow back onto the
   outer wrapper. */
.nav-dropdown,
.mega-menu {
  top: calc(100% + 8px) !important;
}
.nav-dropdown-inner,
.mega-menu-inner {
  border: 1px solid rgba(38, 50, 56, 0.09) !important;
  border-radius: 18px !important;
  background: #fff !important;
  box-shadow: 0 28px 80px rgba(24, 57, 54, 0.16) !important;
  overflow: hidden;
}

.mega-menu-inner { padding: 16px !important; }
.mega-rail {
  padding: 8px !important;
  border-radius: 14px;
  background: var(--facelift-soft);
}
.mega-rail-item { border-radius: 10px !important; }
.mega-rail-item.active {
  background: #fff !important;
  box-shadow: 0 5px 16px rgba(24, 57, 54, 0.08);
}
.mega-panel-link,
.dropdown-link {
  border-radius: 12px !important;
  transition: background-color 140ms ease, transform 140ms ease;
}
.mega-panel-link:hover,
.dropdown-link:hover {
  transform: translateX(2px);
  background: var(--facelift-soft-teal) !important;
}

.mobile-toggle {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(38, 50, 56, 0.12) !important;
  border-radius: 12px !important;
  background: #fff !important;
  color: var(--facelift-ink);
  font-size: 0;
}
.mobile-toggle::before {
  display: block;
  font-size: 1.35rem;
  line-height: 1;
  content: "☰";
}
.mobile-toggle[aria-expanded="true"]::before { content: "×"; }

.mobile-menu {
  width: 100% !important;
  max-height: calc(100dvh - 74px);
  margin: 0 !important;
  padding: 12px var(--facelift-gutter) 28px !important;
  border-top: 1px solid rgba(38, 50, 56, 0.08);
  background: rgba(255, 255, 255, 0.98) !important;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mobile-section-toggle,
.mobile-menu > a {
  min-height: 52px;
  padding: 13px 4px !important;
  border-bottom: 1px solid rgba(38, 50, 56, 0.08) !important;
  font-family: inherit;
  font-size: 0.98rem;
  font-weight: 600;
}
.mobile-submenu {
  margin: 4px 0 12px;
  padding: 8px !important;
  border-radius: 14px;
  background: var(--facelift-soft);
}
.mobile-submenu a {
  min-height: 44px;
  padding: 11px 12px !important;
  border-radius: 9px;
  color: #49595f !important;
  font-size: 0.9rem;
}
.mobile-actions { padding-top: 18px; }

/* Hero and product visuals */
.hero,
.lf-hero {
  position: relative;
  background:
    radial-gradient(circle at 82% 12%, rgba(0, 191, 165, 0.14), transparent 30%),
    radial-gradient(circle at 12% 86%, rgba(0, 127, 114, 0.07), transparent 32%),
    linear-gradient(180deg, #fbfefd 0%, #ffffff 100%) !important;
}
.hero::after,
.lf-hero::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(38, 50, 56, 0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(38, 50, 56, 0.025) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.42), transparent 85%);
  content: "";
}
.hero > .container,
.lf-hero > .container {
  position: relative;
  z-index: 1;
  padding-block: clamp(48px, 5.5vw, 78px) !important;
}
.hero-grid {
  grid-template-columns: minmax(0, 0.92fr) minmax(480px, 1.08fr) !important;
  gap: clamp(48px, 7vw, 92px) !important;
  align-items: center;
}
.btn-row { gap: 16px !important; margin-top: 32px !important; }

.roster-mock,
.attendance-mock,
.phone-frame,
.screenshot-frame {
  border: 1px solid rgba(38, 50, 56, 0.11) !important;
  border-radius: var(--facelift-radius) !important;
  background: #fff;
  box-shadow: var(--facelift-shadow) !important;
  overflow: hidden;
}
/* No decorative tilt on product mockups — a rotated UI reads as a broken
   render, not as design polish. Keep product surfaces square. */
.clock-in-overlay { filter: drop-shadow(0 20px 30px rgba(24, 57, 54, 0.14)); }
.screenshot-frame img { display: block; width: 100%; height: auto; }
.screenshot-caption {
  padding: 12px 16px;
  border-top: 1px solid var(--facelift-border);
  color: var(--facelift-muted);
  font-size: 0.78rem;
}

/* Lifecycle and dark feature sections */
#workflow-grid { position: relative; }
#workflow-grid .card { min-height: 180px; }
section[style*="background:var(--dark-surface)"] {
  position: relative;
  background: linear-gradient(135deg, #16272a 0%, var(--dark-surface, #203438) 55%, #123d38 100%) !important;
}
section[style*="background:var(--dark-surface)"] > .container {
  padding-block: clamp(52px, 6vw, 84px) !important;
}

/* FAQ, related links and conversion */
.lf-faq details {
  margin-bottom: 12px;
  border: 1px solid rgba(38, 50, 56, 0.1) !important;
  border-radius: 15px !important;
  background: #fff;
  overflow: hidden;
}
.lf-faq summary {
  padding: 20px 22px !important;
  color: var(--facelift-ink);
  font-weight: 600;
  cursor: pointer;
}
.lf-faq details p { padding: 0 22px 22px !important; color: var(--facelift-muted); }
.lf-faq .plus { color: var(--facelift-teal-deep); }

/* FAQ in two columns from tablet up. A long single-column accordion pushes the
   rest of the page far down the fold; each <details> is already a self-contained
   card, so a 2-col grid halves the block height with no restyling.
   align-items:start keeps an opened item from stretching its neighbour. */
@media (min-width: 860px) {
  .lf-faq {
    max-width: none !important;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 20px;
    align-items: start;
  }
  .lf-faq details { margin-bottom: 0 !important; }
}

.related-links { gap: 14px !important; }
.related-link {
  border-radius: 15px !important;
  background: #fff;
  box-shadow: var(--facelift-shadow-sm);
}

.final-cta {
  position: relative;
  padding: clamp(30px, 3vw, 46px) var(--facelift-gutter) !important;
  border-radius: var(--facelift-radius-lg) !important;
  background:
    radial-gradient(circle at 12% 20%, rgba(0, 191, 165, 0.22), transparent 28%),
    linear-gradient(135deg, #172b2e 0%, #123b37 100%) !important;
  box-shadow: var(--facelift-shadow);
  overflow: hidden;
}
.final-cta h2 { color: #fff !important; }

/* Footer */
.site-footer {
  margin-top: clamp(72px, 9vw, 120px);
  padding-top: clamp(58px, 7vw, 82px) !important;
  border-top: 0 !important;
  background: #16272a !important;
  color: rgba(255, 255, 255, 0.7) !important;
}
.footer-grid {
  gap: clamp(34px, 5vw, 62px) !important;
  padding-bottom: 54px !important;
}
.site-footer .logo,
.site-footer h3 { color: #fff !important; }
.site-footer a { color: rgba(255, 255, 255, 0.7) !important; }
.site-footer a:hover { color: #fff !important; }
.footer-brand p { max-width: 34ch; line-height: 1.7; }
.footer-bottom {
  padding-block: 24px !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.48) !important;
}

.mobile-sticky-cta {
  z-index: 1200 !important;
  padding: 10px max(14px, env(safe-area-inset-left)) calc(10px + env(safe-area-inset-bottom)) !important;
  border-top: 1px solid rgba(38, 50, 56, 0.1);
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow: 0 -10px 34px rgba(24, 57, 54, 0.12);
  backdrop-filter: blur(14px);
}

/* Forms and tables */
input, select, textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid rgba(38, 50, 56, 0.15);
  border-radius: 11px;
  background: #fff;
  color: var(--facelift-ink);
  font: inherit;
}
textarea { min-height: 132px; resize: vertical; }
input:focus, select:focus, textarea:focus {
  border-color: var(--facelift-teal-deep);
  box-shadow: 0 0 0 4px rgba(0, 191, 165, 0.1);
}
table { width: 100%; border-collapse: collapse; }
th { color: var(--facelift-muted); font-size: 0.74rem; letter-spacing: 0.04em; text-transform: uppercase; }
th, td { padding: 14px 12px; border-bottom: 1px solid rgba(38, 50, 56, 0.08); }

/* Tablet */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr !important; }
  .hero-grid > div:first-child { max-width: 760px; }
  .hero-grid > div:last-child { width: min(100%, 760px); margin-inline: auto; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  #workflow-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  #workflow-grid .card:last-child { grid-column: 1 / -1; }
  .wos-block { grid-template-columns: minmax(140px, 0.35fr) 1fr !important; }
}

/* Mobile */
@media (max-width: 767px) {
  :root {
    --facelift-gutter: 20px;
    --facelift-section: 68px;
  }
  html { scroll-padding-top: 70px; }
  .nav { min-height: 66px !important; }
  h1 { max-width: 16ch; font-size: clamp(2.35rem, 12vw, 3.45rem) !important; }
  h2 { font-size: clamp(1.85rem, 8vw, 2.55rem) !important; }
  .lead { font-size: 1.04rem !important; line-height: 1.7; }
  .hero > .container,
  .lf-hero > .container { padding-block: 44px 52px !important; }
  .hero-grid { gap: 48px !important; }
  .btn-row { align-items: stretch !important; flex-direction: column !important; }
  .btn-row .btn { width: 100%; justify-content: center; }
  .btn-row .btn-ghost { min-height: 44px; justify-content: center; }
  .grid-2,
  .grid-3,
  .grid-4,
  #workflow-grid,
  .wos-block,
  section[style*="background:var(--dark-surface)"] .grid {
    grid-template-columns: 1fr !important;
  }
  #workflow-grid .card:last-child { grid-column: auto; }
  .card { padding: 24px !important; }
  .clock-in-overlay {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    width: min(68%, 230px);
    margin: -38px 16px 0 auto;
  }
  .roster-mock { transform: none; }
  .attendance-table { min-width: 540px; }
  @media (max-width: 767px) { .attendance-table { min-width: 0; } }
  .wos-block > .text-center { text-align: left !important; }
  .final-cta { border-radius: 22px !important; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { align-items: flex-start !important; flex-direction: column; gap: 8px; }
}

@media (max-width: 479px) {
  .footer-grid { grid-template-columns: 1fr !important; }
  .footer-brand { grid-column: auto; }
  .related-links { grid-template-columns: 1fr !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* h3 was the worst offender: set inline at 16, 17, 18 and 22px on different
   pages, so the same element rendered four different sizes. One size now, and the
   heading hierarchy is h1 > h2 > h3 by real steps rather than by accident. */
h3 {
  font-size: var(--fs-lg);
  line-height: 1.35;
}
h4 { font-size: var(--fs-base); line-height: 1.35; }

/* .muted is a colour, not a size. It was carrying 12, 13, 14 and 18px inline on
   different pages; it now inherits the prose size of wherever it sits. */
.muted { font-size: inherit; }
.body-text { font-size: var(--fs-base); }