/* cybee v3 · S9 Close (track T6, prefix close-). Every class starts with close-; shared cy- primitives come from css/foundation.css.
   Spec: DIRECTION-v3.md §3 S9. DS source: SIG 710 to 717 (rings close: bottom scrim, Machina close line, lockup 120),
   WEB 221 to 227 and STA css 130 to 133 (command on night), c.1 rings.
   Ground night #0A0A0B (= the canvas dark ground, g.27), hue Signal lift only, the one living thing is the rings canvas.
   No JS: no canvas paint (the night ground carries it), Copy hidden by foundation, the phone button is a mailto: link. */

/* --close-band: the minimum free band above the headline, where the rings hub sits (s9-close.js centres the hub in it).
   With the command, steps and tag line under the headline, SIG's cy .26 would put the glowing hub behind "client". */
.close{--close-band:clamp(150px,19svh,240px);position:relative;isolation:isolate;overflow:hidden;box-sizing:border-box;
  display:flex;align-items:flex-end;justify-content:center;
  min-height:clamp(760px,92svh,920px);padding:var(--close-band) 0 96px;
  background:var(--pg-night);color:var(--pg-night-ink)}

/* the rings canvas and the SIG 712 bottom scrim in night rgb */
.close-field{position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%;pointer-events:none}
.close::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,10,11,0) 38%,rgba(10,10,11,.92) 66%,#0A0A0B 100%)}

/* content: centred, the text blocks left aligned inside a 560px column */
.close-in{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center}
.close-title{width:100%;text-align:center;color:var(--pg-night-ink)}
.close-fade{display:block}

.close-cmdgroup{margin-top:40px;max-width:100%;min-width:0;display:flex;flex-direction:column;align-items:center}
.close-copyfail{display:none;margin-top:12px;font-size:14px;line-height:1.5;color:var(--pg-night-2);text-align:center}
[data-copy="failed"]>.close-copyfail{display:block}

.close-tags{box-sizing:border-box;width:min(560px,100%);margin-top:24px;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;
  font-family:var(--font-body);font-size:14px;line-height:1.5;color:var(--pg-night-2)}
.close-nw{white-space:nowrap}
.close-script{position:relative;font-size:14px;line-height:1.5}
.close-script::after{content:"";position:absolute;left:-4px;right:-4px;top:-12px;bottom:-12px}   /* 44px target */

.close-lockup{--cy-wordmark-width:120px;--wordmark:#2757C9;margin-top:48px}

/* phones: 640 min height, the three line H2, the command full width, the Send button, lockup 96 */
@media (max-width:767px){
  .close{--close-band:152px;min-height:640px;padding-bottom:52px}
  /* the phone section is taller than it is wide, so SIG's 38 to 66% scrim would leave a full width ring edge of the still frame
     under the Send button; here the scrim is solid from the command down (the TG8 intent: the command on the solid scrim) */
  .close::before{background:linear-gradient(180deg,rgba(10,10,11,0) 26%,rgba(10,10,11,.92) 38%,#0A0A0B 48%)}
  .close-l1{display:block}
  .close-cmdgroup,.close-cmd{width:100%}
  .close-send{margin-top:12px}
  .close-lockup{--cy-wordmark-width:96px}
}
/* 360 wide: 43px keeps "Your next client" on one line (324px at 44px, 320px of room) */
@media (max-width:374px){.close-title{font-size:43px}}

/* novice-20 (28 Sep): at 430 and narrower the two phrases stack and the "·" between them goes, so no line starts or ends on a dot
   (360, 375, 390, 430). The landing S9 and the close include share this markup. */
.close-sep{white-space:nowrap}
@media (max-width:430px){
  .close-tagline{display:flex;flex-direction:column;gap:4px}
  .close-sep{display:none}
}
/* step 3 (29 Sep 2026, option A): the close band says where the line runs and that you keep going there, in one line under the command */
.close-where{box-sizing:border-box;width:min(560px,100%);margin-top:24px;text-align:center;font-family:var(--font-body);font-size:17px;line-height:1.55;
  color:var(--pg-night-2);text-wrap:pretty}
.close-where-s{font-weight:500;color:var(--pg-night-ink)}
.close-where-2{white-space:nowrap}