/* FluffCams sales site: the frame EVERY page shares (header, logo, footer, page width, focus ring, skip link). Loaded on all pages after the
   page's own stylesheet, so every page has the same header, the same width and the same footer. Colours only from tokens.css. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 60; background: var(--accent); color: var(--on-accent); padding: 10px 14px; border-radius: var(--r-sm); }

/* the approved logo (owner 2026-10-28, logo A): flame mark, "Fluff" white and "Cams" in the logo's lime */
.sh-logo { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-body); font-weight: 800; font-size: 21px; letter-spacing: -.035em; color: var(--text); text-decoration: none; }
.sh-logo:hover { color: var(--text); }
.sh-logo .mark { width: auto; height: 30px; flex: none; }
.sh-logo b { color: var(--logo-lime); font-weight: 800; }

/* header: sticky, 68 px, five links, Log in + View live demo, a menu button on narrow screens */
.sh { position: sticky; top: 0; z-index: 50; background: var(--nav-bg); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--divider); font-family: var(--font-body); }
.sh-in { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 24px; box-sizing: border-box; }
.sh-links { display: flex; gap: 32px; font-size: 14px; font-weight: 500; }
.sh-links a { color: var(--text-3); text-decoration: none; }
.sh-links a:hover, .sh-links a[aria-current] { color: var(--text); }
.sh-act { display: flex; gap: 10px; align-items: center; }
.sh-login { font-size: 14px; font-weight: 500; color: var(--text-3); padding: 10px 14px; text-decoration: none; }
.sh-login:hover { color: var(--text); }
.sh-cta { font-size: 14px; font-weight: 600; color: var(--on-accent); background: var(--accent); padding: 10px 18px; border-radius: var(--r-pill); text-decoration: none; white-space: nowrap; }
.sh-cta:hover { color: var(--on-accent); }
.sh-cta-s { display: none; } /* the short wording, phones only */
.sh-burger { display: none; width: 44px; height: 44px; border: 1px solid var(--border-2); border-radius: var(--r-sm); background: transparent; color: var(--text); align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.sh-burger svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.sh-sheet { border-top: 1px solid var(--divider); padding: 8px var(--gutter) 16px; display: flex; flex-direction: column; }
.sh-sheet[hidden] { display: none; }
.sh-sheet a { padding: 12px 0; font-size: 16px; font-weight: 500; color: var(--text-3); border-bottom: 1px solid var(--divider); text-decoration: none; }

/* footer: brand column + three link columns, then the legal line */
.sf { border-top: 1px solid var(--divider); font-family: var(--font-body); }
.sf-cols { max-width: var(--wrap); margin: 0 auto; padding: 56px var(--gutter) 32px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; font-size: 14px; box-sizing: border-box; }
.sf-col { display: flex; flex-direction: column; gap: 10px; }
.sf-col h2 { margin: 0; font-size: 14px; font-weight: 600; color: var(--text); letter-spacing: 0; text-transform: none; }
.sf-col a { color: var(--muted); text-decoration: none; }
.sf-col a:hover { color: var(--accent); }
.sf-col p { margin: 0; color: var(--subtle); line-height: 1.55; }
.sf-brand { gap: 12px; }
.sf-legal { max-width: var(--wrap); margin: 0 auto; padding: 24px var(--gutter) 40px; border-top: 1px solid var(--divider); font-size: 12px; color: var(--subtle); line-height: 1.6; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; box-sizing: border-box; }
.sf-legal p { margin: 0; }
.sf-legal a { color: var(--subtle); }

@media (max-width: 980px) {
  .sh-links, .sh-login { display: none; }
  .sh-burger { display: inline-flex; }
  .sf-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .sf-cols { grid-template-columns: minmax(0, 1fr); }
  .sh-cta { min-height: 44px; display: inline-flex; align-items: center; }
}
/* phones: logo, button and menu button must fit inside the side margins (the full header needs about 430 px) */
@media (max-width: 440px) {
  .sh-in { gap: 12px; }
  .sh-cta { padding: 0 16px; }
  .sh-cta-v { display: none; }
  .sh-cta-s { display: inline; }
}
@media (max-width: 374px) {
  .sh-cta { display: none; } /* Demo is in the menu */
}

/* the page box: nothing ever scrolls sideways (clip, not hidden, so the sticky header keeps working) */
.page { overflow-x: clip; }

/* breadcrumbs (feature pages, docs) */
.crumbs { max-width: var(--wrap); margin: 0 auto; padding: 22px var(--gutter) 0; font-size: 13px; color: var(--subtle); box-sizing: border-box; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--subtle); }
.crumbs a { color: var(--subtle); text-decoration: none; }
.crumbs a:hover { color: var(--text); }
.crumbs [aria-current] { color: var(--text); }
/* the logo in the footer keeps the logo's own colours (white "Fluff", lime "Cams") and never turns green on hover */
.sf-col a.sh-logo, .sf-col a.sh-logo:hover { color: var(--text); }
/* the X account in the footer's brand column (owner 2026-11-04) */
.sf-col a.sf-x { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; min-height: 44px; color: var(--muted); }
.sf-col a.sf-x:hover { color: var(--accent); }
.sf-x .i { width: 18px; height: 18px; }