/* ==========================================================================
   Nexflow — hand-written overrides. NOT generated.

   This sheet is loaded LAST on every page, after site.css, redesign.css,
   time-hr.css and timesheet.css. All four of those are written by scripts in
   design/ and are overwritten on every run, so anything that must survive a
   regeneration lives here instead.

   From the nexflow-hero.html redesign, 2026-09-02:
     1. Inter Tight replaces Montserrat sitewide, with the tighter tracking
        the redesign sets on headings.
     2. The top bar is fixed and full-bleed on every page, at every scroll
        position -- it no longer floats as an inset card that pins on scroll.
     3. The hero halftone reads lighter: thinner dot grids and a stronger
        light veil.
   ========================================================================== */

/* -------------------------------------------------------------- 1. type
   The redesign loads Inter Tight. Both --font (redesign.css, site.css) and
   --font-display (time-hr.css, timesheet.css) are redefined so every page
   follows, including the two that ship their own self-contained stylesheet.
   html[data-theme] is matched too: a visitor who used the retired accent
   picker still carries that attribute, and it outranks :root. */
:root,
html[data-theme]{
  --font:'Inter Tight', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-display:'Archivo', 'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif;
}

body,
h1, h2, h3, h4, h5, h6,
.mono, code, kbd, pre, samp,
input, select, textarea, button{
  font-family:var(--font);
}

/* Inter Tight is a tighter face than Montserrat; the redesign pulls the
   headings in to match, and the hero headline further still. */
h1, h2, h3{ letter-spacing:-.03em; }
.hero h1{ letter-spacing:-.035em; }

/* ------------------------------------------------------------ 2. top bar
   Was an inset card (max-width 1180 - 52, centred) sitting absolute on the
   hero, which js/site.js swapped to a fixed card on scroll. Now it spans the
   viewport and is fixed from the outset, so all three states -- floating,
   pinned, and the static variant the product pages use -- resolve to the
   same bar and nothing moves when the page scrolls. */
.site-header,
.site-header.is-pinned,
.site-header--static{
  position:fixed;
  top:0; left:0; right:0;
  width:100%;
  max-width:none;
  margin-inline:0;
  z-index:60;
  padding:11px 40px;
  border:0;
  border-bottom:1px solid rgba(255,255,255,.9);
  border-radius:0;
  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:
    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);
}

/* The bar used to drop in from above when it pinned. It is never absent now,
   so that entrance would read as the bar flying away and coming back. */
.site-header.is-pinned{ animation:none; }

/* Every hero already carries 112px of top padding to clear the floating bar,
   which is more than the fixed bar's height -- so nothing is hidden beneath
   it. Narrow viewports shrink that padding, so restore the clearance there. */
@media (max-width:700px){
  .site-header,
  .site-header.is-pinned,
  .site-header--static{ padding:11px 20px; }
  .hero{ padding-top:96px; }
}

/* --------------------------------------------------------------- 3. hero
   The darkness was never an overlay -- hero-veil, hero-scrim and hero-sheen
   are all light washes. It is the halftone photograph beneath them. The
   redesign thins the two dot grids that sit over it and strengthens the
   veil, which lifts the dense middle of the image without flattening the
   texture. */
.hero-dots-a{
  background-image:radial-gradient(rgba(27,102,201,.30) 1.1px, transparent 1.2px);
}
.hero-dots-b{
  background-image:radial-gradient(rgba(15,76,143,.18) 1px, transparent 1.1px);
}
/* The veil is tinted light blue rather than near-white. A white wash lightens
   and desaturates in one move, which is what left the halftone reading grey;
   a blue wash knocks the density back while the colour survives.

   The alpha is what controls how blue the hero reads, and it runs the
   opposite way to intuition: the photograph underneath is neutral grey, so
   LOWERING the veil's alpha lets more grey through and drains the colour.
   More blue means a higher alpha, not a lower one. */
.hero-veil{
  background:linear-gradient(100deg,
    rgba(203,225,249,.92) 0%,
    rgba(203,225,249,.84) 42%,
    rgba(203,225,249,.78) 100%);
}
/* The ground the halftone sits on, a touch bluer than the default #EDF3F6. */
:root,
html[data-theme]{ --hero-ground:#DCE9F9; }

/* ==========================================================================
   4. White panels, blended heroes
   Requested 2026-09-02: every grey panel goes white, and every animated hero
   dissolves into the section beneath it rather than stopping at a hard edge.
   ========================================================================== */

/* The greys were coming from three tokens: the page paper, the recessed tray
   the module plates sit in, and the alternate surface the retained sections
   use. All three become white; the plates keep their hairline and shadow, so
   they still read as panels without a grey ground behind them. */
:root,
html[data-theme]{
  --bg:#FFFFFF;
  --tray:#FFFFFF;
  --surface-alt:#FFFFFF;
}

body{ background:#FFFFFF; }

/* The tray's inset shadow was what made it read as recessed grey. With a white
   ground it only muddies the top edge. */
.modules{ background:#FFFFFF; box-shadow:none; }

/* Sections that painted their own near-white or paper background. #custom is
   an ID selector in redesign.css, so it needs naming explicitly -- a class
   rule cannot out-specify it. Its hairline top and bottom borders stay: on a
   white page they are the only thing still marking the section boundary. */
.section,
.section--media,
.site-footer{ background:#FFFFFF; }
#custom{ background:#FFFFFF; }

/* -------------------------------------------------------- hero blending
   One rule for every hero on the site. The overlay is a child pseudo-element
   so it paints above the hero's own animated layers (image, dot grids, veils)
   but below the content, which is lifted to z-index 1 below. Heights are a
   percentage so a tall hero fades over a longer run than a short one. */
.hero{ position:relative; isolation:isolate; }
.hero::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  /* Short and late rather than long and gentle. A 42% fade that ramped from
     the halfway mark washed the field out across most of the hero, so the
     animation read as absent well before the boundary. It now holds full
     strength until the last quarter and only whites out in the final
     sliver -- the seam is still invisible, but the dots stay visibly blue
     at their dimmest. */
  height:26%;
  background:linear-gradient(180deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.14) 42%,
    rgba(255,255,255,.55) 74%,
    rgba(255,255,255,.88) 92%,
    #FFFFFF 100%);
  pointer-events:none;
  z-index:0;
}

/* Whatever each template calls its hero content, it rides above the fade. */
.hero .hero-inner,
.hero .hero-grid,
.hero .hero-body,
.hero .hero-content,
.hero > .container{ position:relative; z-index:1; }

/* The homepage bus sits low in the hero, where the fade is strongest, so it
   needs lifting too. Only the bus: .lane and .tap-tag are position:absolute
   inside it and inherit the lift, whereas forcing them to relative drops them
   into the flow and they stretch into tall blocks. .spine is already
   positioned, so z-index alone is enough. */
.hero .spine{ z-index:1; }

/* ---------------------------------------- page-wide fields (Time package,
   Timesheet). Those two run one dot field behind the entire document, with
   the hero merely transparent over it. Fading the hero to white there does
   not blend anything -- it punches a white hole and the field returns at
   full strength the moment the hero ends. So the fade is switched off
   wherever a page-wide field exists, and the field itself is softened
   instead, which is what actually makes it recede. */
.shell:has(> .field) .hero::after{ content:none; }

.field-tile-a{ opacity:.26; }
.field-tile-b{ opacity:.14; }

/* ==========================================================================
   5. Time package page
   The package is Clock + Timesheet, with Visitor as a paid add-on. The module
   plates carry real descriptions now, so they need a two-up and a one-up grid
   (time-hr.css only defines the three-column one) and a list style.
   ========================================================================== */
.plate-grid--duo{ grid-template-columns:repeat(2,1fr); }
.plate-grid--solo{ grid-template-columns:minmax(0,620px); }

.plate-list{
  margin:14px 0 18px;
  padding:0;
  list-style:none;
  display:grid;
  gap:8px;
}
.plate-list li{
  position:relative;
  padding-left:18px;
  font-size:14.5px;
  line-height:1.5;
  color:var(--muted, #6C7580);
}
/* A hairline tick rather than a bullet, matching the checks used elsewhere. */
.plate-list li::before{
  content:"";
  position:absolute;
  left:2px; top:.55em;
  width:6px; height:6px;
  border-left:1.5px solid var(--primary, #1B66C9);
  border-bottom:1.5px solid var(--primary, #1B66C9);
  transform:rotate(-45deg);
}

@media (max-width:820px){
  .plate-grid--duo{ grid-template-columns:1fr; }
}

/* ==========================================================================
   6. Pricing
   Clock $2, Timesheet $2, both together $3 -- per employee per month, NZD.
   One component, used in the three heroes and on the package plates.
   ========================================================================== */
.price{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:10px;
  margin:0 0 22px;
}
.price-amount{
  font-size:38px;
  font-weight:700;
  line-height:1;
  letter-spacing:-.03em;
  color:var(--ink, #2C343C);
}
.price-unit{
  font-size:14.5px;
  line-height:1.4;
  color:var(--muted, #6C7580);
}
/* The comparison line drops to its own row under the figure. */
.price-note{
  flex-basis:100%;
  font-size:13.5px;
  line-height:1.5;
  color:var(--muted-2, #8A95A1);
}

/* On the package plates the price is a quiet line, not a headline figure --
   the $3 in the hero is the number that should carry. */
.plate-price{
  margin:0 0 10px;
  font-size:13.5px;
  font-weight:600;
  color:var(--muted, #6C7580);
}

@media (max-width:520px){
  .price-amount{ font-size:32px; }
}

/* Four-item feature grids wrap 3+1 in the default three-column .feature-grid,
   which leaves a lone card on its own row. This puts them 2x2 instead. Falls
   back to the same single column as .feature-grid at the 820px breakpoint. */
.feature-grid--pair{ grid-template-columns:repeat(2, 1fr); }
@media (max-width:820px){
  .feature-grid--pair{ grid-template-columns:1fr; }
}

/* redesign.css sets .section-head h2 { white-space:nowrap } from 1001px up,
   which suits the short headings it was written for ("What Clock does"). The
   Clock page carries two sentence-length headings; without this they are
   forced onto one line and overflow the container on a narrow desktop. */
.section-head--wrap h2{ white-space:normal; max-width:26ch; }

/* Intro copy that belongs to a section but not inside .section-head. That is a
   3-column grid (max-content / 1fr / auto, align-items:end) built for a short
   heading plus a short subtitle; a full paragraph in it gets squeezed into a
   narrow column and pushes the heading to the bottom of the row. */
.section-intro{ max-width:62ch; margin:0 0 var(--sp-6); color:var(--muted); }

/* Real product screenshots. Framed so a light UI shot does not bleed into the
   page background, and capped so a wide capture stays readable rather than
   spanning the full container. */
.app-shot{ margin:var(--sp-7) 0 0; }
.app-shot img{
  /* Centred, and never scaled ABOVE its natural size — the capture is 1220px
     wide, so width:100% in a wider container would upscale and blur it. */
  display:block; margin-inline:auto;
  width:auto; max-width:100%; height:auto;
  border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow); background:var(--surface);
}
.app-shot figcaption{
  margin:var(--sp-3) auto 0; font-size:.95rem; line-height:1.5; color:var(--muted);
  max-width:62ch; text-align:center;
}

/* In-copy links to sibling product pages (SEO internal links). The Timesheet
   kiosk band is ink-dark, where the default --primary link would be too dim,
   so it reads as white with an underline. The custom page lead keeps the
   normal link colour but gains an underline so it reads as a link at rest. */
.kiosk .section-titles p a{ color:#fff; text-decoration:underline; text-underline-offset:3px; }
.kiosk .section-titles p a:hover{ color:var(--accent); }
.lead a{ text-decoration:underline; text-underline-offset:3px; }