@font-face{font-family:Source;src:url('/static/assets/SourceSans3.ttf') format('truetype');font-weight:200 900;font-display:swap}
:root{--ink:#102c40;--muted:#567183;--line:#d8e7eb;--cyan:#36e0eb;--canvas:#f6fafb}*{box-sizing:border-box}body{margin:0;color:var(--ink);background:var(--canvas);font:17px/1.55 Source,system-ui,sans-serif;-webkit-font-smoothing:antialiased}.mesh{min-height:100svh;background:radial-gradient(ellipse at 50% 28%,#fff 5%,#eff8fa 65%,#f6fafb 100%)}.wrap{max-width:1100px;margin:auto;padding:28px 24px 32px;text-align:center}.nav{display:flex;align-items:center;justify-content:center;position:relative;z-index:2}.logo img{width:165px;height:41px;display:block}.nav-quiet{position:absolute;right:0;color:var(--muted);font-size:14px}.art{width:min(100%,940px);height:clamp(260px,38vw,390px);margin:6px auto -28px;position:relative;isolation:isolate;mask-image:radial-gradient(ellipse 53% 52% at 50% 49%,#000 40%,transparent 100%)}.art img{height:100%;width:100%;object-fit:cover;object-position:center 52%;display:block}.art::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#f6fafb,transparent 30%);pointer-events:none}.intro{position:relative;max-width:520px;margin:auto}h1{font-size:clamp(40px,5vw,58px);letter-spacing:-.055em;line-height:1.05;font-weight:600;margin:8px 0 18px}.eyebrow{text-transform:uppercase;letter-spacing:.18em;color:#42778a;font-size:13px;font-weight:650;margin:0 0 14px}.sub{font-size:19px;line-height:1.5;color:var(--muted);margin:0 auto 26px;max-width:440px}.sub em{font-style:normal;color:var(--ink);font-weight:600}.cta,.btn-connect{position:relative;overflow:hidden;display:inline-flex;justify-content:center;align-items:center;gap:12px;min-height:56px;width:100%;border-radius:999px;border:1px solid #a7f6f8;background:linear-gradient(115deg,#5ce8ed,#30d9e9 60%,#71eced);box-shadow:0 5px 16px #17acbe20,0 0 32px #2edfea38,inset 0 1px 0 #ffffffb0;color:#103849;font:650 18px Source,system-ui;cursor:pointer;transition:transform .2s,box-shadow .2s}.cta:hover,.btn-connect:hover{transform:translateY(-2px);box-shadow:0 8px 26px #17acbe30,0 0 45px #2edfea55}.cta::after{content:'';position:absolute;inset:-70% auto -70% -50%;width:22%;background:linear-gradient(90deg,transparent,#ffffff80,transparent);transform:rotate(25deg);animation:shimmer 7s ease-in-out infinite;pointer-events:none}.heart{font-size:21px}.feel{font-size:15px;color:var(--muted);margin:15px 0 0}.panel{max-width:510px;margin:32px auto 0;background:#ffffffc9;border:1px solid #fff;border-radius:24px;box-shadow:0 16px 60px #25475b0b;text-align:left;padding:28px}.panel[hidden]{display:none}.panel h2{font-size:24px;letter-spacing:-.025em;margin:0 0 8px}.panel p{color:var(--muted);margin:0 0 18px}.address{display:block;overflow-wrap:anywhere;padding:14px;border-radius:12px;background:#edf6f8;border:1px solid var(--line);font-size:15px}.install-steps{list-style:none;padding:0;margin:20px 0}.install-steps li{display:grid;grid-template-columns:28px 1fr;gap:12px;padding:13px 0;border-bottom:1px solid var(--line)}.install-steps b{width:25px;height:25px;display:grid;place-items:center;border-radius:50%;background:#dff7f7;font-size:14px}.install-steps span{color:var(--muted);font-size:16px}.install-steps strong{color:var(--ink);display:block}.copy-ok{display:none;color:#176e62!important;font-size:15px}.ghost{padding:10px 0;background:none;border:0;color:#2d6a80;text-decoration:underline;text-underline-offset:4px;font:600 16px Source,system-ui;cursor:pointer}.checkins{border-top:1px solid var(--line);padding-top:20px}.checkins h2{font-size:20px}.checkin-row{display:flex;flex-wrap:wrap;gap:8px;font-size:14px;color:var(--muted)}.checkin-row span{padding:5px 10px;border-radius:20px;background:#edf6f8}.promise{max-width:450px;margin:28px auto 0;font-size:15px;color:var(--muted)}.promise strong{font-weight:500}footer{font-size:14px;color:var(--muted);margin-top:28px}footer a{color:inherit;text-underline-offset:4px}:focus-visible{outline:3px solid #16778d;outline-offset:5px}.consent-wrap{max-width:1100px;margin:auto;padding:24px}.consent-layout{display:grid;grid-template-columns:1fr 1fr;gap:45px;align-items:center;margin:40px auto;max-width:1000px}.consent-scene{text-align:center}.consent-scene .art{height:350px;width:100%;margin:0}.consent-scene h1{font-size:44px}.consent-card{background:#ffffffdf;border:1px solid #fff;border-radius:26px;padding:32px;box-shadow:0 18px 70px #25475b0c}.consent-card h2{font-size:29px;line-height:1.2;letter-spacing:-.03em;margin:0 0 12px}.consent-card p{color:var(--muted)}.perms{list-style:none;padding:0;margin:22px 0;border-block:1px solid var(--line)}.perms li{padding:13px 0;border-bottom:1px solid var(--line);font-size:16px}.perms li:last-child{border:0}label{display:block;font-size:16px;font-weight:600;margin-bottom:8px}input[type=text]{width:100%;padding:15px;border:1px solid #acc6d1;border-radius:12px;font:18px Source,system-ui;background:#fbfdfe;color:var(--ink)}.actions{display:flex;gap:12px;margin-top:20px}.actions .cta{flex:2;width:auto}.btn-soft{flex:1;background:transparent;border:1px solid var(--line);border-radius:999px;color:var(--ink);font:600 16px Source,system-ui;cursor:pointer}.consent-card small{display:block;margin-top:18px;color:var(--muted);font-size:14px}.error{padding:12px;background:#fff0f1;color:#a32340!important;border-radius:12px}@keyframes shimmer{0%,70%{left:-50%}100%{left:145%}}@media(min-width:1500px){.wrap{padding-top:45px}.art{height:420px}}@media(max-width:650px){.wrap{padding:20px 20px 30px}.nav-quiet{display:none}.art{width:calc(100% + 40px);margin-left:-20px;height:285px}.sub{font-size:18px}.panel{padding:22px}.consent-layout{grid-template-columns:1fr;gap:10px;margin:15px auto}.consent-scene .art{height:200px;width:100%;margin:0}.consent-scene h1{font-size:36px}.consent-card{padding:24px}.consent-scene .sub{margin-bottom:12px}.consent-wrap{padding:20px}}@media(prefers-reduced-motion:reduce){*,*::after{animation:none!important;transition:none!important}}
/* The open aisle remains clear; peripheral imagery dissolves into daylight. */
.art{overflow:visible;mask-image:radial-gradient(ellipse 60% 58% at 50% 46%,#000 32%,#000c 56%,transparent 88%)}
.art::before{content:'';position:absolute;inset:-30px;background:url('/static/assets/team-ready-funnel.jpg') center 50%/cover;filter:blur(28px);opacity:.28;z-index:-1}
.art img{object-position:center 47%}
.intro .cta{max-width:400px}
.cta{color:#263446;border-color:#ffd377;background:linear-gradient(115deg,#ffbd45 0%,#ffce70 48%,#ffc24c 100%);box-shadow:0 8px 22px #a8751520,0 0 24px #ffc65b30,inset 0 1px 0 #ffffffa0;text-shadow:none}
.cta:hover{box-shadow:0 10px 28px #a8751530,0 0 32px #ffc65b40}
.cta .heart{color:#594111;filter:none}
@keyframes twinkle{0%,100%{opacity:.8;transform:scale(.9)}50%{opacity:1;transform:scale(1.12)}}
@media(prefers-reduced-motion:reduce){.cta .heart{animation:none}}
/* Keep the whole welcoming group visible as the layout narrows. */
.art{width:min(100%,840px);height:clamp(280px,40vw,460px);margin-bottom:-20px;mask-image:radial-gradient(ellipse 65% 62% at 50% 47%,#000 40%,#000d 63%,transparent 94%)}
.art img{object-fit:contain;object-position:center}
@media(max-width:650px){.art{width:calc(100% + 40px);height:285px}.consent-scene .art{width:100%;height:220px}}

/* Final welcome pass: matched image bounds avoid a hard seam inside the fade. */
.art,.consent-scene .art{width:min(100%,740px);height:auto;aspect-ratio:3/2;margin:10px auto -28px;mask-image:none;overflow:visible}
.art img{position:relative;width:100%;height:100%;object-fit:cover;mask-image:linear-gradient(to right,transparent,#000 16%,#000 84%,transparent),linear-gradient(to bottom,transparent,#000 16%,#000 60%,transparent 98%);mask-composite:intersect;-webkit-mask-composite:source-in}
.art::before{inset:0;background-size:100% 100%;filter:blur(26px);opacity:.18;mask-image:radial-gradient(ellipse at center,#000 24%,transparent 68%)}
.art::after{display:none}
.private-badge{display:flex;align-items:center;gap:9px;padding:9px 14px;border:1px solid #c8ddd9;border-radius:13px;background:linear-gradient(140deg,#ffffffed,#edf6f2e8);box-shadow:inset 0 1px 0 #fff,0 3px 12px #25475b06;text-align:left;color:#315a54}
.private-badge svg{width:27px;height:30px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.private-badge strong{display:block;font-size:13px;font-weight:700;letter-spacing:.045em;text-transform:uppercase;line-height:1.3}
.private-badge small{display:block;font-size:12px;line-height:1.5;color:#527168}
.cta{background:linear-gradient(110deg,#ffb52f 0%,#ffe09a 35%,#ffc44b 63%,#ffae28 100%);background-size:180% 100%;border:1px solid #fff0c3;box-shadow:0 7px 18px #ae731824,0 0 26px #ffc64a55,0 0 55px #ffd77325,inset 0 2px 0 #fff6d6b0;animation:invitationGlow 5s ease-in-out infinite;transition:transform .2s,box-shadow .2s}
.cta::after{width:28%;background:linear-gradient(90deg,transparent,#ffffffa0,transparent);animation:shimmer 5.5s ease-in-out infinite}
.cta:hover,.cta:focus-visible{transform:translateY(-2px);box-shadow:0 10px 24px #ae731835,0 0 34px #ffc64a85,0 0 62px #ffd77345,inset 0 2px 0 #fff6d6d0}
.cta:active{transform:translateY(0) scale(.985)}
.cta .heart{color:#70440d;filter:drop-shadow(0 0 4px #fff8d9);animation:twinkle 3.5s ease-in-out infinite}
@keyframes invitationGlow{0%,100%{background-position:0% 50%;box-shadow:0 7px 18px #ae731824,0 0 26px #ffc64a55,0 0 55px #ffd77325,inset 0 2px 0 #fff6d6b0}50%{background-position:100% 50%;box-shadow:0 7px 20px #ae731830,0 0 34px #ffc64a75,0 0 60px #ffd77335,inset 0 2px 0 #fff6d6d0}}
@media(max-width:650px){.nav{justify-content:space-between;gap:12px}.logo img{width:135px;height:36px}.private-badge{position:static;display:flex;padding:7px 9px;gap:6px}.private-badge svg{width:22px;height:26px}.private-badge strong{font-size:12px}.private-badge small{font-size:12px}.art,.consent-scene .art{width:calc(100% + 32px);height:auto;margin:16px -16px -12px;aspect-ratio:3/2}.art img{mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent),linear-gradient(to bottom,transparent,#000 13%,#000 65%,transparent 99%)}}
@media(prefers-reduced-motion:reduce){.cta,.cta::after,.cta .heart{animation:none!important;transition:none!important}}

/* The invitation takes the headline position; artwork keeps its approved size. */
.intro>.cta{margin:6px 0 20px;min-height:60px;font-size:21px}
.welcome-jump{width:min(100%,400px);min-height:60px;margin:6px auto 20px;text-decoration:none;font-size:21px}
#permission-card{scroll-margin-top:20px}
.cta{background-image:linear-gradient(110deg,#ffb52f 0%,#ffe7ad 30%,#ffd064 55%,#ffb52f 85%,#ffe7ad 100%);background-size:220% 100%}
@media(max-width:650px){.intro>.cta,.welcome-jump{min-height:56px;margin-bottom:16px}.consent-scene .sub{margin-top:0}}

/* Mobile-first OAuth consent: form first above the fold; art below/hidden on small screens. */
.consent-layout{display:grid;grid-template-columns:1fr;gap:14px;margin:12px auto;max-width:560px;align-items:start}
.consent-card{order:0}
.consent-scene{order:1}
.consent-card .field-error{margin:10px 0 0}
.consent-card input[aria-invalid="true"]{border-color:#c23a55;outline:2px solid #f5c2cb}
@media(max-width:650px){
  .consent-wrap{padding:16px}
  .consent-card{padding:20px}
  .consent-card h2{font-size:24px;margin:0 0 8px}
  .perms{margin:14px 0}
  .perms li{padding:10px 0;font-size:15px}
  .consent-scene .art{display:none}
  .consent-scene{margin-top:8px;text-align:center}
  .consent-scene h1{font-size:28px;margin:6px 0 8px}
  .consent-scene .sub{margin:0 auto 8px;font-size:16px}
  .consent-layout{margin:8px auto}
}
@media(min-width:651px){
  .consent-layout{grid-template-columns:1fr 1fr;gap:45px;align-items:center;margin:40px auto;max-width:1000px}
  .consent-scene{order:-1} /* art left on desktop while card stays first in DOM for mobile */
}

/* Carry the team identity into the compact consent form without a tall hero. */
.consent-brand-intro{display:flex;align-items:center;justify-content:space-between;gap:12px}
.consent-brand-intro .eyebrow{font-size:12px;letter-spacing:.1em;margin:0 0 6px;color:#49768a}
.consent-brand-intro h2{margin:0}
.consent-team{display:none}
@media(max-width:650px){
 .consent-team{display:block;width:132px;height:76px;object-fit:cover;flex:0 0 auto;mask-image:radial-gradient(ellipse 65% 65% at center,#000 42%,transparent 95%)}
 .consent-brand-intro h2{font-size:23px;line-height:1.15}
 .consent-brand-intro .eyebrow{font-size:12px;letter-spacing:.06em}
 .consent-card>p{font-size:16px;line-height:1.4;margin:10px 0 12px}
 .consent-card .perms{margin:12px 0}
 .consent-scene{display:none}
 .consent-wrap{padding-bottom:calc(22px + env(safe-area-inset-bottom))}
}
@media(max-width:380px){.consent-team{width:100px;height:72px}.consent-brand-intro h2{font-size:21px}}