/* ============================================================
   hilo.team — marketing site (P1 WP10) · FILAMENT identity
   The vermilion THREAD is the page's spine: hilo = thread.
   Chrome monochrome; color only where it carries meaning.
   ============================================================ */
* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
body {
  font: var(--fs-body)/var(--leading-base) var(--font-body);
  background: var(--bg); color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--selection); }
a { color: var(--action); }

/* ---------- the thread spine ---------- */
main { position: relative; max-width: 100%; overflow-x: hidden; }
main::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%;
  border-left: 2px dashed var(--thread-line); opacity: .55; z-index: 0;
}
main > section { position: relative; z-index: 1; }

/* ---------- top bar ---------- */
.top {
  position: sticky; top: 0; z-index: 50;
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--space-3) var(--space-6);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.wordmark {
  display: flex; align-items: center; gap: 10px; text-decoration: none;
  color: var(--ink); font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: 19px; letter-spacing: var(--tracking-tight);
}
.wordmark svg { width: 38px; color: var(--thread); }
.top nav { display: flex; gap: var(--space-5); align-items: center; }
.top nav a {
  text-decoration: none; color: var(--ink-2); font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}
.top nav a:hover { color: var(--ink); }
.cta-small {
  background: var(--action); color: var(--action-ink) !important;
  padding: 7px 16px; border-radius: var(--r-md); font-weight: var(--fw-semi) !important;
}
.cta-small:hover { background: var(--action-hover); }

/* ---------- hero ---------- */
.hero { text-align: center; padding: calc(var(--space-16) + 20px) var(--space-6) var(--space-16); background: var(--card); border-bottom: 1px solid var(--line); }
.kicker {
  font-family: var(--font-mono); font-size: var(--fs-micro);
  letter-spacing: var(--tracking-label); color: var(--thread);
  margin-bottom: var(--space-5);
}
.hero h1 {
  font-family: var(--font-display); font-size: clamp(40px, 7vw, 72px);
  line-height: var(--leading-tight); letter-spacing: var(--tracking-display);
  font-weight: var(--fw-black);
}
.hero h1 em {
  font-style: normal; position: relative; white-space: nowrap;
}
.hero h1 em::after {
  content: ""; position: absolute; left: 2%; right: 2%; bottom: 6px; height: 4px;
  background: var(--thread); border-radius: 2px; opacity: .9;
}
.lede {
  max-width: 640px; margin: var(--space-6) auto 0; font-size: 17px;
  line-height: var(--leading-base); color: var(--ink-2);
}
.lede strong { color: var(--ink); }
.hero-cta { margin-top: var(--space-8); display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }
.btn-primary {
  display: inline-block; background: var(--action); color: var(--action-ink);
  text-decoration: none; font-weight: var(--fw-semi); font-size: 15px;
  padding: 13px 28px; border-radius: var(--r-md);
}
.btn-primary:hover { background: var(--action-hover); }
.btn-ghost {
  display: inline-block; color: var(--ink-2); text-decoration: none;
  font-weight: var(--fw-medium); font-size: 15px; padding: 13px 20px;
  border: 1px solid var(--line-3); border-radius: var(--r-md); background: var(--card);
}
.btn-ghost:hover { border-color: var(--ink-3); color: var(--ink); }
.hero-note {
  margin-top: var(--space-5); font-family: var(--font-mono);
  font-size: var(--fs-micro); letter-spacing: .04em; color: var(--ink-3);
}

/* ---------- promise ---------- */
.promise { padding: var(--space-16) var(--space-6); display: flex; justify-content: center; }
.promise blockquote {
  max-width: 680px; text-align: center; background: var(--thread-paper);
  border: 1px solid var(--thread-line); border-radius: var(--r-xl);
  padding: var(--space-10) var(--space-8);
}
.promise p {
  font-family: var(--font-display); font-size: clamp(20px, 3vw, 28px);
  line-height: var(--leading-snug); letter-spacing: var(--tracking-tight);
  font-weight: var(--fw-semi);
}
.promise em { font-style: normal; border-bottom: 3px solid var(--thread); }
.promise footer { margin-top: var(--space-5); font-size: var(--fs-sm); color: var(--ink-3); }

/* ---------- how ---------- */
.how, .product, .manifesto, .faq { max-width: 880px; margin: 0 auto; padding: var(--space-16) var(--space-6); }
h2 {
  font-family: var(--font-display); font-size: var(--fs-h1);
  letter-spacing: var(--tracking-tight); font-weight: var(--fw-bold);
  margin-bottom: var(--space-8); text-align: center;
}
.steps { list-style: none; display: grid; gap: var(--space-6); }
.steps li {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--space-6) var(--space-8); box-shadow: var(--shadow-sm);
}
.step-n {
  font-family: var(--font-mono); font-size: var(--fs-micro);
  letter-spacing: var(--tracking-label); color: var(--thread);
}
.steps h3 { font-family: var(--font-display); font-size: var(--fs-h2); margin: var(--space-2) 0 var(--space-3); }
.steps p { color: var(--ink-2); }
.mono { font-family: var(--font-mono); font-size: .92em; background: var(--sunken); padding: 1px 6px; border-radius: var(--r-xs); }

/* ---------- product tiers ---------- */
.tiers { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.tier {
  background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-lg);
  padding: var(--space-8); box-shadow: var(--shadow-sm);
}
.tier-managed { border: 1.5px solid var(--ink); position: relative; }
.tier h3 { font-family: var(--font-display); font-size: 22px; }
.tier-tag {
  font-family: var(--font-mono); font-size: var(--fs-micro);
  letter-spacing: var(--tracking-label); color: var(--thread);
  margin: var(--space-1) 0 var(--space-5);
}
.tier ul { list-style: none; display: grid; gap: var(--space-3); }
.tier li { padding-left: var(--space-5); position: relative; color: var(--ink-2); font-size: var(--fs-sm); }
.tier li::before {
  content: ""; position: absolute; left: 0; top: .55em; width: 10px;
  border-top: 2px dashed var(--thread); opacity: .8;
}
.tier-note { margin-top: var(--space-5); font-size: var(--fs-data); color: var(--ink-3); border-top: 1px solid var(--line); padding-top: var(--space-4); }

/* ---------- manifesto ---------- */
.manifesto { max-width: 720px; }
.mani-body { display: grid; gap: var(--space-6); font-size: 16px; line-height: var(--leading-reading); color: var(--ink-2); }
.mani-body strong { color: var(--ink); font-weight: var(--fw-semi); }
.mani-close {
  text-align: center; font-family: var(--font-display);
  font-size: var(--fs-h2); color: var(--ink); font-weight: var(--fw-semi);
  padding-top: var(--space-4);
}
.thread-word { color: var(--thread); font-weight: var(--fw-black); }

/* ---------- open protocol strip ---------- */
.openproto { background: var(--rail); color: var(--rail-ink); padding: var(--space-12) var(--space-6); }
.openproto > div { max-width: 720px; margin: 0 auto; text-align: center; }
.openproto h3 {
  font-family: var(--font-display); color: var(--rail-ink-strong);
  font-size: var(--fs-h2); margin-bottom: var(--space-4);
}
.openproto a { color: var(--rail-ink-strong); }

/* ---------- faq ---------- */
.faq { max-width: 720px; }
.faq details {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--space-4) var(--space-5); margin-bottom: var(--space-3);
}
.faq summary {
  cursor: pointer; font-weight: var(--fw-semi); font-size: 15px;
  font-family: var(--font-display); letter-spacing: var(--tracking-tight);
  list-style: none; position: relative; padding-left: var(--space-5);
}
.faq summary::before {
  content: ""; position: absolute; left: 0; top: .5em; width: 12px;
  border-top: 2px dashed var(--thread);
  transition: transform .15s;
}
.faq details[open] summary::before { transform: rotate(90deg); }
.faq details p { margin-top: var(--space-3); color: var(--ink-2); font-size: var(--fs-sm); line-height: var(--leading-base); }

/* ---------- closing ---------- */
.closing {
  text-align: center; padding: var(--space-16) var(--space-6);
  background: var(--card); border-top: 1px solid var(--line);
}
.closing h2 { font-size: clamp(30px, 5vw, 46px); letter-spacing: var(--tracking-display); margin-bottom: var(--space-6); }

/* ---------- footer ---------- */
.foot {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-3);
  padding: var(--space-6); background: var(--rail); color: var(--rail-mut);
  font-size: var(--fs-data);
}
.foot > div { display: flex; align-items: center; gap: 10px; }
.foot svg { color: var(--thread); }
.foot a { color: var(--rail-ink); text-decoration: none; }
.foot-links { display: flex; gap: 8px; align-items: center; }

/* ---------- responsive ---------- */
@media (max-width: 760px) {
  main::before { left: 24px; }
  .top nav a:not(.cta-small) { display: none; }
  .tiers { grid-template-columns: 1fr; }
  .hero { padding-top: var(--space-12); }
}