/*
 * Bienvue, for hosts -- the shell every page on the marketing site wears.
 *
 * The idea the site is built on: the host's world is daylit and the guest's
 * world is a lit screen in a dark room. So the site takes the dashboard's
 * palette and every dark rectangle on it is a photograph of a television, never
 * a section that flipped theme. After dark the page follows the guest instead,
 * and the television stays the thing giving off light.
 *
 * Motion is scroll-driven in CSS wherever the browser can do it, so the site
 * carries no animation loop and no scroll handler of its own.
 *
 * This file holds what every page shares: the tokens, the base, the nav and the
 * footer. A page's own sections stay in its own <style> block. Before this file
 * existed the token block was pasted into five documents and had already
 * drifted to three page widths and three title scales, so anything in here is
 * deliberately the only copy.
 */

:root {
  /*
   * The page keeps the reader's hours.
   *
   * `light-dark()` resolves against the used colour scheme, so this one
   * declaration is the whole switch: every token below is written as a day
   * value and a night value, and changing `light dark` to `light` here pins the
   * page open in daylight forever. Nothing else has to move either way.
   *
   * The conceit survives the trip. By day the television is the dark thing on a
   * bright page; after dark the page joins it and the set keeps its rim and its
   * spill, so it is still the only thing in the room giving off light.
   */
  color-scheme: light dark;
  --canvas:        light-dark(#FBFAF7, #141A18);
  --surface:       light-dark(#FFFFFF, #1F2A24);
  --sunk:          light-dark(#F5F1E8, #1A2320);
  --ink:           light-dark(#22201C, #E8E2D6);
  --ink-secondary: light-dark(#6C6459, #9EA894);
  --ink-muted:     light-dark(#948C7E, #7C8F70);
  --border:        light-dark(#E7E2D8, #2B3733);
  --border-strong: light-dark(#DCD6CA, #3A4742);

  /* Shared inks, straight off the television. */
  --ground: #1B2523;
  --sage: #7C8F70;
  --paper: #E8E2D6;
  --sun: #C9A05C;

  /*
   * The dashboard's orange by day, the television's by night. They are the same
   * decision in two mediums, and the brighter one is the one that carries on a
   * dark ground, so the page borrows whichever belongs to the light it is in.
   *
   * The day value is 600, not the 500 the board draws. White on #C8552F is
   * 4.38:1 and #C8552F on the canvas is 4.23:1 -- both under AA for text this
   * size, so the primary button and every orange word on the site failed by a
   * hair. #A9421F is the same hue at 6.03:1 on white and 5.83:1 on the canvas.
   * The auth pages had already made this correction privately; this is the
   * whole site catching up to it, and it is the same value the dashboard calls
   * `--color-action-600`.
   *
   * Borders and tints made from this token shift with it. At a hairline or at
   * 15% opacity the two are indistinguishable, which is why there is one token
   * here and not a safe one beside a decorative one.
   */
  --action:       light-dark(#A9421F, #F2542D);
  --action-hover: light-dark(#8A3519, #FF6A45);
  --on-action:    light-dark(#FFFFFF, #1B2523);

  /* Form errors, on both grounds. The day value is the one the worker's pages
     already used; the night value is lifted off the same hue because #A83B2A
     on the dark canvas is 1.6:1 and effectively invisible. */
  --danger:       light-dark(#A83B2A, #E9806B);

  /*
   * The set, and how much of a light source it is.
   *
   * By day the screen is the dark thing on a bright page and needs an edge and
   * a drop to sit down into the paper. After dark the page is the same value as
   * the screen, the bezel stopped reading as a bezel, and the whole conceit went
   * with it: a television in an unlit room is the only thing giving off light,
   * so at night it gets a brighter rim and a good deal more spill.
   */
  --tv-edge: light-dark(rgb(232 226 214 / 0.10), rgb(232 226 214 / 0.26));
  --tv-drop: light-dark(rgb(27 37 35 / 0.38), rgb(0 0 0 / 0.62));
  --tv-spill: light-dark(rgb(201 160 92 / 0.26), rgb(201 160 92 / 0.60));
  --tv-spill-size: light-dark(90px, 150px);

  --face: 'Outfit', 'Avenir Next', 'Century Gothic', system-ui, sans-serif;

  --r: 14px;
  --r-lg: 22px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --gutter: clamp(20px, 5vw, 80px);
  --max: 1240px;
  --nav-h: 72px;

  /*
   * One title scale for the whole site.
   *
   * The three pages had drifted to three ceilings -- 60, 52 and 50 -- which is
   * visible the moment anyone clicks between them. 60 is the home page's, and
   * the home page is the one the scale was drawn for.
   */
  --h1: clamp(38px, 4.7vw, 60px);
  /* The step below it, for a title over a form rather than over a page. The
     worker's auth pages sit here; the site's own section headings still carry
     their own sizes and are the next thing worth collapsing. */
  --h2: clamp(26px, 3vw, 36px);
  --h1-tracking: -0.028em;
  --h1-leading: 1.05;
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--face);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

.wrap {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }

/* ---------------------------------------------------------------- nav ---- */

.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  height: var(--nav-h);
  background: color-mix(in srgb, var(--canvas) 86%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
}
.nav-inner {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 32px);
  width: 100%;
}
/* The hairline appears only once the page has moved under it, driven by the
   document's own scroll rather than by a handler watching it. Pricing and
   contact used to draw it unconditionally, so their bar read as heavier than
   the home page's before either had been scrolled. */
@supports (animation-timeline: scroll()) {
  .nav {
    animation: nav-settle steps(1, end) both;
    animation-timeline: scroll();
    animation-range: 4px 12px;
  }
  @keyframes nav-settle { to { border-bottom-color: var(--border); } }
}

/*
 * The brand lockup, as one asset tinted per context.
 *
 * `logo.svg` paints the mark and the wordmark in white on nothing, which makes
 * it an alpha mask rather than a picture: the same file draws in ground ink by
 * day and paper after dark, and no second colourway is checked in. Aspect is
 * the artwork's own, 5201 by 744.
 *
 * Root-relative, not relative: the home page used `img/logo.svg`, which would
 * have resolved against the directory the moment that page was served from
 * anywhere but the root.
 */
.brand {
  display: block;
  width: 154px;
  height: 22px;
  margin-right: auto;
  background-color: var(--ink);
  -webkit-mask: url(/img/logo.svg) left center / contain no-repeat;
  mask: url(/img/logo.svg) left center / contain no-repeat;
  transition: opacity 160ms linear;
}
.brand:hover { opacity: 0.7; }

.nav-link {
  font-size: 15.5px;
  color: var(--ink-secondary);
  text-decoration: none;
  transition: color 160ms linear;
}
.nav-link:hover, .nav-link.active { color: var(--ink); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  border: 0;
  border-radius: 999px;
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms linear, color 160ms linear, transform 130ms var(--ease);
}
/* Lifts under the cursor, presses under the click. Two pixels of travel is the
   whole effect, and it is the only motion on the page a reader causes. */
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px) scale(0.985); }
.btn-primary { padding: 12px 22px; background: var(--action); color: var(--on-action); }
.btn-primary:hover { background: var(--action-hover); }
.btn-quiet {
  padding: 12px 20px;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--border-strong);
}
.btn-quiet:hover { background: var(--sunk); }
.btn-lg { font-size: 17px; padding: 15px 28px; }
.btn-block { width: 100%; text-align: center; }

:where(a, button):focus-visible {
  outline: 2px solid var(--action);
  outline-offset: 3px;
  border-radius: 999px;
}

/* -------------------------------------------------------------- footer --- */

/*
 * The ground footer, on every page.
 *
 * Pricing and contact carried a second, lighter footer -- a hairline rule and
 * secondary ink -- so the site ended on a different note depending on which
 * page you happened to stop at. This is the home page's, which is the one that
 * is actually branded.
 */
.footer {
  background: var(--ground);
  color: var(--paper);
  padding-block: clamp(40px, 5vw, 64px);
}
.footer .brand { background-color: var(--paper); }
.footer-inner { display: flex; flex-wrap: wrap; gap: 24px 40px; align-items: center; }
.footer-links { display: flex; flex-wrap: wrap; gap: 24px; margin-left: auto; }
.footer a { font-size: 15px; color: var(--sage); text-decoration: none; transition: color 160ms linear; }
.footer a:hover { color: var(--paper); }
.footer small { display: block; margin-top: 28px; font-size: 13.5px; color: var(--sage); }

/* --------------------------------------------------------------- mobile -- */

/*
 * The shared shell's one breakpoint. A page's own grids break where their
 * content needs to and keep their own queries; this is only the bar and the
 * footer, which are the same on every page and so should move at the same
 * width on every page.
 */
@media (max-width: 900px) {
  /* On the root rather than on the bar, so anything that has to sit under the
     bar can read its height too -- the pricing page sticks its billing toggle
     to exactly this. Declared on `.nav` it was true only inside the bar, and
     everyone else still read the desktop 72. */
  :root { --nav-h: 64px; }

  /* Two secondary items hide on mobile to keep the bar from overflowing:
     "Pair a screen" is reachable from the body of every page, and "Host sign in"
     is reachable from the footer and sign-up page. Before this the bar carried
     all four and simply overflowed -- at 414px the items and their gaps wanted
     431px of a 373px line. */
  .nav .is-secondary { display: none; }

  /* The lockup holds its size. It was the only flex item with nothing to stop
     it shrinking, so it was the one that absorbed that overflow: squeezed to
     96px, 62% of its width, on every phone. A narrower mark on a small screen
     is a reasonable decision, so it is made here as one rather than left to
     whatever space the links happen not to want. */
  .nav .brand { flex-shrink: 0; width: 120px; }
  .nav-inner { gap: 12px; }

  .footer-links { margin-left: 0; width: 100%; }
}