/* Draft 1. StoryBrand. Layout on top of ../../assets/css/tokens.css.
   Token classes are extended here, never redefined. */

:root {
  --nav-logo-w: 140px;
}

/* ---------- Navigation ---------- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--nav-h);
  background: var(--c360-paper);
  border-bottom: 1px solid transparent;
  transition: border-color 160ms ease;
}
.site-nav.is-scrolled { border-bottom-color: var(--c360-line); }
.site-nav__inner { height: 100%; display: flex; align-items: center; gap: var(--s-8); }
.site-nav__brand { display: block; flex: none; }
/* Lockup 140 x 36: clear space is half the isotype height, 18px. The 72px bar leaves 18px above and below. */
.site-nav__brand img { width: var(--nav-logo-w); height: auto; }
.site-nav__links { margin-left: auto; }
.site-nav__links ul { display: flex; gap: var(--s-8); }
.site-nav__links a,
.site-footer a { text-decoration: none; }
.site-nav__links a {
  font-weight: 500;
  font-size: 15px;
  line-height: 1;
  color: var(--c360-ink);
  padding: var(--s-2) 0;
  border-bottom: 1px solid transparent;
  transition: border-color 160ms ease;
}
.site-nav__links a:hover { border-bottom-color: var(--c360-teal-ink); }
.site-nav__cta { flex: none; padding: 12px 24px; }
.site-nav__menu {
  display: none;
  margin-left: auto;
  background: none;
  border: 1px solid var(--c360-navy);
  border-radius: 999px;
  padding: 10px 20px;
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  color: var(--c360-navy);
  cursor: pointer;
}

@media (max-width: 1119px) {
  .site-nav__links { display: none; }
  .site-nav__cta { margin-left: auto; }
  .site-nav__menu { display: inline-flex; margin-left: 0; }
}
@media (max-width: 639px) {
  :root { --nav-logo-w: 132px; }
  .site-nav__cta { display: none; }
  .site-nav__menu { margin-left: auto; }
}

/* Phone menu: full-screen paper panel */
.menu-panel { position: fixed; inset: 0; z-index: 60; background: var(--c360-paper); overflow-y: auto; }
.menu-panel[hidden] { display: none; }
.menu-panel__inner { display: flex; flex-direction: column; min-height: 100%; padding-bottom: var(--s-12); }
.menu-panel__top { height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; }
.menu-panel__top img { width: 132px; height: auto; }
.menu-panel__close { display: inline-flex; }
.menu-panel__links { margin: var(--s-12) 0; }
.menu-panel__links li { border-top: 1px solid var(--c360-line); }
.menu-panel__links li:last-child { border-bottom: 1px solid var(--c360-line); }
.menu-panel__links a {
  display: block;
  padding: var(--s-4) 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 30px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--c360-ink);
  text-decoration: none;
}
.menu-panel__note { margin-top: var(--s-3); }
body.menu-open { overflow: hidden; }

/* ---------- Shared pieces ---------- */
.cta-pair { display: flex; flex-wrap: wrap; gap: var(--s-4); }
.cta-pair--section { margin-top: var(--s-12); }
.cta-note { margin-top: var(--s-4); }

/* Orbit nodes, from the isotype grammar (contract 4.7) */
.node { display: block; width: 14px; height: 14px; border-radius: 50%; background: var(--c360-steel); }
.node--teal { background: var(--c360-teal); }
.node--navy { background: var(--c360-navy); }
.node--steel { background: var(--c360-steel); }

/* ---------- 1. Hero ---------- */
.hero { display: flex; align-items: center; min-height: min(calc(88vh - var(--nav-h)), 828px); padding: var(--s-16) 0 var(--s-24); }
.hero__grid { align-items: center; row-gap: var(--s-12); }
.hero__copy { grid-column: 1 / span 7; }
.hero__copy .eyebrow + .display-1 { margin-top: var(--s-6); }
.hero__lead { margin-top: var(--s-6); max-width: 30em; }
.value-stack { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-8); margin-top: var(--s-8); }
.value-stack li { display: flex; align-items: center; gap: var(--s-3); font-weight: 500; font-size: 17px; line-height: 1.3; color: var(--c360-ink); }
.value-stack li::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--c360-steel); }
.hero .cta-pair { margin-top: var(--s-12); }
.hero__photo { grid-column: 8 / span 5; aspect-ratio: 4 / 5; }
.hero__photo img { object-position: 60% 50%; }

/* ---------- 2. Stakes ---------- */
.stakes { row-gap: var(--s-6); }
.stake { grid-column: span 4; display: flex; flex-direction: column; gap: var(--s-12); min-height: 240px; }
.stake .node { width: 12px; height: 12px; }
.stake .h3 { margin-top: auto; }
.stakes__close { margin-top: var(--s-12); max-width: 760px; color: var(--c360-ink); }

/* ---------- 3. Value proposition ---------- */
.value__grid { align-items: center; row-gap: var(--s-12); }
.value__photo { grid-column: 1 / span 5; aspect-ratio: 4 / 5; }
.value__photo img { object-position: 68% 50%; }
.value__copy { grid-column: 7 / span 6; }
.value__list li { padding: var(--s-6) 0; border-top: 1px solid var(--c360-line); }
.value__list li:last-child { border-bottom: 1px solid var(--c360-line); }
.value__list p { margin-top: var(--s-2); }

/* ---------- 4. Guide ---------- */
.guide__grid { align-items: start; row-gap: var(--s-12); }
.guide__portrait { grid-column: 1 / span 4; }
.guide__portrait figcaption { margin-top: var(--s-4); text-align: center; }
.guide__copy { grid-column: 6 / span 7; }
.guide__quote { margin: var(--s-12) 0 0; }
.guide__body { margin-top: var(--s-8); }
.guide__rule { margin: var(--s-12) 0 var(--s-6); }
.guide__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s-4) var(--s-8); }
.trust-strip span { white-space: nowrap; }
.trust-strip { font-weight: 500; font-size: 15px; line-height: 1.5; letter-spacing: 0.01em; color: var(--c360-muted); }

/* ---------- 5. Plan ---------- */
.plan { row-gap: var(--s-12); counter-reset: none; }
.plan__step { grid-column: span 4; position: relative; }
.plan__marker { position: relative; height: 14px; margin-bottom: var(--s-8); }
.plan__marker .node { position: relative; z-index: 1; }
/* Hairline connector from each node to the next one */
.plan__step:not(:last-child) .plan__marker::after {
  content: ""; position: absolute; top: 7px; left: 14px; right: -24px;
  border-top: 1px solid var(--c360-steel);
}
.plan__num { font-family: var(--font-display); font-weight: 500; font-size: 15px; line-height: 1; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; color: var(--c360-muted); }
.plan__step .h3 { margin-top: var(--s-3); }
.plan__step .h3 + p { margin-top: var(--s-3); }
.plan__close { margin-top: var(--s-16); padding-top: var(--s-8); border-top: 1px solid var(--c360-line); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s-4) var(--s-8); }
.plan__then { max-width: 760px; color: var(--c360-ink); font-weight: 500; }

/* ---------- 6. Menu of products ---------- */
.products { row-gap: var(--s-6); }
.product { grid-column: span 4; display: flex; flex-direction: column; }
.product__term { font-weight: 500; font-size: 15px; line-height: 1.5; color: var(--c360-muted); }
.product .h3 { margin-top: var(--s-3); }
.product .h3 + p { margin-top: var(--s-3); }
.product__price { margin-top: auto; padding-top: var(--s-6); }
.product__price::before { content: ""; display: block; border-top: 1px solid var(--c360-line); margin-bottom: var(--s-4); }

/* ---------- 7. Explanatory paragraph ---------- */
.explain__copy { grid-column: 1 / span 8; }
.explain__text { font-family: var(--font-display); font-weight: 500; font-size: 30px; line-height: 1.3; letter-spacing: -0.01em; color: var(--c360-ink); text-wrap: pretty; }
.explain__more { margin-top: var(--s-6); }
.explain__more summary { list-style: none; cursor: pointer; display: inline-block; }
.explain__more summary::-webkit-details-marker { display: none; }
.explain__more[open] summary { display: none; }
.explain__more p { max-width: 64ch; }
.explain__more p + p { margin-top: var(--s-4); }

/* ---------- 8. Lead generator (navy) ---------- */
.leadgen__grid { align-items: center; row-gap: var(--s-12); }
.leadgen__copy { grid-column: 1 / span 6; }
.leadgen__form { display: flex; gap: var(--s-3); max-width: 560px; }
.leadgen__form input {
  flex: 1; min-width: 0; height: 50px; padding: 0 var(--s-6);
  border-radius: 999px; border: 1px solid #fff; background: #fff; color: var(--c360-navy);
  font-size: 16px;
}
.leadgen__form input::placeholder { color: var(--c360-muted); }
.leadgen__note { margin-top: var(--s-4); color: var(--c360-steel); }
.leadgen__sheet { grid-column: 8 / span 5; }
.sheet { background: var(--c360-white); color: var(--c360-text); border-radius: var(--radius); padding: var(--s-8); }
.sheet__head { display: flex; align-items: center; gap: var(--s-4); padding-bottom: var(--s-6); border-bottom: 2px solid var(--c360-navy); font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 1.2; color: var(--c360-ink); }
.sheet__head img { width: 28px; height: 28px; }
.sheet__rows li, .sheet__constraint { display: flex; align-items: flex-end; gap: var(--s-4); height: 48px; font-size: 15px; line-height: 1; color: var(--c360-muted); }
.sheet__rows span, .sheet__constraint span { flex: none; width: 112px; padding-bottom: 6px; }
.sheet i { flex: 1; border-bottom: 1px solid var(--c360-line); margin-bottom: 6px; }
.sheet__constraint { margin-top: var(--s-4); color: var(--c360-ink); font-weight: 600; }
.sheet__constraint span { width: auto; }
.sheet__constraint i { border-bottom-color: var(--c360-navy); }

/* ---------- 9. Final CTA ---------- */
.final__inner { max-width: 760px; }
.final__line { margin-top: var(--s-6); }
.final .cta-pair { margin-top: var(--s-12); }
.final__demo { display: block; }

/* ---------- 10. Answers ---------- */
.answers__grid { align-items: start; row-gap: var(--s-12); }
.answers__head { grid-column: 1 / span 4; }
.answers__head .eyebrow + .h2 { margin-top: var(--s-4); }
.answers__list { grid-column: 5 / span 8; }
.faq details > div p { color: var(--c360-text); }

/* ---------- 11. Footer (slate) ---------- */
.site-footer { padding: var(--s-24) 0 var(--s-12); }
.site-footer__grid { row-gap: var(--s-12); }
/* Lockup 240 x 61: clear space is half the isotype height, 31px. 32px below. */
.site-footer__brand { grid-column: 1 / span 5; }
.site-footer__brand img { width: 240px; height: auto; }
.site-footer__desc { margin-top: var(--s-8); max-width: 40ch; color: #fff; }
.site-footer__col { grid-column: span 2; }
.site-footer__col:last-child { grid-column: span 3; }
.site-footer__title { font-family: var(--font-text); font-weight: 600; font-size: 15px; line-height: 1.5; color: #fff; }
.site-footer__col ul { margin-top: var(--s-4); }
.site-footer__col li + li { margin-top: var(--s-2); }
.site-footer__col a { font-size: 15px; line-height: 1.5; color: #fff; }
.site-footer a:hover { text-decoration: underline; text-decoration-color: var(--c360-teal); text-underline-offset: 4px; }
.site-footer__place { margin-top: var(--s-6); color: #fff; }
.site-footer__bottom { margin-top: var(--s-16); padding-top: var(--s-6); border-top: 1px solid rgb(255 255 255 / 16%); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-4); color: #fff; }
.site-footer__bottom ul { display: flex; gap: var(--s-6); }

/* ---------- Tablet ---------- */
@media (max-width: 1023px) {
  .hero { min-height: 0; padding: var(--s-12) 0 var(--s-16); }
  .hero__copy, .hero__photo { grid-column: 1 / -1; }
  .hero__photo { aspect-ratio: 3 / 2; }
  .stake { grid-column: span 8; min-height: 0; }
  .value__photo, .value__copy { grid-column: 1 / -1; }
  .value__photo { aspect-ratio: 3 / 2; }
  .guide__portrait { grid-column: 1 / span 3; }
  .guide__copy { grid-column: 1 / -1; }
  .plan__step, .product { grid-column: 1 / -1; }
  .explain__copy { grid-column: 1 / -1; }
  .leadgen__copy, .leadgen__sheet { grid-column: 1 / -1; }
  .leadgen__sheet { max-width: 480px; }
  .answers__head, .answers__list { grid-column: 1 / -1; }
  .site-footer__brand { grid-column: 1 / -1; }
  .site-footer__col, .site-footer__col:last-child { grid-column: span 2; }

  /* Plan steps stack: the connector runs down the left edge */
  .plan { row-gap: 0; }
  .plan__step { padding-left: var(--s-12); padding-bottom: var(--s-12); }
  .plan__step:last-child { padding-bottom: 0; }
  .plan__marker { position: absolute; left: 0; top: 0; bottom: 0; margin: 0; height: auto; }
  .plan__step:not(:last-child) .plan__marker::after { top: 14px; left: 7px; right: auto; bottom: 0; border-top: 0; border-left: 1px solid var(--c360-steel); }
}

/* ---------- Phone ---------- */
@media (max-width: 639px) {
  .hero { padding: var(--s-8) 0 var(--s-12); }
  .hero__lead { max-width: none; }
  .value-stack { flex-direction: column; gap: var(--s-3); margin-top: var(--s-6); }
  .hero .cta-pair { margin-top: var(--s-8); }
  .hero__photo { aspect-ratio: 4 / 3; border-radius: var(--radius); }
  .stake { grid-column: 1 / -1; gap: var(--s-6); padding: var(--s-6); }
  .card { padding: var(--s-6); }
  .value__photo { aspect-ratio: 4 / 3; }
  .guide__portrait { grid-column: 1 / span 3; max-width: 240px; }
  .guide__portrait figcaption { text-align: left; }
  .guide__quote { margin-top: var(--s-8); }
  .plan__close { flex-direction: column; }
  .explain__text { font-size: 22px; line-height: 1.4; }
  .leadgen__form { flex-direction: column; }
  .leadgen__form input { height: 50px; }
  .sheet { padding: var(--s-6); }
  .sheet__rows span { width: 96px; }
  .answers__head .eyebrow + .h2 { margin-top: var(--s-4); }
  .site-footer { padding-top: var(--s-16); }
  .site-footer__col { grid-column: span 2; }
  .site-footer__col:last-child { grid-column: 1 / -1; }
  .site-footer__bottom { margin-top: var(--s-12); }
}