@import url("./status-die.css");
@import url("./page-intro.css");
* { box-sizing: border-box; }
:root {
  --brand-mark: 34px;
  --brand-compact-mark: 0.9;
  --brand-letter-scale: 1.7;
  --brand-tile-ms: 680ms;
  --brand-package-ms: 280ms;
  --brand-package-from: 0.82;
  --brand-package-delay: 200ms;
  --brand-die-restore-delay: 200ms;
  --brand-restore-gap: 80ms;
  --brand-solid-fit: 1.105263;
  --brand-die-from: 1;
  --brand-ecos-cap: 21px;
  --brand-mark-shadow: drop-shadow(0 0.84px 1.26px rgba(0, 0, 0, 0.18));
  --motion-duration-instant: 0ms;
  --motion-duration-feedback: 140ms;
  --motion-duration-exit: 160ms;
  --motion-duration-disclosure: 240ms;
  --motion-duration-detail: 320ms;
  --motion-duration-overlay: 280ms;
  --motion-duration-overlay-exit: 200ms;
  --motion-duration-loading: 800ms;
  --motion-duration-locate: 1600ms;
  --motion-duration-status-scan: 2400ms;
  --motion-duration-status-open: 3400ms;
  --motion-duration-demo-pulse: 1800ms;
  --motion-duration-demo-cycle: 9600ms;
  --motion-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --motion-ease-linear: linear;
  --motion-distance-small: 4px;
  --motion-distance-medium: 8px;
}
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-delay: var(--motion-duration-instant) !important;
    animation-duration: var(--motion-duration-instant) !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-delay: var(--motion-duration-instant) !important;
    transition-duration: var(--motion-duration-instant) !important;
  }
}
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: var(--page-glow);
}
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { cursor: pointer; }
h1, h2, h3, p { margin: 0; }
/* One topbar structure across every surface (R5): .topbar > .wrap.topbar-in
   (brand / centered nav / right cluster). The same markup ships on the
   dashboard substrate, the auth/admin shell, and these public pages. */
.wrap {
  width: min(var(--max), calc(100% - 40px));
  margin: 0 auto;
}
.brand-mark:where(:not(header.topbar *)) {
  position: relative;
  width: var(--brand-mark);
  height: var(--brand-mark);
  flex: 0 0 var(--brand-mark);
  overflow: visible;
}
.brand-mark svg:where(:not(header.topbar *)) {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  shape-rendering: geometricPrecision;
  filter: var(--brand-mark-shadow);
}
.wordmark:where(:not(header.topbar *)) {
  font-family: "Segoe UI", var(--font);
  font-size: 21px;
  font-weight: 800;
  font-style: italic;
  letter-spacing: -.9px;
  line-height: 1;
  padding-right: 0.12em;
  color: var(--ink);
  overflow: visible;
  min-width: 0;
  width: auto;
  max-width: none;
  flex: 0 0 auto;
  opacity: 1;
}
/* Shared four-column public footer. Pages keep markup and fill-JS;
   they must not redeclare these layout or QR-popover rules. */
.footer {
  border-top: 1px solid var(--line);
  padding: 40px 0;
  color: var(--muted);
}
.footer-inner {
  width: min(var(--max), calc(100% - 40px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(280px, 1.55fr) minmax(140px, .76fr) minmax(150px, .86fr) minmax(290px, 1.2fr);
  gap: 30px;
  font-size: 14px;
}
.footer-group {
  display: grid;
  gap: 9px;
  align-content: start;
  min-width: 0;
}
.footer-group b { color: var(--ink); }
.footer-group span {
  line-height: 1.48;
  max-width: 37ch;
}
.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 3px;
}
.footer-brand .brand-mark,
.footer-brand .brand-die {
  flex: 0 0 26px;
  height: 26px;
  overflow: visible;
  position: relative;
  width: 26px;
}
.footer-brand .brand-die {
  display: inline-block;
  position: relative;
}
.footer-brand .brand-mark::before,
.footer-brand .brand-die::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.footer-brand .brand-mark::before {
  background: url("/public-site-assets/landing/brand/ecos-mark.svg") center / contain no-repeat;
  filter: var(--brand-mark-shadow);
}
.footer-brand .brand-die::before {
  background: url("/public-site-assets/landing/brand/ecos-chip.svg") center / contain no-repeat;
  filter: var(--brand-mark-shadow);
}
.footer-brand .wordmark {
  font-size: 19px;
  letter-spacing: -.8px;
}
.footer-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  line-height: 1.3;
}
.footer-link.with-icon { white-space: nowrap; }
.footer-icon {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  opacity: .72;
  filter: grayscale(1);
}
.footer-qr-item { position: relative; }
.footer-qr-pop {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 0;
  transform: translateY(4px);
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(15, 15, 15, .14);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--motion-duration-exit) var(--motion-ease-in),
    transform var(--motion-duration-exit) var(--motion-ease-in),
    visibility var(--motion-duration-instant) var(--motion-ease-linear)
      var(--motion-duration-exit);
  pointer-events: none;
  z-index: 40;
}
.footer-qr-item:hover .footer-qr-pop,
.footer-qr-item:focus-within .footer-qr-pop {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition:
    opacity var(--motion-duration-disclosure) var(--motion-ease-out),
    transform var(--motion-duration-disclosure) var(--motion-ease-out),
    visibility var(--motion-duration-instant) var(--motion-ease-linear)
      var(--motion-duration-instant);
}
.footer-qr-pop img {
  width: 132px;
  height: 132px;
  display: block;
  border-radius: 6px;
}
.footer-qr-pop span {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}
.footer a:hover { color: var(--ink); }
.wordmark .factory:where(:not(header.topbar *)) { color: var(--blue); }
/* Selected = slightly deeper gray, no weight change (builder ruling
   2026-08-09: weight shifts move glyphs and read as faux bold on machines
   without granular Inter weights). */
/* Button labels never wrap: a two-line header button is a shrink symptom,
   not a layout mode — the narrow breakpoints below size the cluster so the
   pair fits one-line at every current-device width (≥360px). */
.btn {
  min-height: 42px;
  padding: 0 15px;
  border: 1px solid #d9d9d9;
  border-radius: var(--button-radius);
  background: #fff;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 760;
  transition:
    transform var(--motion-duration-feedback) var(--motion-ease-standard),
    border-color var(--motion-duration-feedback) var(--motion-ease-standard),
    background var(--motion-duration-feedback) var(--motion-ease-standard),
    color var(--motion-duration-feedback) var(--motion-ease-standard);
}
.btn:hover { transform: translateY(-1px); border-color: var(--primary); }
.btn.primary {
  background: var(--primary);
  color: var(--primary-ink);
  border-color: var(--primary);
}
.btn.ghost { background: transparent; }
.btn.small { min-height: 34px; padding: 0 12px; font-size: 13px; }
.icon-btn:where(:not(header.topbar *)) {
  position: relative;
  min-width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid #d9d9d9;
  border-radius: var(--button-radius);
  color: var(--muted);
  cursor: pointer;
}
.icon-btn:hover:where(:not(header.topbar *)) {
  border-color: var(--primary);
  color: var(--ink);
}
/* R5 account pill (same form as the builder topbar). */
.notif-list:where(:not(header.topbar *)) {
  list-style: none;
  margin: 0;
  padding: 0;
}
.notif-list li:where(:not(header.topbar *)) {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  height: 68px;
  box-sizing: border-box;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
  overflow: hidden;
}
.notif-list li:last-child:where(:not(header.topbar *)) {
  border-bottom: 0;
}
.n-dot:where(:not(header.topbar *)) {
  flex-shrink: 0;
  width: 11px;
  height: 11px;
  margin-top: 4px;
  background: var(--sd-die-pending) border-box;
  background-size: 100% 100%;
}
.n-dot.bad:where(:not(header.topbar *)) { background-image: var(--sd-die-pending); }
.n-dot.warn:where(:not(header.topbar *)) { background-image: var(--sd-die-current); }
.n-dot.ok:where(:not(header.topbar *)) { background-image: var(--sd-die-done); }
.n-dot.info:where(:not(header.topbar *)) { background-image: var(--sd-die-open); }
.n-body:where(:not(header.topbar *)) {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  min-height: 52px;
}
.n-title-row:where(:not(header.topbar *)) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 10px;
}
.n-title:where(:not(header.topbar *)) {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-weight: 500;
}
.n-title a:where(:not(header.topbar *)) {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.n-title a:hover:where(:not(header.topbar *)) { color: var(--primary); }
.notif-list li.unread-item:where(:not(header.topbar *)) {
  background: rgba(23, 105, 255, 0.05);
  margin: 0 -8px;
  padding-left: 8px;
  padding-right: 8px;
  border-radius: 6px;
}
.notif-list li.unread-item .n-title:where(:not(header.topbar *)) {
  color: var(--ink);
  font-weight: 760;
}
.n-sub:where(:not(header.topbar *)) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  width: 100%;
  height: 32px;
  color: var(--muted);
  font-size: 12px;
  line-height: 16px;
  margin-top: 2px;
  overflow: hidden;
}
.n-time:where(:not(header.topbar *)) {
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--muted);
}
.card,
.panel {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: var(--radius-sm);
}
/* Shared card interaction: pages add layout classes on top of .card
   (template-card, workflow-card, shuttle-option, entry-card, proof-chip,
   ov-cell, path-panel, package-panel) and must not redeclare hover/active. */
.card {
  transition:
    border-color var(--motion-duration-feedback) var(--motion-ease-standard),
    background var(--motion-duration-feedback) var(--motion-ease-standard),
    transform var(--motion-duration-feedback) var(--motion-ease-standard);
}
.card:hover:not(.active) {
  border-color: #bdbdbd;
  transform: translateY(-1px);
}
.card:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
.card.active {
  border-color: rgba(23,105,255,.42);
  background: #f8fbff;
}
.subpage-intro {
  width: min(var(--max), calc(100% - 40px));
  margin: 0 auto;
  padding: var(--page-intro-top) 0 0;
  background: transparent;
  border-bottom: 0;
  display: grid;
  gap: var(--page-intro-lead-gap);
  align-items: start;
}
.subpage-intro > * {
  min-width: 0;
}
.subpage-intro + .section {
  padding-top: var(--page-intro-body-gap);
}
/* Subpage intro title block + section rhythm (ui-spec Subpage Intro Pattern):
   one shared definition for Templates/Shuttles/About — pages must not keep
   private copies (the 2026-07-02 alignment left Shuttles' copy behind and it
   drifted for weeks). h1 and the lead's top margin are scoped to subpage
   contexts so the landing hero keeps its own composed rhythm. */
.eyebrow {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--blue);
  font-size: 12px;
  font-weight: 800;
}
.subpage-intro h1 {
  font-size: clamp(36px, 3.7vw, 50px);
  line-height: 1;
  letter-spacing: 0;
  margin: 0;
  max-width: 760px;
}
.lead {
  color: var(--muted);
  font-size: 17px;
  line-height: 1.55;
  max-width: 820px;
}
/* Intro spacing comes from its grid gap; only the final CTA uses a lead margin.
   The landing hero composes its own rhythm. */
.subpage-intro .lead {
  margin: 0;
}
.final-cta .lead {
  margin-top: 18px;
}
.template-mode {
  min-height: 25px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 9px;
  background: #fff;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
}
.template-mode.mpw {
  color: #164a9f;
  background: #f2f7ff;
  border-color: #d7e7ff;
}
.template-mode.mpc {
  color: #4f3fb7;
  background: #f7f5ff;
  border-color: #e3ddff;
}
.template-card-summary {
  line-height: 1.45;
  min-height: 4.35em;
}
.template-tag {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  padding: 0 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
  line-height: 1;
  white-space: nowrap;
}
.eyebrow {
  color: var(--blue);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.lead {
  color: var(--muted);
  font-size: 17px;
  line-height: 1.55;
}
.section {
  width: min(var(--max), calc(100% - 40px));
  margin: 0 auto;
  padding: 82px 0;
  scroll-margin-top: 96px;
}
.section + .section { border-top: 1px solid var(--line); }
@media (max-width: 1060px) {
  .footer-inner {
    grid-template-columns: 1fr;
  }
}
/* Shared topbar breakpoints (R5 topbar values; previously per-page copies
   with drifted 1020/980/720 splits and a 64px bar height). */
@media (max-width: 720px) {
  .subpage-intro {
    width: min(100% - 24px, var(--max));
  }
  .section {
    width: min(100% - 24px, var(--max));
    padding: 56px 0;
  }
  .footer-inner { width: min(100% - 24px, var(--max)); }
  .footer-link.with-icon { white-space: normal; }
  .subpage-intro h1 {
    font-size: 34px;
  }
  /* The bar keeps the 72px R5 height; only the gutter narrows to match the
     page content containers. Both header auth actions stay visible — hiding
     the ghost action dropped Log in on phones (issue #34), and the pair fits
     the narrowed bar with room to spare. */
}
@media (max-width: 359px) {
  /* Keep the visitor pair on one line at the 320px acceptance floor by
     compacting both clusters without changing the shared header shape. */
  .wordmark:where(:not(header.topbar *)) { font-size: 18px; }
}