/* GENERATED by design/apply-page.py from nexflow-timesheet.html. Edit the handoff, not
   this file -- it is overwritten on every run. */

/* ==========================================================================
   Nexflow — products/timesheet.html
   Vanilla CSS, no build step, no dependencies. Same token set and depth
   language as nexflow-hero-modules.html; shared rules could be lifted into a
   single site stylesheet (everything above "PAGE-SPECIFIC" is identical).

   NOTES ON DECISIONS
   - Section headings are Archivo at font-stretch:125% (the wdth axis). NOTE:
     "Archivo Expanded" is NOT a Google Fonts family — it must be requested as
     `family=Archivo:wdth,wght@125,600..700` and applied with font-stretch,
     otherwise it silently falls back to Montserrat.
   - The hero spine is the module's own workflow (log → submit → lock →
     approve → payroll), in the same two-lane bus as the homepage, so the
     product page reads as part of the "one spine" story.
   - The kiosk block is dark because it is the one PAID HARDWARE add-on; it
     should not read as another included software feature. The trial caveat
     travels with the CTA.
   - H1 is "Hours in. Payroll out." rather than the SEO string; the keywords
     stay in <title> and the meta description.

   ASSETS REQUIRED
   - assets/img/hero-cyan-moire.png
   - assets/brand/nexflow-lockup.png, nexflow-lockup-black.png
     (absolute URLs below — swap for your local paths)
   ========================================================================== */

:root{
  --bg:#FFFFFF;
  --surface:#FFFFFF;
  --surface-2:#F8FAFC;
  --hero-ground:#E8F6F9;
  --border:#DDE4EC;
  --rule:rgba(30,60,100,.18);

  --ink:#2C343C;
  --ink-strong:#1E2A38;
  --muted:#6C7580;
  --muted-2:#4E5A67;
  --muted-3:#5D6A78;

  --primary:#1B66C9;
  --spine:#0B4A8C;          /* deeper blue: the spine runs over cyan here */
  --primary-hover:#144E9D;
  --accent:#8FC4F5;

  --sh-plate:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 1px 1px rgba(18,42,72,.05),
    0 8px 18px -10px rgba(18,42,72,.20),
    0 26px 44px -26px rgba(18,42,72,.32);
  --sh-plate-hover:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 2px 3px rgba(18,42,72,.07),
    0 16px 28px -10px rgba(18,42,72,.20),
    0 40px 62px -28px rgba(27,102,201,.42);
  --sh-bar:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(27,102,201,.09),
    0 1px 1px rgba(18,42,72,.06),
    0 8px 18px -8px rgba(18,42,72,.22),
    0 30px 50px -26px rgba(18,42,72,.42);

  --radius:3px;
  --maxw:1180px;
  --font:'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-display:'Archivo', 'Montserrat', sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; }
a{ color:var(--primary); text-decoration:none; }
a:hover{ color:var(--primary-hover); }
h1,h2,h3{ margin:0; letter-spacing:-.03em; }
:focus-visible{ outline:3px solid rgba(27,102,201,.55); outline-offset:2px; }

.skip-link{
  position:absolute; left:16px; top:-6rem; z-index:20;
  background:var(--surface); color:var(--ink);
  padding:10px 16px; border-radius:var(--radius); box-shadow:var(--sh-bar);
  transition:top .15s ease;
}
.skip-link:focus{ top:16px; }

/* Sections run full-bleed; .inner caps the CONTENT and centres it. */
.shell{ position:relative; overflow:hidden; }
.inner{ max-width:var(--maxw); margin-inline:auto; padding-inline:40px; }

/* ------------------------------ Top bar ---------------------------------- */
.site-header{
  position:absolute;
  top:20px; left:0; right:0;
  width:calc(100% - 52px);
  max-width:calc(var(--maxw) - 52px);
  margin-inline:auto;
  z-index:6;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:11px 12px 11px 20px;
  border:1px solid rgba(255,255,255,.9);
  border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.66));
  -webkit-backdrop-filter:blur(16px) saturate(165%);
  backdrop-filter:blur(16px) saturate(165%);
  box-shadow:var(--sh-bar);
}
.brand-logo{ height:38px; width:auto; display:block; }

/* Pinned state: js/site.js adds .is-pinned once the page scrolls past the top,
   and the bar drops back in, fixed to the viewport. */
.site-header.is-pinned{
  position:fixed;
  top:12px; left:0; right:0;
  width:calc(100% - 52px);
  max-width:calc(var(--maxw) - 52px);
  margin-inline:auto;
  z-index:60;
  background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.8));
  box-shadow:0 16px 34px -20px rgba(18,42,72,.5);
  animation:nfBarDrop .34s cubic-bezier(.16,1,.3,1) both;
}
@keyframes nfBarDrop{
  from{ transform:translateY(-130%); opacity:0; }
  to{ transform:none; opacity:1; }
}
@media (prefers-reduced-motion: reduce){
  .site-header.is-pinned{ animation:none; }
}
.site-nav{
  display:flex; align-items:center; gap:6px;
  font-weight:600; font-size:13.5px; line-height:1;
  color:#5D6874;
}
.site-nav a:not(.btn-demo){
  color:inherit;
  padding:8px 11px;
  border-radius:2px;
  transition:background .16s ease, color .16s ease, box-shadow .16s ease;
}
.site-nav a:not(.btn-demo):hover{
  background:rgba(255,255,255,.88);
  color:var(--ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 1px 2px rgba(18,42,72,.12);
}
.btn-demo{
  padding:11px 17px;
  border-radius:2px;
  color:#fff;
  background:linear-gradient(180deg,#3A434D,#252C34);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),
             0 1px 2px rgba(18,42,72,.26),
             0 9px 18px -8px rgba(18,42,72,.48);
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.btn-demo:hover{
  color:#fff;
  background:linear-gradient(180deg,#2E7CDC,var(--primary));
  transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30),
             0 2px 4px rgba(18,42,72,.24),
             0 14px 24px -8px rgba(27,102,201,.55);
}

/* -------------------------- Hero (animated) ------------------------------ */
.hero{
  position:relative;
  padding:112px 0 48px;
  overflow:hidden;
  background:var(--hero-ground);
}
/* Two counter-drifting copies of the same moiré print, the second mirrored and
   multiplied: their dot screens interfere, so the field shimmers rather than
   just panning. Inset -8% hides the edges as they scale.

   The CSS drift animation lives on the .hero-moire-* CHILD; the pointer
   parallax is written by JS to the .hero-par WRAPPER. Keeping them on separate
   nodes is deliberate — a CSS animation on transform always beats an inline
   transform, so both on one element would mean the parallax silently does
   nothing. */
.hero-par{ position:absolute; inset:0; will-change:transform; }
.hero-par-a{ transition:transform .5s cubic-bezier(.22,.9,.3,1); }
.hero-par-b{ transition:transform .7s cubic-bezier(.22,.9,.3,1); }
.hero-moire-a,
.hero-moire-b{
  position:absolute; inset:-8%;
  background-image:url('../assets/img/hero-cyan-moire.png');
  background-size:cover;
}
/* Soft bloom pinned to the cursor; lifts the moiré locally. */
.hero-glow{
  position:absolute; left:0; top:0;
  width:520px; height:520px; margin:-260px 0 0 -260px;
  border-radius:50%;
  background:radial-gradient(circle closest-side, rgba(255,255,255,.72), rgba(255,255,255,.28) 46%, rgba(255,255,255,0) 74%);
  opacity:0;
  transition:opacity .5s ease;
  pointer-events:none;
  will-change:transform;
}
.hero-moire-a{ background-position:50% 34%; animation:nfMoireA 42s ease-in-out infinite alternate; }
.hero-moire-b{
  background-position:62% 58%;
  opacity:.55; mix-blend-mode:multiply;
  animation:nfMoireB 57s ease-in-out infinite alternate;
}
.hero-layer{ position:absolute; inset:0; }
.hero-veil{
  background:linear-gradient(100deg,
    rgba(246,250,252,.86) 0%, rgba(246,250,252,.60) 40%, rgba(246,250,252,.30) 72%, rgba(246,250,252,.16) 100%);
}
/* Local scrims do the legibility work: an ellipse under the headline, one
   under the right column, and a foot fade so the spine tags stay readable. */
.hero-scrim{
  background:
    radial-gradient(118% 84% at 2% 26%, rgba(249,252,253,.96) 0%, rgba(249,252,253,.80) 40%, rgba(249,252,253,0) 78%),
    radial-gradient(58% 68% at 94% 24%, rgba(249,252,253,.94) 0%, rgba(249,252,253,.74) 48%, rgba(249,252,253,0) 84%),
    linear-gradient(180deg, rgba(249,252,253,0) 58%, rgba(249,252,253,.72) 100%);
}
.hero-sheen{
  position:absolute; top:0; bottom:0; left:0; width:34%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  animation:nfSheen 9s cubic-bezier(.4,0,.6,1) infinite;
}
.hero-body{ position:relative; animation:nfRise .6s cubic-bezier(.16,1,.3,1) both; }

.crumbline{ display:flex; align-items:center; gap:14px; margin-bottom:30px; }
/* Pops LEFT on hover — direction carries the meaning. */
.crumb{
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 11px;
  background:rgba(247,250,252,.86);
  box-shadow:0 0 0 1px rgba(27,102,201,.16);
  font-weight:600; font-size:10.5px; line-height:1;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink);
  transition:transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s ease, background .2s ease, color .2s ease;
}
.crumb:hover,
.crumb:focus-visible{
  transform:translateX(-3px);
  background:#fff;
  color:var(--primary);
  box-shadow:0 0 0 1px rgba(27,102,201,.5), 0 8px 16px -6px rgba(18,42,72,.28);
}
.eyebrow{
  font-weight:600; font-size:10.5px; line-height:1;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--primary);
}

.hero-grid{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:56px; align-items:end; }
.hero h1{ font-size:60px; font-weight:700; line-height:1.02; letter-spacing:-.035em; max-width:24ch; }
.hero h1 .light{ font-weight:400; color:#7C8894; }
.hero-lead{ margin:0 0 24px; font-size:16.5px; line-height:1.55; color:#39414B; text-wrap:pretty; }
.hero-actions{ display:flex; gap:10px; margin-bottom:14px; }
.finepr{ margin:0; font-weight:500; font-size:12.5px; line-height:1.4; color:#5E6874; }

.btn{
  display:inline-flex; align-items:center;
  padding:14px 20px;
  border-radius:2px;
  font-weight:600; font-size:14.5px; line-height:1;
  transition:background .16s ease, color .16s ease;
}
.btn-solid{ background:var(--ink); color:#F5F5F1; }
.btn-solid:hover{ background:var(--primary); color:#fff; }
.btn-ghost{ border:1px solid var(--ink); color:var(--ink); }
.btn-ghost:hover{ background:var(--ink); color:#F5F5F1; }

/* --------------------- The spine (this module's flow) --------------------
   The link zig-zags between the two lanes: log (up) -> submit (down) -> lock
   (up) -> approve (down) -> payroll (up). It is one SVG polyline with the
   packet travelling the real path via <animateMotion>, so the geometry cannot
   drift out of sync with the tags the way separate absolutely-placed stems
   did. viewBox is 1100x172 with preserveAspectRatio="none" so it stretches to
   any container width; vector-effect keeps the stroke at 1.5px.
   ------------------------------------------------------------------------- */
.spine{ position:relative; height:172px; margin-top:52px; }
.spine svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.taps{ position:absolute; inset:0; display:flex; padding:0 10px; }
/* minmax(0,1fr) — plain 1fr takes its auto minimum from the tag content and
   makes the two rows unequal, which pulls the tags off their vertices. */
.tap{ flex:1; display:grid; grid-template-rows:minmax(0,1fr) minmax(0,1fr); justify-items:center; }
.tap-tag{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:5px 9px 6px;
  white-space:nowrap;
  background:rgba(247,250,252,.9);
  box-shadow:0 0 0 1px rgba(11,74,140,.20);
}
/* 50px clears the vertex (y=46 up / y=126 down) by 10px on both lanes. */
.tap-up .tap-tag{ align-self:end; margin-bottom:50px; }
.tap-down .tap-tag{ grid-row:2; align-self:start; margin-top:50px; }
.tap-name{ font-weight:600; font-size:12.5px; letter-spacing:.02em; color:var(--ink); }
.tap-what{ font-weight:400; font-size:10.5px; letter-spacing:.04em; color:var(--ink); }

/* ---------------------------- Section heads ------------------------------ */
.band{ padding:56px 0 10px; }
.band:first-of-type{ padding-top:60px; }
.section-head{ padding-top:20px; border-top:1px solid var(--rule); }
.section-meta{ display:flex; align-items:baseline; justify-content:space-between; gap:24px; }
.section-kicker{
  font-weight:600; font-size:10px;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted-3);
}
.section-titles{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:40px; align-items:end; margin-top:26px;
}
.section-titles h2{
  font-family:var(--font-display);
  font-weight:700;
  font-stretch:125%;          /* the wdth axis — this is what makes it expanded */
  font-size:38px; line-height:1.04; letter-spacing:-.012em;
  color:var(--ink-strong);
}
.section-titles p{ margin:0 0 4px; font-size:15px; line-height:1.55; color:var(--muted-2); }

/* ------------------------------- Plates ---------------------------------- */
.plate-grid{ display:grid; gap:18px; margin-top:26px; }
.plate-grid.two{ grid-template-columns:repeat(2,1fr); }
.plate-grid.three{ grid-template-columns:repeat(3,1fr); }
.plate{
  position:relative;
  display:flex; flex-direction:column;
  padding:26px 24px 24px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  color:var(--ink);
  box-shadow:var(--sh-plate);
}
a.plate{ transition:transform .2s cubic-bezier(.16,1,.3,1), border-color .2s ease, box-shadow .2s ease; }
a.plate:hover,
a.plate:focus-visible{
  transform:translateY(-4px);
  border-color:rgba(27,102,201,.45);
  box-shadow:var(--sh-plate-hover);
  color:var(--ink);
}
.plate-stub{ display:block; width:2px; height:18px; background:var(--primary); margin-bottom:16px; }
.plate-key{
  font-weight:600; font-size:11px;
  letter-spacing:.17em; text-transform:uppercase;
  color:var(--primary);
  margin-bottom:12px;
}
.plate h3{ margin:0 0 9px; font-size:20px; font-weight:700; line-height:1.25; letter-spacing:-.02em; }
.plate p{ margin:0; font-size:15px; line-height:1.5; color:var(--muted); max-width:44ch; }

/* Hover-revealed holographic sigil (same system as the homepage panels). */
.holo{
  position:absolute; top:20px; right:20px;
  pointer-events:none;
  opacity:0;
  filter:saturate(1.25) drop-shadow(0 1px 4px rgba(120,90,220,.20));
  transition:opacity .34s ease;
}
a.plate:hover .holo,
a.plate:focus-visible .holo{ opacity:1; }
.holo svg{ display:block; animation:holoHue 9s linear infinite, holoFloat 5s ease-in-out infinite alternate; }

/* Numbered steps */
.step-top{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:34px; }
.step-num{ font-weight:600; font-size:26px; line-height:1; color:var(--border); }

/* Flush hairline row (leave) — lighter weight than plates on purpose */
.row-grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  margin-top:26px; border-top:1px solid var(--border);
}
.row-cell{ padding:24px; border-left:1px solid var(--border); border-bottom:1px solid var(--border); }
.row-cell:first-child{ padding:24px 24px 24px 0; border-left:0; }
.row-cell h3{ margin:12px 0 9px; font-size:19px; font-weight:700; line-height:1.25; letter-spacing:-.02em; }
.row-cell p{ margin:0; font-size:15px; line-height:1.5; color:var(--muted); }

/* --------------------- Kiosk: the paid hardware add-on ------------------- */
.kiosk{ margin-top:56px; padding:52px 0 56px; background:var(--ink); color:#F5F7F8; }
.kiosk .section-head{ border-top-color:rgba(255,255,255,.22); }
.kiosk .section-kicker{ color:#9BB6D4; }
.kiosk .section-titles h2{ color:#fff; }
.kiosk .section-titles p{ color:#C6D4E2; }
.kiosk-card{
  padding:24px 22px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:var(--radius);
  background:rgba(255,255,255,.05);
}
.kiosk-card .plate-key{ color:var(--accent); }
.kiosk-card h3{ margin:12px 0 9px; font-size:19px; font-weight:700; line-height:1.25; letter-spacing:-.02em; color:#fff; }
.kiosk-card p{ margin:0; font-size:15px; line-height:1.5; color:#C6D4E2; }

/* ------------------------------ Close + foot ----------------------------- */
.close{ padding:56px 0 66px; }
.close-grid{
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  gap:40px; align-items:end;
  padding-top:34px; border-top:2px solid var(--ink);
}
.close-grid h2{
  margin:0 0 12px;
  font-family:var(--font-display); font-weight:700; font-stretch:125%;
  font-size:32px; line-height:1.06; letter-spacing:-.012em; color:var(--ink-strong);
}
.close-grid p{ margin:0; font-size:15.5px; line-height:1.55; color:var(--muted-2); max-width:52ch; }
.close-actions{ display:flex; flex-direction:column; align-items:flex-end; gap:12px; }
.close-actions .row{ display:flex; gap:10px; }
.close-actions .finepr{ text-align:right; }

.site-footer{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:24px 40px 30px;
  border-top:1px solid var(--border);
}
.site-footer img{ height:22px; width:auto; display:block; opacity:.75; }
.site-footer span{ font-weight:500; font-size:11.5px; line-height:1; letter-spacing:.04em; color:#5E6874; }

/* ---------------------------------- Motion ------------------------------- */
@keyframes nfRise{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:translateY(0); } }
@keyframes nfMoireA{ from{ transform:scale(1.04) translate3d(0,0,0); } to{ transform:scale(1.12) translate3d(-2.6%,-1.8%,0); } }
@keyframes nfMoireB{ from{ transform:scaleX(-1) scale(1.14) translate3d(2.2%,1.2%,0); } to{ transform:scaleX(-1) scale(1.05) translate3d(-1.6%,-2.4%,0); } }
@keyframes nfSheen{ 0%{ transform:translateX(-30%); opacity:0; } 35%{ opacity:.55; } 100%{ transform:translateX(115%); opacity:0; } }
@keyframes nfTap{ 0%,100%{ opacity:.35; } 50%{ opacity:1; } }
@keyframes holoHue{ to{ filter:hue-rotate(360deg); } }
@keyframes holoFloat{ to{ transform:translateY(-3px); } }
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition-duration:.001ms !important; }
}

/* -------------------------------- Responsive ----------------------------- */
@media (max-width:1180px){
  /* The zig-zag needs the full 1100px track to read; below that the stages
     become a plain wrapped list and the line is dropped. */
  .spine{ height:auto; margin-top:40px; }
  .spine svg{ display:none; }
  .taps{ position:static; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:0; }
  .tap{ display:block; justify-items:normal; }
  .tap-up .tap-tag,
  .tap-down .tap-tag{ margin:0; align-self:auto; grid-row:auto; }
  .tap-tag{ align-items:flex-start; white-space:normal; }
}
@media (max-width:1000px){
  .hero-grid{ grid-template-columns:1fr; gap:32px; align-items:start; }
  .hero h1{ font-size:46px; }
  .section-titles{ grid-template-columns:1fr; gap:12px; }
  .section-titles h2{ font-size:32px; }
  .plate-grid.three{ grid-template-columns:repeat(2,1fr); }
  .row-grid{ grid-template-columns:1fr; }
  .row-cell{ border-left:0; padding:22px 0; }
  .close-grid{ grid-template-columns:1fr; }
  .close-actions{ align-items:flex-start; }
  .close-actions .finepr{ text-align:left; }
}
@media (max-width:640px){
  .site-header{ width:calc(100% - 28px); padding:10px 10px 10px 14px; }
  .site-header.is-pinned{ width:calc(100% - 28px); top:8px; }
  .brand-logo{ height:30px; }
  .inner{ padding-inline:22px; }
  .hero{ padding:104px 0 36px; }
  .hero h1{ font-size:36px; }
  .hero-actions{ flex-direction:column; align-items:stretch; }
  .btn{ justify-content:center; }
  .taps{ grid-template-columns:1fr; }
  .plate-grid.two,
  .plate-grid.three{ grid-template-columns:1fr; }
  .site-footer{ flex-direction:column; align-items:flex-start; gap:14px; padding-inline:22px; }
}