/* How I close: the MEDDPICC cycle as a board of bulbs, eight rows of takes, the industries line. */
/* the scroll builds the scene: the sticky stage holds the screen for about 1.2 screens of scrolling */
#close { height: 220vh; }
.is-reduced #close { height: 160vh; }
#close .stage {
  display: flex; flex-direction: column; justify-content: center;
  gap: clamp(12px, 2.8vh, 32px);
  padding: max(72px, 8vh) var(--pad-r) clamp(16px, 3vh, 36px) var(--pad-l);
}
#close .c-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
#close .c-sub { text-align: right; font-weight: 600; letter-spacing: -0.02em; line-height: 1.18; font-size: clamp(19px, 1.9vw, 30px); color: var(--soft); }

/* the board: a canvas a hair wider than the column so the outer bulb rings never clip */
#close .c-board { position: relative; }
#close .c-canvas { width: calc(100% + 8px); margin: 0 -4px; height: 220px; }

#close .c-rows { list-style: none; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: 18px; }
#close .c-row { position: relative; padding-top: 16px; --h: 0; opacity: calc(var(--e, 1) * var(--x, 1)); }
#close .c-hl { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: #fff; opacity: calc(.26 + .6 * var(--h)); transform-origin: 0 50%; }
#close .c-bu { position: absolute; left: 0; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--bulb); opacity: calc(.6 + .4 * var(--h)); }
#close .c-row[data-c="r"] .c-bu { background: var(--bulb-red); }
#close .c-row[data-c="c"] .c-bu { background: var(--bulb-cyan); }
#close .c-k { display: none; }
#close .c-n { display: block; font-size: 15px; line-height: 1.25; font-weight: 500; color: var(--soft); margin-bottom: 8px; letter-spacing: -0.005em; white-space: nowrap; opacity: calc(.78 + .22 * var(--h)); }
#close .c-t { display: block; font-weight: 600; letter-spacing: -0.015em; line-height: 1.22; font-size: clamp(17px, 1.5vw, 24px); color: var(--ink); text-wrap: balance; opacity: calc(.74 + .26 * var(--h)); }

#close .c-ind { position: relative; opacity: var(--x, 1); display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .5em; row-gap: 2px; padding-top: clamp(14px, 2.2vh, 24px); font-weight: 600; letter-spacing: -0.02em; font-size: clamp(17px, 1.75vw, 28px); line-height: 1.3; }
#close .c-rule { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line); transform-origin: 0 50%; }
#close .c-ind-l { color: var(--mute); font-weight: 500; }
#close .c-words { color: var(--ink); }

/* a taller scene that scrolls normally when the content cannot fit one screen (set from JS, never clipped) */
#close.is-flow { height: auto; }
#close.is-flow .stage { position: relative; height: auto; min-height: 100vh; min-height: 100svh; overflow: visible; justify-content: flex-start; padding-top: 92px; padding-bottom: 72px; gap: 22px; }

/* phones and tablets: the compact board stays pinned under the nav while the rows scroll beneath it */
#close.is-pin .c-board { position: sticky; top: var(--c-top, 74px); z-index: 3; }

@media (max-width: 1199px) {
  #close .stage { padding-top: max(76px, 8vh); gap: clamp(12px, 2vh, 22px); }
  #close .c-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  #close .c-title { font-size: clamp(34px, 6vw, 56px); }
  #close .c-sub { text-align: left; font-size: clamp(17px, 2.4vw, 24px); }
  #close .c-rows { grid-template-columns: 1fr; }
  #close .c-row { display: grid; grid-template-columns: 22px 190px 1fr; align-items: baseline; padding: 13px 0 12px; column-gap: 10px; min-height: 52px; }
  #close .c-bu { display: none; }
  #close .c-k { display: block; font-weight: 800; font-size: 16px; color: rgba(243, 245, 248, calc(.7 + .3 * var(--h))); }
  #close .c-n { font-size: 15px; margin: 0; white-space: normal; text-wrap: balance; }
  #close .c-t { font-size: clamp(16px, 2vw, 21px); line-height: 1.25; text-wrap: pretty; }
  #close .c-ind { font-size: clamp(16px, 2.3vw, 24px); }
}
@media (max-width: 600px) {
  #close.is-flow .stage { padding-top: 88px; padding-bottom: 64px; gap: 20px; }
  #close .c-row { grid-template-columns: 20px 122px 1fr; column-gap: 8px; padding: 12px 0 11px; min-height: 66px; align-content: center; }
  #close .c-n { font-size: 14px; line-height: 1.25; }
  #close .c-t { font-size: 16px; }
  #close .c-ind { flex-direction: column; row-gap: 4px; font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) { #close .c-row, #close .c-hl, #close .c-bu { transition: none; } }