/* Guide leaf page styles */

.ghero {
  position: relative; background: var(--forest); color: #fff;
  padding: 56px 40px 72px; overflow: hidden;
  border-bottom: 1px solid var(--forest-2);
}
.ghero__bg {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 80px 80px;
}
.ghero__inner { position: relative; max-width: 1400px; margin: 0 auto; }
.ghero__meta {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.18em;
  color: var(--pistachio); margin-bottom: 28px;
}
.ghero__num {
  font-size: 10px; color: var(--forest-ink); background: var(--mint);
  padding: 3px 8px; font-weight: 700;
}
.ghero__bar { width: 40px; height: 1px; background: var(--mint); }
.ghero__label { color: var(--mint); font-weight: 700; }
.ghero__dot { color: var(--forest-2); }
.ghero__h1 {
  font-family: var(--ff-display); font-weight: 700;
  font-size: clamp(44px, 5.2vw, 80px); line-height: 1;
  letter-spacing: -0.035em; margin: 0 0 20px; max-width: 1100px;
}
.ghero__sub {
  font-family: var(--ff-editorial); font-style: italic; font-weight: 400;
  font-size: clamp(20px, 1.8vw, 26px); line-height: 1.35;
  color: var(--mint); max-width: 820px; margin: 0;
}

/* body */
.gbody { padding: 64px 40px 80px; background: var(--paper); }
.gbody__grid {
  max-width: 1400px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 400px; gap: 56px;
  align-items: start;
}
.gbody__main { max-width: 780px; }
.gbody__kicker {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.22em;
  color: var(--forest); margin-bottom: 20px;
}
.gbody__kicker .bar { width: 28px; height: 2px; background: var(--mint); }
.gbody__lead {
  font-family: var(--ff-editorial); font-weight: 500;
  font-size: 24px; line-height: 1.45; letter-spacing: -0.01em;
  color: var(--ink); margin: 0 0 48px;
}

.gbody__steps {
  list-style: none; padding: 0; margin: 0 0 48px;
  border-top: 1px solid var(--forest);
}
.gstep {
  display: grid; grid-template-columns: 140px 1fr; gap: 32px;
  padding: 28px 0; border-bottom: 1px solid var(--line);
}
.gstep:last-child { border-bottom: 1px solid var(--forest); }
.gstep__num {
  font-family: var(--ff-mono); font-size: 12px; letter-spacing: 0.24em;
  color: var(--forest); font-weight: 700;
  padding-top: 4px;
}
.gstep__h {
  font-family: var(--ff-display); font-weight: 700;
  font-size: 22px; line-height: 1.25; letter-spacing: -0.02em;
  margin: 0 0 10px; color: var(--ink);
}
.gstep__p {
  font-family: var(--ff-body); font-weight: 400;
  font-size: 16px; line-height: 1.6; color: var(--ink-2); margin: 0;
}

.gbody__pull {
  padding: 28px 32px; background: var(--fog);
  border-left: 3px solid var(--forest);
  margin: 0 0 40px;
}
.gbody__pull-k {
  font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.22em;
  color: var(--forest); margin-bottom: 10px;
}
.gbody__pull p {
  font-family: var(--ff-editorial); font-style: italic;
  font-size: 20px; line-height: 1.4; color: var(--ink); margin: 0;
}

.gbody__actions {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  margin-bottom: 56px;
}
.gbody__sharekey {
  margin-left: auto; font-family: var(--ff-mono); font-size: 11px;
  letter-spacing: 0.16em; color: var(--mute);
}

.gbody__strip {
  display: grid; grid-template-columns: 1fr auto;
  padding: 16px 0; margin-bottom: 32px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.gbody__strip-l, .gbody__strip-r { display: flex; flex-direction: column; gap: 4px; }
.gbody__strip-r { text-align: right; }
.gbody__strip-k {
  font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.22em;
  color: var(--mute);
}
.gbody__strip-v {
  font-family: var(--ff-mono); font-size: 12px; letter-spacing: 0.14em;
  color: var(--forest); font-weight: 600;
}

.gbody__nav {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border-top: 1px solid var(--forest);
}
.gbody__nav a {
  padding: 20px 24px; border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 6px; cursor: pointer;
}
.gbody__nav a:last-child { border-right: 0; }
.gbody__nav a:hover { background: var(--fog); }
.gbody__nav-k {
  font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.2em;
  color: var(--mute);
}
.gbody__nav-t {
  font-family: var(--ff-display); font-weight: 700; font-size: 16px;
  line-height: 1.25; letter-spacing: -0.015em; color: var(--ink);
}
.gbody__nav-r { text-align: right; align-items: flex-end; }

/* sidebar */
.gbody__side {
  display: flex; flex-direction: column; gap: 24px;
  position: sticky; top: 136px;
}
.gfigs {
  background: var(--forest); color: #fff; padding: 28px;
  border: 1px solid var(--mint);
}
.gfigs__k {
  font-family: var(--ff-mono); font-size: 12px; letter-spacing: 0.24em;
  color: var(--mint); font-weight: 700; margin-bottom: 4px;
}
.gfigs__sub {
  font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.18em;
  color: var(--pistachio); margin-bottom: 24px;
  padding-bottom: 16px; border-bottom: 1px solid rgba(178,211,194,0.3);
}
.gfig {
  padding: 18px 0; border-bottom: 1px dashed rgba(178,211,194,0.25);
  display: grid; grid-template-columns: 1fr auto; align-items: baseline;
  column-gap: 16px; row-gap: 4px;
}
.gfig:last-of-type { border-bottom: 0; }
.gfig__k {
  font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.22em;
  color: var(--pistachio); grid-row: 1; grid-column: 1;
}
.gfig__v {
  grid-row: 1; grid-column: 2;
  font-family: var(--ff-mono); font-size: 34px; font-weight: 500;
  color: #fff; letter-spacing: -0.02em; text-align: right; line-height: 1;
}
.gfig__d {
  grid-row: 2; grid-column: 1 / span 2;
  font-size: 12px; color: var(--pistachio-2); opacity: 0.75; margin-top: 4px;
}
.gfigs__foot {
  margin-top: 20px; padding-top: 14px;
  border-top: 1px solid rgba(178,211,194,0.3);
  display: flex; justify-content: space-between;
  font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.18em;
  color: var(--pistachio);
}
.gfigs__foot-v { color: var(--mint); }

.gside-block {
  background: var(--paper); border: 1px solid var(--forest);
  padding: 20px;
}
.gside-block--mint { background: var(--mint); border-color: var(--mint); color: var(--forest-ink); }
.gside-block__k {
  font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.22em;
  color: var(--forest); font-weight: 700; margin-bottom: 16px;
  padding-bottom: 10px; border-bottom: 1px solid var(--line);
}
.gside-block--mint .gside-block__k { border-bottom-color: rgba(1,50,32,0.3); }
.gside-block ul { list-style: none; padding: 0; margin: 0; }
.gside-block li { border-top: 1px solid var(--line); }
.gside-block li:first-child { border-top: 0; }
.gside-block li a {
  display: grid; grid-template-columns: 28px 1fr; gap: 12px;
  padding: 12px 0; align-items: start; cursor: pointer;
}
.gside-block__idx {
  font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.18em;
  color: var(--mute); padding-top: 3px;
}
.gside-block__t {
  font-family: var(--ff-display); font-weight: 600; font-size: 14px;
  line-height: 1.3; color: var(--ink); letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.gside-block li a:hover .gside-block__t { color: var(--forest); }
.gside-block__r {
  font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.16em;
  color: var(--mute);
}
.gside-block--mint p {
  font-family: var(--ff-editorial); font-size: 14px; line-height: 1.5;
  color: var(--forest-ink); margin: 0 0 16px;
}
.gside-block__cta {
  display: block; font-family: var(--ff-mono); font-size: 11px;
  font-weight: 700; letter-spacing: 0.16em; color: var(--forest-ink);
  padding-top: 12px; border-top: 1px solid rgba(1,50,32,0.3);
  cursor: pointer;
}

/* author */
.gauthor { padding: 100px 40px; }
.gauthor--personal { background: var(--fog-2); color: var(--ink); }
.gauthor--business { background: var(--forest); color: #fff; }
.gauthor__inner {
  max-width: 1400px; margin: 0 auto;
  display: grid; grid-template-columns: 320px 1fr; gap: 56px; align-items: start;
}
.gauthor__pic {
  width: 320px; height: 380px; position: relative;
  border: 1px solid var(--forest);
}
.gauthor__pic--personal {
  background: var(--pistachio-2);
  background-image: repeating-linear-gradient(45deg, transparent 0 10px, rgba(1,50,32,0.06) 10px 11px);
}
.gauthor__pic--business {
  background: var(--forest-2); border-color: var(--mint);
  background-image: repeating-linear-gradient(45deg, transparent 0 10px, rgba(153,237,195,0.08) 10px 11px);
}
.gauthor__pic-tag {
  position: absolute; bottom: 12px; left: 12px;
  font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.18em;
  color: var(--forest); background: var(--paper); padding: 4px 8px;
}
.gauthor--business .gauthor__pic-tag { background: var(--mint); }

.gauthor__body { padding-top: 12px; }
.gauthor__kicker {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.22em;
  color: var(--forest); margin-bottom: 20px;
}
.gauthor__kicker .bar { width: 28px; height: 2px; background: var(--forest); }
.gauthor--business .gauthor__kicker { color: var(--mint); }
.gauthor--business .gauthor__kicker .bar { background: var(--mint); }

.gauthor__name {
  font-family: var(--ff-display); font-weight: 700;
  font-size: 64px; line-height: 1; letter-spacing: -0.035em;
  margin: 0 0 8px;
}
.gauthor__role {
  font-family: var(--ff-mono); font-size: 12px; letter-spacing: 0.14em;
  color: var(--mute); margin-bottom: 20px;
}
.gauthor--business .gauthor__role { color: var(--pistachio); }
.gauthor__bio {
  font-family: var(--ff-editorial); font-size: 17px; line-height: 1.55;
  color: var(--ink-2); margin: 0 0 28px; max-width: 720px;
}
.gauthor--business .gauthor__bio { color: var(--pistachio-2); }

.gauthor__creds {
  display: grid; grid-template-columns: repeat(4, 1fr); margin: 0 0 28px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.gauthor--business .gauthor__creds { border-color: rgba(178,211,194,0.3); }
.gauthor__creds > div {
  padding: 12px 16px 12px 0; border-right: 1px solid var(--line);
}
.gauthor--business .gauthor__creds > div { border-right-color: rgba(178,211,194,0.3); }
.gauthor__creds > div:nth-child(n+2) { padding-left: 16px; }
.gauthor__creds > div:last-child { border-right: 0; }
.gauthor__creds dt {
  font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.2em;
  color: var(--mute); margin-bottom: 6px;
}
.gauthor--business .gauthor__creds dt { color: var(--pistachio); }
.gauthor__creds dd {
  font-family: var(--ff-mono); font-size: 18px; font-weight: 600;
  color: var(--forest); margin: 0;
}
.gauthor--business .gauthor__creds dd { color: #fff; }
.gauthor__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.gauthor--business .btn--primary { background: var(--mint); color: var(--forest-ink); border-color: var(--mint); }
.gauthor--business .btn--ghost { color: #fff; border-color: var(--mint); }

/* bottom nav */
.gnav { background: var(--paper); border-top: 1px solid var(--forest); border-bottom: 1px solid var(--forest); }
.gnav__inner {
  max-width: 1400px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr;
}
.gnav__inner a {
  padding: 24px 40px; cursor: pointer;
  display: flex; align-items: center; gap: 12px;
  font-family: var(--ff-mono); font-size: 12px; letter-spacing: 0.2em;
  font-weight: 700; color: var(--forest);
}
.gnav__back { border-right: 1px solid var(--line); }
.gnav__next { justify-content: flex-end; text-align: right; }
.gnav__inner a:hover { background: var(--forest); color: var(--mint); }
.gnav__arr { font-size: 16px; }