/* The public website: the stylesheets of the page frame and the sections load after the kit (ui/css/nova-ui.css) and the brand variables, in this order:
   site-base (this file), site-header, site-footer, site-banners, site-cards, site-content (chrome/Boot.php lists them). They read tokens only: no colour, radius or
   shadow of a brand is written in them (R7); only white and black with an alpha may be. The desktop / phone switch of the public site is 980px, as in the design.
   Base: page, section rhythm, section headings, buttons and pictures inside sections. */

/* The public site's type scale and rhythm, in one place (R2). Every size is fluid from a 360px phone to a 1200px desktop; the sections read these, never a number of their own. */
:root {
  --nv-fs-display: clamp(26px, 18.5px + 1.9vw, 42px);   /* the home banner's headline */
  --nv-fs-h1: clamp(24px, 17px + 1.6vw, 35px);        /* an inner page's headline */
  --nv-fs-h2: clamp(21px, 16.5px + 1vw, 28px);        /* a section's heading */
  --nv-fs-h3: clamp(16px, 15px + .25vw, 17px);         /* a card's title */
  --nv-fs-lead: clamp(16px, 15px + .3vw, 18px);       /* the line under a headline */
  --nv-fs-body: clamp(15px, 14.5px + .15vw, 16px);    /* running text */
  --nv-fs-figure: clamp(23px, 18px + 1vw, 32px);    /* a big number: a rate, a price, a score */
  --nv-sec-pad: clamp(40px, 24px + 4vw, 72px);        /* space below a section: 40px on a phone, 72px on a desktop */
  --nv-sec-gap: clamp(20px, 14px + 1.2vw, 28px);      /* a section's heading to its content */
  --nv-head-h: 64px;                                  /* the sticky header's bar */
}
@media (max-width: 979px) { :root { --nv-head-h: 56px; } }

body.nv-site { min-width: 320px; overflow-x: clip; }
.nv-site main:focus { outline: none; }

/* skip link: the document prints `.nv-skip-link` */
.nv-skip-link {
  position: fixed; left: 12px; top: -64px; z-index: 200; padding: 10px 16px; border-radius: var(--nv-r-pill); background: var(--nv-primary); color: var(--nv-on-primary);
  font-weight: 600; transition: top var(--nv-dur-hover);
}
.nv-skip-link:focus { top: 12px; color: var(--nv-on-primary); }

/* one rhythm for every section: space below, none above (a section follows the one before it) */
.nv-sec { padding: 0 0 var(--nv-sec-pad); }
.nv-sec__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: var(--nv-sec-gap); }
.nv-sec__lead { min-width: 0; }
.nv-sec__title { font-size: var(--nv-fs-h2); font-weight: 600; letter-spacing: -.03em; line-height: 1.15; text-wrap: balance; }
.nv-sec__title--sm { font-size: var(--nv-fs-h3); letter-spacing: -.02em; line-height: normal; }
.nv-sec__sub { margin-top: 8px; max-width: 56ch; font-size: var(--nv-fs-lead); line-height: 1.55; color: var(--nv-text-2); }
.nv-sec__kicker { display: block; margin-bottom: 10px; font-size: 14px; font-weight: 500; color: var(--nv-primary); }
.nv-sec__more { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 15px; font-weight: 600; color: var(--nv-text); }
.nv-sec__more:hover { color: var(--nv-primary); }

/* an inner page (it opens with a page banner) has the design's tighter rhythm and smaller headings than the home page */
main:has(> .nv-phero) > .nv-sec:not(.nv-phero) { padding-block: clamp(20px, 3vw, 36px); }
main:has(> .nv-phero) > .nv-sec:last-child { padding-bottom: clamp(40px, 5vw, 72px); }
main:has(> .nv-phero) .nv-sec__title { font-size: clamp(19px, 15.5px + .9vw, 24.5px); letter-spacing: -.015em; }
main:has(> .nv-phero) .nv-sec__sub { margin-top: 6px; font-size: 15px; color: var(--nv-text-3); }

/* sections that sit on a dark panel use light ink */
.nv-sec__head--on-dark .nv-sec__title, .nv-sec__head--on-dark .nv-sec__more { color: var(--nv-on-hero); }
.nv-sec__head--on-dark .nv-sec__sub { color: var(--nv-on-hero-2); }

/* buttons in sections are a little taller than the app's (the design uses 50px) */
.nv-sec .nv-btn--lg { --nv-btn-h: 50px; padding: 0 24px; font-size: 15px; }
.nv-sec .nv-btn--sm { --nv-btn-h: 44px; padding: 0 18px; font-size: 14px; }

/* a picture box never moves the page: it has a solid colour behind it and the picture fills it */
.nv-sec img { background: var(--nv-surface-alt); }

@media (prefers-reduced-motion: no-preference) {
  .nv-sec { animation: nv-rise-site .35s ease both; }
}