/* Whole-page review fixes (2026-09-24). Loads last. */

/* Log in sits quietly in the header now that the hero asks for one thing. */
.header-login{font-size:13px;color:var(--muted);text-decoration:underline;text-underline-offset:5px;min-height:44px;display:inline-flex;align-items:center}
.header-login:hover{color:var(--gold)}

/* The mechanism, in three plain beats under the product intro. */
.clarity-steps{list-style:none;counter-reset:step;display:flex;flex-wrap:wrap;gap:10px 28px;margin:26px 0 0;padding:0}
.clarity-steps li{counter-increment:step;display:flex;align-items:baseline;gap:10px;font-size:15px;font-weight:500;color:#193428}
.clarity-steps li:before{content:counter(step);font-family:'Lora',Georgia,serif;font-size:13px;color:#376747;font-variant-numeric:lining-nums}

/* The gap between the product intro and the pinned reel was ~500px of empty
   ground: the grid gap stacked on the reel's own margin and padding. */
.landing-story .clarity{row-gap:0}

@media (max-width:760px){
  .nav-actions .header-login{display:inline-flex}
  .meaning-word button{min-height:44px}
  .clarity-steps{flex-direction:column;gap:10px}
}

/* ---- Contrast (whole-page audit) ---------------------------------------- */

/* Reel tab labels measured 3.4 to 4.1:1 on #eef2ea. */
.reel-nav button{color:#4d6253}
.reel-nav button span{color:#4d6b54}

/* Header controls over the hero photograph measured 3.8 to 4.5:1. */
.on-landing .topbar .nav a,.on-landing .header-login{color:var(--hero-ink,var(--ink))}

/* ---- Mobile header -------------------------------------------------------- */
.mobile-menu{display:none;position:relative;border:0;padding:0}
.mobile-menu summary{list-style:none;cursor:pointer;min-height:44px;display:inline-flex;align-items:center;padding:0 14px;border:1px solid color-mix(in srgb,var(--hero-ink,var(--ink)) 30%,transparent);border-radius:999px;font-size:13px;color:var(--hero-ink,var(--ink))}
.mobile-menu summary::-webkit-details-marker{display:none}
.mobile-menu[open] summary{background:var(--surface)}
.mobile-menu nav{position:absolute;right:0;top:calc(100% + 8px);display:flex;flex-direction:column;min-width:190px;padding:6px;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);z-index:6}
.mobile-menu nav a{min-height:44px;display:flex;align-items:center;padding:0 12px;border-radius:6px;font-size:14px;color:var(--ink)!important}
.mobile-menu nav a:hover{background:var(--raised)}

@media (max-width:760px){
  .mobile-menu{display:block}
  .on-landing .topbar .brand{min-height:44px}
  .skip{padding:14px}
}

/* #main takes focus programmatically after each route change so screen readers
   start at the content; it is not a control, so it should not draw a ring. */
#main:focus{outline:none}

/* ---- Hero, light with punch (2026-09-25) --------------------------------
   Paper stays; the punch comes from contrast: near-black ink, one saturated
   forest-emerald, a crisp photo with clean whites, and a solid dark CTA. */
.landing-story .story-hero{
  --hero-ink:#0b1a12;
  --hero-sub:#2f4236;
  --hero-accent:#16703a;
  --hero-veil:#f6f7f3;
}
.landing-story .story-hero .hero-art{filter:contrast(1.1) saturate(1.12) brightness(1.01)}
.landing-story .story-hero .hero-veil{
  background:linear-gradient(97deg,rgba(246,247,243,.97) 0%,rgba(246,247,243,.9) 27%,rgba(246,247,243,.3) 47%,rgba(246,247,243,0) 60%);
}
.landing-story .story-hero h1{font-weight:600;letter-spacing:-.028em}
.landing-story .story-hero .eyebrow{color:var(--hero-accent);letter-spacing:.2em;font-weight:700}
.landing-story .story-hero .hero-close p{color:var(--hero-sub)}
.landing-story .story-hero .btn.primary{
  background:#0f2a1b;border-color:#0f2a1b;color:#f6f7f3;
  box-shadow:0 14px 30px -14px rgba(11,26,18,.6);
}
.landing-story .story-hero .btn.primary:hover{background:#16703a;border-color:#16703a}
/* Balance: the copy sat on the floor of the frame with the whole top-left
   empty. Centre it slightly below the middle and give the headline more size. */
@media (min-width:761px){
  .landing-story .story-hero{justify-content:center;padding-block:120px 80px}
  .landing-story .story-hero .hero-copy{max-width:min(720px,47vw);margin-top:4vh}
  .landing-story .story-hero h1{font-size:clamp(44px,5.1vw,84px);line-height:1.03}
  .landing-story .story-hero .hero-close p{font-size:17px;max-width:44ch}
}

/* Footer: legal links beside the closing CTA. */
.footer .footer-links{display:flex;flex-wrap:wrap;gap:20px}
.note a{color:inherit;text-decoration:underline;text-underline-offset:3px}

/* "Forgot password?" link under the log-in password field. */
.form-aside{margin:8px 0 0;font-size:13px;text-align:right}
.form-aside a{color:var(--gold);text-decoration:underline;text-underline-offset:4px}

/* Paymachi identity: Earned Hours mark and lowercase editorial wordmark. */
.brand .paymachi-wordmark{font-family:'Lora',Georgia,serif;font-size:30px;font-weight:600;line-height:1;letter-spacing:-.035em;color:var(--hero-ink,var(--ink))}
.brand img{width:36px;height:36px;object-fit:contain;flex-shrink:0}
@media(max-width:760px){.brand .paymachi-wordmark{font-size:25px}.brand img{width:30px;height:30px}}

/* Sign-up screen: choose the web account or the Android app. */
.app-choice{margin-top:34px}
.app-choice-or{display:flex;align-items:center;gap:14px;color:var(--muted);font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.app-choice-or:before,.app-choice-or:after{content:"";flex:1;height:1px;background:var(--line)}
.app-choice h2{margin:22px 0 0;font-family:'Playfair Display',Georgia,serif;font-weight:600;font-size:26px;letter-spacing:-.02em;line-height:1.15}
.app-choice>p{margin:10px 0 0;max-width:36ch;color:var(--muted);line-height:1.55}
.app-choice .note{margin-top:12px}
.play{display:inline-flex;align-items:center;gap:14px;margin-top:20px;min-height:58px;padding:0 24px 0 20px;border-radius:5px;background:#14211a;color:#f6f9f0;text-decoration:none;transition:transform .16s ease}
.play:active{transform:scale(.98)}
.play:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.play-mark{width:0;height:0;border-style:solid;border-width:11px 0 11px 19px;border-color:transparent transparent transparent currentColor;flex:none}
.play-text{display:flex;flex-direction:column;line-height:1.1;white-space:nowrap}
.play-text small{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;opacity:.82}
.play-text strong{font-size:21px;font-weight:600;letter-spacing:-.01em;margin-top:3px}
.play.is-soon{background:var(--raised);color:var(--ink);cursor:default;box-shadow:inset 0 0 0 1px var(--line)}
.play.is-soon:active{transform:none}

/* Payday questions that do not apply to the chosen pay frequency */
[data-payfor][hidden]{display:none!important}

/* The Guide beside the sign-up story (wave on sign-up and log-in, thinking on the profile and pay steps).
   She stands at the right of the three words, feet on the line under them, so she sits the same on every step. */
.onboarding-manifesto{position:relative;}
.story-guide{position:absolute;right:-14px;bottom:-6px;width:min(220px,40%);height:auto;pointer-events:none;filter:drop-shadow(0 10px 16px rgba(30,50,40,.22));animation:guidePop .45s cubic-bezier(.2,.8,.25,1) both;}
@keyframes guidePop{from{opacity:0;transform:translateY(12px) scale(.96);}to{opacity:1;transform:none;}}
@media(max-width:900px){.story-guide{display:none;}}
@media(prefers-reduced-motion:reduce){.story-guide{animation:none;}}