/* Paper card with an ink band at the point of interaction. */
#connect-card{box-sizing:border-box;color:#171715;background:#f4f1ea;border:0;border-radius:2px;width:min(780px,calc(100% - 32px));max-width:780px;height:460px;max-height:calc(100svh - 32px);padding:0;box-shadow:0 18px 70px #0003;overflow:auto;color-scheme:light;scrollbar-width:thin}
#connect-card[open]{animation:connect-card-in .4s cubic-bezier(.22,1,.36,1)}#connect-card::backdrop{background:#17171555;backdrop-filter:blur(3px)}
#connect-card .connect-close{position:absolute;top:14px;right:14px;width:32px;height:32px;font:400 23px/1 Grotesk,sans-serif;padding:0;background:none;color:#171715}
.connect-face{position:relative;box-sizing:border-box;height:100%;min-height:460px;padding:32px 42px 32px}
.connect-brand{position:absolute;bottom:44px;left:42px;width:128px}.connect-brand img{display:block;width:100%;height:auto}
#connect-card-form{height:100%;min-width:0;display:grid;grid-template-columns:172px minmax(0,1fr);grid-template-rows:100px minmax(0,1fr) 44px;column-gap:32px;position:relative}
#connect-card-form h2{grid-column:1/-1;font:500 86px/.95 Grotesk,sans-serif;letter-spacing:-.075em;margin:0;align-self:start}
.connect-card-body{grid-column:2;display:flex;flex-direction:column;justify-content:center;gap:14px;min-height:0}
#connect-card .connect-invitation{font:400 13px/1.5 Grotesk,sans-serif;letter-spacing:0;margin:0;color:#747168}
#connect-card input:not([type=checkbox]),#connect-card textarea{box-sizing:border-box;display:block;width:100%;min-width:0;border:0;border-radius:0;background:transparent;color:#171715;padding:6px 0;margin:0;box-shadow:none;font:400 38px/1.3 Grotesk,sans-serif;letter-spacing:-.045em}
#connect-card input::placeholder,#connect-card textarea::placeholder{color:#817e75;opacity:1}
.connect-email{background:#171715;margin-left:-22px;margin-right:-42px;padding:17px 42px 17px 22px;transition:background .2s}.connect-email:focus-within{background:#242421}#connect-card .connect-email input{color:#f4f1ea}#connect-card .connect-email input::placeholder{color:#c2c0b7}#connect-card .connect-email input:focus-visible{outline:0}.connect-email:focus-within{box-shadow:inset 3px 0 #a12b32}
#connect-card input[name=name]{font-size:28px;font-weight:500;letter-spacing:-.04em}
#connect-card textarea{font-size:15px;letter-spacing:0;resize:none;min-height:48px;height:48px;margin:0 0 10px;line-height:1.5}
.connect-personal-mode .connect-card-body{gap:6px}
#connect-card.connect-personal-mode input[name=email]{font-size:23px}.connect-personal-mode .connect-email{padding-top:10px;padding-bottom:10px}
.connect-consent{display:flex;gap:9px;align-items:flex-start;font:400 11px/1.5 Grotesk,sans-serif;color:#747168;cursor:pointer}.connect-consent input{appearance:auto;accent-color:#171715;width:13px;height:13px;margin:2px 0 0;flex:none}
.connect-card-foot{grid-column:2;border:0;margin:0;padding:0;background:none;display:flex;align-items:center;justify-content:space-between;gap:16px}
#connect-card .connect-switch,#connect-card .connect-send{display:inline-flex;align-items:center;gap:12px;min-height:44px;background:none;color:#171715;border:0;padding:6px 0;font:400 13px/1.4 Grotesk,sans-serif;cursor:pointer;white-space:nowrap}
#connect-card .connect-send{font-size:16px;font-weight:500}#connect-card .connect-switch{color:#747168}#connect-card .connect-switch>span{font-size:21px;color:#171715}#connect-card .connect-send:hover,#connect-card .connect-switch:hover{text-decoration:underline;text-underline-offset:5px}
#connect-card button:disabled{opacity:.5;cursor:wait}#connect-card .connect-error{position:absolute;bottom:-20px;left:204px;right:0;color:#a12b32;font-size:11px;line-height:1.3;margin:0}#connect-card :focus-visible{outline:2px solid #171715;outline-offset:3px}#connect-card h2:focus{outline:0}#connect-card [hidden]{display:none!important}
/* Keep browser autofill on the same paper/ink surface as each field. */
#connect-card{--connect-field-bg:#f4f1ea;--connect-field-ink:#171715}
#connect-card .connect-email{--connect-field-bg:#171715;--connect-field-ink:#f4f1ea}
#connect-card .connect-email:focus-within{--connect-field-bg:#242421}
#connect-card input:is(:autofill,:-webkit-autofill){box-shadow:0 0 0 1000px var(--connect-field-bg) inset!important;-webkit-text-fill-color:var(--connect-field-ink);caret-color:var(--connect-field-ink)}
@keyframes connect-card-in{from{opacity:0;transform:translateY(12px) rotate(-.5deg)}to{opacity:1;transform:none}}
@media(max-width:600px){#connect-card{height:480px}.connect-face{min-height:480px;padding:36px 26px 70px}.connect-brand{bottom:24px;left:26px;width:92px}.connect-email{margin-left:-18px;margin-right:-26px;padding:15px 26px 15px 18px}#connect-card-form{grid-template-columns:minmax(0,1fr);grid-template-rows:94px minmax(0,1fr) 44px;column-gap:0}#connect-card-form h2{font-size:65px}.connect-card-body,.connect-card-foot{grid-column:1}#connect-card input:not([type=checkbox]){font-size:31px}#connect-card input[name=name]{font-size:25px}#connect-card .connect-error{left:0;bottom:-18px}#connect-card .connect-switch{font-size:12px}#connect-card .connect-send{font-size:15px}.connect-card-body{gap:12px}.connect-personal-mode .connect-card-body{gap:6px}.connect-consent{font-size:10px}}
@media(prefers-reduced-motion:reduce){#connect-card[open]{animation:none}#connect-card::backdrop{backdrop-filter:none}}

/* Contact and wordmark share the lower rail, with separate breathing room. */
.rail .rail-contact{margin-top:28px;color:#171715}
.rail .rail-connect{display:flex;align-items:center;justify-content:space-between;width:100%;padding:13px 0;font-size:22px;font-weight:600;line-height:1.5;letter-spacing:-.045em;color:#171715}
.rail-connect-plus{display:flex;align-items:center;justify-content:center;width:23px;font:400 25px/1 Grotesk,sans-serif;flex-shrink:0}
.rail-connect:focus-visible{outline:2px solid #171715;outline-offset:5px}
@media(min-width:601px){body>.rail{padding-bottom:32px}.rail .rail-contact{margin-top:auto;padding-top:28px}.rail .rail-bottom{margin-top:10px}.rail .rail-bottom .brand{width:120px;margin:0}}
@media(min-width:601px) and (max-height:680px){.rail .rail-contact{margin-top:auto;padding-top:22px}.rail .rail-connect{padding:10px 0}}
@media(max-width:600px){.rail .rail-contact{display:block;position:absolute;top:9px;right:22px;margin:0}.rail .rail-connect{gap:12px;padding:5px 0;font-size:14px;min-height:34px}.rail-connect-plus{width:16px;font-size:19px}}

/* Sending stays visible until storage confirms receipt; only then does the card leave. */
#connect-card .connect-send.is-sending{opacity:1;min-width:124px}
.connect-sending-arrow{display:inline-block;animation:connect-send-arrow .8s cubic-bezier(.4,0,.2,1) infinite}
#connect-card.connect-received .connect-success{display:flex;flex-direction:column;justify-content:center;height:100%;padding:18px 0}
#connect-card .connect-success .connect-done{align-self:flex-start}
@keyframes connect-send-arrow{0%,100%{transform:translate(0,0);opacity:1}45%{transform:translate(5px,-5px);opacity:0}46%{transform:translate(-5px,5px);opacity:0}}
@media(prefers-reduced-motion:reduce){.connect-sending-arrow{animation:none}}

#connect-card.connect-delivering{overflow:hidden}
#connect-card.connect-delivering .connect-face{position:absolute;inset:0;background:#f4f1ea;z-index:1;pointer-events:none;transform-origin:85% 15%;will-change:transform,opacity}
#connect-card .connect-close{z-index:2}

/* The reverse of the card: a dark, printed brand face and one quiet wink. */
#connect-card.connect-received{background:#171715;color:#f4f1ea}
#connect-card.connect-received .connect-close{color:#f4f1ea}
#connect-card.connect-received .connect-success{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr auto;justify-content:stretch;gap:22px;height:100%;padding:38px;box-sizing:border-box}
.connect-back-brand{font:600 13px/1.4 Grotesk,sans-serif;letter-spacing:.05em}
.connect-back-main{display:grid;grid-template-columns:minmax(0,1fr) 130px;gap:24px;align-items:center}
#connect-card .connect-back-main h2{margin:0;grid-column:auto;font:500 43px/1.02 Grotesk,sans-serif;letter-spacing:-.055em;color:#f4f1ea}
.connect-receipt-eye{display:block;width:100%;height:auto;overflow:visible}
.connect-receipt-lid{transform-box:fill-box;transform-origin:center}
#connect-card .connect-back-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:22px}
#connect-card .connect-back-foot p{font-size:13px;line-height:1.55;color:#bdbbb3;margin:0;max-width:32ch}
#connect-card .connect-back-foot .connect-done{display:flex;align-items:center;gap:20px;color:#f4f1ea;background:none;padding:8px 0 8px 8px;font-size:14px;align-self:flex-end}
#connect-card.connect-received :focus-visible{outline-color:#f4f1ea}
@media(max-width:600px){.connect-back-main{grid-template-columns:minmax(0,1fr) 66px;gap:12px}#connect-card .connect-back-main h2{font-size:29px}.connect-back-brand{font-size:11px}#connect-card .connect-back-foot p{font-size:12px;max-width:23ch}#connect-card .connect-back-foot .connect-done{gap:10px}#connect-card.connect-received .connect-success{min-height:0}}

/* Black expands from the sending button; the front stays still underneath. */
#connect-card.connect-delivering{background:#f4f1ea}
#connect-card.connect-delivering .connect-face{z-index:0;color:#171715;transform:none;will-change:auto}
#connect-card.connect-delivering .connect-success{position:absolute;inset:0;height:auto;padding:38px;z-index:1;background:#171715;will-change:clip-path}
#connect-card.connect-delivering .connect-close{color:#fff;mix-blend-mode:difference}

#connect-card .connect-back-foot{min-height:41px}

#connect-card.connect-received .connect-success{padding:38px}#connect-card.connect-received .connect-face{min-height:0}@media(max-width:600px){#connect-card.connect-received .connect-success{padding:30px 26px}.connect-back-main{grid-template-columns:minmax(0,1fr) 70px}}