/* /contact-us/ (generated by tools/make-pages.mjs -> src/community-page.mjs contactMain). The form markup and ids come from contactForm() and are unchanged;
   this file only restyles .tp-cform inside .ct-form. Tokens only. Two equal columns: form | channels. */
.ct-hero{text-align:center;padding:64px 0 104px}
.ct-hero h1{margin-inline:auto;max-width:18ch}
.ct-hero .tp-lede{margin-inline:auto;max-width:56ch}
.ct-hero::after{left:50%;right:auto;top:-70%;width:80%;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(var(--glow),.12),rgba(var(--vio),.08) 55%,transparent)}
.ct-hero .container{z-index:2}
.ct-grid{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(var(--tw),.045) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--tw),.045) 1px,transparent 1px);background-size:44px 44px;
  -webkit-mask-image:radial-gradient(60% 90% at 50% 40%,#000,transparent 75%);mask-image:radial-gradient(60% 90% at 50% 40%,#000,transparent 75%)}
/* heart monitor along the bottom of the hero: contact-page.js draws a glowing head + PQRST trace on this canvas (green -> violet) */
.ct-beam{position:absolute;left:0;right:0;bottom:0;height:88px;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ct-ecg{display:block;width:100%;height:100%;filter:drop-shadow(0 0 4px rgba(var(--glow),.85)) drop-shadow(0 0 12px rgba(var(--vio),.45))}

.ct-wrap{max-width:1120px;margin-inline:auto;padding:clamp(36px,5vw,64px) var(--gutter,16px) 96px}
.ct-grid2{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,4vw,40px);align-items:stretch}
@media (min-width:960px){.ct-grid2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.ct-col{display:flex;flex-direction:column;min-width:0}
.ct-h2{margin:0 0 10px;font-size:clamp(24px,2.8vw,32px);line-height:1.15;letter-spacing:-.025em;color:var(--text);scroll-margin-top:calc(var(--header,64px) + 24px)}
.ct-intro{margin:0 0 22px;max-width:56ch;font-size:16px;line-height:1.6;color:var(--text-2);min-height:3.2em}
.ct-intro a{color:var(--accent);text-underline-offset:3px}
.ct-stack{flex:1;display:flex;flex-direction:column;gap:18px}
.ct-stack>.sc-youtube{flex:1}
.ct-pair{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
@media (min-width:560px){.ct-pair{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ct-pair .sc-card{padding:20px}
.ct-pair .sc-btn{margin-top:auto}
.ct-pair .sc-card p{flex:1}
.ct-stack .sc-card{padding:22px}

/* ---------- the form panel ---------- */
.ct-form{--ctp:0;position:relative;isolation:isolate;flex:1;container-type:inline-size;max-width:none!important;margin:0!important;padding:clamp(52px,6vw,60px) clamp(18px,3vw,32px) clamp(20px,3vw,30px)!important;border:0!important;border-radius:24px!important;overflow:hidden;
  background:linear-gradient(180deg,rgba(var(--tw),.055),rgba(var(--tw),.02))!important;box-shadow:0 30px 70px -44px rgba(var(--ts),var(--sa)),0 0 0 0 rgba(var(--glow),0);transition:box-shadow .4s}
.ct-form::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:conic-gradient(from var(--hfb-a,0deg),rgba(var(--glow),.8),rgba(var(--tw),.08) 22%,rgba(236,0,140,.75) 50%,rgba(var(--tw),.08) 72%,rgba(var(--glow),.8));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:hfb-spin 16s linear infinite;opacity:.8;transition:opacity .3s}
.ct-form:focus-within{box-shadow:0 30px 80px -40px rgba(var(--glow),.55),0 0 0 4px rgba(var(--glow),.07)}
.ct-form:focus-within::before{opacity:1;animation-duration:5s}
/* window bar: three dots + a label, and a progress line that fills as the form is completed (contact-page.js sets --ctp) */
.ct-form::after{content:"new message";position:absolute;left:0;right:0;top:0;height:40px;padding:0 18px 0 74px;display:flex;align-items:center;font:500 12px/1 var(--mono);letter-spacing:.06em;color:var(--text-3);border-bottom:1px solid rgba(var(--tw),.08);background:rgba(var(--tw),.025);pointer-events:none}
.ct-dots{position:absolute;left:18px;top:16px;width:8px;height:8px;border-radius:50%;background:#ff5f57;box-shadow:14px 0 #febc2e,28px 0 #28c840;pointer-events:none}
.ct-prog{position:absolute;left:0;top:39px;height:2px;width:100%;pointer-events:none;transform:scaleX(var(--ctp));transform-origin:0 50%;background:linear-gradient(90deg,rgb(var(--glow)),rgb(var(--vio)));box-shadow:0 0 12px rgba(var(--glow),.7);transition:transform .5s var(--ease,ease)}
.ct-form form{display:grid;grid-template-columns:minmax(0,1fr);column-gap:16px;counter-reset:ctf}
@container (min-width:460px){.ct-form form{grid-template-columns:repeat(2,minmax(0,1fr))}.ct-form form>*:nth-child(n+5){grid-column:1/-1}}
.ct-form .tp-field{position:relative;margin-bottom:18px;gap:8px}
.ct-form .tp-field>label:not(.tp-check){display:flex;align-items:center;gap:8px;font:600 12px/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--text-2);transition:color .2s}
.ct-form .tp-field>label:not(.tp-check)::before{counter-increment:ctf;content:"0" counter(ctf);color:rgb(var(--glow));font-weight:700}
.ct-form .tp-field:focus-within>label:not(.tp-check){color:var(--text)}
.ct-form .tp-in{height:52px;border-radius:12px;border:1px solid var(--line-2);background:rgba(var(--tw),.04);padding:0 16px;transition:border-color .2s,box-shadow .25s,background .2s,transform .2s}
.ct-form .tp-in{font-size:17px;letter-spacing:.02em}
.ct-form input[type=email]{font-size:18px;letter-spacing:.03em} /* comma and dot must look different */
.ct-form .tp-ta{height:auto;min-height:150px;padding:14px 16px;line-height:1.55;resize:vertical}
.ct-form .tp-in:hover{border-color:rgba(var(--tw),.28)}
.ct-form .tp-in:focus{background:rgba(var(--glow),.05);border-color:rgba(var(--glow),.85);box-shadow:0 0 0 3px rgba(var(--glow),.16),0 10px 30px -14px rgba(var(--glow),.55)}
.ct-form .tp-in[aria-invalid="true"]{border-color:#ff6b6b;box-shadow:0 0 0 3px rgba(255,107,107,.14)}
.ct-form .tp-hint{font-size:13px;color:var(--text-3)}
.ct-form .tp-err:empty{display:none}
.ct-form .tp-check{min-height:44px;padding:12px 14px;border-radius:12px;border:1px dashed rgba(var(--tw),.16);background:rgba(var(--tw),.02);transition:border-color .2s,background .2s}
.ct-form .tp-check:hover,.ct-form .tp-check:focus-within{border-color:rgba(var(--glow),.55);background:rgba(var(--glow),.04)}
.ct-form .tp-check input{width:22px;height:22px}
.ct-form .tp-cform-consent{margin-top:16px;font-size:13px;color:var(--text-3)}
/* submit: gradient, sheen sweep, arrow nudge; busy = moving stripes + spinner */
.ct-form button.tp-submit.btn{position:relative;overflow:hidden;width:100%;min-height:56px;margin-top:6px!important;border:0;border-radius:14px;font-size:17px;font-weight:700;letter-spacing:-.005em;color:rgb(var(--k-04140c,4,20,12));
  background:linear-gradient(120deg,rgb(var(--glow)),#38d6ff 55%,rgb(var(--vio)));background-size:200% 100%;background-position:0 0;box-shadow:0 16px 36px -16px rgba(var(--glow),.75),inset 0 1px 0 rgba(255,255,255,.4);transition:background-position .6s var(--ease,ease),box-shadow .25s,transform .15s}
.ct-form button.tp-submit.btn::before{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.45) 50%,transparent 65%);transform:translateX(-120%);pointer-events:none}
.ct-form button.tp-submit.btn::after{content:"\2192";display:inline-block;margin-left:10px;transition:transform .25s var(--ease,ease)}
.ct-form button.tp-submit.btn:hover{background-position:100% 0;box-shadow:0 22px 44px -16px rgba(var(--glow),.9),inset 0 1px 0 rgba(255,255,255,.5)}
.ct-form button.tp-submit.btn:hover::before{transform:translateX(120%);transition:transform .7s var(--ease,ease)}
.ct-form button.tp-submit.btn:hover::after{transform:translateX(5px)}
.ct-form button.tp-submit.btn:active{transform:scale(.985)}
.ct-form button.tp-submit.btn:focus-visible{outline:3px solid var(--text);outline-offset:3px}
.ct-form button.tp-submit.btn[aria-busy="true"]{background:repeating-linear-gradient(115deg,rgba(var(--glow),.95) 0 14px,rgba(var(--vio),.95) 14px 28px);background-size:56px 100%;cursor:progress;color:#fff;opacity:1}
.ct-form button.tp-submit.btn[aria-busy="true"]::before{display:none}
.ct-form button.tp-submit.btn[aria-busy="true"]::after{content:"";width:16px;height:16px;margin-left:12px;vertical-align:-2px;border-radius:50%;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff}
.ct-form .tp-cform-status{border-radius:12px;margin-bottom:12px}
/* success: the form is replaced by a confirmation with a popping check */
.ct-form .tp-cform-ok{text-align:center;padding:12px 0 6px}
.ct-form .tp-cform-ok::before{content:"\2713";display:grid;place-items:center;width:72px;height:72px;margin:0 auto 18px;border-radius:50%;font:700 34px/1 var(--font);color:rgb(var(--k-04140c,4,20,12));background:linear-gradient(135deg,rgb(var(--glow)),#38d6ff);box-shadow:0 0 0 8px rgba(var(--glow),.14),0 18px 40px -12px rgba(var(--glow),.8)}
.ct-form .tp-cform-ok h3{font-size:24px;letter-spacing:-.02em}
.ct-form .tp-cform-ok p{color:var(--text-2)}
.ct-form .tp-cform-ok[hidden]{display:none}

/* ---------- CTA ---------- */
.ct-last{max-width:none!important;margin-top:clamp(48px,6vw,80px)}
.ct-last .tp-cta{margin:0;padding:clamp(28px,5vw,52px);text-align:center;background:radial-gradient(60% 100% at 50% 0%,rgba(var(--glow),.1),transparent 70%),radial-gradient(60% 100% at 100% 100%,rgba(var(--vio),.1),transparent 70%)}
.ct-last .tp-cta .tp-row{justify-content:center}

/* ---------- motion ---------- */
@keyframes ct-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
@keyframes ct-spin{to{transform:rotate(360deg)}}
@keyframes ct-stripes{to{background-position:56px 0}}
@keyframes ct-pop{0%{transform:scale(.3);opacity:0}60%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
@media (prefers-reduced-motion:no-preference){
  .ct-form .tp-in[aria-invalid="true"]{animation:ct-shake .35s}
  .ct-form button.tp-submit.btn[aria-busy="true"]{animation:ct-stripes .8s linear infinite}
  .ct-form button.tp-submit.btn[aria-busy="true"]::after{animation:ct-spin .7s linear infinite}
  .ct-form .tp-cform-ok:not([hidden])::before{animation:ct-pop .6s var(--ease,ease) both}
}
@media (prefers-reduced-motion:reduce){
  .ct-form::before{animation:none}.ct-form,.ct-form .tp-in,.ct-prog,.ct-form button.tp-submit.btn{transition:none}
  .ct-form button.tp-submit.btn[aria-busy="true"]{background:rgb(var(--glow))}
}
@media (max-width:600px){.ct-hero{padding:44px 0 88px}.ct-beam{height:72px}.ct-form{border-radius:20px!important}}
.ct-more{max-width:none!important;margin-top:clamp(40px,5vw,64px)}
.ct-more>*{max-width:68ch}