/* ============================================================================
   INVITE BAND — "Lets create a super interface for you" (Figma 461-868 / 463-1630
   on Info, 469-2109 on Home, 2026-09-07). The red band, the line, the Desk
   footer's two buttons; the pointer stamps SMD logos on it (invite-paint.js).
   Shared by Info and Home. The band's beat above it is the page's to set.
   ========================================================================== */
/* ---- 7 · the invite (Figma 461-868 / 463-1630, 2026-09-07 — a test) ----
   A full-bleed red band, 400 tall at 1440: the line (General Sans 40 / 115%, white,
   centred) and, 19 below, the two buttons — the Desk footer's own — with the "/"
   between. Move the pointer over the band and you stamp SMD logos along the trail —
   the reference's stamp: the pill and its letters as a thin white outline, one
   impression overlapping the next — each held a moment and faded out, so the band
   never fills (invite-paint.js: p5.brush's pen through the bouquet engine, pooled).
   The copy and the buttons sit above the stamps. */
.info-invite{
  position:relative;margin-top:var(--section-gap);min-height:400px;box-sizing:border-box;padding:60px var(--margin);
  background:var(--red);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:19px;overflow:hidden;
}
.invite-paint{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;}
.invite-pool{position:absolute;left:0;top:0;width:1px;height:1px;overflow:hidden;visibility:hidden;pointer-events:none;}   /* the painter, while the pool is made */
.invite-title{position:relative;z-index:1;margin:0;font-family:'General Sans','Geist',sans-serif;font-weight:500;font-size:40px;line-height:1.15;letter-spacing:.01em;color:#fff;text-align:center;}
.invite-actions{position:relative;z-index:1;display:flex;align-items:center;gap:19px;}
.invite-actions .desk-footer__separator{font-family:'Tanker','Anton',sans-serif;font-weight:400;font-size:20px;line-height:1.2;letter-spacing:.01em;color:#fff;}


@media (max-width:640px){
  .invite-title{font-size:28px;} .invite-actions{flex-wrap:wrap;justify-content:center;}
}

/* ---- the contact state (Figma 495-15506) and the booking state (Figma 498-17160), 2026-09-08 —
   contact-copy.js / book-call.js. Markiian: "No moving." / "It should hug the content." Both states
   are OVERLAYS on the actions row, centred, crossfaded with the two buttons: nothing moves, nothing
   resizes. The cell is the header's — "key" at 50 % and the value, Tanker 15 / 18, white, on black
   10 %, 20 pad, 8 gap — in a strip (white 10 % + blur 8) that hugs it. ---- */
.invite-actions{position:relative;}
.invite-actions > .btn,.invite-actions > .desk-footer__separator{transition:opacity .12s ease,visibility 0s linear 0s;}
.invite-actions.is-contact > .btn,.invite-actions.is-contact > .desk-footer__separator,
.invite-actions.is-booking > .btn,.invite-actions.is-booking > .desk-footer__separator{opacity:0;visibility:hidden;transition:opacity .12s ease,visibility 0s linear .12s;}
.invite-layer{position:absolute;top:0;left:50%;height:100%;transform:translateX(-50%);display:flex;align-items:stretch;opacity:0;pointer-events:none;transition:opacity .16s ease .05s;}
.invite-actions.is-contact .invite-contact-layer,.invite-actions.is-booking .invite-book-layer{opacity:1;pointer-events:auto;}
.invite-layer[hidden]{display:none;}
/* the overlay hugs its content, not half the row: placed from the row's middle, an auto width
   was capped at the half to its right, so on a phone "Book a call · with Mark" broke in two
   (Markiian, 2026-10-15: "it doesn't need to be two rows") */
.invite-layer{width:max-content;max-width:calc(100vw - 2 * var(--margin));}
.info-invite .invite-book-tab{white-space:nowrap;}
.contact-strip{display:flex;align-self:stretch;background:rgba(255,255,255,.1);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);}
.info-invite .contact-cell{display:flex;align-items:center;justify-content:center;gap:8px;padding:0 20px;margin:0;border:0;background:rgba(0,0,0,.1);font-family:'Tanker','Anton',sans-serif;font-weight:400;font-size:15px;line-height:18px;letter-spacing:.01em;color:#fff;text-decoration:none;white-space:nowrap;cursor:pointer;}
.info-invite .contact-cell-k{opacity:.5;}
.info-invite button.contact-cell:hover .contact-cell-k,.info-invite button.contact-cell:focus-visible .contact-cell-k{opacity:.8;}
.info-invite .contact-cell:focus-visible{outline:2px solid #fff;outline-offset:-2px;}
/* the booking fold: the band keeps its top (the title's offset frozen into --invite-top) and spreads
   down — grid rows 0fr → 1fr on the expo easing — to hold Cal's 1040 white card and the email row */
.info-invite.is-booking{justify-content:flex-start;padding-top:var(--invite-top,143px);padding-bottom:var(--invite-top,143px);}
.invite-book{position:relative;z-index:1;display:grid;grid-template-rows:0fr;opacity:0;width:100%;justify-items:center;transition:grid-template-rows .6s var(--ease-out-expo),opacity .3s ease;}
.invite-book.is-open{grid-template-rows:1fr;opacity:1;}
.invite-book[hidden]{display:none;}
.invite-book-inner{min-height:0;overflow:hidden;display:flex;flex-direction:column;align-items:center;gap:19px;width:100%;}
.invite-cal-embed{width:min(1040px,100%);min-height:481px;background:#fff;box-sizing:border-box;border-radius:4px;overflow:hidden;}   /* 4 radius on the card (Markiian, 2026-09-08) */
.invite-cal-embed iframe{display:block;}
.invite-mail{display:flex;align-items:stretch;justify-content:center;max-width:100%;}
@media (max-width:640px){.invite-cal-embed{min-height:560px;}.info-invite .contact-cell{white-space:normal;text-align:center;}}
/* phone: the email row stays ONE line (Markiian, 2026-10-15: "it should fit in one line") — the strip
   hugs the email and the button sits beside it; the cell's Tanker goes 15 → 13 so the lead, the
   address and Copy fit across a 375 screen; below that the muted lead breaks first, never the address */
@media (max-width:640px){
  .invite-mail{flex-wrap:nowrap;width:100%;}
  .invite-mail .contact-strip{flex:0 1 auto;min-width:0;min-height:48px;}
  .invite-mail .contact-cell{padding:0 12px;gap:8px;font-size:13px;line-height:16px;}
  .invite-mail .contact-cell-k{white-space:normal;text-align:left;}
  .invite-mail .contact-cell-v{white-space:nowrap;}
  .invite-mail > .btn{flex:none;padding:0 14px;}
}
@media (prefers-reduced-motion:reduce){.invite-actions > .btn,.invite-actions > .desk-footer__separator,.invite-layer,.invite-book{transition:none;}}