/* Invite kit: a two-pane workbench on paper. Left, who is sending. Right, the finished messages. */
.kit-header{max-width:1180px;margin:auto;padding:24px 20px;display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid var(--line)}
.kit-header .brand{font-size:32px}.kit-header>a:last-child{font-size:14px;color:var(--ink-2)}
.kit{max-width:1180px;margin:0 auto;padding:40px 20px 80px;color:var(--ink)}
.kit :focus-visible{outline:3px solid var(--teal);outline-offset:3px}
.kit-top{display:grid;gap:14px;padding-bottom:32px;border-bottom:1px solid var(--line)}
.kit-eyebrow{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font:500 12px/1.3 var(--f-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.kit-eyebrow b{font-weight:500;color:var(--ink);background:var(--coral-soft);padding:4px 10px;border-radius:99px}
.kit h1{margin:0;font:600 var(--t-display)/.94 var(--f-display);text-wrap:balance}
.kit h1 i{font-style:normal;color:var(--coral)}
.kit-lede{margin:0;max-width:60ch;font-size:var(--t-lead);color:var(--ink-2)}
.kit-lede em{font:italic 500 1.15em/1 var(--f-display);color:var(--ink)}

.kit-bench{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:44px;padding-top:36px;align-items:start}
.kit-form{position:sticky;top:calc(env(safe-area-inset-top,0px) + 16px);display:grid;gap:18px}
.kit-step{font:500 12px/1.3 var(--f-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.kit h2{margin:0;font:600 var(--t-heading)/1.1 var(--f-display);text-wrap:balance}
.kit-field{display:grid;gap:6px}
.kit-field label{font:500 14px/1.3 var(--f-ui)}
.kit-field small{font-size:13px;line-height:1.45;color:var(--muted)}
.kit-field input,.kit-field textarea{width:100%;font:400 16px/1.4 var(--f-body);color:var(--ink);background:var(--chalk);border:1px solid var(--line);border-radius:6px;padding:10px 12px}
.kit-field textarea{min-height:68px;resize:vertical}
.kit-field input:focus,.kit-field textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-soft)}
.kit-roles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--chalk)}
.kit-roles input{position:absolute;opacity:0;pointer-events:none}
.kit-roles label{padding:11px 6px;text-align:center;font:500 14px/1.2 var(--f-ui);color:var(--ink-2);cursor:pointer;border-right:1px solid var(--line)}
.kit-roles label:last-of-type{border-right:0}
.kit-roles input:checked+label{background:var(--ink);color:var(--paper)}
.kit-roles input:focus-visible+label{outline:3px solid var(--teal);outline-offset:-3px}

.kit-out{display:grid;gap:48px;min-width:0}
.kit-group{display:grid;gap:16px;min-width:0}
.kit-group-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:12px}
.kit-group-head p{margin:0;max-width:52ch;font-size:15px;color:var(--muted)}
.kit-tabs{display:flex;flex-wrap:wrap;gap:6px}
.kit-tabs button{font:500 14px/1 var(--f-ui);padding:9px 13px;border-radius:99px;border:1px solid var(--line);background:transparent;color:var(--ink-2);cursor:pointer}
.kit-tabs button[aria-selected="true"]{background:var(--teal);border-color:var(--teal);color:#fff}
.kit-card{display:grid;gap:14px;min-width:0;padding:20px;background:var(--chalk);border:1px solid var(--line);border-radius:10px}
.kit-phone{display:grid;justify-items:end;gap:8px;padding:22px 18px;background:var(--tint);border-radius:22px}
.kit-bubble{max-width:min(440px,100%);padding:12px 15px;background:var(--teal);color:#fff;border-radius:18px 18px 4px 18px;white-space:pre-wrap;overflow-wrap:anywhere;font-size:16px;line-height:1.45}
.kit-delivered{font:500 12px/1.2 var(--f-ui);color:var(--muted)}
.kit-subject{padding-bottom:12px;border-bottom:1px solid var(--line);font-weight:600;overflow-wrap:anywhere}
.kit-subject span{color:var(--muted);font-weight:500}
.kit-pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:16px;line-height:1.55}
.kit-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.kit-count{font:500 13px/1 var(--f-ui);color:var(--muted);font-variant-numeric:tabular-nums}
.kit-count.is-over{color:#b43e2c}
.kit-btn{display:inline-flex;align-items:center;font:600 15px/1 var(--f-ui);padding:12px 17px;border-radius:6px;border:1px solid transparent;background:var(--coral);color:var(--ink);cursor:pointer;text-decoration:none}
.kit-btn--ghost{background:transparent;border-color:var(--line);color:var(--ink)}
.kit-btn--ghost:hover{border-color:var(--teal);color:var(--teal)}
.kit-btn.is-done{background:var(--teal);border-color:var(--teal);color:#fff}

.kit-follow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.kit-follow a{display:flex;align-items:center;gap:14px;min-height:44px;padding:18px 20px;border-radius:10px;background:var(--ink);color:var(--paper);text-decoration:none}
.kit-follow a:hover{background:var(--deep-2)}
.kit-follow b{font:600 clamp(22px,2.4vw,30px)/1 var(--f-display);overflow-wrap:anywhere}
.kit-follow svg{flex:none;width:28px;height:28px;fill:var(--coral)}
.kit-video{display:grid;gap:4px;padding:18px 20px;border:1px solid var(--line);border-left:4px solid var(--coral);border-radius:8px;background:var(--chalk);color:var(--ink);text-decoration:none}
.kit-video:hover{border-color:var(--teal)}
.kit-video b{font:600 22px/1.15 var(--f-display)}
.kit-video span{font:500 13px/1.3 var(--f-ui);color:var(--teal)}
.kit-also{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;font-size:15px;color:var(--muted)}
.kit-also span{margin-right:6px}
.kit-tips{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.kit-tips li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;color:var(--ink-2)}
.kit-tips li::before{content:"+";font:600 22px/1 var(--f-display);color:var(--coral)}

.kit-pass{display:grid;gap:16px;padding-top:32px;border-top:1px solid var(--line)}
.kit-pass h2{max-width:24ch;font-size:var(--t-title)}
.kit-handoff{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.kit-handoff h3{margin:0;font:600 17px/1.3 var(--f-body)}
.kit-note{margin:0;font-size:14px;line-height:1.5;color:var(--ink-2);white-space:pre-wrap;overflow-wrap:anywhere}
/* Modes: the buyer's kit (default, #guest) is simpler; #speaker and #team add the ticket link and the hand-off notes. */
body[data-mode="guest"] [data-show="crew"],body:not([data-mode="guest"]) [data-show="guest"]{display:none}
.kit-switch{margin:0;font-size:14px;color:var(--muted)}
.kit-switch a{color:var(--teal);font-weight:500}

/* Icons: one inline sprite. Every icon link has its own label and a 44 px target. */
.kit-sprite{position:absolute;width:0;height:0;overflow:hidden}
.kit-icon{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--chalk);color:var(--ink);text-decoration:none}
.kit-icon svg{width:20px;height:20px;fill:currentColor}
.kit-icon:hover{border-color:var(--teal);color:var(--teal)}
.kit-icon--quiet{background:transparent}

/* Ways to share: each one a card that opens on demand, closed to start. */
.kit-ways{display:grid;gap:10px;min-width:0}
.kit-ways h2{margin-bottom:8px}
.kit-way{min-width:0;border:1px solid var(--line);border-radius:10px;background:var(--chalk)}
.kit-way summary{display:grid;grid-template-columns:auto minmax(0,1fr) 28px;grid-template-rows:auto auto;column-gap:16px;align-items:center;min-height:64px;padding:12px 18px;cursor:pointer;list-style:none}
.kit-way summary::-webkit-details-marker{display:none}
.kit-way summary::after{content:"+";grid-column:3;grid-row:1 / span 2;justify-self:end;font:600 28px/1 var(--f-display);color:var(--coral)}
.kit-way[open] summary::after{content:"–"}
.kit-way summary:focus-visible{outline:3px solid var(--teal);outline-offset:-3px;border-radius:10px}
.kit-way-icons{grid-row:1 / span 2;display:flex;gap:4px;color:var(--teal)}
.kit-way-icons svg{width:22px;height:22px;fill:currentColor}
.kit-way-name{font:600 23px/1.1 var(--f-display)}
.kit-way-hint{font-size:14px;line-height:1.35;color:var(--muted)}
.kit-way-body{display:grid;gap:14px;min-width:0;padding:4px 18px 20px}
.kit-letter{min-width:0;overflow:hidden;border:1px solid var(--line);border-radius:6px}
.kit-letter table{max-width:100%}
.kit-status{min-height:1.4em;margin:2px 0 0;font:500 14px/1.4 var(--f-ui);color:var(--teal)}

/* Post this with it: one of the five pillar reels. */
.kit-media{display:grid;gap:14px;min-width:0}
.kit-reels{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.kit-reels input{position:absolute;opacity:0;pointer-events:none}
.kit-reels label{display:grid;gap:6px;cursor:pointer;font:500 12px/1.2 var(--f-ui);color:var(--ink-2);text-align:center}
.kit-reels img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:6px;border:3px solid transparent}
.kit-reels input:checked+label img{border-color:var(--coral)}
.kit-reels input:checked+label{color:var(--ink)}
.kit-reels input:focus-visible+label img{outline:3px solid var(--teal);outline-offset:2px}

/* After the share part: two other ways to bring someone, on a dark ground so the
   moving edge lights read exactly as they do on the home-page hero (PR #269). */
.kit-more{display:grid;gap:16px;margin-top:64px;padding:36px clamp(20px,4vw,48px) 44px;border-radius:12px;background:var(--deep);color:var(--mist)}
.kit-more .kit-step{color:var(--mist-dim)}
.kit-more h2{margin:0;font:600 var(--t-title)/1.05 var(--f-display);color:var(--paper)}
.kit-more-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 32px;margin-top:8px}
.kit-more-item{display:grid;gap:14px;align-content:start;justify-items:start}
.kit-more-item p{margin:0;max-width:40ch;font-size:16px;line-height:1.5;color:var(--mist)}
.kit-more .btn{min-width:200px}
.kit-more .btn.kit-lap--second{background:var(--teal-lt);border-color:var(--teal-lt);color:var(--ink-deep);box-shadow:0 12px 32px -18px rgba(127,203,214,.7)}
/* Same light as the hero: one soft cream light runs round each button's edge,
   half a lap apart, 3.8 seconds a lap; still for reduced motion. */
@property --hero-lap { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.kit-lap { position: relative; overflow: visible; }
.kit-lap::after { content: ""; position: absolute; inset: -2px; padding: 2px;
  border-radius: inherit; pointer-events: none;
  background: conic-gradient(from var(--hero-lap),
    rgba(244,241,233,0) 0deg 285deg, rgba(244,241,233,.4) 330deg, #F4F1E9 356deg, rgba(244,241,233,0) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  filter: drop-shadow(0 0 3px rgba(244,241,233,.5));
  animation: heroLapLow 3.8s linear infinite; }
.kit-lap.kit-lap--second::after { animation-name: heroLapHigh; }
@keyframes heroLapLow { from { --hero-lap: 184deg; } to { --hero-lap: 544deg; } }
@keyframes heroLapHigh { from { --hero-lap: 4deg; } to { --hero-lap: 364deg; } }
@media (prefers-reduced-motion: reduce) { .kit-lap::after { display: none; } }

.kit-footer{max-width:1180px;margin:0 auto;padding:24px 20px 40px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}

@media(max-width:900px){.kit-bench{grid-template-columns:minmax(0,1fr);gap:32px}.kit-form{position:static}.kit-handoff{grid-template-columns:minmax(0,1fr)}}
@media(max-width:520px){.kit-follow,.kit-more-grid{grid-template-columns:minmax(0,1fr)}.kit-more{margin-top:48px}.kit-more .btn{width:100%}.kit-header .brand{font-size:28px}.kit-reels{grid-template-columns:repeat(3,minmax(0,1fr))}.kit-way summary{padding:12px 14px;column-gap:12px}.kit-way-body{padding:4px 14px 18px}}
@media(prefers-reduced-motion:no-preference){.kit-btn,.kit-follow a,.kit-icon{transition:background-color .15s ease,border-color .15s ease,color .15s ease}}