/* ==========================================================================
   Hourflow landing page
   Structure: tokens -> base -> layout -> components -> sections -> motion
   Re-theme by editing the custom properties in :root.
   ========================================================================== */

/* Layout parameters are per-element: stop them leaking into descendants. */
@property --gap {
  syntax: "*";
  inherits: false;
}
@property --basis {
  syntax: "*";
  inherits: false;
}

@layer tokens, base, layout, components, sections, demo, motion;

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
@layer tokens {
  :root {
    /* Brand */
    --navy: #184676;
    --navy-dark: #0f2f52;
    --deep: #003153;
    --sand: #f1eadf;
    --sand-strong: #e6d9c0;

    /* Neutrals */
    --ink: #0f172a;
    --slate-800: #1e293b;
    --slate-300: #cbd5e1;
    --slate-600: #475569;
    --slate-500: #64748b;
    --slate-200: #e2e8f0;
    --slate-100: #f1f5f9;
    --bg: #f8fafc;
    --white: #fff;

    /* Status */
    --amber: #d97706;
    --amber-text: #b45309;
    --pending-bg: #fef3c7;
    --pending-text: #92400e;
    --error-bg: #ffe4e6;
    --error-text: #9f1239;

    /* Overlays derived from brand */
    --navy-tint: rgb(24 70 118 / 0.12);
    --navy-tap: rgb(24 70 118 / 0.25);

    /* Type */
    --font: "Manrope", system-ui, sans-serif;

    /* Shape */
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-pill: 999px;

    /* Elevation */
    --shadow-card: 0 1px 2px rgb(15 23 42 / 0.06), 0 4px 16px rgb(15 23 42 / 0.05);
    --shadow-pop: 0 1px 2px rgb(15 23 42 / 0.06), 0 12px 32px rgb(15 23 42 / 0.12);

    /* Layout */
    --page-max: 1200px;
    --gutter: 24px;
    --section-gap: 96px;

    /* Demo loop lengths. Keyframe percentages are timed against these. */
    --loop-hero: 16s;
    --loop-dash: 14s;
    --loop-month: 12s;

    /* Easing */
    --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  }
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
@layer base {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  [hidden] {
    display: none !important;
  }

  body {
    margin: 0;
    font-family: var(--font);
    font-variant-numeric: tabular-nums;
    background: var(--bg);
    color: var(--ink);
  }

  a {
    color: var(--navy);
  }
  a:hover {
    color: var(--navy-dark);
  }

  h1,
  h2,
  h3,
  p {
    margin: 0;
  }

  .sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
  }

  /* Icons come from the SVG sprite. Size and weight are set per use. */
  .icon {
    --size: 24px;
    --sw: 2.6;
    flex: none;
    width: var(--size);
    height: var(--size);
    fill: none;
    stroke: currentColor;
    stroke-width: var(--sw);
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .icon--10 { --size: 10px; }
  .icon--12 { --size: 12px; }
  .icon--14 { --size: 14px; }
  .icon--16 { --size: 16px; }
  .icon--18 { --size: 18px; }
  .icon--20 { --size: 20px; }
  .icon--22 { --size: 22px; }
  .icon--26 { --size: 26px; }
  .icon--36 { --size: 36px; }
  .icon--thin { --sw: 2.2; }
  .icon--light { --sw: 2.4; }
  .icon--bold { --sw: 3; }
  .icon--heavy { --sw: 3.4; }
  .icon--max { --sw: 4; }
}

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
@layer layout {
  .section {
    padding: 0 var(--gutter) var(--section-gap);
  }
  .section--tinted {
    padding-block: var(--section-gap);
    background: var(--white);
  }
  .section--dark {
    padding-block: var(--section-gap);
    background: var(--deep);
    color: var(--white);
    --eyebrow-color: var(--sand-strong);
    --title-color: var(--white);
    --lead-color: var(--slate-300);
  }

  .container {
    max-width: var(--page-max);
    margin-inline: auto;
  }

  /* Wrapping row. Children set their own --basis and wrap when it no longer fits. */
  .split {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gap, 48px);
  }
  .split > * {
    flex: 1 1 var(--basis, 400px);
    min-width: 0;
  }

  .stack {
    display: flex;
    flex-direction: column;
    gap: var(--gap, 16px);
  }

  /* Shared section heading pattern */
  .eyebrow {
    font-size: 15px;
    font-weight: 700;
    color: var(--eyebrow-color, var(--navy));
  }
  .section-title {
    font-size: 40px;
    line-height: 1.12;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--title-color, inherit);
  }
  .section-lead {
    font-size: 18px;
    line-height: 1.6;
    font-weight: 500;
    color: var(--lead-color, var(--slate-600));
  }
}

/* --------------------------------------------------------------------------
   4. Components
   -------------------------------------------------------------------------- */
@layer components {
  /* Buttons */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 58px;
    padding: 0 var(--btn-px, 32px);
    border-radius: var(--radius-pill);
    font-size: 17px;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.2s ease;
  }
  .btn:hover {
    transform: translateY(-2px);
  }
  .btn--primary {
    background: var(--navy);
    color: var(--white);
  }
  .btn--primary:hover {
    color: var(--white);
  }
  .btn--secondary {
    --btn-px: 28px;
    border: 2px solid var(--slate-500);
    background: var(--white);
    color: var(--ink);
  }
  .btn--secondary:hover {
    color: var(--ink);
  }

  /* Surfaces */
  .card {
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
  }
  .panel {
    background: var(--sand);
    border-radius: var(--radius-lg);
    padding: 56px 40px;
  }

  /* Circular badges: checkmarks, step numbers, feature icons */
  .disc {
    --size: 40px;
    flex: none;
    width: var(--size);
    height: var(--size);
    border-radius: var(--radius-pill);
    background: var(--navy);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .disc--soft {
    --size: 52px;
    background: var(--sand);
    color: var(--navy-dark);
  }
  .disc--lg {
    --size: 72px;
    background: var(--sand);
    color: var(--navy);
  }

  /* Worker code tile ("885") */
  .avatar {
    --size: 44px;
    flex: none;
    width: var(--size);
    height: var(--size);
    border-radius: var(--radius-md);
    background: var(--slate-100);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 800;
  }
  .avatar--lg {
    --size: 56px;
    font-size: 17px;
  }
  .avatar--on-light {
    background: var(--white);
  }

  /* Two-line label: name over meta */
  .identity {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  .identity__name {
    font-size: 18px;
    font-weight: 800;
  }
  .identity__meta {
    font-size: 14px;
    font-weight: 600;
    color: var(--slate-600);
  }

  /* Month calendar tiles. Sizes come from the parent grid. */
  .month-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: var(--grid-gap, 6px);
  }
  .month-grid__dow {
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--slate-600);
  }
  .day {
    min-height: var(--day-h, 48px);
    border-radius: var(--day-r, 12px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    font-size: var(--day-fs, 14px);
    font-weight: 500;
    color: var(--slate-600);
  }
  .day--entered {
    background: var(--sand);
    color: var(--navy-dark);
    font-weight: 700;
  }
  .day--entered .icon {
    color: var(--navy);
  }
  .day--rest {
    background: var(--slate-100);
    font-weight: 600;
  }
  .day--missing {
    border: 2px solid var(--amber);
    color: var(--amber-text);
    font-weight: 700;
  }
  .day-swap {
    position: relative;
    display: block;
    min-height: var(--day-h, 48px);
  }
  .day-swap > .day {
    position: absolute;
    inset: 0;
  }

  /* Cross-fade slot: two layers stacked, one visible at a time */
  .swap {
    position: relative;
    display: block;
  }
  .swap > * {
    position: absolute;
    top: 0;
    left: 0;
  }
  .swap--end > * {
    left: auto;
    right: 0;
  }

  /* Tap indicator used in the demos */
  .tap {
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-pill);
    border: 2px solid var(--navy);
    background: var(--navy-tap);
  }

  /* Form */
  .field {
    display: block;
    width: 100%;
    height: 56px;
    border: 0;
    border-radius: var(--radius-md);
    background: var(--slate-100);
    padding: 0 16px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
  }
  .field--area {
    height: 120px;
    padding: 14px 16px;
    resize: vertical;
    line-height: 1.5;
  }
  .field:focus {
    outline: 3px solid var(--navy);
    outline-offset: 1px;
  }
  .field-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .field-group > label {
    font-size: 15px;
    font-weight: 700;
  }
  .form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
  }
  .form-row > .field-group {
    flex: 1 1 200px;
    min-width: 0;
  }
  .submit {
    height: 58px;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--navy);
    color: var(--white);
    font-family: inherit;
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s ease;
  }
  .submit:hover {
    transform: translateY(-2px);
  }
  .submit:focus-visible {
    outline: 3px solid var(--ink);
    outline-offset: 3px;
  }
  .submit:disabled {
    opacity: 0.7;
    cursor: default;
    transform: none;
  }
  .form-error {
    padding: 12px 14px;
    border-radius: var(--radius-md);
    background: var(--error-bg);
    color: var(--error-text);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
  }
  /* Visually off-screen spam trap */
  .hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
  }
}

/* --------------------------------------------------------------------------
   5. Page sections
   -------------------------------------------------------------------------- */
@layer sections {
  /* ---- Nav ---- */
  .nav {
    padding: 0 var(--gutter);
  }
  .nav__inner {
    position: relative;
    max-width: var(--page-max);
    margin-inline: auto;
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
  }
  .brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    color: var(--ink);
    text-decoration: none;
  }
  .brand:hover {
    color: var(--ink);
  }
  .brand__mark {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    display: block;
  }
  .brand__name {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.02em;
  }
  .brand--sm {
    gap: 10px;
    min-height: 0;
    font-size: 18px;
    font-weight: 800;
  }
  .brand--sm .brand__mark {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
  }
  .nav__links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
  }
  .nav__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 12px;
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    text-decoration: none;
  }
  .nav__link:hover {
    color: var(--ink);
  }

  .burger {
    display: none;
    flex: none;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--slate-100);
    color: var(--ink);
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .burger:focus-visible {
    outline: 3px solid var(--navy);
    outline-offset: 2px;
  }
  .burger__close {
    display: none;
  }
  .burger[aria-expanded="true"] .burger__open {
    display: none;
  }
  .burger[aria-expanded="true"] .burger__close {
    display: block;
  }

  @media (max-width: 720px) {
    .burger {
      display: inline-flex;
    }
    .nav__links {
      display: none;
      position: absolute;
      top: 76px;
      left: 0;
      right: 0;
      z-index: 50;
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      padding: 8px;
      background: var(--white);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-pop);
    }
    .nav__links.is-open {
      display: flex;
      animation: hf-rise 0.2s ease-out;
    }
    .nav__link {
      min-height: 56px;
      padding: 0 16px;
      font-size: 17px;
      border-radius: var(--radius-md);
    }
    .nav__link:hover,
    .nav__link:active {
      background: var(--slate-100);
    }
  }

  /* ---- Hero ---- */
  .hero {
    padding: 32px var(--gutter) 88px;
  }
  .hero__inner {
    --gap: 56px 48px;
  }
  .hero__copy {
    --basis: 460px;
    --gap: 24px;
    align-items: flex-start;
  }
  .badge {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 16px;
    border-radius: var(--radius-pill);
    background: var(--sand-strong);
    color: var(--navy-dark);
    font-size: 14px;
    font-weight: 700;
  }
  .hero__title {
    font-size: 60px;
    line-height: 1.04;
    font-weight: 800;
    letter-spacing: -0.03em;
  }
  .hero__lead {
    max-width: 540px;
    font-size: 20px;
    line-height: 1.55;
    font-weight: 500;
    color: var(--slate-600);
  }
  .hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 8px;
  }
  .hero__demo {
    --basis: 560px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
  }

  /* ---- Time saved ---- */
  .saved {
    --gap: 40px 56px;
  }
  .saved__copy {
    --basis: 420px;
  }
  .saved__title {
    font-size: 44px;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -0.03em;
  }
  .saved__lead {
    max-width: 560px;
    font-size: 18px;
    line-height: 1.6;
    font-weight: 500;
    color: var(--navy-dark);
  }
  .saved__list {
    --basis: 360px;
    --gap: 14px;
  }
  .saved__item {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 72px;
    padding: 0 20px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
  }
  .saved__item .disc {
    --size: 40px;
  }

  /* ---- Section heading block (time entry) ---- */
  .entries {
    --gap: 40px;
  }
  .section-head {
    --gap: 12px;
    max-width: 680px;
  }

  /* ---- Feature cards ---- */
  .features {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
  }
  .feature {
    flex: 1 1 300px;
    min-width: 0;
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: transform 0.2s ease;
  }
  .feature:hover {
    transform: translateY(-4px);
  }
  .feature__title {
    font-size: 22px;
    font-weight: 800;
  }
  .feature__text {
    font-size: 16px;
    line-height: 1.6;
    font-weight: 500;
    color: var(--slate-600);
  }

  /* ---- Overview ---- */
  .overview__copy {
    --basis: 400px;
    --gap: 20px;
  }
  .legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    margin-top: 4px;
  }
  .legend__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--slate-600);
  }
  .legend__swatch {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .legend__swatch--entered {
    background: var(--sand);
    color: var(--navy);
  }
  .legend__swatch--missing {
    border: 2px solid var(--amber);
    color: var(--amber-text);
  }
  .legend__swatch--rest {
    background: var(--slate-100);
  }

  .overview__cards {
    --basis: 520px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
  }
  .month-card {
    flex: 1 1 360px;
    min-width: 0;
    padding: 20px;
    background: var(--bg);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .month-card__head {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .summary {
    flex: 1 1 220px;
    min-width: 0;
    align-self: flex-start;
    padding: 20px;
    background: var(--bg);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .summary__title {
    font-size: 18px;
    font-weight: 800;
  }
  .summary__row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 15px;
    font-weight: 600;
    color: var(--slate-600);
  }
  .summary__value {
    color: var(--ink);
    font-weight: 700;
  }
  .summary__rule {
    height: 1px;
    background: var(--slate-200);
  }
  .summary__total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
  }
  .summary__total-label {
    font-size: 15px;
    font-weight: 700;
  }
  .summary__total-value {
    font-size: 24px;
    font-weight: 800;
  }
  .swap-num {
    position: relative;
    display: inline-block;
  }
  .swap-num > :last-child {
    position: absolute;
    top: 0;
    right: 0;
  }

  /* ---- Dashboard ---- */
  .dashboard__inner {
    --gap: 56px 48px;
  }
  .dashboard__copy {
    --basis: 420px;
    --gap: 20px;
  }
  .dashboard__cards {
    --basis: 440px;
  }
  .checklist {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 4px;
  }
  .checklist__item {
    display: flex;
    gap: 10px;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--white);
  }
  .checklist__item .icon {
    --size: 20px;
    --sw: 3;
    margin-top: 2px;
    color: var(--sand-strong);
  }

  .payroll {
    position: relative;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    color: var(--ink);
  }
  .payroll__head,
  .payroll__month {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .payroll__label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--slate-600);
  }
  .payroll__status {
    position: relative;
    flex: none;
    width: 158px;
    height: 32px;
    display: block;
  }
  .status {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: var(--radius-pill);
    font-size: 13px;
    font-weight: 700;
  }
  .status--pending {
    background: var(--pending-bg);
    color: var(--pending-text);
  }
  .status--ready {
    background: var(--sand);
    color: var(--navy-dark);
  }
  .payroll__title {
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
  }
  .payroll__nav {
    display: flex;
    gap: 8px;
    flex: none;
  }
  .round-btn {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-pill);
    background: var(--slate-100);
    color: var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .progress {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .progress__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 15px;
    font-weight: 600;
  }
  .progress__text {
    height: 22px;
    min-width: 200px;
    line-height: 22px;
    white-space: nowrap;
  }
  .progress__pct {
    height: 22px;
    width: 48px;
    line-height: 22px;
    text-align: right;
    color: var(--slate-600);
  }
  .progress__track {
    height: 8px;
    border-radius: var(--radius-pill);
    background: var(--slate-200);
    overflow: hidden;
  }
  .progress__bar {
    height: 8px;
    border-radius: var(--radius-pill);
    background: var(--navy);
  }

  .steps {
    display: flex;
    flex-direction: column;
  }
  .step {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 64px;
  }
  .step + .step {
    border-top: 1px solid var(--slate-200);
  }
  .step__icon {
    position: relative;
    width: 48px;
    height: 48px;
    flex: none;
    display: block;
  }
  .step__icon > * {
    position: absolute;
    inset: 0;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .step__icon--static {
    border-radius: var(--radius-md);
    background: var(--slate-100);
    color: var(--slate-600);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .tone-wait {
    background: var(--slate-100);
    color: var(--slate-500);
  }
  .tone-done {
    background: var(--sand);
    color: var(--navy);
  }
  .step__label {
    font-size: 16px;
    font-weight: 700;
  }
  .step__text {
    position: relative;
    display: block;
    flex: 1;
    min-width: 0;
    height: 44px;
  }
  .step__text > * {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
  }
  .step__text > .is-waiting {
    padding-right: 110px;
  }
  .step__title {
    font-size: 16px;
    font-weight: 700;
    line-height: 22px;
  }
  .step__sub {
    font-size: 13px;
    font-weight: 600;
    line-height: 20px;
    color: var(--slate-600);
  }
  .approve {
    position: absolute;
    right: 0;
    top: 50%;
    height: 44px;
    margin-top: -22px;
    padding: 0 22px;
    border-radius: var(--radius-pill);
    background: var(--navy);
    color: var(--white);
    display: inline-flex;
    align-items: center;
    font-size: 15px;
    font-weight: 700;
  }

  .download {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 56px;
    border-radius: var(--radius-pill);
    background: var(--navy);
    color: var(--white);
    font-size: 17px;
    font-weight: 700;
  }
  .download__done {
    position: absolute;
    inset: 0;
    border-radius: var(--radius-pill);
    background: var(--navy);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }
  .payroll .tap {
    left: 50%;
    margin-left: -20px;
    top: auto;
    bottom: 28px;
  }

  .stats {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }
  .stat {
    flex: 1 1 var(--basis, 90px);
    min-width: 0;
    padding: 14px 16px;
    border-radius: var(--radius-lg);
    background: var(--white);
    color: var(--ink);
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .stat--wide {
    --basis: 130px;
  }
  .stat__label {
    font-size: 13px;
    font-weight: 600;
    color: var(--slate-600);
  }
  .stat__value {
    font-size: 22px;
    font-weight: 800;
  }

  .pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .pill {
    position: relative;
    height: 36px;
    padding: 0 14px;
    border-radius: var(--radius-pill);
    background: var(--slate-800);
    color: var(--slate-200);
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    font-weight: 700;
  }
  .pill__active {
    position: absolute;
    inset: 0;
    border-radius: var(--radius-pill);
    background: var(--sand-strong);
    color: var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* ---- Contact ---- */
  .contact {
    padding: var(--section-gap) var(--gutter) 72px;
  }
  .contact__panel {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 40px 56px;
    --eyebrow-color: var(--navy-dark);
    --title-color: var(--ink);
    --lead-color: var(--navy-dark);
  }
  .contact__copy {
    --basis: 340px;
    flex: 1 1 340px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .contact__copy .section-lead {
    max-width: 520px;
  }
  .contact__steps {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 4px;
  }
  .contact__step {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--ink);
  }
  .contact__step .disc {
    font-size: 16px;
    font-weight: 800;
  }
  .contact__form {
    flex: 1 1 420px;
    max-width: 560px;
    min-width: 0;
    padding: 28px;
  }
  #quote-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .sent {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
    padding: 40px 12px;
  }
  .sent__title {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.02em;
  }
  .sent__text {
    font-size: 16px;
    line-height: 1.6;
    font-weight: 500;
    color: var(--slate-600);
  }

  /* ---- Footer ---- */
  .footer {
    padding: 0 var(--gutter) 48px;
  }
  .footer__inner {
    max-width: var(--page-max);
    margin-inline: auto;
    padding-top: 28px;
    border-top: 1px solid var(--slate-200);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
  }
  .footer__copy {
    font-size: 14px;
    font-weight: 700;
    color: var(--slate-600);
  }
}

/* --------------------------------------------------------------------------
   6. Hero demo: phone and its three screens
   -------------------------------------------------------------------------- */
@layer demo {
  .phone {
    position: relative;
    flex: none;
    width: 340px;
    max-width: 100%;
    height: 640px;
    border: 8px solid var(--ink);
    border-radius: 40px;
    background: var(--bg);
    overflow: hidden;
    box-shadow: var(--shadow-card);
  }
  .screen {
    position: absolute;
    inset: 0;
    padding: 22px 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .screen--calendar {
    padding-inline: 12px;
  }
  .screen--entry {
    gap: 16px;
  }

  /* Screen 1: search */
  .screen__title {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 4px;
  }
  .screen__h {
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
  }
  .screen__sub {
    font-size: 14px;
    font-weight: 600;
    color: var(--slate-600);
  }
  .search {
    flex: none;
    height: 48px;
    padding: 0 16px;
    border-radius: var(--radius-pill);
    background: var(--white);
    color: var(--slate-500);
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: var(--shadow-card);
  }
  .search__field {
    position: relative;
    flex: 1;
    min-width: 0;
    height: 24px;
    display: block;
  }
  .search__field > * {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 15px;
    line-height: 24px;
    white-space: nowrap;
  }
  .search__placeholder {
    font-weight: 600;
    color: var(--slate-600);
  }
  .search__typed {
    font-weight: 700;
    color: var(--ink);
  }
  .results {
    position: relative;
    flex: none;
    height: 360px;
  }
  .results__list {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    border-radius: var(--radius-lg);
    background: var(--white);
    overflow: hidden;
    box-shadow: var(--shadow-card);
  }
  .row {
    position: relative;
    height: 72px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .row + .row {
    border-top: 1px solid var(--slate-200);
  }
  .row__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
  }
  .row__name {
    font-size: 16px;
    font-weight: 700;
  }
  .row__meta {
    font-size: 13px;
    font-weight: 600;
    color: var(--slate-600);
  }
  .row__go {
    color: var(--slate-500);
  }
  .row__done {
    color: var(--navy);
  }
  .row__highlight {
    position: absolute;
    inset: 0;
    background: var(--navy-tint);
  }

  /* Screen 2: calendar */
  .screen__worker {
    height: 44px;
    padding: 0 4px;
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .screen__worker .identity__name {
    line-height: 1.2;
  }
  .screen__worker .identity__meta {
    font-size: 13px;
  }
  .tabs {
    flex: none;
    height: 52px;
    padding: 4px;
    border-radius: 18px;
    background: var(--slate-100);
    display: flex;
    gap: 4px;
  }
  .tab {
    flex: 1;
    border-radius: var(--radius-md);
    color: var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 15px;
    font-weight: 700;
  }
  .tab--active {
    background: var(--ink);
    color: var(--white);
  }
  .mini-cal {
    --day-h: 44px;
    --day-r: var(--radius-sm);
    --day-fs: 13px;
    --grid-gap: 4px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .mini-cal .month-grid__dow {
    line-height: 22px;
  }
  .totals {
    padding: 14px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
  }
  .totals > span {
    display: flex;
    flex-direction: column;
  }
  .totals > span:last-child {
    align-items: flex-end;
  }
  .totals__label {
    font-size: 13px;
    font-weight: 600;
    color: var(--slate-600);
  }
  .totals__value {
    font-size: 20px;
    font-weight: 800;
  }
  .day-ring {
    position: absolute;
    left: 225px;
    top: 328px;
    width: 37px;
    height: 44px;
    border-radius: var(--radius-sm);
    border: 3px solid var(--navy);
  }

  /* Screen 3: entry */
  .screen__who {
    padding: 0 4px;
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .screen__who .identity__name {
    font-size: 24px;
    letter-spacing: -0.02em;
    line-height: 1.15;
  }
  .picker {
    padding: 0 4px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .picker__label {
    font-size: 15px;
    font-weight: 700;
  }
  .picker__label--spaced {
    margin-top: 4px;
  }
  .chips {
    display: flex;
    gap: 10px;
  }
  .chip {
    position: relative;
    width: 52px;
    height: 52px;
    border-radius: var(--radius-pill);
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    box-shadow: var(--shadow-card);
  }
  .chip__on {
    position: absolute;
    inset: 0;
    border-radius: var(--radius-pill);
    background: var(--navy);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .day-total {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .day-total__value {
    position: relative;
    display: block;
    height: 30px;
  }
  .day-total__value > * {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 22px;
    font-weight: 800;
    line-height: 30px;
  }
  .day-total__value > .hf2-selO {
    right: 0;
    bottom: 0;
    background: var(--white);
  }
  .save {
    margin-top: auto;
    height: 56px;
    border-radius: var(--radius-pill);
    background: var(--navy);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: 700;
  }
  .toast-wrap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 92px;
    display: flex;
    justify-content: center;
  }
  .toast {
    height: 44px;
    padding: 0 20px;
    border-radius: var(--radius-pill);
    background: var(--ink);
    color: var(--white);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
  }
  .toast .icon {
    color: var(--sand-strong);
  }
}

/* --------------------------------------------------------------------------
   7. Motion
   Transform and opacity only, so it stays smooth on cheap phones.
   -------------------------------------------------------------------------- */
@keyframes hf-rise {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes hf-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* Hero demo loop (--loop-hero): 0-20% search, 20-57% calendar, 57-96% entry */
@keyframes hf2-scrS { 0%, 19% { opacity: 1; } 22%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes hf2-scrC { 0%, 19% { opacity: 0; } 22%, 54% { opacity: 1; } 58%, 100% { opacity: 0; } }
@keyframes hf2-scrE { 0%, 55% { opacity: 0; } 59%, 93% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes hf2-type {
  0%, 3% { clip-path: inset(0 100% 0 0); }
  3% { animation-timing-function: steps(7, end); }
  10%, 95% { clip-path: inset(0 0 0 0); }
  96%, 100% { clip-path: inset(0 100% 0 0); }
}
@keyframes hf2-ph { 0%, 2% { opacity: 1; } 3%, 95% { opacity: 0; } 96%, 100% { opacity: 1; } }
@keyframes hf2-full { 0%, 10% { opacity: 1; } 12%, 95% { opacity: 0; } 96%, 100% { opacity: 1; } }
@keyframes hf2-res { 0%, 10% { opacity: 0; } 12%, 95% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes hf2-rowhl { 0%, 15% { opacity: 0; } 17%, 19% { opacity: 1; } 22%, 100% { opacity: 0; } }
@keyframes hf2-dayring { 0%, 41% { opacity: 0; } 43%, 55% { opacity: 1; } 58%, 100% { opacity: 0; } }
@keyframes hf2-selH { 0%, 66% { opacity: 0; } 68%, 100% { opacity: 1; } }
@keyframes hf2-selO { 0%, 73% { opacity: 0; } 75%, 100% { opacity: 1; } }
@keyframes hf2-press { 0%, 82% { transform: scale(1); } 83.5% { transform: scale(0.95); } 85%, 100% { transform: scale(1); } }
@keyframes hf2-toast {
  0%, 85% { opacity: 0; transform: translateY(8px); }
  87%, 92% { opacity: 1; transform: translateY(0); }
  95%, 100% { opacity: 0; transform: translateY(0); }
}
@keyframes hf2-lab1 { 0%, 9% { opacity: 1; } 11%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes hf2-lab2 { 0%, 9% { opacity: 0; } 11%, 19% { opacity: 1; } 21%, 100% { opacity: 0; } }
@keyframes hf2-lab3 { 0%, 19% { opacity: 0; } 21%, 37% { opacity: 1; } 39%, 100% { opacity: 0; } }
@keyframes hf2-lab4 { 0%, 37% { opacity: 0; } 39%, 55% { opacity: 1; } 57%, 100% { opacity: 0; } }
@keyframes hf2-lab5 { 0%, 55% { opacity: 0; } 57%, 95% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes hf2-mark {
  0%, 11% { opacity: 0; transform: translate(142px, 168px) scale(1.4); }
  13% { opacity: 1; transform: translate(142px, 168px) scale(1); }
  15% { opacity: 1; transform: translate(142px, 168px) scale(0.75); }
  17% { opacity: 0; transform: translate(142px, 168px) scale(1.4); }
  36% { opacity: 0; transform: translate(223px, 330px) scale(1.4); }
  38.5% { opacity: 1; transform: translate(223px, 330px) scale(1); }
  40.5% { opacity: 1; transform: translate(223px, 330px) scale(0.75); }
  42.5% { opacity: 0; transform: translate(223px, 330px) scale(1.4); }
  63% { opacity: 0; transform: translate(148px, 130px) scale(1.4); }
  65% { opacity: 1; transform: translate(148px, 130px) scale(1); }
  67% { opacity: 1; transform: translate(148px, 130px) scale(0.75); }
  69% { opacity: 0; transform: translate(148px, 130px) scale(1.4); }
  71% { opacity: 0; transform: translate(148px, 226px) scale(1.4); }
  72.5% { opacity: 1; transform: translate(148px, 226px) scale(1); }
  74.5% { opacity: 1; transform: translate(148px, 226px) scale(0.75); }
  76.5% { opacity: 0; transform: translate(148px, 226px) scale(1.4); }
  80% { opacity: 0; transform: translate(142px, 558px) scale(1.4); }
  82% { opacity: 1; transform: translate(142px, 558px) scale(1); }
  84% { opacity: 1; transform: translate(142px, 558px) scale(0.75); }
  86%, 100% { opacity: 0; transform: translate(142px, 558px) scale(1.4); }
}

/* Dashboard loop (--loop-dash): 0-38% approve days, 38-60% final approval, 60-92% download */
@keyframes hf4-bar { 0%, 8% { transform: scaleX(0.69); } 26%, 90% { transform: scaleX(1); } 96%, 100% { transform: scaleX(0.69); } }
@keyframes hf4-oldA { 0%, 25% { opacity: 1; } 29%, 92% { opacity: 0; } 96%, 100% { opacity: 1; } }
@keyframes hf4-newA { 0%, 25% { opacity: 0; } 29%, 92% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes hf4-oldB { 0%, 39% { opacity: 1; } 43%, 92% { opacity: 0; } 96%, 100% { opacity: 1; } }
@keyframes hf4-newB { 0%, 39% { opacity: 0; } 43%, 92% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes hf4-oldC { 0%, 45% { opacity: 1; } 49%, 92% { opacity: 0; } 96%, 100% { opacity: 1; } }
@keyframes hf4-newC { 0%, 45% { opacity: 0; } 49%, 92% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes hf4-mark {
  0%, 60% { opacity: 0; transform: scale(1.4); }
  62% { opacity: 1; transform: scale(1); }
  64.5% { opacity: 1; transform: scale(0.75); }
  67%, 100% { opacity: 0; transform: scale(1.4); }
}
@keyframes hf4-press { 0%, 63% { transform: scale(1); } 65% { transform: scale(0.97); } 67%, 100% { transform: scale(1); } }
@keyframes hf4-done { 0%, 66% { opacity: 0; } 69%, 89% { opacity: 1; } 93%, 100% { opacity: 0; } }
@keyframes hf4-lab1 { 0%, 36% { opacity: 1; } 39%, 95% { opacity: 0; } 98%, 100% { opacity: 1; } }
@keyframes hf4-lab2 { 0%, 36% { opacity: 0; } 39%, 58% { opacity: 1; } 61%, 100% { opacity: 0; } }
@keyframes hf4-lab3 { 0%, 58% { opacity: 0; } 61%, 92% { opacity: 1; } 95%, 100% { opacity: 0; } }

/* Month card loop (--loop-month): tiles pop in, day 24 gets entered, the summary updates */
@keyframes hf6-pop {
  0% { opacity: 0; transform: scale(0.6); }
  4% { opacity: 1; transform: scale(1.06); }
  6%, 92% { opacity: 1; transform: scale(1); }
  97%, 100% { opacity: 0; transform: scale(0.9); }
}
@keyframes hf6-old { 0%, 59% { opacity: 1; } 63%, 95% { opacity: 0; } 98%, 100% { opacity: 1; } }
@keyframes hf6-new { 0%, 59% { opacity: 0; } 63%, 95% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes hf6-pulse { 0%, 38% { transform: scale(1); } 44% { transform: scale(1.1); } 50% { transform: scale(1); } 54% { transform: scale(1.1); } 59%, 100% { transform: scale(1); } }
@keyframes hf6-pop24 { 0%, 60% { transform: scale(1); } 64% { transform: scale(1.12); } 68%, 100% { transform: scale(1); } }
@keyframes hf6-olds { 0%, 62% { opacity: 1; } 66%, 95% { opacity: 0; } 98%, 100% { opacity: 1; } }
@keyframes hf6-news { 0%, 62% { opacity: 0; } 66%, 95% { opacity: 1; } 98%, 100% { opacity: 0; } }

@layer motion {
  /* Entrances and hover lifts */
  .rise {
    animation: hf-rise 0.7s var(--ease-out) backwards;
  }
  .phone {
    animation:
      hf-rise 0.8s var(--ease-out) 0.15s backwards,
      hf-float 7s ease-in-out 1s infinite;
  }
  @supports (animation-timeline: view()) {
    .reveal {
      animation: hf-rise linear backwards;
      animation-timeline: view();
      animation-range: entry 0% entry 35%;
    }
  }

  /* Hero loop */
  .hf2-scrS { animation: hf2-scrS var(--loop-hero) linear infinite; }
  .hf2-scrC { opacity: 0; animation: hf2-scrC var(--loop-hero) linear infinite; }
  .hf2-scrE { opacity: 0; animation: hf2-scrE var(--loop-hero) linear infinite; }
  .hf2-type { clip-path: inset(0 100% 0 0); animation: hf2-type var(--loop-hero) linear infinite; }
  .hf2-ph { animation: hf2-ph var(--loop-hero) linear infinite; }
  .hf2-full { animation: hf2-full var(--loop-hero) linear infinite; }
  .hf2-res { opacity: 0; animation: hf2-res var(--loop-hero) linear infinite; }
  .hf2-rowhl { opacity: 0; animation: hf2-rowhl var(--loop-hero) linear infinite; }
  .hf2-dayring { opacity: 0; animation: hf2-dayring var(--loop-hero) linear infinite; }
  .hf2-selH { opacity: 0; animation: hf2-selH var(--loop-hero) linear infinite; }
  .hf2-selO { opacity: 0; animation: hf2-selO var(--loop-hero) linear infinite; }
  .hf2-press { animation: hf2-press var(--loop-hero) linear infinite; }
  .hf2-toast { opacity: 0; animation: hf2-toast var(--loop-hero) linear infinite; }
  .hf2-mark { opacity: 0; animation: hf2-mark var(--loop-hero) linear infinite; }

  /* Dashboard loop */
  .hf4-bar { transform-origin: left center; transform: scaleX(0.69); animation: hf4-bar var(--loop-dash) linear infinite; }
  .hf4-oldA { animation: hf4-oldA var(--loop-dash) linear infinite; }
  .hf4-newA { opacity: 0; animation: hf4-newA var(--loop-dash) linear infinite; }
  .hf4-oldB { animation: hf4-oldB var(--loop-dash) linear infinite; }
  .hf4-newB { opacity: 0; animation: hf4-newB var(--loop-dash) linear infinite; }
  .hf4-oldC { animation: hf4-oldC var(--loop-dash) linear infinite; }
  .hf4-newC { opacity: 0; animation: hf4-newC var(--loop-dash) linear infinite; }
  .hf4-mark { opacity: 0; animation: hf4-mark var(--loop-dash) linear infinite; }
  .hf4-press { animation: hf4-press var(--loop-dash) linear infinite; }
  .hf4-done { opacity: 0; animation: hf4-done var(--loop-dash) linear infinite; }

  /* Step labels in both loops: hidden unless a keyframe lights them up */
  .hf2-lab, .hf4-lab { opacity: 0; }
  .hf2-lab1 { opacity: 1; animation: hf2-lab1 var(--loop-hero) linear infinite; }
  .hf2-lab2 { animation: hf2-lab2 var(--loop-hero) linear infinite; }
  .hf2-lab3 { animation: hf2-lab3 var(--loop-hero) linear infinite; }
  .hf2-lab4 { animation: hf2-lab4 var(--loop-hero) linear infinite; }
  .hf2-lab5 { animation: hf2-lab5 var(--loop-hero) linear infinite; }
  .hf4-lab1 { opacity: 1; animation: hf4-lab1 var(--loop-dash) linear infinite; }
  .hf4-lab2 { animation: hf4-lab2 var(--loop-dash) linear infinite; }
  .hf4-lab3 { animation: hf4-lab3 var(--loop-dash) linear infinite; }

  /* Month card loop: day tiles stagger in, 60ms apart. Day 1 is child 11. */
  .hf6-grid > span:nth-child(n + 11) {
    animation: hf6-pop var(--loop-month) ease-out infinite backwards;
    animation-delay: calc((var(--n, 1) - 1) * 0.06s);
  }
  .hf6-grid > span:nth-child(11) { --n: 1; }
  .hf6-grid > span:nth-child(12) { --n: 2; }
  .hf6-grid > span:nth-child(13) { --n: 3; }
  .hf6-grid > span:nth-child(14) { --n: 4; }
  .hf6-grid > span:nth-child(15) { --n: 5; }
  .hf6-grid > span:nth-child(16) { --n: 6; }
  .hf6-grid > span:nth-child(17) { --n: 7; }
  .hf6-grid > span:nth-child(18) { --n: 8; }
  .hf6-grid > span:nth-child(19) { --n: 9; }
  .hf6-grid > span:nth-child(20) { --n: 10; }
  .hf6-grid > span:nth-child(21) { --n: 11; }
  .hf6-grid > span:nth-child(22) { --n: 12; }
  .hf6-grid > span:nth-child(23) { --n: 13; }
  .hf6-grid > span:nth-child(24) { --n: 14; }
  .hf6-grid > span:nth-child(25) { --n: 15; }
  .hf6-grid > span:nth-child(26) { --n: 16; }
  .hf6-grid > span:nth-child(27) { --n: 17; }
  .hf6-grid > span:nth-child(28) { --n: 18; }
  .hf6-grid > span:nth-child(29) { --n: 19; }
  .hf6-grid > span:nth-child(30) { --n: 20; }
  .hf6-grid > span:nth-child(31) { --n: 21; }
  .hf6-grid > span:nth-child(32) { --n: 22; }
  .hf6-grid > span:nth-child(33) { --n: 23; }
  .hf6-grid > span:nth-child(34) { --n: 24; }
  .hf6-grid > span:nth-child(35) { --n: 25; }
  .hf6-grid > span:nth-child(36) { --n: 26; }
  .hf6-grid > span:nth-child(37) { --n: 27; }
  .hf6-grid > span:nth-child(38) { --n: 28; }
  .hf6-grid > span:nth-child(39) { --n: 29; }
  .hf6-grid > span:nth-child(40) { --n: 30; }
  .hf6-grid > span:nth-child(41) { --n: 31; }
  .hf6-old { animation: hf6-old var(--loop-month) linear infinite, hf6-pulse var(--loop-month) ease-in-out infinite; }
  .hf6-new { opacity: 0; animation: hf6-new var(--loop-month) linear infinite, hf6-pop24 var(--loop-month) ease-out infinite; }
  .hf6-olds { animation: hf6-olds var(--loop-month) linear infinite; }
  .hf6-news { opacity: 0; animation: hf6-news var(--loop-month) linear infinite; }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation: none !important;
      transition: none !important;
    }
    .hf4-bar { transform: scaleX(1); }
    .hf4-oldA, .hf4-oldB, .hf4-oldC { opacity: 0; }
    .hf4-newA, .hf4-newB, .hf4-newC { opacity: 1; }
  }
}