/* Invitation pages reuse MotionGit's shared colors, type, buttons and icons. */
.creator-invite {
  max-width: 1240px;
  padding-top: clamp(112px, 12vw, 160px);
  padding-bottom: 88px;
}
.creator-invite svg { width: 16px; height: 16px; flex: 0 0 auto; }
.creator-invite .lg-lg svg { width: 22px; height: 22px; }
.creator-invite .ci-eyebrow { margin: 0 0 24px; font-size: 11px; letter-spacing: .08em; line-height: 1.6; }
.ci-status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--purple); box-shadow: 0 0 12px rgba(163,113,247,.4); }
.ci-hero { position: relative; display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); align-items: center; gap: 56px; padding-bottom: 88px; isolation: isolate; }
.ci-hero::before { content: ""; position: absolute; inset: -90px 0 -20px 25%; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 80% 40%, rgba(163,113,247,.09), transparent 62%), radial-gradient(ellipse at 45% 15%, rgba(88,166,255,.05), transparent 60%); }
.ci-hero h1 { font-size: clamp(36px,4.5vw,60px); letter-spacing: -.04em; line-height: 1.16; margin: 0 0 26px; }
.ci-hero-copy > p:not(.ci-eyebrow):not(.ci-hero-lead):not(.ci-hero-note) { color: var(--muted); font-size: 15px; line-height: 1.9; max-width: 43em; }
.ci-hero-copy > .ci-hero-lead { color: var(--fg-2); font-size: 19px; line-height: 1.65; margin: 0 0 18px; }
.ci-hero .form-actions { gap: 12px; margin: 28px 0 22px; }
.ci-hero-copy > .ci-hero-note { display: flex; align-items: flex-start; gap: 9px; font-size: 12px; line-height: 1.8; color: var(--subtle); margin: 0; }
.ci-hero-note svg { margin-top: 3px; }
.ci-package { position: relative; min-width: 0; padding: 26px; border: 1px solid var(--border); border-radius: 20px; background: linear-gradient(150deg,rgba(22,27,34,.96),rgba(13,17,23,.92)); box-shadow: 0 32px 70px -40px rgba(0,0,0,.9), inset 0 1px 0 rgba(240,246,252,.05); overflow: hidden; }
.ci-package::before { content: ""; position: absolute; inset: 40px 0 95px; pointer-events: none; background: linear-gradient(var(--hair) 1px,transparent 1px) 0 0 / 28px 28px, linear-gradient(90deg,var(--hair) 1px,transparent 1px) 0 0 / 28px 28px; mask-image: radial-gradient(ellipse at 65% 35%,#000,transparent 72%); }
.ci-package > * { position: relative; }
.ci-package-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--muted); font-size: 9px; letter-spacing: .025em; }
.ci-package-version { margin-left: auto; color: var(--subtle); }
.ci-package-mark { padding: 46px 0 18px; font-family: var(--mono); font-weight: 600; font-size: clamp(46px,4.9vw,68px); line-height: 1.2; letter-spacing: -.07em; color: var(--fg); }
.ci-package h2 { font-size: 15px; font-weight: 500; color: var(--fg-2); line-height: 1.7; margin: 0 0 24px; }
.ci-package-parts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; list-style: none; padding: 0; margin: 0 0 28px; }
.ci-package-parts li { display: flex; align-items: center; gap: 9px; border: 1px solid var(--border-muted); border-radius: 8px; padding: 11px 12px; background: rgba(1,4,9,.3); color: var(--fg-2); font-size: 12px; }
.ci-package-parts svg { width: 14px; height: 14px; color: var(--blue); }
.ci-package-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; border-top: 1px solid var(--border-muted); padding-top: 17px; font-size: 11px; color: var(--subtle); }
.ci-package-foot .text-link { font-size: 11px; }
.ci-section { padding: 68px 0; border-top: 1px solid var(--border-muted); }
.ci-section h2 { font-size: clamp(27px,3vw,38px); line-height: 1.25; letter-spacing: -.025em; margin: 0 0 24px; }
.ci-section p { color: var(--muted); line-height: 1.85; }
.ci-section-head { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: 28px; }
.ci-section-head h2 { margin: 0; }
.ci-section-head > p { max-width: 25em; margin: 0; font-size: 14px; }
.ci-demo { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); gap: 72px; align-items: center; }
.ci-demo-empty { grid-template-columns: 1fr; }
.ci-demo > div > p:not(.ci-eyebrow) { max-width: 31em; }
.ci-spec-links { display: flex; gap: 14px 24px; flex-wrap: wrap; margin: 26px 0; }
.creator-invite .text-link { text-decoration: none; }
.creator-invite .text-link:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 4px; }
.ci-demo-card { max-width: 420px; width: 100%; justify-self: end; padding: 18px; border: 1px solid var(--border-muted); border-radius: 16px; background: var(--bg-1); }
.ci-demo-card .vcard { margin: 0; }
.ci-preview-label { display: flex; gap: 8px; align-items: center; font-size: 11px; margin: 0 0 14px; }
.creator-invite .ci-small-note { display: flex; gap: 9px; align-items: flex-start; font-size: 12px; line-height: 1.8; color: var(--subtle); }
.ci-demo-card .ci-small-note { margin: 14px 0 0; }
.ci-small-note svg { margin-top: 3px; }
.ci-benefits { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.ci-benefit { position: relative; padding: 28px; border: 1px solid var(--border-muted); border-radius: 16px; box-shadow: inset 0 1px 0 rgba(240,246,252,.03); display: grid; grid-template-columns: 1fr auto; align-content: start; }
.ci-benefit > :nth-child(n+3) { grid-column: 1 / -1; }
.ci-benefit-icon { --c: var(--purple); margin-bottom: 28px; }
.ci-benefit:nth-child(2) .ci-benefit-icon { --c: var(--blue); }
.ci-benefit > .tag, .ci-benefit-meta { align-self: start; margin-top: 7px; font-size: 10px; }
.ci-benefit-meta { color: var(--muted); letter-spacing: .02em; }
.ci-benefit h3 { font-size: 22px; letter-spacing: -.02em; margin: 0 0 10px; }
.ci-benefit > p { margin: 0 0 24px; font-size: 14px; }
.ci-benefit > .ci-rule { display: flex; gap: 9px; margin: 0; padding-top: 18px; border-top: 1px solid var(--border-muted); font-size: 12px; line-height: 1.8; }
.ci-rule svg { margin-top: 3px; color: var(--subtle); }
.ci-steps { list-style: none; counter-reset: ci-step; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 28px; padding: 14px 0 0; margin: 0; }
.ci-steps li { counter-increment: ci-step; position: relative; min-width: 0; padding-top: 58px; }
.ci-steps li::before { content: "0" counter(ci-step); position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--border); border-radius: 50%; background: var(--bg-1); color: var(--fg-2); font: 12px var(--mono); }
.ci-steps li:not(:last-child)::after { content: ""; position: absolute; top: 18px; left: 52px; right: 0; height: 1px; background: linear-gradient(90deg,var(--border),var(--border-muted)); }
.ci-steps h3 { font-size: 17px; line-height: 1.6; margin: 0 0 10px; }
.ci-steps p { font-size: 14px; margin: 0; max-width: 23em; }
.ci-enroll { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); gap: 64px; align-items: center; }
.ci-form-intro > p { font-size: 14px; margin: 0 0 22px; }
.ci-deadlines { display: flex; gap: 10px; padding-top: 22px; margin-top: 26px; border-top: 1px solid var(--border-muted); }
.ci-deadlines > svg { margin-top: 4px; color: var(--subtle); }
.ci-deadlines p { font-size: 12px; margin: 0; }
.ci-deadlines b { color: var(--fg-2); font-weight: 500; }
.ci-form-card, .ci-form { padding: 30px; border: 1px solid var(--border); border-radius: 16px; background: linear-gradient(135deg,var(--bg-1),rgba(22,27,34,.5)); box-shadow: inset 0 1px 0 rgba(240,246,252,.04); }
.ci-form-card .field { margin: 0; gap: 12px; }
.ci-input-wrap { position: relative; }
.ci-input-wrap > svg { position: absolute; top: 19px; left: 16px; color: var(--subtle); pointer-events: none; }
.ci-input-wrap .input { height: 54px; padding: 0 14px 0 43px; border-radius: 10px; font-size: 15px; letter-spacing: .055em; }
.ci-input-wrap .input::placeholder { font-size: 13px; letter-spacing: .04em; }
.ci-input-wrap .input[aria-invalid=true] { border-color: var(--red); }
.ci-form-card [data-state=success] .input { border-color: var(--green); }
.ci-form-card .btn { width: 100%; min-height: 46px; margin-top: 12px; }
.ci-form-card .btn:disabled { cursor: wait; opacity: .65; }
.ci-form-card [data-creator-invite]:not([aria-busy=true]) .btn:disabled { cursor: not-allowed; }
.creator-invite .ci-form-foot { text-align: center; font-size: 12px; color: var(--subtle); margin: 16px 0 0; }
#invite-feedback { min-height: 28px; margin: 14px 0 0; font-size: 13px; line-height: 1.8; color: var(--fg-2); border-radius: 6px; }
[data-state=error] #invite-feedback { color: var(--red); }
[data-state=success] #invite-feedback { color: var(--green); }
#invite-feedback:focus { outline: 2px solid var(--blue); outline-offset: 4px; }
.ci-form { max-width: 680px; margin: 0 auto; }
.ci-form h1 { margin: 0 0 22px; font-size: clamp(26px,4vw,36px); line-height: 1.3; letter-spacing: -.025em; }
.ci-form > p { color: var(--muted); line-height: 1.85; }
.ci-form .form-actions { gap: 12px; margin-top: 24px; }
.ci-code { display: block; padding: 18px; margin: 24px 0; border: 1px solid var(--border-muted); border-radius: 10px; background: var(--bg); overflow-wrap: anywhere; user-select: all; font-size: 21px; letter-spacing: .05em; }
.ci-faq-section { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.3fr); gap: 72px; }
.ci-faq-section > div > p:not(.ci-eyebrow) { font-size: 14px; }
.ci-faq { border-bottom: 1px solid var(--border-muted); }
.ci-faq:first-child { border-top: 1px solid var(--border-muted); }
.ci-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 18px 0; cursor: pointer; font-size: 14px; font-weight: 500; list-style: none; }
.ci-faq summary::-webkit-details-marker { display: none; }
.ci-faq summary::after { content: "+"; color: var(--subtle); font-size: 22px; font-weight: 300; line-height: 1; transition: transform .2s var(--ease); }
.ci-faq[open] summary::after { transform: rotate(45deg); }
.ci-faq[open] summary { color: var(--blue); }
.ci-faq > p { margin: 0; padding: 0 20px 22px 0; font-size: 13px; }
.ci-section:target { scroll-margin-top: 92px; }
.creator-badge { display: inline-flex; vertical-align: middle; margin-left: 6px; font-size: 11px; color: var(--purple); border: 1px solid currentColor; border-radius: 20px; padding: 1px 6px; white-space: nowrap; }
@media (max-width: 980px) {
  .ci-hero { gap: 28px; }
  .ci-hero h1 { font-size: clamp(34px,4.6vw,48px); }
  .ci-package { padding: 20px; }
  .ci-demo, .ci-enroll, .ci-faq-section { gap: 36px; }
}
@media (max-width: 760px) {
  .creator-invite { padding-top: 96px; padding-bottom: 56px; }
  .ci-hero, .ci-demo, .ci-enroll, .ci-faq-section { grid-template-columns: 1fr; }
  .ci-hero { padding-bottom: 44px; gap: 34px; }
  .ci-hero h1 { font-size: clamp(36px,7vw,48px); }
  .ci-hero-copy > .ci-hero-lead { font-size: 17px; }
  .ci-hero .form-actions { margin-top: 24px; }
  .ci-hero .btn-lg { height: 46px; padding: 0 19px; font-size: 14px; }
  .ci-package { width: 100%; padding: 24px; }
  .ci-package-mark { font-size: 62px; padding-top: 30px; }
  .ci-package-parts { gap: 8px; margin-bottom: 22px; }
  .ci-package-parts li { padding: 10px 12px; }
  .ci-section { padding: 44px 0; }
  .ci-section-head { display: block; }
  .ci-section-head h2 { margin-bottom: 18px; }
  .ci-section-head > p { max-width: none; }
  .ci-demo-card { justify-self: start; max-width: 460px; }
  .ci-benefits { grid-template-columns: 1fr; gap: 16px; }
  .ci-benefit { padding: 24px; }
  .ci-steps { grid-template-columns: 1fr; gap: 28px; padding-top: 6px; }
  .ci-steps li { padding: 0 0 0 54px; min-height: 56px; }
  .ci-steps li::before { top: 2px; }
  .ci-steps li:not(:last-child)::after { top: 44px; bottom: -18px; left: 18px; right: auto; width: 1px; height: auto; background: var(--border-muted); }
  .ci-enroll { gap: 24px; }
  .ci-form-card, .ci-form { padding: 24px; }
  .ci-deadlines { margin-top: 20px; padding-top: 18px; }
  .ci-faq-section { gap: 20px; }
  .ci-faq-section h2 { margin-bottom: 12px; }
  .ci-faq-section > div > p { margin-bottom: 0; }
}
@media (max-width: 360px) {
  .ci-hero .form-actions { gap: 8px; }
  .ci-hero .btn-lg { padding: 0 14px; font-size: 13px; }
  .ci-package, .ci-form-card, .ci-form { padding: 20px; }
  .ci-input-wrap .input { font-size: 13px; letter-spacing: .02em; }
}
@media (prefers-reduced-motion: reduce) { .ci-faq summary::after { transition: none; } }