:root { --marine:#001E24; --crest:#2D4448; --ivory:#F6F0E7; --sand:#C7BEB3; --cocoa:#90786C; --helper:#767676; --white:#FFFFFF; --error:#8a3b2f; --celebration:#CE0871; --display:"ivyora-display", "Baskerville", "Palatino Linotype", serif; --text:"ivyora-text", "Baskerville", "Palatino Linotype", serif; }
* { box-sizing:border-box; }
body { margin:0; color:var(--marine); background:var(--white); font:16px/1.5 var(--text); }
[hidden] { display:none !important; }
a { color:inherit; text-underline-offset:4px; }
a:focus-visible, button:focus-visible, input:focus-visible { outline:2px solid var(--crest); outline-offset:4px; }
.site-header { padding:32px 24px 18px; text-align:center; }
.brand { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:10px; }
.brand img { display:block; width:230px; height:auto; }
main { width:calc(100% - 48px); max-width:520px; margin:0 auto; }
h1 { margin:12px 0 28px; text-align:center; color:var(--crest); font:300 44px/1.2 var(--display); letter-spacing:-1px; }
.field { margin-bottom:20px; }
label { display:block; font-size:15px; font-weight:500; line-height:1.4; margin-bottom:5px; }
input { appearance:none; display:block; width:100%; min-width:0; height:46px; padding:8px 0; border:0; border-bottom:1px solid var(--sand); border-radius:0; background:var(--white); color:var(--marine); font:400 18px/1.5 var(--text); }
input::placeholder { color:var(--helper); opacity:1; }
.input-wrap { position:relative; }
.input-wrap .error { position:absolute; inset:0; display:flex; align-items:center; margin:0; padding:0; font-size:13px; line-height:1.25; pointer-events:none; }
.input-wrap .error:empty { display:none; }
.code-wrap .error { left:14px; right:14px; }
.input-wrap.has-value .error { top:auto; bottom:3px; font-size:12px; line-height:15px; }
.input-wrap.has-value input[aria-invalid="true"], .input-wrap.has-value #code[aria-invalid="true"] { padding-top:0; padding-bottom:19px; }
#code { border:1px solid var(--cocoa); padding:8px 48px; border-radius:3px; text-align:center; text-transform:uppercase; }
#platform-icon { position:absolute; width:22px; height:22px; right:15px; top:12px; background:var(--celebration); -webkit-mask:var(--platform-mark) center / contain no-repeat; mask:var(--platform-mark) center / contain no-repeat; }
#platform-icon[data-platform="instagram"] { --platform-mark:url("instagram.svg"); }
#platform-icon[data-platform="pinterest"] { --platform-mark:url("pinterest.svg"); }
#platform-icon[data-platform="facebook"] { --platform-mark:url("facebook.svg"); }
#platform-icon[data-platform="tiktok"] { --platform-mark:url("tiktok.svg"); }
#platform-icon[data-platform="youtube"] { --platform-mark:url("youtube.svg"); }
#platform-icon[data-platform="threads"] { --platform-mark:url("threads.svg"); }
.helper { margin:6px 0 0; text-align:right; color:var(--helper); font-size:13px; font-style:italic; line-height:1.4; }
.code-message { position:relative; text-align:center; display:grid; margin-bottom:12px; }
.code-message::before { content:"Congratulations, you found the Facebook Community Group code!"; text-wrap:balance; visibility:hidden; grid-area:1 / 1; font:400 italic 21px/1.25 var(--display); }
.status { position:relative; grid-area:1 / 1; align-self:center; margin:0; color:var(--celebration); font:400 italic 21px/1.25 var(--display); }
.code-helper-line { display:block; }
.more-codes { margin:16px auto 0; max-width:420px; text-align:center; color:var(--helper); font:italic 13px/1.4 var(--text); }
.optional { font-size:13px; font-style:italic; font-weight:400; color:var(--helper); }
.sparkles { position:absolute; inset:0; pointer-events:none; color:var(--celebration); }
.sparkle { position:absolute; opacity:0; font:18px/1 var(--display); }
.sparkle:nth-child(1) { left:2%; top:0; --dx:-5px; --dy:-16px; }
.sparkle:nth-child(2) { left:24%; top:0; --dx:-4px; --dy:-21px; font-size:12px; }
.sparkle:nth-child(3) { left:50%; top:0; --dx:3px; --dy:-15px; }
.sparkle:nth-child(4) { right:23%; top:0; --dx:8px; --dy:-23px; font-size:12px; }
.sparkle:nth-child(5) { right:1%; top:0; --dx:7px; --dy:-17px; }
@keyframes celebrate { 0% { opacity:0; transform:translateY(5px) scale(.97); } 60% { opacity:1; transform:translateY(0) scale(1.025); } 100% { opacity:1; transform:none; } }
@keyframes sparkle { 0% { opacity:0; transform:translate(0,4px) scale(.4); } 25% { opacity:1; } 100% { opacity:0; transform:translate(var(--dx),var(--dy)) scale(.7); } }
@media(prefers-reduced-motion:no-preference) {
 .celebrate .status { animation:celebrate 700ms ease-out both; }
 .celebrate .sparkle { animation:sparkle 900ms ease-out both; }
}
@media(prefers-reduced-motion:reduce) {
 .celebrate .sparkle:nth-child(1), .celebrate .sparkle:nth-child(5) { opacity:.65; top:-12px; font-size:12px; }
}
.status:empty, .error:empty { display:none; }
.error { color:var(--error); font-size:14px; line-height:1.4; margin:6px 0 0; }
[aria-invalid="true"] { border-color:var(--error) !important; }
.actions { text-align:center; padding-top:4px; }
.submit { min-height:48px; min-width:160px; border:0; border-radius:3px; background:var(--crest); color:var(--ivory); padding:12px 40px; font:400 17px/1.4 var(--display); cursor:pointer; }
.submit:hover { background:var(--marine); }
.site-footer { padding:40px 24px 36px; text-align:center; }
.site-footer a { max-width:100%; overflow-wrap:anywhere; display:inline-flex; align-items:center; justify-content:center; min-height:44px; color:var(--crest); text-decoration:none; font:400 23px/1.3 var(--display); letter-spacing:.15px; }
.site-footer a:hover { text-decoration:underline; text-underline-offset:5px; }
#thanks { text-align:center; padding-top:22px; }
#thanks h1 { margin-bottom:20px; }
#thanks p { margin:16px 0; }
#thanks h2 { font:400 24px/1.3 var(--display); margin:30px 0 10px; }
#thanks .contact { max-width:440px; margin:0 auto; }
.repeat { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:10px 0; margin-top:22px; font-size:16px; }
@media(max-width:600px) {
 .site-header { padding:10px 24px 6px; }
 .brand img { width:205px; }
 h1 { font-size:34px; margin:6px 0 16px; }
 .field { margin-bottom:12px; }
 input { height:44px; }
 .site-footer { padding:28px 20px 32px; }
 #thanks { padding-top:18px; }
 .code-message::before,.status { font-size:19px; }
}
@media(prefers-reduced-motion:no-preference) { .submit { transition:background 180ms ease; } }

.trap { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
.submit:disabled { opacity:.65; cursor:wait; }
#form-error { margin:0; text-align:center; }

@media(max-width:360px) { .code-message::before,.status { font-size:16px; } }
@media(min-width:601px) and (max-height:850px) {
 .site-header { padding:16px 24px 6px; }
 h1 { font-size:40px; margin:6px 0 16px; }
 .field { margin-bottom:12px; }
 .site-footer { padding:20px 24px 16px; }
}

/* The code is the only boxed field. Labels stay visible above entered text. */
main{max-width:560px}
.floating-field{padding-top:13px}
.floating-field .input-wrap>label{position:absolute;left:0;top:12px;margin:0;pointer-events:none;font:400 17px/1.3 var(--display);color:var(--crest)}
.floating-field input{font:400 17px/1.5 Arial,sans-serif}
.floating-field .input-wrap:has(input:focus)>label,
.floating-field .input-wrap:has(input:not(:placeholder-shown))>label,
.floating-field .input-wrap:has(input[aria-invalid="true"])>label{top:-12px;font:400 12px/1.3 var(--text);color:var(--helper)}
.floating-field input:focus-visible{outline:0;border-bottom-color:var(--crest);box-shadow:0 1px 0 var(--crest)}

/* Approved combined landing and entry layout. The store owns the embed shell. */
main{width:calc(100% - 48px);max-width:820px;margin:25px auto 0}
#entry-form{width:calc(100% - 16px);max-width:500px;margin:0 auto}
.intro{text-align:center}.eyebrow{font-size:12px;color:var(--helper);margin:0 0 10px;letter-spacing:.6px}
h1{font-size:48px;margin:0 0 12px}.invitation{color:var(--crest);font-size:16px;line-height:1.5;margin:0 auto 10px;max-width:560px}
.code-message{margin-bottom:8px}.field{margin-bottom:14px}.floating-field{padding-top:10px}.actions{padding-top:0}
.more-codes{max-width:480px;font-size:12px;margin-top:14px}
.embedded{display:flow-root;min-height:0}.embedded main{margin-bottom:36px}
@media(max-width:700px){main{margin-top:16px;max-width:560px}.eyebrow{font-size:11px;margin-bottom:8px}h1{font-size:36px;letter-spacing:-.7px;margin:0 0 10px}.invitation{font-size:14px;line-height:1.5;max-width:390px;margin-bottom:8px}.field{margin-bottom:12px}.more-codes{font-size:12px;margin-top:13px}}
@media(max-width:360px){h1{font-size:31px}.invitation{font-size:13px}}
/* The veil and rope occupy an overlay, never a layout row. */
#velvet-stage{position:relative}
#entry-details{opacity:.14;transition:none}
#entry-details input:disabled,#entry-details button:disabled{opacity:1;-webkit-text-fill-color:currentColor}
#entry-details button:disabled{cursor:default}
.velvet-overlay{position:absolute;inset:0 -24px;overflow:hidden;pointer-events:none}
.rope-scene{position:absolute;left:0;top:50%;display:block;width:100%;height:auto;transform:translateY(-50%);overflow:visible}
.velvet-rope{transform-origin:24px 48px}
#velvet-stage[data-state="dropping"] .velvet-rope{animation:velvet-drop 550ms cubic-bezier(.35,.05,.55,1) both}
#velvet-stage[data-state="dropping"] .post{animation:post-quiet 550ms ease both}
#velvet-stage[data-state="dropping"] #entry-details{opacity:1;transition:opacity 350ms 175ms ease}
#velvet-stage[data-state="open"] #entry-details{opacity:1}
#velvet-stage[data-state="open"] .velvet-overlay{visibility:hidden}
.celebrate .status{animation:none}.celebrate .sparkle{animation:none;opacity:0}
@keyframes velvet-drop{0%{transform:translateY(0) rotate(0);opacity:1}30%{transform:translateY(18px) rotate(10deg);opacity:1}75%{opacity:1}100%{transform:translateY(280px) rotate(26deg);opacity:0}}
@keyframes post-quiet{0%,45%{opacity:1}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){#entry-details{transition:none!important}.velvet-rope,.post{animation:none!important}}

/* Reserve the longest platform helper before a code is accepted. */
#username-helper{min-height:2.8em}

/* Keep code confirmation and keyboard navigation inside the entry area. */
#code-continue{position:absolute;right:1px;top:1px;width:44px;height:44px;padding:0;border:0;border-left:1px solid var(--sand);border-radius:0 2px 2px 0;background:transparent;color:var(--crest);font:24px/1 Arial,sans-serif;cursor:pointer}
#code-continue:hover{color:var(--celebration)}
#platform-icon{left:15px;right:auto}
.code-wrap .error{right:50px}
@media(max-width:600px){#code-continue{top:0}}

#thanks .repeat{font:400 20px/1.3 var(--display);border:1px solid var(--teal,#006b70);padding:15px 28px;min-height:52px;margin-top:16px;text-decoration:none;color:var(--teal,#006b70)}#thanks .repeat:hover{color:var(--celebration);border-color:var(--celebration)}#thanks .entry-count{font-size:15px;color:var(--helper);margin:24px auto 0;text-wrap:balance}#code-message .status{text-wrap:balance}#username-label{font-size:inherit}