/* TerraFab OS marketing site — shared shell (Logo, UtilityBar, Nav, Footer).
   Source: TerraFab-OS-Website-Design-Options/HANDOVER-marketing-site.md §3.
   Markup is duplicated per page (no build tooling in frontend/landing); this
   stylesheet is the single shared source for how the shell looks everywhere,
   per Terry's decision (duplicate HTML, share CSS only). Every page that uses
   this shell also links tokens.css first. */

/* Global reset -- the previous single-file landing page had this; it was
   missed when the site was split into tokens/shell/page stylesheets, and
   its absence causes real overflow at narrow widths wherever an element
   has both padding and a container-constrained width (e.g. .tf-timeline's
   padding-left: 40px was adding 40px on top of its width instead of
   within it). Found via the 375px responsive check. */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* Hash-link scroll targets need scroll-margin-top so the 72px sticky nav
   doesn't cover the heading on arrival -- the prototypes miss this
   entirely (§8's "Hash-link scrolling" item). */
#chain, #evidence { scroll-margin-top: 72px; }

body {
  margin: 0;
  background: var(--tf-sand);
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--tf-ink);
}
::selection { background: var(--tf-coral); color: var(--tf-shell); }
a { color: inherit; text-decoration: none; }

.tf-container { max-width: 1280px; margin: 0 auto; padding: 0 48px; }

/* ---- Utility bar --------------------------------------------------- */
.tf-utility { background: var(--tf-deep); color: var(--tf-on-dark); }
.tf-utility__inner {
  max-width: 1280px; margin: 0 auto; padding: 9px 48px;
  display: flex; align-items: center; justify-content: space-between;
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase;
}
.tf-utility__links { display: flex; align-items: center; gap: 26px; }
.tf-utility__links a:hover { color: var(--tf-shell); }
.tf-utility__signin { color: var(--tf-coral); }
.tf-utility__signin:hover { color: var(--tf-coral-press); }

/* ---- Logo -----------------------------------------------------------
   Mark is the newer T-mark SVG (assets/icon.svg -- same mark already used
   for the app's own header/favicon in the earlier favicon-unification
   slices), sized slightly larger than the previous hand-built CSS
   square+text version it replaces. The SVG is fully self-contained
   (its own background, frame, T-shape and coral dot), so .tf-logo__mark
   is now just a sizing wrapper -- no background/border-radius of its own. */
.tf-logo { display: inline-flex; align-items: center; gap: 10px; }
.tf-logo__mark {
  width: 40px; height: 40px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.tf-logo__icon { width: 100%; height: 100%; display: block; }
.tf-logo__word {
  font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 21px;
  letter-spacing: -0.01em; color: var(--tf-ink); white-space: nowrap;
}
.tf-logo__os { color: var(--tf-coral); }

.tf-logo--footer .tf-logo__mark { width: 32px; height: 32px; }
.tf-logo--footer .tf-logo__word { font-size: 17px; color: var(--tf-shell); }

/* ---- Nav -------------------------------------------------------------- */
.tf-nav {
  position: sticky; top: 0; z-index: 50; height: 72px;
  display: flex; align-items: center;
  background: rgba(245,238,227,0.85); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--tf-line);
}
.tf-nav__inner {
  width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 48px;
  display: flex; align-items: center; justify-content: space-between;
}
.tf-nav__links { display: flex; align-items: center; gap: 30px; }
.tf-nav__link {
  font-family: 'Inter', sans-serif; font-weight: 500; font-size: 12px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--tf-ocean);
}
/* --tf-coral fails AA at this size on the nav background -- darkened per
   §2's own fallback instruction (see contact.css's note on the same
   finding). */
.tf-nav__link:hover { color: var(--tf-coral-press); }
.tf-nav__cta {
  background: var(--tf-coral); color: var(--tf-shell);
  font-family: 'Inter', sans-serif; font-weight: 600; font-size: 12px;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 12px 26px; border-radius: var(--tf-r-sm); display: inline-block;
}
.tf-nav__cta:hover { background: var(--tf-coral-press); color: var(--tf-shell); }

.tf-nav__toggle { display: none; }
.tf-nav__hamburger { display: none; }

/* ---- Typography (shared across all pages, per §2's type scale) --------- */
.tf-eyebrow {
  font-family: 'IBM Plex Mono', monospace; font-weight: 600; font-size: 12px;
  letter-spacing: 0.18em; text-transform: uppercase; margin: 0 0 24px;
}
.tf-eyebrow--palm { color: var(--tf-palm); }
.tf-eyebrow--coral { color: var(--tf-coral); }

.tf-h1 {
  font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 56px;
  letter-spacing: -0.02em; line-height: 1.07; margin: 0 0 24px;
}
.tf-h2 {
  font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 40px;
  letter-spacing: -0.015em; line-height: 1.1; margin: 0;
}
.tf-h3 {
  font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 20px;
  margin: 0 0 10px;
}
.tf-lead {
  font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 19px;
  color: var(--tf-ocean); line-height: 1.4; max-width: 44ch;
  padding-left: 16px; border-left: 3px solid var(--tf-coral); margin: 0 0 24px;
}
.tf-body { font-size: 17px; line-height: 1.65; color: var(--tf-body); max-width: 54ch; margin: 0 0 32px; }

/* ---- CTA panel (shared closing-CTA block used on every page) ----------- */
.tf-cta-panel {
  background: var(--tf-deep); color: var(--tf-sand); border-radius: var(--tf-r-xl);
  padding: 80px 64px; display: flex; justify-content: space-between; align-items: center; gap: 48px;
}
.tf-cta-panel--centered { flex-direction: column; text-align: center; padding: 80px 64px; }
.tf-cta-panel__title { max-width: 26ch; }
.tf-cta-panel__body { max-width: 52ch; color: var(--tf-on-dark); font-size: 16px; line-height: 1.65; margin: 0; }
.tf-cta-panel__actions { display: flex; flex-direction: column; gap: 12px; flex-shrink: 0; }
.tf-cta-panel--centered .tf-cta-panel__body { margin: 0 auto 36px; }
.tf-cta-panel--centered .tf-cta-panel__actions { flex-direction: row; justify-content: center; }

/* ---- Buttons (shared primary/ghost, per §2 component rules) ------------ */
.tf-btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Inter', sans-serif; font-weight: 600; font-size: 13px;
  letter-spacing: 0.12em; text-transform: uppercase;
  border-radius: var(--tf-r-sm); transition: background var(--tf-dur) var(--tf-ease),
    color var(--tf-dur) var(--tf-ease), transform 120ms;
}
.tf-btn:active { transform: scale(0.98); }
.tf-btn--primary { background: var(--tf-coral); color: var(--tf-shell); padding: 16px 34px; border: none; }
.tf-btn--primary:hover { background: var(--tf-coral-press); color: var(--tf-shell); }
.tf-btn--ghost { background: transparent; color: var(--tf-ocean); padding: 15px 34px; border: 1.5px solid var(--tf-ocean); }
.tf-btn--ghost:hover { background: var(--tf-ocean); color: var(--tf-sand); }
.tf-btn--ghost-on-dark { color: var(--tf-shell); border: 1.5px solid rgba(245,238,227,0.5); }
.tf-btn--ghost-on-dark:hover { background: var(--tf-shell); color: var(--tf-deep); }

/* ---- Footer ------------------------------------------------------------ */
.tf-footer { background: var(--tf-deep); color: var(--tf-on-dark); border-top: 1px solid var(--tf-line); }
.tf-footer__inner { max-width: 1280px; margin: 0 auto; padding: 48px; }
.tf-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 48px; }
.tf-footer__tagline { margin: 18px 0 0; font-size: 15px; line-height: 1.6; max-width: 40ch; }
.tf-footer__heading {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(245,238,227,0.45); margin: 0 0 16px;
}
.tf-footer__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.tf-footer__links a:hover { color: var(--tf-shell); }
.tf-footer__bottom {
  border-top: 1px solid rgba(245,238,227,0.16); margin-top: 40px; padding-top: 24px;
  display: flex; align-items: center; justify-content: space-between;
  font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: 0.05em;
  color: rgba(245,238,227,0.55); flex-wrap: wrap; gap: 8px;
}

/* ---- Responsive (shell only — §2's stated breakpoints) ----------------- */
@media (max-width: 1099px) {
  .tf-container, .tf-nav__inner, .tf-utility__inner, .tf-footer__inner { padding-left: 32px; padding-right: 32px; }
  .tf-footer__grid { grid-template-columns: 1fr 1fr; }
  .tf-h1 { font-size: 40px; }
  .tf-cta-panel { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 767px) {
  .tf-container, .tf-nav__inner, .tf-utility__inner, .tf-footer__inner { padding-left: 24px; padding-right: 24px; }
  .tf-footer__grid { grid-template-columns: 1fr; gap: 32px; }
  .tf-h1 { font-size: 32px; }
  .tf-cta-panel { padding: 48px 32px; }
  .tf-cta-panel--centered { padding: 48px 32px; }
}

/* Nav collapses to logo + hamburger; drawer holds links + CTA. Pure CSS
   checkbox toggle — no JS, so this stays in the "static" slice. The links
   plus the CTA need more content width than the tablet range can give them
   alongside the nowrap logo word, so the drawer starts at the same 1099px
   breakpoint the page gutters narrow at, rather than at 767px. */
@media (max-width: 1099px) {
  /* Visually hidden rather than display:none, so the drawer is reachable by
     keyboard (Space on the focused toggle) as well as by pointer. */
  .tf-nav__toggle {
    display: block; position: absolute; width: 1px; height: 1px;
    opacity: 0; margin: 0; pointer-events: none;
  }
  .tf-nav__toggle:focus-visible + .tf-nav__hamburger {
    outline: 2px solid var(--tf-coral); outline-offset: 4px; border-radius: var(--tf-r-sm);
  }
  .tf-nav__links {
    display: none;
    position: absolute; top: 72px; left: 0; right: 0;
    flex-direction: column; align-items: flex-start; gap: 4px;
    background: var(--tf-shell); border-bottom: 1px solid var(--tf-line);
    padding: 16px 24px 24px;
  }
  .tf-nav__link { padding: 10px 0; }
  .tf-nav__cta { margin-top: 10px; }
  .tf-nav__hamburger {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; cursor: pointer;
  }
  .tf-nav__hamburger span, .tf-nav__hamburger::before, .tf-nav__hamburger::after {
    content: ''; display: block; width: 20px; height: 2px; background: var(--tf-ink);
    position: relative;
  }
  .tf-nav__hamburger::before { position: absolute; transform: translateY(-6px); }
  .tf-nav__hamburger::after { position: absolute; transform: translateY(6px); }
  .tf-nav__toggle:checked ~ .tf-nav__links { display: flex; }
}

/* Drawer gutter follows the page gutter, which is wider above 767px. */
@media (min-width: 768px) and (max-width: 1099px) {
  .tf-nav__links { padding-left: 32px; padding-right: 32px; }
}