/* What every page on frontmat.studio shares: the tokens, the brand fonts and look,
   the pinned header with its menus, and the footer. Sub-pages link this after
   pages.css; marketing-stamp.py copies it into index.html after the home page's
   own styles. It loads last on every page, so the brand look wins as it did when
   each page carried its own copy (2026-10-27, the consolidation). */
:root {
  --ink: #16141f;
  --paper: #f7f6f3;
  --bg: #f7f6f3;
  --card: #ffffff;
  --muted: #6b6674;
  --accent: #d5305a;
  --accent-deep: #8f1d3d;
  --line: #e7e4de;
  --good: #0d7a4f;
}

/* ---------- the header: logo, the pages, Start free, and the menu on a phone ---------- */
header.site {
  position: sticky;
  top: 0;
  z-index: 50;
  line-height: 1.6;
  /* the header lets the wash through */
  background: rgb(247 246 243 / 0.7);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
header.site .wrap,
footer.site .wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding-inline: 20px;
}
header.site .nav {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-block: 10px;
}
header.site .logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--ink);
  margin-right: auto;
}
header.site .logo svg {
  flex: none;
}
header.site .actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
header.site .btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 10px;
  background: linear-gradient(120deg, var(--accent), var(--accent-deep));
  color: #fff;
  font-size: 14px;
  text-decoration: none;
}
header.site .cta-tail {
  display: none;
}
header.site .links {
  display: none;
}
/* Features, Solutions, Pricing and Resources open a panel of their pages (a
   disclosure, so it works by tap and by keyboard; site.js closes the others) */
header.site .links details.dd {
  position: relative;
}
header.site .links details.dd > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  color: var(--muted);
  font-weight: 500;
}
header.site .links details.dd > summary::-webkit-details-marker {
  display: none;
}
header.site .links details.dd > summary::after {
  content: '';
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
header.site .links details.dd > summary:hover,
header.site .links details.dd[open] > summary {
  color: var(--ink);
}
header.site .links a[aria-current],
header.site .links details.dd[aria-current] > summary {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 6px;
}
header.site .links details.dd .dd-panel {
  position: absolute;
  top: 100%;
  left: -12px;
  min-width: 268px;
  display: grid;
  padding: 6px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgb(22 20 31 / 0.1);
  z-index: 6;
}
header.site .links details.dd .dd-panel a {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--ink);
  font-size: 14px;
}
header.site .links details.dd .dd-panel a:first-child {
  font-weight: 600;
  border-bottom: 1px solid var(--line);
  border-radius: 8px 8px 0 0;
  margin-bottom: 4px;
}
header.site .links details.dd .dd-panel a:hover,
header.site .links details.dd .dd-panel a[aria-current] {
  background: var(--paper);
  text-decoration: none;
}
/* Pricing and Resources: each page with a line saying what it is for, so
   Founding Studios and the rules by state read as what they are */
header.site .links details.dd .dd-panel.notes {
  min-width: 296px;
}
header.site .links details.dd .dd-panel.notes a {
  display: grid;
  gap: 1px;
  padding: 9px 10px;
}
header.site .links details.dd .dd-panel.notes a:first-child {
  font-weight: inherit;
  border-bottom: 0;
  border-radius: 8px;
  margin-bottom: 0;
}
header.site .links details.dd .dd-panel.notes b {
  font-weight: 600;
}
header.site .links details.dd .dd-panel.notes small {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--muted);
}
details.menu > summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--card);
}
details.menu > summary::-webkit-details-marker {
  display: none;
}
details.menu[open] > summary {
  background: var(--paper);
}
details.menu .sheet {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  /* the header is pinned, so a menu taller than the screen scrolls in itself:
     with Features and Solutions both open it ran 438px past a phone's screen */
  max-height: calc(100vh - 72px);
  max-height: calc(100dvh - 72px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--card);
  border-bottom: 1px solid var(--line);
  border-radius: 0 0 14px 14px;
  padding: 6px 6px 12px;
  z-index: 5;
  box-shadow: 0 12px 30px rgb(22 20 31 / 0.1);
}
details.menu .sheet a {
  display: flex;
  align-items: center;
  padding: 11px 14px;
  min-height: 48px;
  border-radius: 9px;
  color: var(--ink);
  text-decoration: none;
  font-size: 15px;
}
details.menu .sheet a:hover {
  background: var(--paper);
}
details.menu .sheet a[aria-current] {
  background: var(--paper);
  font-weight: 600;
}
details.menu .sheet details.sheet-dd > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 14px;
  min-height: 48px;
  border-radius: 9px;
  color: var(--ink);
  font-size: 15px;
}
details.menu .sheet details.sheet-dd > summary::-webkit-details-marker {
  display: none;
}
details.menu .sheet details.sheet-dd > summary::after {
  content: '';
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.15s;
}
details.menu .sheet details.sheet-dd[open] > summary::after {
  transform: rotate(225deg);
}
details.menu .sheet details.sheet-dd[aria-current] > summary {
  font-weight: 600;
}
details.menu .sheet details.sheet-dd a {
  padding-left: 28px;
  min-height: 44px;
  font-size: 14.5px;
}
details.menu .sheet .sheet-cta {
  justify-content: center;
  margin: 6px 8px 0;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
}
details.menu .sheet .sheet-signin {
  justify-content: center;
  min-height: 44px;
  color: var(--muted);
  font-size: 14px;
}

/* ---------- the footer ---------- */
footer.site {
  border-top: 1px solid var(--line);
  padding: 22px 0 36px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}
footer.site .wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
footer.site a {
  color: var(--muted);
}
/* Facebook and Instagram, at the end of the footer's links */
footer.site .follow {
  display: inline-flex;
  gap: 4px;
  margin: -5px 0 -5px 10px;
  vertical-align: middle;
}
footer.site .follow a {
  display: inline-flex;
  padding: 5px;
}
footer.site .follow a:hover {
  color: var(--ink);
}
footer.site .follow svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

@media (min-width: 640px) {
  header.site .wrap,
  footer.site .wrap {
    padding-inline: 24px;
  }
  header.site .cta-tail {
    display: inline;
  }
  footer.site .wrap {
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
  }
}
@media (min-width: 880px) {
  header.site .nav {
    gap: 28px;
    padding-block: 14px;
  }
  header.site .logo {
    font-size: 17px;
    margin-right: 0;
  }
  header.site details.menu {
    display: none;
  }
  header.site .links {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-left: auto;
    font-size: 14px;
  }
  /* a 44px box with the text centered, as the dropdown labels beside them have:
     stretched to the row, the links' text sat at the top, higher than Features */
  header.site .links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    text-decoration: none;
    color: var(--muted);
    font-weight: 500;
  }
  header.site .links a:hover {
    color: var(--ink);
  }
}

/* ---------- the brand look (brand/README.md, "The look"): the reels' type, ground and
   pieces on the site. Sora for headings and pills, Inter for text; the wash, floor plan,
   warm light and grain at the top of the page; the hook's underline; the deep kicker;
   the caption card's gradient rule on CTA cards; the spot tiles under the closing CTA.
   The fonts are immutable-cached: marketing-stamp.py checks these URLs carry each
   file's fingerprint, and index.html preloads the same URLs. ---------- */
@font-face {
  font-family: 'Sora';
  src: url('/fonts/sora.woff2?v=fc575ebf') format('woff2');
  font-weight: 700 800;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter.woff2?v=260c81a4') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}
body {
  position: relative;
  overflow-x: clip;
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    'Segoe UI',
    sans-serif;
}
h1,
h2,
h3,
.logo,
.btn,
.btn2,
.sheet-cta {
  font-family: Sora, ui-sans-serif, system-ui, sans-serif;
}
h1 {
  font-weight: 800;
  letter-spacing: -0.03em;
  word-spacing: 0.04em;
}
h2 {
  font-weight: 800;
  letter-spacing: -0.01em;
  word-spacing: 0.08em;
}
h3 {
  font-weight: 700;
  letter-spacing: -0.005em;
  word-spacing: 0.08em;
}
.btn,
.btn2,
.sheet-cta {
  font-weight: 700;
  word-spacing: 0.06em;
}
.eyebrow,
.kicker {
  font-family: Sora, ui-sans-serif, system-ui, sans-serif;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0;
  word-spacing: 0.1em;
  text-transform: none;
  color: var(--accent-deep);
}
/* the hook's underline, under the page's title (a stamped page opens kicker, then h1) */
.hero h1::after,
.kicker + h1::after {
  content: '';
  display: block;
  width: 88px;
  height: 6px;
  margin-top: 18px;
  border-radius: 3px;
  background: var(--accent);
}
/* the ground: the reels' wash, warm light and grain over the top of the page */
body::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 980px;
  z-index: -1;
  pointer-events: none;
  background:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.09 0 0 0 0'/></filter><rect width='240' height='240' filter='url%28%23n%29'/></svg>")
      repeat,
    linear-gradient(
      90deg,
      rgb(255 214 170 / 0) 5%,
      rgb(255 214 170 / 0.32) 38%,
      rgb(255 214 170 / 0) 72%
    ),
    linear-gradient(
      180deg,
      rgb(213 48 90 / 0.19) 0%,
      rgb(213 48 90 / 0.07) 38%,
      rgb(213 48 90 / 0) 78%
    );
  background-size:
    240px 240px,
    auto,
    auto;
  opacity: 1;
  /* fade the light and grain out with the wash: at 980px they stopped in a line,
     and a long page read as the old site below it */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
}
/* the floor plan: spot outlines tilted -6 degrees, fading out down the page. The tilt is
   in the SVG pattern, not a transform: a rotated box wider than the page made it scroll
   sideways (the founding gate, 2026-10-24) */
body::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1200px;
  z-index: -1;
  pointer-events: none;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><defs><pattern id='p' width='120' height='240' patternUnits='userSpaceOnUse' patternTransform='rotate(-6)'><g fill='none' stroke='%238f1d3d' stroke-width='4'><rect x='2' y='2' width='68' height='68' rx='16'/><rect x='62' y='122' width='68' height='68' rx='16'/><rect x='-58' y='122' width='68' height='68' rx='16'/></g></pattern></defs><rect width='100%25' height='100%25' fill='url(%23p)'/></svg>")
    0 0 / 100% 100% no-repeat;
  opacity: 0.045;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 50%, transparent 88%);
  mask-image: linear-gradient(180deg, #000 0%, #000 50%, transparent 88%);
}
/* the caption card's gradient rule along the top of a CTA card */
.cta {
  position: relative;
  overflow: hidden;
}
.cta::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 6px;
  background: linear-gradient(90deg, var(--accent), var(--accent-deep));
}
/* the signature under the closing CTA, as a reel's close card carries it */
.closer::after {
  content: '';
  display: block;
  width: 166px;
  height: 95px;
  margin: 30px auto 0;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='166' height='95'><rect width='166' height='7' rx='3.5' fill='%23d5305a' opacity='.35'/><rect x='0' y='17' width='34' height='34' rx='8' fill='%23d5305a'/><rect x='9.2' y='26' width='15.6' height='3.4' rx='1.7' fill='%23f7f6f3' opacity='.9'/><g opacity='.28'><rect x='45.4' y='18.4' width='31.2' height='31.2' rx='7.4' fill='%23d5305a'/></g><rect x='53.2' y='26' width='15.6' height='3.4' rx='1.7' fill='%23d5305a' opacity='.17'/><rect x='88' y='17' width='34' height='34' rx='8' fill='%23d5305a'/><rect x='97.2' y='26' width='15.6' height='3.4' rx='1.7' fill='%23f7f6f3' opacity='.9'/><rect x='132' y='17' width='34' height='34' rx='8' fill='%23d5305a'/><rect x='141.2' y='26' width='15.6' height='3.4' rx='1.7' fill='%23f7f6f3' opacity='.9'/><g opacity='.28'><rect x='1.4' y='62.4' width='31.2' height='31.2' rx='7.4' fill='%23d5305a'/></g><rect x='9.2' y='70' width='15.6' height='3.4' rx='1.7' fill='%23d5305a' opacity='.17'/><rect x='44' y='61' width='34' height='34' rx='8' fill='%23d5305a'/><rect x='53.2' y='70' width='15.6' height='3.4' rx='1.7' fill='%23f7f6f3' opacity='.9'/><rect x='88' y='61' width='34' height='34' rx='8' fill='%23d5305a'/><rect x='97.2' y='70' width='15.6' height='3.4' rx='1.7' fill='%23f7f6f3' opacity='.9'/><rect x='132' y='61' width='34' height='34' rx='8' fill='%23d5305a'/><rect x='141.2' y='70' width='15.6' height='3.4' rx='1.7' fill='%23f7f6f3' opacity='.9'/></svg>")
    no-repeat;
}