/* Plain pages (privacy, start) in the home page's dark style (David, 6 Nov 2026: "yes"). Loaded after each page's
   own styles, so these win. Same colours, top bar, heading weights, card edge and footer as index.html. */
:root { --bg: #111110; --fg: #f4f2ec; --ash: #a3a09a; --line: rgb(255 255 255 / .1); --card: #1c1c1b; --sun: #ffc83d; --sun-deep: #e3a312; --r: 24px; }
html, body { background: var(--bg); }
body { color: var(--fg); }

/* top bar: the name "Stubzo." (as in the footer) on the home page's 1080px line, a soft Join pill */
.subnav { position: sticky; top: 0; z-index: 10; background: rgb(17 17 16 / .82); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.subnav-in { display: flex; align-items: center; justify-content: space-between; height: 72px; width: min(1080px, 100% - 48px); margin: 0 auto; }
.subnav .mark { display: inline-flex; color: var(--fg); border-radius: 8px; padding: 6px; margin: -6px; }
.subnav .mark svg { width: 32px; height: 32px; }
.subnav .join { display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: 999px; background: rgb(255 255 255 / .1); color: var(--fg); font-size: 14px; font-weight: 500; text-decoration: none; }
.subnav .join:hover { background: rgb(255 255 255 / .16); }
@media (max-width: 760px) { .subnav .join { height: 44px; } }

/* type and cards: home's weights, a 1px edge instead of white boxes */
h1 { margin-top: 64px; font-size: clamp(40px, 5vw, 60px); font-weight: 500; letter-spacing: -.025em; line-height: 1.06; }
.lede { font-size: 20px; line-height: 1.5; color: var(--ash); }
section { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); }
h2 { font-weight: 600; letter-spacing: -.015em; }
h2::before { background: rgb(255 255 255 / .1); color: var(--fg); }
section p, section ul { color: var(--ash); }
strong { color: var(--fg); }
a { color: inherit; }

/* forms (start page): dark fields, dark words on the yellow button */
input[type=text], input[type=email] { background: var(--bg); border-color: rgb(255 255 255 / .14); color: var(--fg); }
input::placeholder { color: var(--ash); }
button { color: #151514; }
.msg.bad { color: #ff8a80; }

/* footer: the home page's, word for word and line for line */
.foot { margin-top: 96px; padding: 64px 0; border-top: 1px solid var(--line); font: 400 14px/1.5 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ash); }
.foot .wrap.cols { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; width: min(1080px, 100% - 48px); margin: 0 auto; padding: 0; }
.foot p { color: var(--ash); }
.foot .logo { font-size: 22px; font-weight: 600; letter-spacing: -.03em; color: var(--fg); text-decoration: none; }
.foot .logo b { color: var(--sun-deep); }
.foot a.u { display: inline-block; padding: 10px 0; vertical-align: top; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) { .foot .wrap.cols { grid-template-columns: 1fr; gap: 16px; } }

/* header name, as in the footer (David, 6 Nov 2026: the S mark comes off until the real logo) */
.subnav .logo { display: inline-flex; align-items: center; min-height: 44px; font-size: 22px; font-weight: 600; letter-spacing: -.03em; color: var(--fg); text-decoration: none; }
.subnav .logo b { color: var(--sun-deep); }

  /* Round 2 check (7 Nov 2026), fix 2: the plain pages (privacy, start) get the same top-bar Join as home. It was a flat 10% grey pill with no
     light. Same satin pill, the same
     even-speed edge light on laptops, and the 94% bar, as index.html. */
  @property --spin { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
  .subnav { background: rgb(17 17 16 / .94); }
  .subnav .join { position: relative; isolation: isolate; background-color: rgb(255 255 255 / .08); background-image: linear-gradient(180deg, rgb(255 255 255 / .06), transparent 70%);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .12), inset 0 0 0 1px rgb(255 255 255 / .05), 0 1px 2px rgb(0 0 0 / .45); transition: background-color .3s, transform .3s cubic-bezier(.2, .8, .2, 1); }
  .subnav .join:hover { opacity: 1; background-color: rgb(255 255 255 / .13); transform: translateY(-1px); }
  .subnav .join::before { content: ""; position: absolute; inset: 0; z-index: -1; padding: 1px; border-radius: inherit; pointer-events: none;
    background: conic-gradient(from var(--spin), transparent 0deg, rgb(255 200 61 / .7) 60deg, rgb(255 255 255 / .2) 110deg, transparent 170deg, transparent 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
  @keyframes spin-even { 0% { --spin: -60deg; } 16.84% { --spin: 12.87deg; } 33.16% { --spin: 47.13deg; }
    66.84% { --spin: 192.87deg; } 83.16% { --spin: 227.13deg; } 100% { --spin: 300deg; } }
  @media (min-width: 761px) and (prefers-reduced-motion: no-preference) { .subnav .join::before { animation: spin-even 6s linear infinite; } }
  @media (prefers-contrast: more) { .subnav .join { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .4); } }