/* Intellica homepage — footer (2026-10-12). Loaded by index.html and index-alt.html.
   popcorn.space's reveal: the page is a sheet with rounded bottom corners that scrolls up off a footer sitting beneath it. */

.page { position: relative; z-index: 1; background: var(--ground); border-radius: 0 0 48px 48px;
  box-shadow: 0 28px 60px rgba(2,11,36,.20); }
.foot { position: relative; z-index: 0; background: var(--hero); color: #fff; margin-top: -48px;   /* tucks under the sheet's round corners */
  padding: calc(48px + clamp(40px, 7vh, 72px)) 0 clamp(18px, 3vh, 30px); }   /* sized by the window's height so the whole footer fits on screen */
.foot { overflow: hidden; overflow: clip; }   /* the wordmark's line box spills past the bottom; clipped so the page gains no extra scroll and the footer never moves */
@media (min-width: 900px) and (min-height: 560px) {
  .foot { position: sticky; bottom: 0; }   /* the reveal: pinned underneath while the page slides off it (it always fits; see the sizes below) */
}
.foot .wrap { max-width: 1280px; }
.foot-top { display: flex; justify-content: center; text-align: center; }   /* no link columns (Calvin): the CTA stands alone, centred over the wordmark */
.foot .h2 { color: #fff; margin: 0 auto; max-width: 13em; text-wrap: balance; }
/* the CTA: one field, one button */
.foot-form { display: flex; gap: 10px; margin: clamp(18px, 3.2vh, 30px) auto 0; max-width: 520px; }
.foot-form input { flex: 1; min-width: 0; height: 54px; padding: 0 22px; border: 0; border-radius: 999px; background: #fff; color: var(--ink);
  font: inherit; font-size: 17px; outline: none; box-shadow: 0 0 0 1px rgba(255,255,255,.4); }
.foot-form input::placeholder { color: var(--ink-3); }
.foot-form input:focus-visible { box-shadow: 0 0 0 3px rgba(255,255,255,.55); }
.foot-form button { flex: none; height: 54px; padding: 0 26px; border: 0; border-radius: 999px; background: var(--ink); color: #fff;
  font: inherit; font-size: 17px; font-weight: 500; cursor: pointer; transition: transform .15s, background .15s; }
.foot-form button:hover { background: #000; transform: translateY(-1px); }
.foot-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* the CTA sits above the wordmark, whose tall line box would otherwise swallow the form's clicks */
.foot-cta { position: relative; z-index: 1; }
/* the big wordmark: the full width of the wrap, never cut off */
.foot-mark { margin-top: clamp(28px, 6vh, 84px); font-family: var(--sans); font-weight: 500; letter-spacing: -.05em; line-height: .8;
  font-size: min(25.6vw, 372px, calc((100vh - 400px) * 1.15)); color: #fff;   /* the full width, unless the window is short */
  pointer-events: none;   /* decorative: clicks go through to the form */ white-space: nowrap; text-align: center; padding-bottom: .04em; user-select: none; }
.foot-legal { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: clamp(14px, 2.6vh, 26px); font-size: 13px; color: rgba(255,255,255,.6); }
.foot-legal a { color: inherit; text-decoration: none; margin-left: 18px; }
.foot-legal a:hover { color: #fff; }

@media (max-width: 900px) {
  .foot { padding: 96px 0 24px; }
  .foot-mark { margin-top: 56px; font-size: 25vw; }
  .foot-legal a { display: inline-block; padding: 10px 0; }   /* thumb-sized tap targets on phones and tablets (the footer isn't pinned here, so the height is free) */
}
@media (max-width: 520px) {
  .foot-form { flex-direction: column; }
  .foot-form input, .foot-form button { width: 100%; }
  .foot-form input { flex: none; }   /* stacked, flex: 1 collapsed the field to its text height (mobile QA, 2026-10-17) */
}

/* phones and tablets (2026-10-17, Calvin: "footer scroll/stick -- this is broken on mobile?"): the reveal pins here too,
   but only when the whole footer fits the window, so its form can never end up hidden above the screen. footer.js decides. */
.foot.is-pinned { position: sticky; bottom: 0; }

/* phones (Calvin, 2026-10-17: "I can keep scrolling past the end of the footer"): iOS's rubber band dragged the page up past the
   footer and showed the light ground under it. The page stops at the footer instead. */
@media (max-width: 899px) { html, body { overscroll-behavior-y: none; } }