*,:before,:after{box-sizing:border-box}
:root{
  color-scheme:light;
  --bg:#fff;--page:#fff;--panel:#f6f6f8;--card:#f1f1f3;--group:#fff;--slot:#e9e9eb;
  --received:#e9e9eb;--accent:#007aff;--label:#000;--label-strong:#1d1d1f;--secondary:#6c6c70;
  --quiet:#bcbcc4;--separator:#00000012;--icon:#000000a6;--close-icon:#0009;--send-disabled:#d1d1d6;
  --backdrop:#00000029;--preview-bg:#fffffff0;--preview-border:#1d1d1f1f;--preview-shadow:#00000024;
  --glass-hi-top:#fff6;--glass-hi-bottom:#ffffff2e;--glass-tint:#00000005;--glass-edge:#0000001b;--glass-edge-soft:#0000000b;
  --glass-sheen-a:#ffffff2e;--glass-sheen-b:#ffffff05;--glass-sheen-c:#ffffff12;
  --glass-outline:#0000002e;--glass-drop:#00000030;--glass-inner:#ffffffaa;--glass-spec:#ffffff44;--glass-spec2:#ffffff30;
  --rim-hi:#ffffffd9;--rim-mid:#ffffff66;--rim-lo:#ffffff1f;--rim-op:#ffffff80;
}
@media (prefers-color-scheme:dark){
  :root{
    color-scheme:dark;
    --bg:#0c0c0c;--page:#000;--panel:#1c1c1e;--card:#1c1c1e;--group:#2c2c2e;--slot:#2c2c2e;
    --received:#26252a;--accent:#0a84ff;--label:#fff;--label-strong:#f5f5f7;--secondary:#8e8e93;
    --quiet:#48484a;--separator:#ffffff1a;--icon:#ffffffb8;--close-icon:#ffffffa8;--send-disabled:#3a3a3c;
    --backdrop:#00000073;--preview-bg:#1c1c1ef0;--preview-border:#ffffff1f;--preview-shadow:#0009;
    --glass-hi-top:#ffffff1a;--glass-hi-bottom:#ffffff12;--glass-tint:#ffffff0d;--glass-edge:#ffffff21;--glass-edge-soft:#ffffff0e;
    --glass-sheen-a:#ffffff06;--glass-sheen-b:#ffffff03;--glass-sheen-c:#ffffff06;
    --glass-outline:#000000b3;--glass-drop:#000000cc;--glass-inner:#ffffff33;--glass-spec:#ffffff1c;--glass-spec2:#ffffff14;
    --rim-hi:#ffffffa6;--rim-mid:#ffffff38;--rim-lo:#ffffff12;--rim-op:#ffffff4d;
  }
}

/* manual theme override (dev toggle sets data-theme on <html>) */
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#fff;--page:#fff;--panel:#f6f6f8;--card:#f1f1f3;--group:#fff;--slot:#e9e9eb;
  --received:#e9e9eb;--accent:#007aff;--label:#000;--label-strong:#1d1d1f;--secondary:#6c6c70;
  --quiet:#bcbcc4;--separator:#00000012;--icon:#000000a6;--close-icon:#0009;--send-disabled:#d1d1d6;
  --backdrop:#00000029;--preview-bg:#fffffff0;--preview-border:#1d1d1f1f;--preview-shadow:#00000024;
  --glass-hi-top:#fff6;--glass-hi-bottom:#ffffff2e;--glass-tint:#00000005;--glass-edge:#0000001b;--glass-edge-soft:#0000000b;
  --glass-sheen-a:#ffffff2e;--glass-sheen-b:#ffffff05;--glass-sheen-c:#ffffff12;
  --glass-outline:#0000002e;--glass-drop:#00000030;--glass-inner:#ffffffaa;--glass-spec:#ffffff44;--glass-spec2:#ffffff30;
  --rim-hi:#ffffffd9;--rim-mid:#ffffff66;--rim-lo:#ffffff1f;--rim-op:#ffffff80;
}
:root[data-theme="dark"]{
    color-scheme:dark;
    --bg:#0c0c0c;--page:#000;--panel:#1c1c1e;--card:#1c1c1e;--group:#2c2c2e;--slot:#2c2c2e;
    --received:#26252a;--accent:#0a84ff;--label:#fff;--label-strong:#f5f5f7;--secondary:#8e8e93;
    --quiet:#48484a;--separator:#ffffff1a;--icon:#ffffffb8;--close-icon:#ffffffa8;--send-disabled:#3a3a3c;
    --backdrop:#00000073;--preview-bg:#1c1c1ef0;--preview-border:#ffffff1f;--preview-shadow:#0009;
    --glass-hi-top:#ffffff1a;--glass-hi-bottom:#ffffff12;--glass-tint:#ffffff0d;--glass-edge:#ffffff21;--glass-edge-soft:#ffffff0e;
    --glass-sheen-a:#ffffff06;--glass-sheen-b:#ffffff03;--glass-sheen-c:#ffffff06;
    --glass-outline:#000000b3;--glass-drop:#000000cc;--glass-inner:#ffffff33;--glass-spec:#ffffff1c;--glass-spec2:#ffffff14;
    --rim-hi:#ffffffa6;--rim-mid:#ffffff38;--rim-lo:#ffffff12;--rim-op:#ffffff4d;
}
:root[data-theme="dark"] ::selection{background:#fff;color:#000}
:root[data-theme="light"] ::selection{background:#000;color:#fff}
:root[data-theme="dark"] .avatarBtn:after{background:radial-gradient(ellipse,#0a52d488,#0a52d400 70%);opacity:.8}
:root[data-theme="light"] .avatarBtn:after{background:radial-gradient(ellipse,#000000aa,#00000000 70%);opacity:.55}
html{background:var(--bg);color:var(--label);-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;
  font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif,"Apple Color Emoji";font-size:14px;font-weight:500;line-height:1.25rem}
body{margin:0}
h1,h2,h3,p{margin:0;font-size:inherit;font-weight:inherit}
ul{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button,input{font:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}
button{background:0 0;border:0;cursor:pointer}
img,svg{display:block;max-width:100%}
::selection{background:#000;color:#fff}
@media (prefers-color-scheme:dark){::selection{background:#fff;color:#000}}
.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}

.root{--panel-gutter:24px;background:var(--page);min-height:100dvh}
.root :focus:not(:focus-visible){outline:none}
.root :focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.root .composerInput:focus-visible,.root .photoStack:focus-visible{outline:none}
.root .contactRow:focus-visible{outline-offset:-2px}

/* scroll dissolve at the edges */
@supports (animation-timeline:view()){
  .bubble,.timestamp,.receipt,.stackWrap,.workGrid,.photoStack{animation:edgeDissolve linear both;animation-timeline:view();animation-range:cover}
}
@keyframes edgeDissolve{0%{opacity:0;filter:blur(3px)}11%{opacity:1;filter:blur(0)}86%{opacity:1;filter:blur(0)}100%{opacity:0;filter:blur(3px)}}

/* header */
.contactBar{z-index:20;padding-top:calc(20px + env(safe-area-inset-top,0px));pointer-events:none;justify-content:center;display:flex;position:fixed;top:0;left:0;right:0}
.contactCard{pointer-events:auto;flex-direction:column;align-items:center;transition:transform .25s cubic-bezier(.32,.72,0,1);display:flex}
@media (min-width:768px){.contactCard.shifted{transform:translate(-25vw)}}
.avatarBtn{z-index:2;border-radius:50%;display:block;position:relative}
.avatarBtn{--tx:0;--ty:0;--fs:1;--fsy:1;perspective:260px}
/* soft colored glow + contact shadow that slide opposite the tilt */
.avatarBtn:before{content:"";position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;z-index:-1;pointer-events:none;
  background:radial-gradient(circle,#2f86f5aa,#2f86f500 70%);filter:blur(10px);
  transform:translate(calc(var(--tx) * -7px),calc(10px + var(--ty) * -4px)) scale(1.35);transition:transform .3s cubic-bezier(.22,1,.36,1)}
.avatarBtn:after{content:"";position:absolute;left:50%;bottom:-9px;width:40px;height:8px;margin-left:-20px;border-radius:50%;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse,#000000aa,#00000000 70%);filter:blur(3px);opacity:.55;
  transform:translateX(calc(var(--tx) * -8px)) scaleX(calc(1 - var(--ty) * .12));transition:transform .3s cubic-bezier(.22,1,.36,1)}
@media (prefers-color-scheme:dark){.avatarBtn:after{background:radial-gradient(ellipse,#0a52d488,#0a52d400 70%);opacity:.8}}
.eyes{position:relative;width:58px;height:58px;border-radius:50%;display:block;user-select:none;overflow:hidden;
  background:radial-gradient(120% 120% at 30% 15%,#6db4ff 0%,#2f86f5 45%,#0a52d4 100%);
  box-shadow:
    inset 0 1.5px 0 #ffffff66,                                  /* thin lit top rim */
    inset 0 0 0 .5px #0a3fa866,                                 /* soft edge definition */
    inset 0 0 12px 1px #0030a059,                               /* fresnel: edges fall into shadow all around */
    inset 0 -9px 14px -3px #00339999,                           /* core shadow, bottom */
    inset 0 -2px 4px #9ad0ff66,                                 /* bounced light just inside the bottom edge */
    0 0 0 1px #0a3fa855,0 calc(6px + var(--ty) * -3px) 14px -2px #0a3fa877,0 1px 2px #0a3fa855;
  transform:rotateX(calc(var(--ty) * -16deg)) rotateY(calc(var(--tx) * 20deg));
  transition:transform .3s cubic-bezier(.22,1,.36,1),scale .42s cubic-bezier(.34,1.56,.64,1)}
.avatarBtn:active .eyes{transition:transform .3s cubic-bezier(.22,1,.36,1),scale 80ms cubic-bezier(.2,0,.2,1);scale:.96}
/* the sphere's shading slides opposite the look direction, like a fixed light source */
.eyes:before,.eyes:after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;z-index:3;transition:background-position .3s}
.eyes:before{background:radial-gradient(circle at calc(50% - var(--tx) * 20%) calc(46% - var(--ty) * 20%),transparent 34%,#00225c44 70%,#00164a88 100%)}
.eyes:after{background:radial-gradient(ellipse 30% 17% at calc(35% - var(--tx) * 8%) calc(19% - var(--ty) * 6%),#ffffff80,#ffffff00 100%),radial-gradient(ellipse 60% 40% at 50% 8%,#ffffff1f,#ffffff00 100%)}
.face{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:3px;z-index:2;
  translate:calc(var(--tx) * 9px) calc(var(--ty) * 9px);scale:var(--fs) var(--fsy);
  transition:translate .3s cubic-bezier(.22,1,.36,1),scale .3s cubic-bezier(.22,1,.36,1)}
.eye{position:relative;width:21px;height:29px;border-radius:50%;overflow:hidden;flex:none;
  background:radial-gradient(90% 80% at 50% 28%,#fff 52%,#e4ecf8 82%,#cdd9ee 100%);
  box-shadow:
    0 0 5px 1px #00206655,                                          /* soft socket occlusion on the sphere */
    calc(var(--tx) * -2.5px) calc(3px + var(--ty) * -2px) 6px #00206688, /* contact shadow, opposite the look */
    inset 0 9px 7px -5px #1a3a8070,                                 /* lid shadow across the top */
    inset 0 0 5px 1px #1a3a8033,                                    /* occlusion around the rim */
    inset 0 -3px 4px -1px #ffffffcc;                                /* lit lower edge */
  animation:blink 5.5s infinite;transform-origin:50% 55%;
  scale:1 1;transition:scale .25s cubic-bezier(.34,1.56,.64,1)}
.eye:after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;background:linear-gradient(180deg,#0a1f5a47 0,#0a1f5a00 40%)} /* lid shadow also falls on the pupil */
.eye+.eye{animation-delay:.02s}
.avatarBtn:hover .eye{scale:1.06 1.08}
.avatarBtn:active .eye{scale:1.02 .6}
.pupil{position:absolute;left:50%;top:50%;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#2a2a2e,#050507 70%);
  transition:transform .14s cubic-bezier(.22,1,.36,1);will-change:transform}
.pupil:after{content:"";position:absolute;top:1.5px;left:2px;width:3.2px;height:3.2px;border-radius:50%;background:#fff;opacity:.92}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}94.5%{transform:scaleY(.08)}97%{transform:scaleY(1)}98%{transform:scaleY(.08)}99%{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){.eye{animation:none}.face,.pupil,.eyes{transition:none}}
.namePill{z-index:1;color:var(--label);letter-spacing:-.4px;border-radius:999px;align-items:center;gap:8px;margin-top:-3px;padding:5px 14px;font-size:16px;font-weight:600;line-height:21px;transition:transform .42s cubic-bezier(.34,1.56,.64,1);display:inline-flex;position:relative}
.namePill:active{transition:transform 80ms cubic-bezier(.2,0,.2,1);transform:scale(1.06)}
.chev{color:var(--secondary);flex:none;transform:translateY(.5px)}

/* glass: liquid-glass material. Backdrop lensing comes from glass.js (Chromium); everywhere else this is the blur + rim fallback */
@property --spot{syntax:"<number>";inherits:false;initial-value:0}
.namePill,.composerGlass,.panelCta,.panelClose,.lbBtn,.lbDots,.psCount{--spot:0;isolation:isolate;position:relative;overflow:hidden;transition:--spot .3s ease,transform .42s cubic-bezier(.34,1.56,.64,1);
  background:
    radial-gradient(circle at var(--mx,50%) var(--my,0%),rgb(255 255 255 / var(--spot)),#fff0 62%),
    linear-gradient(180deg,var(--glass-sheen-a),var(--glass-sheen-b) 48%,var(--glass-sheen-c)),
    var(--glass-tint);
  -webkit-backdrop-filter:blur(6px) saturate(1.8) brightness(1.06);backdrop-filter:blur(6px) saturate(1.8) brightness(1.06);
  box-shadow:
    0 0 0 .5px var(--glass-outline),
    0 10px 26px -8px var(--glass-drop),
    inset 0 1px 0 var(--glass-hi-top),inset 0 -1px 0 var(--glass-hi-bottom),
    inset 0 0 14px -3px var(--glass-inner),inset 0 -6px 10px -6px var(--glass-inner)}
.namePill:hover,.composer:hover .composerGlass,.panelCta:hover,.panelClose:hover,.lbBtn:hover,.psCount:hover{--spot:.07}
.namePill:active,.composer:active .composerGlass,.panelCta:active,.panelClose:active,.lbBtn:active,.psCount:active{--spot:.22}
/* crisp lit rim: brightest facing the light (top left), ~40% on the opposite edge */
.namePill:after,.composerGlass:after,.panelCta:after,.panelClose:after,.lbBtn:after,.lbDots:after,.psCount:after{content:"";z-index:2;border-radius:inherit;pointer-events:none;padding:1px;position:absolute;inset:0;
  background:linear-gradient(155deg,var(--rim-hi) 0%,var(--rim-mid) 22%,var(--rim-lo) 50%,var(--rim-mid) 78%,var(--rim-op) 100%);
  -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);mask-composite:exclude}
/* broad specular sheen across the upper half */
.namePill:before,.composerGlass:before,.panelCta:before,.panelClose:before,.lbBtn:before,.lbDots:before,.psCount:before{content:"";z-index:-1;border-radius:inherit;pointer-events:none;position:absolute;inset:0;
  background:linear-gradient(115deg,#ffffff00 8%,var(--glass-spec) 30%,#ffffff00 46%),linear-gradient(180deg,var(--glass-spec2),#fff0 45%)}
@media (prefers-reduced-transparency:reduce){
  .namePill,.composerGlass,.panelCta,.panelClose,.lbBtn,.lbDots,.psCount{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:var(--panel)!important}
}
@supports (corner-shape:squircle){
  .panel,.contactGroup,.card{corner-shape:superellipse(1.5)}
}

/* composer */
.composerBar{z-index:20;padding:0 20px calc(22px + env(safe-area-inset-bottom,0px));pointer-events:none;justify-content:center;transition:transform .25s cubic-bezier(.32,.72,0,1);display:flex;position:fixed;bottom:0;left:0;right:0}
@media (min-width:768px){.composerBar.shifted{transform:translate(-25vw)}}
.composer{pointer-events:auto;isolation:isolate;border-radius:999px;align-items:center;gap:8px;width:100%;max-width:356px;height:44px;padding:0 7px 0 0;transition:transform .46s cubic-bezier(.32,.72,0,1);display:flex;position:relative;transform:translateY(calc(100% + 24px))}
.composer.entered{transform:translateY(0)}
.composer.entered:active:not(:has(.sendBtn:active)){transition:transform 80ms cubic-bezier(.2,0,.2,1);transform:scale(1.015)}
.composerGlass{z-index:0;border-radius:inherit;pointer-events:none;position:absolute;inset:0}
.composerInput{z-index:1;min-width:0;color:var(--label);letter-spacing:-.4px;background:0 0;border:0;flex:auto;align-self:stretch;padding:0 0 0 18px;font-size:16px;line-height:22px;position:relative;cursor:text}
.composerInput::placeholder{color:var(--secondary)}
.sendBtn{background:var(--accent);color:#fff;z-index:1;border-radius:999px;flex:none;place-items:center;width:38px;height:30px;transition:transform .42s cubic-bezier(.34,1.56,.64,1),background .2s;display:grid;position:relative}
.sendBtn:disabled{background:var(--send-disabled);cursor:default}
.sendBtn:not(:disabled):active{transition:transform 80ms cubic-bezier(.2,0,.2,1);transform:scale(1.1)}

/* thread */
.chat{--header-h:calc(20px + env(safe-area-inset-top,0px) + 58px - 3px + 31px);--thread-pad:clamp(calc(var(--header-h) + 56px),21vh,calc(var(--header-h) + 120px));--composer-h:calc(44px + 22px + env(safe-area-inset-bottom,0px));
  max-width:420px;min-height:100vh;padding:var(--thread-pad) 20px calc(var(--composer-h) + 48px);flex-direction:column;margin-inline:auto;transition:transform .25s cubic-bezier(.32,.72,0,1);display:flex}
@media (min-width:768px){.chat.shifted{transform:translate(-25vw)}}
@media (max-width:639px){
  .chat{padding-bottom:calc(var(--thread-pad) - var(--header-h))}
  .composerBar{padding:0 20px calc(28px + env(safe-area-inset-bottom,0px));position:static}
  .composer{transform:none}
}
.bubble{background:var(--received);width:fit-content;max-width:85%;color:var(--label);letter-spacing:-.4px;overflow-wrap:break-word;border-radius:20px;margin-bottom:16px;padding:8px 14px;font-size:16px;font-weight:400;line-height:22px;position:relative}
.bubble.connected{margin-bottom:4px}
.bubble.tailed:before{content:"";background:var(--received);border-bottom-right-radius:16px 14px;border-bottom-left-radius:4px;width:20px;height:20px;position:absolute;bottom:0;left:-7px}
.bubble.tailed:after{content:"";background:var(--page);border-bottom-right-radius:10px;width:26px;height:20px;position:absolute;bottom:0;left:-26px}
.bubble a{color:var(--accent);transition:opacity .15s;cursor:pointer}
.bubble a:hover{opacity:.7}
.bubble:has(.reaction){margin-top:0;padding-right:24px}
.sent{background:var(--accent);color:#fff;align-self:flex-end}
.sent.tailed:before{background:var(--accent);border-bottom-right-radius:4px;border-bottom-left-radius:16px 14px;left:auto;right:-7px}
.sent.tailed:after{border-bottom-right-radius:0;border-bottom-left-radius:10px;left:auto;right:-26px}
.sent a{color:#fff}
.timestamp{color:var(--secondary);text-align:center;align-self:center;margin:40px 0 16px;font-size:11px;font-weight:400;line-height:15px}
.timestamp strong{font-weight:600}
.chat>.timestamp:first-child{margin-top:0}
.receipt{color:var(--secondary);align-self:flex-end;margin:-12px 4px 16px 0;font-size:11px;font-weight:400;line-height:15px}

/* reactions */
.reaction{user-select:none;z-index:2;position:absolute;top:-14px;right:-15px;animation:pop .5s cubic-bezier(.34,1.56,.64,1) both}
@keyframes pop{from{transform:scale(0)}to{transform:scale(1)}}
.reactionFace{background:var(--rc,var(--accent));color:#fff;border-radius:50%;place-items:center;width:32px;height:32px;line-height:1;display:grid;box-shadow:inset 0 1px 0 #ffffff55,inset 0 -2px 3px #00000026}
.reactionTrailLarge,.reactionTrailSmall{background:var(--rs,var(--accent));border-radius:50%;position:absolute}
.reactionTrailLarge{width:9px;height:9px;bottom:-1px;right:-1px}
.reactionTrailSmall{width:4px;height:4px;bottom:-5px;right:-4px}

/* word animations */
.waveWord{white-space:nowrap}
.waveLetter{vertical-align:baseline;line-height:inherit;transform-origin:50% 78%;animation-duration:3s;animation-timing-function:cubic-bezier(.22,1,.36,1);animation-iteration-count:infinite;animation-delay:calc(1s + var(--i) * var(--fx-stagger,45ms));display:inline-block}
@keyframes ripple{0%,33.3%,100%{transform:translateY(0)}11.7%{transform:translateY(-7px)}}
@keyframes explode{0%,46.2%,100%{transform:translate(0) scale(1)}10.5%{transform:translate(calc(var(--d) * 12px),-6px) scale(1.22)}25.2%{transform:translate(calc(var(--d) * -2px),2px) scale(.98)}}
.fxRipple .waveLetter{--fx-stagger:55ms;animation-name:ripple}
.fxExplode .waveLetter{--fx-stagger:26ms;animation-name:explode;animation-duration:2s;animation-timing-function:cubic-bezier(.3,1.4,.5,1)}

/* stacked link cards */
.stackWrap{--media-h:145px;text-align:left;width:230px;margin-bottom:16px;display:block;position:relative;color:inherit;text-decoration:none}
.stackWrap.connected{margin-bottom:4px}
.card{background:var(--card);border-radius:24px;overflow:hidden}
.card{z-index:1;width:100%;display:block;position:relative;transition:transform .42s cubic-bezier(.34,1.56,.64,1)}
.stackWrap:active .card{transition:transform 80ms cubic-bezier(.2,0,.2,1);transform:scale(.97)}
.cardMedia{width:100%;height:var(--media-h);display:block;position:relative}
.cardMedia svg,.cardMedia img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover}
.cardBody{padding:11px 14px 14px;display:block}
.cardTitle{color:var(--label);letter-spacing:-.2px;font-size:14px;font-weight:600;line-height:19px;display:block}
.cardSub{color:var(--secondary);letter-spacing:-.1px;font-size:13px;font-weight:400;line-height:18px;display:block}

/* typing indicator */
.typing{background:var(--received);width:fit-content;border-radius:20px;margin-bottom:15px;padding:14px 16px;position:relative;display:flex;gap:5px}
.typing:before{content:"";background:var(--received);width:12px;height:12px;box-shadow:-7.5px 7.5px 0 -3.5px var(--received);border-radius:50%;position:absolute;bottom:-2px;left:-2px}
.typing i{background:var(--secondary);opacity:.35;border-radius:50%;width:8px;height:8px;animation:pulse 1.4s ease-in-out infinite}
.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
@keyframes pulse{0%,60%,100%{opacity:.35}30%{opacity:1}}

/* panel */
.backdrop{z-index:30;pointer-events:none;position:fixed;inset:0}
.panel{z-index:40;background:var(--panel);contain:layout style;will-change:transform;border-radius:32px;width:calc(50vw - 28px);position:fixed;top:14px;bottom:14px;right:14px;overflow:hidden;
  transform:translateX(calc(100% + 28px));transition:transform .45s cubic-bezier(.32,.72,0,1)}
.panel[hidden]{display:block;visibility:hidden}
.panel.open{transform:none;visibility:visible}
@media (max-width:767px){.panel{width:calc(100vw - 24px);top:12px;bottom:12px;right:12px}}
@media (max-width:639px){
  .backdrop.open{background:var(--backdrop);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);pointer-events:auto}
  .panel{border-radius:28px 28px 0 0;width:100%;height:min(88dvh,760px);inset:auto 0 0;transform:translateY(100%)}
  .panel.open{transform:none}
}
.sheetHandleArea{display:none}
@media (max-width:639px){
  .sheetHandleArea{z-index:60;place-items:start center;width:72px;height:28px;padding-top:8px;display:grid;position:absolute;top:0;left:50%;transform:translate(-50%)}
  .sheetHandle{background:#3c3c4338;border-radius:999px;width:36px;height:5px}
}
.panelActions{top:29px;right:var(--panel-gutter);z-index:50;align-items:center;gap:10px;display:flex;position:absolute}
.panelCta,.panelClose{color:var(--icon);border-radius:50%;flex:none;place-items:center;width:34px;height:34px;transition:transform .42s cubic-bezier(.34,1.56,.64,1);display:grid}
.panelCta[hidden]{display:none}
.panelClose{color:var(--close-icon)}
.panelCta:active,.panelClose:active{transition:transform 80ms cubic-bezier(.2,0,.2,1);transform:scale(1.1)}
@media (max-width:639px){.panelClose{display:none}}
.panelBody{position:absolute;inset:0;overflow-y:auto;scrollbar-width:none;overscroll-behavior:contain}
.panelBody::-webkit-scrollbar{display:none}

/* contact panel */
.contactBody{flex-direction:column;justify-content:safe center;align-items:center;gap:14px;padding:34px 32px 30px;display:flex;position:absolute;inset:0;overflow-y:auto;scrollbar-width:none}
.contactBody::-webkit-scrollbar{display:none}
@media (max-width:639px){.contactBody{padding:40px 24px calc(24px + env(safe-area-inset-bottom,0px))}}
.contactGroup{background:var(--group);border-radius:16px;flex:none;width:100%;max-width:400px;overflow:hidden}
.contactRow{padding:10px 16px 11px;display:block;position:relative}
.contactRow+.contactRow:before{content:"";background:var(--separator);height:1px;position:absolute;top:0;left:16px;right:16px}
.contactRowLabel{color:var(--secondary);font-size:12px;display:block}
.contactRowValue{color:var(--accent);letter-spacing:-.4px;font-size:17px;line-height:23px;transition:opacity .15s;display:block}
a.contactRow:hover .contactRowValue{opacity:.7}
.contactRowPlain{color:var(--label)}

/* services list */

.letter{white-space:pre;display:inline-block;animation:letterType .18s cubic-bezier(.23,1,.32,1) var(--delay,0s) backwards}
@keyframes letterType{0%{opacity:0;filter:blur(3px);transform:translateY(.2em)}100%{opacity:1;filter:blur(0);transform:none}}

@media (prefers-reduced-motion:reduce){
  .waveLetter,.typing i,.letter,.reaction{animation:none}
  .bubble,.timestamp,.receipt,.stackWrap,.workGrid,.photoStack{opacity:1;filter:none;animation:none}
}

/* WebGPU liquid glass (glass-gpu.js) draws the pill and the composer; these are only kept for layout */

/* DEV toggle, top left. Only injected on localhost by chat.js. */
.devToggle{position:fixed;top:16px;left:16px;z-index:60;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:var(--label);
  background:var(--group);box-shadow:0 0 0 .5px var(--separator),0 4px 12px -4px #00000040;transition:transform .42s cubic-bezier(.34,1.56,.64,1)}
.devToggle:active{transform:scale(1.1);transition:transform 80ms cubic-bezier(.2,0,.2,1)}

/* reaction personalities */
.reactionFace svg{overflow:visible;transform-box:fill-box}
.rx svg *{transform-box:fill-box;transform-origin:center}
.rx-framer{--rc:linear-gradient(150deg,#4d9bff,#0a54f0);--rs:#0a54f0}
.rx-framer .reactionFace{box-shadow:inset 0 1px 0 #ffffff66,inset 0 -2px 3px #00000026,0 0 0 1px #0a54f033}
.rx-framer svg{width:15px;height:15px;transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.rx-framer:hover svg{transform:rotate(-8deg) scale(1.08)}
.rx-heart{--rc:linear-gradient(150deg,#ff7a98,#ee1f55);--rs:#ee1f55}
.rx-heart svg{animation:beat 2.6s ease-in-out infinite}
@keyframes beat{0%,50%,100%{transform:scale(1)}12%{transform:scale(1.2)}24%{transform:scale(.97)}36%{transform:scale(1.12)}}
.rx-sparkle{--rc:linear-gradient(150deg,#ffe07a,#ff8a1f);--rs:#ff8a1f}
.rx-sparkle svg{filter:drop-shadow(0 0 2px #fff8)}
.rx-sparkle .ic-main{animation:twinkle 3s ease-in-out infinite}
.rx-sparkle .ic-small{animation:twinkle 3s ease-in-out -1.2s infinite}
@keyframes twinkle{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(.78) rotate(18deg);opacity:.85}}
.rx-layers{--rc:linear-gradient(150deg,#b39bff,#5a3df0);--rs:#6446f2}
.rx-layers .l1{animation:lift 3.2s ease-in-out infinite}
.rx-layers .l3{animation:sink 3.2s ease-in-out infinite}
@keyframes lift{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.6px)}}
@keyframes sink{0%,100%{transform:translateY(0)}50%{transform:translateY(1.6px)}}
.rx-cursor{--rc:linear-gradient(150deg,#58b0ff,#0a6cff);--rs:#0a78ff}
.rx-cursor .ic-main{animation:nudge 3.2s ease-in-out infinite}
.rx-cursor .ic-ring{animation:tap 3.2s ease-out infinite}
@keyframes nudge{0%,55%,100%{transform:translate(0,0)}65%{transform:translate(1.6px,1.6px) scale(.94)}78%{transform:translate(0,0)}}
@keyframes tap{0%,60%{opacity:0;transform:scale(.4)}68%{opacity:1;transform:scale(.8)}100%{opacity:0;transform:scale(1.5)}}
/* messages only: the iOS Messages bubble on its green */
.rx-msg{--rc:linear-gradient(180deg,#5af575,#0bbd2b);--rs:#0bbd2b}
.rx-msg svg{width:21px;height:21px}
.rx-msg .ic-main{transform-origin:50% 90%;animation:bubbleBob 3.2s ease-in-out infinite}
@keyframes bubbleBob{0%,60%,100%{transform:scale(1)}70%{transform:scale(1.14) rotate(-4deg)}80%{transform:scale(.96)}90%{transform:scale(1.05)}}
/* more tapbacks: thumbs up tips, !! shakes, HA bounces */
.rx-thumb{--rc:linear-gradient(150deg,#6fe39a,#1fb35c);--rs:#1fb35c}
.rx-thumb .ic-main{transform-origin:20% 90%;animation:thumbTip 3s ease-in-out infinite}
.rx-bang{--rc:linear-gradient(150deg,#ffa35c,#f2541b);--rs:#f2541b}
.rx-bang .ic-main{animation:bangShake 3.2s ease-in-out infinite}
.rx-haha{--rc:linear-gradient(150deg,#ff8fdc,#c93aa5);--rs:#c93aa5}
.rx-haha .ic-main{animation:hahaBounce 2.4s ease-in-out infinite}
@keyframes thumbTip{0%,60%,100%{transform:rotate(0)}70%{transform:rotate(-16deg)}82%{transform:rotate(4deg)}}
@keyframes bangShake{0%,62%,100%{transform:translateX(0) rotate(0)}68%{transform:translateX(-1px) rotate(-6deg)}74%{transform:translateX(1px) rotate(6deg)}80%{transform:translateX(-1px) rotate(-4deg)}86%{transform:translateX(0) rotate(0)}}
@keyframes hahaBounce{0%,55%,100%{transform:scale(1) translateY(0)}65%{transform:scale(1.18) translateY(-1px)}75%{transform:scale(.94) translateY(0)}85%{transform:scale(1.08)}}
@media (prefers-reduced-motion:reduce){.rx svg,.rx svg *{animation:none!important}}

/* contact panel: widget cards */
.contactBody>*{animation:cIn .6s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(var(--i,0) * 60ms + 120ms)}
@keyframes cIn{from{opacity:0;transform:translateY(12px) scale(.98);filter:blur(5px)}to{opacity:1;transform:none;filter:blur(0)}}
.cTop{width:100%;max-width:400px;display:flex;padding-right:56px;margin-bottom:2px}

.cAct{background:var(--group);border-radius:16px;padding:13px 0 11px;display:grid;justify-items:center;gap:6px;color:var(--accent);font-size:12px;font-weight:500;letter-spacing:-.1px;transition:transform .42s cubic-bezier(.34,1.56,.64,1),background .2s}
.cAct svg{width:22px;height:22px}
.cAct:hover{background:color-mix(in srgb,var(--group),var(--accent) 8%)}
.cAct:active{transform:scale(.95);transition:transform 80ms cubic-bezier(.2,0,.2,1)}

.cSocial{display:flex;align-items:center;gap:12px;transition:background .2s}
.cSocial:hover{background:color-mix(in srgb,var(--group),var(--label) 4%)}

.cSocial .contactRowValue{font-size:16px}
.cGo{margin-left:auto;color:var(--quiet);transition:transform .3s cubic-bezier(.34,1.56,.64,1),color .2s}.cGo svg{width:13px;height:13px}
.cSocial:hover .cGo{transform:translate(2px,-2px);color:var(--secondary)}

.sName{font-size:15px;letter-spacing:-.25px;color:var(--label);font-weight:500}
.plans{--e:cubic-bezier(.23,1,.32,1);display:grid;gap:8px}
.plan{display:grid;grid-template-columns:22px 1fr auto;column-gap:12px;align-items:center;padding:14px 16px;border-radius:22px;background:var(--group);cursor:pointer;-webkit-tap-highlight-color:transparent;
  box-shadow:0 0 0 .5px color-mix(in srgb,var(--label),transparent 92%);transition:box-shadow .22s var(--e),transform .16s var(--e)}
.plan:active{transform:scale(.97)}
.plan:focus-visible{outline:2px solid color-mix(in srgb,var(--accent),#fff 30%);outline-offset:2px}
.plan[aria-checked="true"]{box-shadow:0 0 0 1.5px var(--accent),0 10px 24px -14px color-mix(in srgb,var(--accent),transparent 40%)}

@media (prefers-reduced-motion:reduce){.contactBody>*{animation:none}}

/* tabbed panel: segmented control, scrolling views, pinned primary action */
.contactBody.tabs{padding:0;gap:0;justify-content:flex-start;align-items:stretch;overflow:hidden}
.pBar{padding:28px 78px 12px 24px;flex:none}
.seg{--idx:0;position:relative;display:grid;grid-template-columns:repeat(3,1fr);height:36px;padding:3px;border-radius:999px;max-width:340px;background:light-dark(#e9e9eb,#2c2c2e)}
.segThumb{position:absolute;top:3px;bottom:3px;left:3px;width:calc((100% - 6px) / 3);border-radius:999px;background:light-dark(#fff,#636366);box-shadow:0 1px 3px #0000002e,0 0 0 .5px #0000000f;
  transform:translateX(calc(var(--idx) * 100%));transition:transform .32s cubic-bezier(.32,.72,0,1)}
.segBtn{position:relative;z-index:1;font-size:13px;font-weight:600;letter-spacing:-.1px;color:var(--secondary);border-radius:999px;transition:color .2s ease,transform .16s ease-out}
.segBtn[aria-selected="true"]{color:var(--label)}
.segBtn:active{transform:scale(.97)}
.pViews{flex:1;min-height:0;overflow-y:auto;padding:8px 24px 28px;scrollbar-width:none;overscroll-behavior:contain}
.pViews::-webkit-scrollbar{display:none}
.pView{max-width:400px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.pView[hidden]{display:none}
.pView.in>*{animation:tIn .24s cubic-bezier(.23,1,.32,1) backwards;animation-delay:calc(var(--k,0) * 40ms)}
.pView.in>*:nth-child(2){--k:1}.pView.in>*:nth-child(3){--k:2}.pView.in>*:nth-child(4){--k:3}.pView.in>*:nth-child(5){--k:4}.pView.in>*:nth-child(6){--k:5}
@keyframes tIn{from{opacity:0;transform:translateY(8px);filter:blur(3px)}to{opacity:1;transform:none;filter:blur(0)}}
.pView .cTop{padding-right:0;margin:0}
.pLead{font-size:22px;line-height:26px;letter-spacing:-.6px;font-weight:600;color:var(--label);padding:2px 4px 6px;margin:0}

@media (max-width:639px){.pBar{padding:30px 24px 12px}.seg{height:40px;max-width:none}.segBtn{font-size:14px}}
@media (prefers-reduced-motion:reduce){.pView.in>*{animation:none}.segThumb{transition:none}}

.cAct{transition:transform .16s cubic-bezier(.23,1,.32,1),background-color .2s}
.cAct:active,.segBtn:active{transform:scale(.96)}

/* About typography: one ramp (Apple HIG sizes), tracking tightens as size grows, numbers are tabular, text wraps cleanly. */
.contactBody{--ff:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;--t-cap:12px/16px;--t-foot:13px/18px;--t-sub:15px/20px;--t-body:17px/22px;--t-t2:22px/28px;
  font-kerning:normal;font-synthesis:none;text-rendering:optimizeLegibility;font-feature-settings:"kern","calt","cv11"}
.pLead{font:600 var(--t-t2) var(--ff);letter-spacing:-.45px;text-wrap:balance;padding:2px 4px 8px}
.segBtn{font:600 var(--t-foot) var(--ff);line-height:16px;letter-spacing:-.08px}
.cAct{font:500 var(--t-cap) var(--ff);letter-spacing:0}
.contactRowLabel{font:500 var(--t-cap) var(--ff);letter-spacing:.01em;margin-bottom:1px}
.contactRowValue,.cSocial .contactRowValue{font:400 var(--t-body) var(--ff);letter-spacing:-.41px}

/* Ink on glass: glass-tone.js tags each control with the tone of what is behind it. */
.namePill[data-tone="dark"],.composer[data-tone="dark"],.panelClose[data-tone="dark"]{--label:#fff;--secondary:#ffffffb3;--icon:#ffffffe0;--close-icon:#ffffffe0}
.namePill[data-tone="light"],.composer[data-tone="light"],.panelClose[data-tone="light"]{--label:#000;--secondary:#3c3c4399;--icon:#000000b3;--close-icon:#000000b3}

/* Chat link card: depth that reads, a hairline edge, a fan that opens on hover, a clear "open" affordance */
.stackWrap{--e:cubic-bezier(.23,1,.32,1);-webkit-tap-highlight-color:transparent}
.card{box-shadow:0 0 0 .5px color-mix(in srgb,var(--label),transparent 88%),0 1px 2px #0000001f,0 10px 22px -14px #00000073;transition:transform .16s var(--e),box-shadow .2s var(--e)}
.stackWrap:active .card{transition:transform .16s var(--e);transform:scale(.97)}
.stackWrap:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:24px}
.cardMedia:after{content:"";position:absolute;inset:auto 0 0;height:46%;background:linear-gradient(180deg,#0000,#0000004d);pointer-events:none}
.cardBody{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 12px 12px 14px}
.cardText{display:block;min-width:0}
.cardTitle{font-size:15px;line-height:20px;letter-spacing:-.24px}
.cardGo{display:flex;align-items:center;gap:6px;flex:none;height:28px;padding:0 9px;border-radius:999px;background:color-mix(in srgb,var(--accent),transparent 86%);color:var(--accent);font-size:13px;font-weight:600;letter-spacing:-.08px;transition:background-color .2s var(--e)}
.cardGo b{font-weight:600}
.cardGo svg{width:12px;height:12px;transition:transform .25s var(--e)}
@media (hover:hover){.stackWrap:hover .cardGo{background:color-mix(in srgb,var(--accent),transparent 78%)}.stackWrap:hover .cardGo svg{transform:translate(1px,-1px)}}

.cardGo{width:30px;height:30px;padding:0;justify-content:center;border-radius:50%}
.cardGo svg{width:13px;height:13px}

.cardTag{position:absolute;top:10px;left:10px;z-index:1;font:600 11px/14px ui-sans-serif,-apple-system,system-ui,sans-serif;font-style:normal;letter-spacing:.01em;padding:3px 9px;border-radius:999px;background:#0000008c;color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}

/* Pricing rows, refined: the chosen plan is tinted and its price takes the accent */
.plans{gap:10px}
.plan{padding:15px 16px;transition:box-shadow .22s var(--e),background-color .22s var(--e),transform .16s var(--e)}
@media (hover:hover){.plan[aria-checked="false"]:hover{background:color-mix(in srgb,var(--group),var(--label) 4%)}}
.plan[aria-checked="true"]{background:color-mix(in srgb,var(--group),var(--accent) 9%)}

/* radio: smaller, aligned with the plan name */
.plan{grid-template-columns:16px 1fr auto;column-gap:12px}

/* Services: text-only chips */

/* Services: iOS Settings rows */

/* pricing layout: price column, "from" under the price on the sub line */

/* Pricing: swipe cards (snap rail) */
.plans{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;position:relative;margin:0 -24px;padding:6px 24px 14px;scrollbar-width:none;overscroll-behavior-x:contain}
.plans::-webkit-scrollbar{display:none}
.plan{flex:none;width:min(78%,300px);scroll-snap-align:start;scroll-margin-left:24px;display:flex;flex-direction:column;align-items:stretch;gap:14px;padding:18px;min-height:300px;border-radius:26px;transition:box-shadow .22s var(--e),background-color .22s var(--e),transform .16s var(--e)}
.plan:active{transform:scale(.98)}

/* Pricing: outlined options + shared "included" list */
.plans{display:grid;gap:10px;overflow:visible;margin:0;padding:0;background:none;border-radius:0;position:relative}
.plan{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:68px;padding:14px 18px;border-radius:20px;cursor:pointer;-webkit-tap-highlight-color:transparent;
  background:transparent;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--label),transparent 86%);transition:box-shadow .22s var(--e),background-color .22s var(--e),transform .16s var(--e)}
.plan:active{transform:scale(.98)}
.plan:focus-visible{outline:2px solid color-mix(in srgb,var(--accent),#fff 30%);outline-offset:2px}
@media (hover:hover){.plan[aria-checked="false"]:hover{background:color-mix(in srgb,var(--label),transparent 96%)}}
.plan[aria-checked="true"]{background:color-mix(in srgb,var(--accent),transparent 92%);box-shadow:inset 0 0 0 2px var(--accent)}

@media (prefers-reduced-motion:reduce){.plan{transition:none}}

/* Pricing: back to the plain outlined options */
.plan{padding:16px 18px;min-height:0;border-radius:18px}
.plan[aria-checked="true"]{background:transparent}
@media (hover:hover){.plan[aria-checked="false"]:hover{background:transparent}}

/* services: same language as pricing and contact (neutral rows, one blue accent) */

/* About panel spacing system (4/8 pt scale, Apple inset grouped lists)
   inside a control 8-12 · between controls 8-12 · between groups 24 · panel gutter 24 */
.root{--s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;
  --gutter:var(--panel-gutter);--r-group:20px;--row-x:var(--s-4);--row-y:var(--s-3);--row-min:52px}
.pBar{padding:28px 78px var(--s-4) var(--gutter)}
.pViews{padding:var(--s-2) var(--gutter) var(--s-6)}
.pView{gap:var(--s-5)}
.pLead{padding:0 var(--s-1);margin:0 0 calc(var(--s-4) - var(--s-5))}

.contactGroup,.plan,.cAct{border-radius:var(--r-group)}

.contactRow{padding:var(--row-y) var(--row-x)}
.contactRow+.contactRow:before{left:var(--row-x);right:0;height:.5px}
.cSocial{gap:var(--s-3)}
.cSocial.contactRow:before{left:calc(var(--row-x) + 32px + var(--s-3))}
.plans{gap:var(--s-2)}
.plan{min-height:var(--row-min);padding:var(--row-y) var(--row-x);gap:var(--s-3)}

.cAct{padding:var(--s-3) 0;gap:var(--s-2)}
@media (max-width:639px){.pBar{padding:30px var(--gutter) var(--s-4)}}

/* work grid: iMessage-style 2x2 photo message, opens the full gallery */
.workGrid{--e:cubic-bezier(.23,1,.32,1);display:grid;grid-template-columns:1fr 1fr;gap:2px;width:230px;margin-bottom:16px;border-radius:24px;overflow:hidden;position:relative;text-align:left;-webkit-tap-highlight-color:transparent;box-shadow:0 0 0 .5px color-mix(in srgb,var(--label),transparent 88%);transition:transform .16s var(--e)}
.workGrid:active{transform:scale(.97)}
.workGrid:focus-visible{outline:2px solid var(--accent);outline-offset:4px}

/* gallery panel */

@media (prefers-reduced-motion:reduce){.workGrid{transition:none}}

/* voice note: received bubble with a play button and a waveform that fills while it plays */
.voiceMsg{display:flex;align-items:center;gap:10px;width:230px;max-width:85%;padding:6px 14px 6px 6px;border-radius:23px}
.voicePlay{position:relative;z-index:1;flex:none;width:34px;height:34px;border-radius:50%;border:0;background:var(--accent);color:#fff;display:grid;place-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .16s cubic-bezier(.23,1,.32,1)}
.voicePlay:active{transform:scale(.92)}
.voicePlay svg{width:14px;height:14px}
.voiceWave{flex:1;height:28px;display:flex;align-items:center;gap:2px}
.voiceWave i{flex:1;min-width:2px;border-radius:2px;background:var(--secondary);opacity:.5;transition:opacity .15s,background-color .15s}
.voiceWave i.on{background:var(--accent);opacity:1}
.voiceDur{font-size:12px;line-height:16px;color:var(--secondary);font-variant-numeric:tabular-nums;min-width:26px;text-align:right}

.voiceMsg[hidden]{display:none}

/* services: a quick conversation. Tap a service, we answer in a bubble. */

@keyframes askPop{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}

/* pricing: each plan is a message card in a thread; tap to open what is inside */
.pcThread{display:grid;gap:var(--s-2);justify-items:start}
.pcCard{position:relative;width:88%;background:var(--group);border-radius:20px;padding:var(--s-3) var(--s-4);display:grid;gap:2px;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .16s cubic-bezier(.23,1,.32,1);animation:askPop .4s cubic-bezier(.23,1,.32,1) backwards;animation-delay:calc(var(--k) * 90ms + 120ms)}
.pcCard:active{transform:scale(.98)}
.pcCard:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pcTop{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-3)}
.pcTop b{font:600 var(--t-body) var(--ff);letter-spacing:-.41px;color:var(--label)}
.pcTop span{font:700 var(--t-t2) var(--ff);letter-spacing:-.5px;color:var(--label);font-variant-numeric:tabular-nums}
.pcCard small{font:400 var(--t-foot) var(--ff);color:var(--secondary)}
.pcBody{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s cubic-bezier(.23,1,.32,1)}
.pcCard.open .pcBody{grid-template-rows:1fr}
.pcBody>div{overflow:hidden}
.pcFeats{list-style:none;margin:0;padding:var(--s-3) 0 var(--s-1);display:grid;gap:var(--s-3);opacity:0;transform:translateY(-4px);transition:opacity .25s cubic-bezier(.23,1,.32,1),transform .3s cubic-bezier(.23,1,.32,1)}
.pcCard.open .pcFeats{opacity:1;transform:none}
.pcFeats li{display:flex;align-items:center;gap:10px;font:400 var(--t-sub) var(--ff);letter-spacing:-.24px;color:var(--label)}
.pcFeats svg{width:12px;height:12px;flex:none;color:var(--accent)}
.pcRx{position:absolute;top:-12px;right:-12px;width:32px;height:32px;border-radius:50%;background:linear-gradient(150deg,#ffb02e,#ff4d1a);color:#fff;display:grid;place-items:center;box-shadow:inset 0 1px 0 #ffffff55;animation:askPop .5s cubic-bezier(.34,1.56,.64,1) .6s backwards}
.pcRx svg{width:19px;height:19px;overflow:visible;transform-box:fill-box;transform-origin:50% 100%;animation:pcFlick 1.6s ease-in-out infinite}
.pcEm{position:absolute;left:50%;top:6px;width:3px;height:3px;border-radius:50%;background:#ffe27a;opacity:0;pointer-events:none;animation:pcEmber 1.6s ease-out infinite}
.pcEm2{margin-left:-7px;animation-delay:.5s}.pcEm3{margin-left:6px;animation-delay:1s}
@keyframes pcFlick{0%,100%{transform:scale(1,1) rotate(-1deg)}25%{transform:scale(.96,1.07) rotate(1.5deg)}50%{transform:scale(1.03,.97) rotate(0)}75%{transform:scale(.97,1.05) rotate(-2deg)}}
@keyframes pcEmber{0%{transform:translateY(4px);opacity:0}25%{opacity:1}100%{transform:translateY(-14px);opacity:0}}
@media (prefers-reduced-motion:reduce){.pcCard,.pcRx,.pcRx svg,.pcEm{animation:none}.pcEm{display:none}.pcBody,.pcFeats{transition:none}}

.cSocial.contactRow:before{left:var(--row-x)}

/* contact card: name, round actions, grouped rows (iOS Contacts layout, no poster) */

.cAvail{display:flex;align-items:center;gap:var(--s-2)}

/* availability: read-only switches in an iOS grouped list */
.cAvailBlock{display:grid;gap:var(--s-2)}

.cToggleRow{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);min-height:var(--row-min);padding-block:var(--s-2)}

.cToggleLabel{font:400 var(--t-body) var(--ff);letter-spacing:-.41px;color:var(--label)}
.cSwitch{position:relative;flex:none;width:46px;height:28px;border-radius:999px;background:var(--slot);transition:background-color .25s cubic-bezier(.23,1,.32,1)}
.cSwitch:after{content:"";position:absolute;top:2px;left:2px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 2px 4px #00000033,0 0 0 .5px #0000001a;transition:transform .3s cubic-bezier(.34,1.3,.64,1)}
.cSwitch.on{background:#30d158}
.cSwitch.on:after{transform:translateX(18px)}

@media (prefers-reduced-motion:reduce){.cSwitch,.cSwitch:after{transition:none}}

/* panel nav bar: one 40px row (segmented control + close), centered on the close button, 12px between them */
.pBar{padding:26px calc(var(--gutter) + 34px + var(--s-3)) var(--s-2) var(--gutter)}
.seg{height:40px;padding:4px;max-width:none;background:light-dark(#e5e5ea,#2c2c2e)}
.segThumb{top:4px;bottom:4px;left:4px;width:calc((100% - 8px) / 3);box-shadow:0 1px 2px #00000026,0 2px 6px #0000001a,0 0 0 .5px #0000000f}
.segBtn{font:600 14px/18px var(--ff);letter-spacing:-.15px}
@media (max-width:639px){.pBar{padding:30px var(--gutter) var(--s-2)}}

/* pricing cards read as tappable: a chevron that flips when open, and a soft hover tint */
.pcCard small{display:flex;align-items:center;justify-content:space-between}
.pcChev{width:14px;height:14px;flex:none;color:var(--secondary);transition:transform .32s cubic-bezier(.23,1,.32,1),color .2s}
.pcCard.open .pcChev{transform:rotate(180deg)}
.pcCard:hover .pcChev{color:var(--label)}
.pcCard{transition:transform .16s cubic-bezier(.23,1,.32,1),background-color .2s}
.pcCard:hover{background:color-mix(in srgb,var(--group),var(--label) 3%)}
@media (prefers-reduced-motion:reduce){.pcChev{transition:none}}

/* hover must stay readable against the panel: tint cards with the accent, not a neutral that lands on the panel color */
.panel{background:light-dark(#efeff4,#1c1c1e)}
.pcCard:hover,.cSocial:hover{background:color-mix(in srgb,var(--group),var(--accent) 9%)}
@media (hover:hover){.plan[aria-checked="false"]:hover{background:color-mix(in srgb,var(--group),var(--accent) 9%)}}

/* hover stays neutral gray but sits clearly apart from both the card and the panel */
.pcCard:hover,.cSocial:hover{background:light-dark(#e2e2e7,#3a3a3c)}
@media (hover:hover){.plan[aria-checked="false"]:hover{background:light-dark(#e2e2e7,#3a3a3c)}}
.pcCard:hover,.cSocial:hover{background:light-dark(#d9d9df,#3f3f42)}
@media (hover:hover){.plan[aria-checked="false"]:hover{background:light-dark(#d9d9df,#3f3f42)}}
.pcCard:hover,.cSocial:hover{background:light-dark(#e4e4e9,#38383b)}
@media (hover:hover){.plan[aria-checked="false"]:hover{background:light-dark(#e4e4e9,#38383b)}}

/* services: the conversation fills the panel and the choices sit in a tray pinned to the bottom, like quick replies */
.panel{--pbg:light-dark(#efeff4,#1c1c1e);background:var(--pbg)}
.pViews{display:flex;flex-direction:column}
.pView{width:100%;flex:1 0 auto}

/* services messages get the iMessage tail */

/* clear chat: appears above the composer once the visitor has sent a few messages */
.clearChat{--e:cubic-bezier(.23,1,.32,1);position:absolute;left:50%;bottom:calc(22px + 44px + var(--s-2) + env(safe-area-inset-bottom,0px));translate:-50% 0;pointer-events:auto;display:flex;align-items:center;height:32px;border-radius:999px;overflow:hidden;font:600 13px/16px var(--ff,system-ui,sans-serif);letter-spacing:-.1px;background:color-mix(in srgb,var(--page),transparent 18%);-webkit-backdrop-filter:blur(16px) saturate(1.6);backdrop-filter:blur(16px) saturate(1.6);box-shadow:0 0 0 .5px color-mix(in srgb,var(--label),transparent 86%),0 4px 14px #0000001a}
.clearChat[hidden]{display:none}
.clearCount{padding:0 4px 0 14px;color:var(--secondary);font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}
.clearGo{margin:3px;height:26px;padding:0 12px;border:0;border-radius:999px;background:none;color:var(--accent);font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .2s,transform .16s var(--e)}
.clearGo:hover{background:color-mix(in srgb,var(--page),var(--accent) 12%)}
.clearGo:active{transform:scale(.95)}
.clearGo:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

.chat>.clearing{animation:clearOut .32s cubic-bezier(.23,1,.32,1) forwards;pointer-events:none}
@keyframes clearOut{to{opacity:0;translate:0 6px;scale:.96}}
@media (prefers-reduced-motion:reduce){.clearChat{animation:none;transition:none}.chat>.clearing{animation:none;opacity:0}}

/* clear chat: the same move in and out (fade, rise 6px, scale .96), driven by .on instead of display */
.clearChat{animation:none;opacity:0;visibility:hidden;translate:-50% 6px;scale:.96;transition:opacity .32s var(--e),translate .32s var(--e),scale .32s var(--e),visibility 0s linear .32s,transform .16s var(--e),color .2s}
.clearChat.on{opacity:1;visibility:visible;translate:-50% 0;scale:1;transition:opacity .32s var(--e),translate .32s var(--e),scale .32s var(--e),visibility 0s,transform .16s var(--e),color .2s}
@media (prefers-reduced-motion:reduce){.clearChat,.clearChat.on{transition:none}}

/* clear chat capsule: same glass as the composer (tint, sheen, lit rim, layered shadow) instead of a flat hairline */
.clearChat{isolation:isolate;
  background:linear-gradient(180deg,var(--glass-sheen-a),var(--glass-sheen-b) 48%,var(--glass-sheen-c)),var(--glass-tint);
  -webkit-backdrop-filter:blur(8px) saturate(1.8) brightness(1.06);backdrop-filter:blur(8px) saturate(1.8) brightness(1.06);
  box-shadow:0 0 0 .5px var(--glass-outline),0 1px 2px -1px var(--glass-drop),0 10px 22px -8px var(--glass-drop),inset 0 1px 0 var(--glass-hi-top),inset 0 -1px 0 var(--glass-hi-bottom),inset 0 0 12px -3px var(--glass-inner)}
.clearChat:after{content:"";z-index:2;border-radius:inherit;pointer-events:none;padding:1px;position:absolute;inset:0;
  background:linear-gradient(155deg,var(--rim-hi) 0%,var(--rim-mid) 22%,var(--rim-lo) 50%,var(--rim-mid) 78%,var(--rim-op) 100%);
  -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);mask-composite:exclude}
.clearChat:before{content:"";z-index:-1;border-radius:inherit;pointer-events:none;position:absolute;inset:0;
  background:linear-gradient(115deg,#ffffff00 8%,var(--glass-spec) 30%,#ffffff00 46%),linear-gradient(180deg,var(--glass-spec2),#fff0 45%)}
@media (prefers-reduced-transparency:reduce){.clearChat{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--panel)}}
.clearGo:hover{background:color-mix(in srgb,var(--accent),transparent 93%)}

/* clear chat: plain text, no capsule */
.clearChat{background:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;border-radius:0;overflow:visible;height:auto;gap:var(--s-2);align-items:baseline;text-shadow:0 0 8px var(--page),0 0 2px var(--page)}
.clearChat:before,.clearChat:after{content:none}
.clearCount{padding:0}
.clearGo{margin:0;height:auto;padding:var(--s-1) 0;border-radius:6px;background:none}
.clearGo:hover{background:none;opacity:.65}
@media (prefers-reduced-transparency:reduce){.clearChat{background:none}}
.clearGo{color:var(--label)}
.clearGo{color:light-dark(#d70015,#ff453a);opacity:.85;transition:opacity .2s}
.clearGo:hover{opacity:.5}

/* rotating placeholder over the composer input */
.phRotate{--e:cubic-bezier(.23,1,.32,1);position:absolute;z-index:1;left:18px;right:64px;top:0;bottom:0;display:flex;align-items:center;overflow:hidden;white-space:pre;color:var(--secondary);font-size:16px;line-height:22px;letter-spacing:-.4px;pointer-events:none;transition:opacity .2s}
.phRotate.away{opacity:0}
.phRotate i{font-style:normal;display:inline-block;animation:phIn .6s var(--e) both;animation-delay:calc(var(--i) * 24ms)}
.phRotate.out i{animation:phOut .3s var(--e) both;animation-delay:0s}
@keyframes phIn{0%{opacity:0;filter:blur(7px);translate:0 5px;color:hsl(calc(var(--h0) + var(--i) / var(--n) * var(--span)) 72% 58% / .55)}50%{color:hsl(calc(var(--h0) + var(--i) / var(--n) * var(--span)) 72% 58% / .55)}100%{opacity:1;filter:blur(0);translate:0 0;color:var(--secondary)}}
@keyframes phOut{to{opacity:0;filter:blur(7px);translate:0 -5px}}
@media (prefers-reduced-motion:reduce){.phRotate i,.phRotate.out i{animation:none}.phRotate.out{opacity:0}}

/* side panels: cap width on big screens; chat recentres in the space left over */
:root{--pw:clamp(380px,50vw - 28px,560px)}
@media (min-width:768px){
  .panel{width:calc(var(--pw))}
  .contactCard.shifted,.composerBar.shifted,.chat.shifted{transform:translate(calc(var(--pw) / -2 - 14px))}
}

.pView{max-width:none}
.pView .contactGroup,.pView .cTop{max-width:none}

/* pricing: the cards share the full height of the panel */
.pView[data-view="pricing"] .pcThread{flex:1;display:flex;flex-direction:column}
.pView[data-view="pricing"] .pcCard{flex:1 1 0}
.pView[data-view="pricing"] .pcThread{justify-items:stretch}
.pView[data-view="pricing"] .pcCard{width:100%;align-content:start}
.pView[data-view="pricing"] .pcCard{flex:0 0 auto}
.pView[data-view="pricing"] .pcCard.open{flex:1 1 auto}
.pView[data-view="pricing"] .pcCard.open{flex:0 0 auto}

/* ── Panel rhythm: one scale for the three side views ──────────────
   space  4 · 8 · 12 · 16 · 24 · 32   (--s-1..--s-6)
   gutter 32 (20 on phones) · row 20×16 (16×14) · section gap 24 · item gap 12
   type   12/16 caption · 13/18 note · 15/20 UI · 17/22 body · 22/28 title */
.panel{--gutter:32px;--row-x:20px;--row-y:16px;--row-min:56px;--gap-section:var(--s-5);--gap-item:var(--s-3)}
@media (max-width:639px){.panel{--gutter:20px;--row-x:16px;--row-y:14px;--row-min:52px}}
.panelActions{top:calc(var(--gutter) + 3px);right:var(--gutter)}
.pBar{padding:var(--gutter) calc(var(--gutter) + 34px + var(--s-3)) var(--s-3) var(--gutter)}
@media (max-width:639px){.pBar{padding:var(--s-5) var(--gutter) var(--s-3)}}
.pViews{padding:var(--s-3) var(--gutter) var(--gutter)}
.pView{gap:var(--gap-section)}
.pLead{margin-bottom:calc(var(--gap-section) * -1 + var(--s-4))}
.pcThread{gap:var(--gap-item)}

.pcCard{padding:var(--row-y) var(--row-x)}
.cAvailBlock{gap:var(--s-3)}
.segBtn{font:600 var(--t-sub) var(--ff);letter-spacing:-.15px}
.pcTop span{font-weight:600}
/* Link-preview card (iMessage style): image fills the bubble, a tinted caption band sits over its bottom */
.stackWrap{--media-h:100%;width:min(260px,78%)}
.card{aspect-ratio:4/3;display:flex;flex-direction:column;justify-content:flex-end;background:var(--received)}
.cardMedia{position:absolute;inset:0;height:100%}
.cardMedia:after,.cardTag,.cardGo{display:none}
.cardBody{position:relative;display:block;padding:10px 14px 12px;background:#00000038;-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2)}
.cardTitle{color:#fff;font-size:15px;line-height:20px;font-weight:600;letter-spacing:-.24px;text-transform:none}
.cardSub{color:#ffffffb3;font-size:13px;line-height:18px}
.cardBody{-webkit-backdrop-filter:none;backdrop-filter:none;background:#00000047}
/* Caption band: blurred, saturated copy of the photo, like a Messages link preview */
.cardBody{overflow:hidden;isolation:isolate;background:#0000}
.cardBody:before{content:"";position:absolute;inset:-24px;z-index:-2;background:var(--bg) center/cover;filter:blur(22px) saturate(1.5)}
.cardBody:after{content:"";position:absolute;inset:0;z-index:-1;background:#00000040}
.cardBody[style*="--tint"]{background:color-mix(in srgb,var(--tint) 88%,#000)}
.cardBody[style*="--tint"]:before,.cardBody[style*="--tint"]:after{display:none}
.cardBody.light[style*="--tint"]{background:color-mix(in srgb,var(--tint) 94%,#000)}
.cardBody.light .cardTitle{color:#1c1c1e}
.cardBody.light .cardSub{color:#1c1c1eb3}
/* iOS link preview: image on top at its own ratio, caption band below it (not over it), bubble radius */
.stackWrap{width:min(258px,78%)}
.card{aspect-ratio:auto;display:block;border-radius:20px;overflow:hidden;box-shadow:none}
.cardMedia{position:relative;inset:auto;height:auto;width:100%}
.cardBody{padding:10px 14px 12px}
.cardTitle{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:15px;line-height:20px}
.cardSub{font-size:13px;line-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stackWrap{width:min(258px,100%)}
.cardMedia img{transform:translateX(var(--shift,0))}
/* Lightbox for the gallery panel */

.lb{--e:cubic-bezier(.23,1,.32,1);position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:#000000d1;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);opacity:0;transition:opacity .22s var(--e)}
.lb[hidden]{display:none}
.lb.open{opacity:1}
.lbFig{margin:0;display:grid;place-items:center;max-width:min(92vw,1100px);max-height:86dvh}
.lbImg{display:block;max-width:100%;max-height:86dvh;border-radius:20px;object-fit:contain;opacity:0;transform:translateX(calc(var(--dir,0) * 24px)) scale(.97);transition:opacity .2s var(--e),transform .26s var(--e);user-select:none;-webkit-user-drag:none}
.lbImg.in{opacity:1;transform:none}
.lbBtn{position:absolute;z-index:1;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:0;color:#fff;cursor:pointer;transition:transform .16s var(--e),background-color .2s var(--e);-webkit-tap-highlight-color:transparent}
.lbBtn svg{width:16px;height:16px}
.lbBtn:active{transform:scale(.94)}
.lbBtn:focus-visible{outline:2px solid #fff;outline-offset:2px}
.lbClose{top:max(20px,env(safe-area-inset-top));right:20px}
.lbPrev,.lbNext{top:50%;margin-top:-22px}
.lbPrev{left:20px}
.lbNext{right:20px}

@media (max-width:639px){.lbPrev,.lbNext{top:auto;bottom:max(14px,env(safe-area-inset-bottom));margin-top:0}.lbPrev{left:20px}.lbNext{right:20px}.lbFig{max-width:94vw;max-height:76dvh}.lbImg{max-height:76dvh}}
@media (prefers-reduced-motion:reduce){.lb,.lbImg,.lbBtn{transition:opacity .15s}.lbImg{transform:none}}
/* Lightbox v2: lighter backdrop, photo kept clear of the arrows, dots instead of a counter */
.lb{padding:80px;background:#00000066;-webkit-backdrop-filter:blur(28px) saturate(1.2);backdrop-filter:blur(28px) saturate(1.2)}
.lbFig{max-width:100%;max-height:100%}
.lbImg{max-width:calc(100vw - 160px);max-height:calc(100dvh - 160px)}
.lbDots{position:absolute;bottom:max(24px,env(safe-area-inset-bottom));left:50%;translate:-50% 0;display:flex;gap:2px}
.lbDot{width:18px;height:18px;padding:0;border:0;background:none;display:grid;place-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
.lbDot:before{content:"";width:7px;height:7px;border-radius:50%;background:#ffffff73;transition:background-color .2s var(--e),transform .25s var(--e)}
.lbDot.on:before{background:#fff;transform:scale(1.15)}
.lbDot:focus-visible{outline:2px solid #fff;border-radius:50%}
@media (max-width:639px){.lb{padding:72px 16px 112px}.lbImg{max-width:calc(100vw - 32px);max-height:calc(100dvh - 184px)}.lbFig{max-width:100%;max-height:100%}.lbDots{bottom:max(76px,calc(env(safe-area-inset-bottom) + 62px))}.lbPrev,.lbNext{bottom:max(18px,env(safe-area-inset-bottom))}}
.lb{padding:80px 96px}
.lbImg{max-width:calc(100vw - 192px)}
@media (max-width:639px){.lb{padding:72px 16px 96px}.lbImg{max-width:calc(100vw - 32px);max-height:calc(100dvh - 168px)}.lbDots{bottom:max(31px,calc(env(safe-area-inset-bottom) + 31px))}}
.reaction{cursor:default}
.rx-rocket{--rc:linear-gradient(150deg,#8fd0ff,#2a6dff);--rs:#2a6dff}
.rx-rocket svg{width:21px;height:21px}
.rx-rocket .ic-main{transform-origin:50% 50%;animation:rocketLift 3s ease-in-out infinite}
.rx-rocket .ic-flame{transform-box:fill-box;transform-origin:50% 0;animation:flame .5s ease-in-out infinite alternate}
@keyframes rocketLift{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.2px)}}
@keyframes flame{from{transform:scaleY(.7)}to{transform:scaleY(1.2)}}
@media (prefers-reduced-motion:reduce){.rx-rocket .ic-main,.rx-rocket .ic-flame{animation:none}}
.rx-rocket svg g{transform-box:view-box}
.rx-rocket svg>g{transform-box:view-box;transform-origin:0 0}
/* Lightbox: smaller controls (36px visual, 44px hit area) */
.lbBtn{width:36px;height:36px}
.lbBtn svg{width:13px;height:13px}
.lbPrev,.lbNext{margin-top:-18px}
.lbClose{top:max(20px,env(safe-area-inset-top));right:20px}
@media (max-width:639px){.lbPrev,.lbNext{margin-top:0}}
/* Lightbox dots: smaller and tighter */
.lbDots{gap:0}
.lbDot{width:12px;height:18px}
.lbDot:before{width:5px;height:5px}
.lbDot.on:before{transform:scale(1.2)}

/* Gallery heading uses the same type as the Services / Pricing lead line */

/* Services chips share the chat bubble's box: 8px 14px padding, 16/22 type */

/* Panel conversation bubbles use the chat bubble's type: 16/22, -.4px */

/* Start over: rises in once the answer lands, fades away on reset */

/* Messages leave newest-first, the tapped chip eases back */

/* Start over grows into the tray (height + gap) instead of popping in and shoving the chips */

/* Panel messages grow from their own tail corner and leave the same way, with no sideways drift */

@keyframes askPop{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}}

/* typing dots share the reply's height, so swapping them in does not nudge the thread */

/* Gallery rhythm: one large image, then two side by side, repeating */

/* Uncropped rows: width follows each image's ratio so a pair shares one height */

/* Our work: stack of photos you swipe through, like a photo collection in Messages */
.photoStack{--e:cubic-bezier(.32,.72,0,1);position:relative;width:min(100%,258px);margin:26px 0 30px;outline:none;touch-action:pan-y;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
.psStage{position:relative;width:100%;aspect-ratio:var(--ar,1.416);transition:aspect-ratio .45s var(--e);cursor:grab}
.psStage:active{cursor:grabbing}
.psCard{position:absolute;inset:0;transform-origin:50% 100%;border-radius:20px;overflow:hidden;background:var(--slot);box-shadow:0 0 0 .5px color-mix(in srgb,var(--label),transparent 88%),0 6px 18px -8px #0000008c;transition:transform .5s var(--e),opacity .3s;will-change:transform}
.psCard img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;-webkit-user-drag:none}
.psCount{position:absolute;left:10px;bottom:10px;z-index:200;border:0;border-radius:999px;padding:4px 10px;color:#fff;font:600 12px/16px ui-sans-serif,-apple-system,system-ui,sans-serif;letter-spacing:-.1px;font-variant-numeric:tabular-nums;cursor:pointer;-webkit-tap-highlight-color:transparent}
.photoStack:focus-visible .psStage{outline:2px solid var(--accent);outline-offset:6px;border-radius:22px}
@media (prefers-reduced-motion:reduce){.psCard,.psStage{transition:opacity .15s}}
/* Photo stack + viewer, refined */
.psCard{border-radius:22px;box-shadow:0 0 0 .5px color-mix(in srgb,var(--label),transparent 86%),inset 0 0 0 .5px #ffffff2e,0 14px 28px -14px #000000a6,0 3px 8px -3px #00000040}
.psCount{display:flex;align-items:center;gap:5px;padding:5px 11px 5px 8px}
.psCount svg{width:13px;height:13px;flex:none;opacity:.9}
.lb{--dim:1;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.lb:before{content:"";position:absolute;inset:0;z-index:-2;background:color-mix(in srgb,#0a0a0c calc(var(--dim) * 52%),transparent);-webkit-backdrop-filter:blur(calc(var(--dim) * 30px)) saturate(1.3);backdrop-filter:blur(calc(var(--dim) * 30px)) saturate(1.3)}
.lbBg{position:absolute;inset:0;z-index:-1;overflow:hidden;opacity:calc(var(--dim) * .85);pointer-events:none}
.lbBg i{position:absolute;inset:-18%;background:center/cover;filter:blur(80px) saturate(1.7);opacity:0;transition:opacity .6s var(--e)}
.lbBg i.on{opacity:.8}
.lbImg{border-radius:24px;box-shadow:0 30px 80px -24px #000000b3,0 0 0 .5px #ffffff2e;touch-action:none;cursor:grab;will-change:transform}
.lbImg.noTrans{transition:none;opacity:1;transform:none}
.lbBtn,.lbDots{opacity:var(--dim)}
@media (prefers-reduced-motion:reduce){.lbBg i{transition:none}}
.lbDot:before{background:#ffffff8c}
.lbDot.on:before{background:#fff}
/* Viewer: the photo is never faded with the overlay, only the scrim and controls are */
.lb,.lb.open{opacity:1;transition:none}
.lb:before{opacity:0;transition:opacity .45s cubic-bezier(.23,1,.32,1)}
.lb.open:before{opacity:1}
.lbBg{opacity:0;transition:opacity .6s cubic-bezier(.23,1,.32,1)}
.lb.open .lbBg{opacity:calc(var(--dim) * .85)}
.lbBtn,.lbDots{opacity:0;transition:opacity .12s ease-out,--spot .3s ease,transform .16s cubic-bezier(.23,1,.32,1)}
.lb.open .lbBtn,.lb.open .lbDots{opacity:var(--dim);transition:opacity .32s ease-out .2s,--spot .3s ease,transform .16s cubic-bezier(.23,1,.32,1)}
.lb:not(.open) .lbImg:not(.noTrans){opacity:0;transition:opacity .2s}
.lb:not(.open) .lbImg.noTrans{opacity:1}
@media (prefers-reduced-motion:reduce){.lb:before,.lbBg,.lbBtn,.lbDots{transition:opacity .15s}}
/* Ink on the viewer's glass: white over the dark scrim; the counter follows the photo under it (glass-tone.js) */
.lbBtn,.lbDots{--icon:#ffffffe0;color:#ffffffe0}
.psCount{color:var(--icon)}
.psCount[data-tone="dark"]{--icon:#ffffffe0}
.psCount[data-tone="light"]{--icon:#000000b3}
@media (pointer:coarse){.lbBtn{width:44px;height:44px}}
.lb[data-tone="light"] .lbBtn,.lb[data-tone="light"] .lbDots{--icon:#000000b3;color:#000000b3}
.lb[data-tone="light"] .lbDot:before{background:#0000004d}
.lb[data-tone="light"] .lbDot.on:before{background:#000000b3}
/* The glass itself shifts with what is behind it, not only the ink: darker over dark photos, lighter over light ones */
.psCount[data-tone="dark"],.lb[data-tone="dark"] .lbBtn,.lb[data-tone="dark"] .lbDots{--glass-tint:#0000004d}
.psCount[data-tone="light"],.lb[data-tone="light"] .lbBtn,.lb[data-tone="light"] .lbDots{--glass-tint:#ffffff59}
.lbDots{border-radius:999px;padding:2px 8px}
/* all photos: grid view inside the viewer */
.lbGrid{top:max(20px,env(safe-area-inset-top));left:20px}
.lbGrid .sIcon,.lb.grid .lbGrid .gIcon{display:none}
.lb.grid .lbGrid .sIcon{display:block}
.lbAll{position:absolute;inset:0;z-index:0;overflow-y:auto;overscroll-behavior:contain;padding:76px 20px max(28px,env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-content:start;justify-content:center;max-width:980px;margin:0 auto;visibility:hidden;pointer-events:none;opacity:0;transition:opacity .2s var(--e),visibility 0s .25s;scrollbar-width:none}
.lbAll::-webkit-scrollbar{display:none}
.lb.grid .lbAll{visibility:visible;pointer-events:auto;opacity:1;transition:opacity .25s var(--e)}
.lbCell{position:relative;padding:0;border:0;background:#ffffff14;border-radius:16px;overflow:hidden;aspect-ratio:640/452;cursor:pointer;box-shadow:0 0 0 .5px #ffffff2e;opacity:0;transform:translateY(14px) scale(.96);transition:opacity .18s var(--e),transform .18s var(--e);-webkit-tap-highlight-color:transparent}
.lb.grid .lbCell{opacity:1;transform:none;transition:opacity .34s var(--e) calc(var(--i) * 22ms + 60ms),transform .5s var(--e) calc(var(--i) * 22ms + 60ms)}
.lbCell img{display:block;width:100%;height:100%;object-fit:cover}
.lbCell:after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 2.5px #fff;opacity:0;transition:opacity .2s var(--e)}
.lbCell.cur:after{opacity:1}
.lb.grid .lbCell:active{transform:scale(.97);transition-delay:0s;transition-duration:.12s}
.lbCell:focus-visible{outline:2px solid #fff;outline-offset:2px}
.lbFig{transition:opacity .2s var(--e),transform .3s var(--e)}
.lb.grid .lbFig{opacity:0;transform:scale(.94);pointer-events:none}
.lb.grid .lbPrev,.lb.grid .lbNext,.lb.grid .lbDots{opacity:0;pointer-events:none;transition:opacity .15s ease-out}
.lb.grid .lbBtn{--icon:#ffffffe0;color:#ffffffe0;--glass-tint:#0000004d}
@media (max-width:639px){.lbAll{grid-template-columns:repeat(2,minmax(0,1fr));padding:68px 14px max(24px,env(safe-area-inset-bottom));gap:8px}.lbCell{border-radius:14px}}
@media (prefers-reduced-motion:reduce){.lbCell,.lb.grid .lbCell{transition:opacity .15s;transform:none}.lbFig{transition:opacity .15s}}
.lbCell{display:block;width:100%;height:auto;min-height:0;contain:size}
.lbCell img{position:absolute;inset:0}
.lbAll{grid-auto-rows:max-content}
/* suggestion chips size to their text and only wrap when a label is wider than the row; bubbles never overflow */

/* Services: the path of a project, drawn as a timeline */
.tl{display:grid;padding:0 0 var(--s-2)}
.tlStage{position:relative;display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:var(--s-3);padding-bottom:var(--s-5)}
.tlStage:last-child{padding-bottom:0}
.tlStage:before{content:"";position:absolute;left:13px;top:36px;bottom:8px;width:2px;border-radius:2px;background:linear-gradient(var(--accent),color-mix(in srgb,var(--accent),transparent 72%));transform-origin:top}
.tlStage:last-child:before{display:none}
.tlDot{grid-row:1;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#fff;font:600 13px/1 var(--ff,ui-sans-serif,-apple-system,system-ui,sans-serif);font-variant-numeric:tabular-nums;box-shadow:0 0 0 4px color-mix(in srgb,var(--accent),transparent 86%)}
.tlHead{grid-column:2;grid-row:1;display:flex;align-items:baseline;gap:var(--s-2);min-height:28px;padding:0 var(--s-1);align-self:center}
.tlHead b{font:600 17px/22px var(--ff,ui-sans-serif,-apple-system,system-ui,sans-serif);letter-spacing:-.4px;color:var(--label)}
.tlHead small{font:400 13px/18px var(--ff,ui-sans-serif,-apple-system,system-ui,sans-serif);color:var(--secondary)}
.tlGroup{grid-column:2;margin-top:var(--s-2);max-width:none;width:100%}
.tlRow{display:grid;gap:1px}
.tlT{font:500 17px/22px var(--ff,ui-sans-serif,-apple-system,system-ui,sans-serif);letter-spacing:-.4px;color:var(--label)}
.tlD{font:400 15px/20px var(--ff,ui-sans-serif,-apple-system,system-ui,sans-serif);letter-spacing:-.24px;color:var(--secondary);text-wrap:pretty}
.pView.in .tlStage:before{animation:tlLine .7s cubic-bezier(.32,.72,0,1) backwards;animation-delay:calc(var(--k) * 150ms + 220ms)}
.pView.in .tlDot{animation:tlDot .5s cubic-bezier(.34,1.4,.64,1) backwards;animation-delay:calc(var(--k) * 150ms + 120ms)}
.pView.in .tlHead,.pView.in .tlGroup{animation:tIn .45s cubic-bezier(.23,1,.32,1) backwards;animation-delay:calc(var(--k) * 150ms + 160ms)}
@keyframes tlLine{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes tlDot{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.pView.in .tlStage:before,.pView.in .tlDot,.pView.in .tlHead,.pView.in .tlGroup{animation:none}}
.chat{min-height:100dvh}
/* Tablet portrait and large phones in landscape (640 to 839): there is no room for the chat beside a panel,
   so the panel opens as a centred sheet over a dimmed chat, and the chat gets a little more width. */
@media (min-width:640px) and (max-width:839px){
  .backdrop.open{background:var(--backdrop);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);pointer-events:auto}
  .panel{left:50%;right:auto;top:auto;bottom:max(14px,env(safe-area-inset-bottom,0px));width:min(540px,calc(100vw - 48px));height:min(760px,calc(100dvh - 28px));transform:translate(-50%,calc(100% + 28px))}
  .panel.open{transform:translate(-50%,0)}
  .contactCard.shifted,.composerBar.shifted,.chat.shifted{transform:none}
  .chat{max-width:460px}
  .composer{max-width:400px}
}
/* 840 and up: the panel sits beside the chat, which recentres in what is left (chat 420 + the panel always fit) */
@media (min-width:840px){
  .panel{width:var(--pw)}
}
/* viewer dots: just the dots, no glass pill behind them */
.lbDots{background:none!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;overflow:visible;padding:0}
.lbDots:before,.lbDots:after{display:none}
.lbDot:before{box-shadow:0 0 0 .5px #0000001f}
/* each highlighted word moves in its own way */
@keyframes fxFlip{0%{transform:translateY(0) scale(1,1);color:inherit}10%{transform:translateY(-1px) scale(1.05,1.11);color:var(--accent)}22%{transform:translateY(0) scale(1,1);color:var(--accent)}46%,100%{transform:translateY(0) scale(1,1);color:inherit}}
@keyframes fxBlank{0%,48%,100%{opacity:1;filter:blur(0)}14%,30%{opacity:.05;filter:blur(1.5px)}}
@keyframes fxAlive{0%,42%,100%{transform:scale(1)}8%{transform:scale(1.22)}16%{transform:scale(1)}24%{transform:scale(1.14)}34%{transform:scale(1)}}
@keyframes fxAsync{0%,42%,100%{transform:translateX(0)}12%{transform:translateX(calc((var(--r) - .5) * 18px))}28%{transform:translateX(calc((var(--r) - .5) * -6px))}}
.fxFramer .waveLetter{transform-origin:50% 100%;--fx-stagger:60ms;animation-name:fxFlip;animation-timing-function:cubic-bezier(.34,1.5,.5,1)}
.fxBlank .waveLetter{--fx-stagger:80ms;animation-name:fxBlank;animation-timing-function:ease-in-out}
.fxAlive .waveLetter{--fx-stagger:38ms;animation-name:fxAlive;animation-timing-function:cubic-bezier(.34,1.4,.64,1)}
.fxAsync .waveLetter{animation-name:fxAsync;animation-delay:calc(1s + var(--r) * 450ms);animation-timing-function:cubic-bezier(.3,1.3,.5,1)}
/* Send button states: idle, ready, count (near the limit), sending, sent, error. One icon per state, crossfaded. */
.sendBtn{--sb-red:#ff3b30;--sb-green:#30d158;--sb-warn:#ff9f0a;overflow:visible;transition:transform .42s cubic-bezier(.34,1.56,.64,1),background-color .28s cubic-bezier(.23,1,.32,1),box-shadow .2s}
@media (prefers-color-scheme:dark){.sendBtn{--sb-red:#ff453a}}
:root[data-theme="dark"] .sendBtn{--sb-red:#ff453a}
.sbI{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transform:scale(.5);filter:blur(3px);transition:opacity .2s cubic-bezier(.23,1,.32,1),transform .38s cubic-bezier(.34,1.56,.64,1),filter .2s;pointer-events:none}
.sbI svg{display:block}
.sendBtn[data-state="idle"] .sbArrow,.sendBtn[data-state="ready"] .sbArrow,.sendBtn[data-state="sending"] .sbSpin,.sendBtn[data-state="sent"] .sbCheck,.sendBtn[data-state="error"] .sbX,.sendBtn[data-state="offline"] .sbBang,.sendBtn[data-state="count"] .sbCount{opacity:1;transform:none;filter:none}
.sendBtn[data-state="sent"]{background:var(--sb-green)}
.sendBtn[data-state="error"]{background:var(--sb-red)}
.sendBtn[data-state="offline"]{background:var(--sb-warn)}
.sendBtn[data-state="count"][data-left="0"]{background:var(--sb-warn)}
.sendBtn[data-state="sending"]:disabled,.sendBtn[data-state="sent"]:disabled{background:var(--accent);cursor:default}
.sendBtn[data-state="sent"]:disabled{background:var(--sb-green)}
.sbSpin svg{animation:sbSpin .7s linear infinite}
@keyframes sbSpin{to{transform:rotate(360deg)}}
.sendBtn[data-state="sent"] .sbCheck path{stroke-dasharray:20;stroke-dashoffset:20;animation:sbDraw .35s .08s cubic-bezier(.23,1,.32,1) forwards}
@keyframes sbDraw{to{stroke-dashoffset:0}}
.sbCount{font:700 12px/1 ui-sans-serif,-apple-system,system-ui,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:-.2px}
.sendBtn:not(:disabled):hover{filter:brightness(1.08)}
.sendBtn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.sendBtn[data-state="error"]:focus-visible{outline-color:var(--sb-red)}
.sendBtn[data-state="offline"]:focus-visible{outline-color:var(--sb-warn)}
.composer.shake{animation:sbShake .44s cubic-bezier(.36,.07,.19,.97)}
@keyframes sbShake{10%,90%{translate:-1px 0}20%,80%{translate:2px 0}30%,50%,70%{translate:-4px 0}40%,60%{translate:4px 0}}
.composerHint{position:absolute;left:12px;right:12px;bottom:calc(100% + 8px);text-align:center;font:500 13px/18px ui-sans-serif,-apple-system,system-ui,sans-serif;letter-spacing:-.1px;color:var(--sb-red,#ff3b30);opacity:0;transform:translateY(4px);transition:opacity .25s cubic-bezier(.23,1,.32,1),transform .25s cubic-bezier(.23,1,.32,1);pointer-events:none}
.composerHint.on{opacity:1;transform:none}
.composerHint.warn{color:var(--sb-warn,#ff9f0a)}
@media (prefers-reduced-motion:reduce){.sbSpin svg{animation-duration:1.6s}.composer.shake{animation:none}.sbI{transition:opacity .15s;transform:none;filter:none}.sendBtn[data-state="sent"] .sbCheck path{animation:none;stroke-dashoffset:0}}
/* touch targets: small controls keep their look and get an invisible 44px hit area */
.sendBtn:after{content:"";position:absolute;inset:-7px -5px}
.clearGo{position:relative}
.clearGo:after{content:"";position:absolute;inset:-10px -6px}
.contactCard{position:relative}
.contactCard:after{content:"";position:absolute;inset:-6px -16px -10px}
.psCountHit{position:absolute;left:0;bottom:0;width:104px;height:50px;z-index:199;border:0;background:none;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
/* the send hint and the "N messages · Clear" label share the space above the bar: the hint wins while it shows */
.composerBar:has(.composerHint.on) .clearChat{opacity:0;pointer-events:none}

/* ---------- review pass: contact, pricing action, contrast, touch, resting loops ---------- */
/* links inside received bubbles reach 4.5:1 against the bubble */
.bubble:not(.sent) a{color:light-dark(#0062cc,#409cff)}
@media (pointer:coarse){
  .bubble a{position:relative}
  .bubble a:after{content:"";position:absolute;inset:-12px -6px}
  .lbDot{position:relative}
  .lbDot:after{content:"";position:absolute;inset:-13px 0}
}
/* pricing: "from" belongs to the price; each plan ends in its own action */
.pcFrom{font:400 var(--t-foot) var(--ff);font-style:normal;letter-spacing:0;color:var(--secondary);margin-right:6px}
.pcGo{width:100%;min-height:44px;margin:var(--s-2) 0 var(--s-1);border-radius:999px;background:var(--accent);color:#fff;font:600 var(--t-sub) var(--ff);letter-spacing:-.24px;opacity:0;transition:opacity .25s cubic-bezier(.23,1,.32,1),transform .16s cubic-bezier(.23,1,.32,1),filter .2s}
.pcCard.open .pcGo{opacity:1}
.pcGo:active{transform:scale(.97)}
@media (hover:hover){.pcGo:hover{filter:brightness(1.08)}}
.root .pcGo:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.pcGo{transition:none}}
/* availability reads as a status, not a control */
.cStatus{display:inline-flex;align-items:center;gap:var(--s-2);font:400 var(--t-body) var(--ff);letter-spacing:-.41px;color:var(--secondary)}
.cStatus i{width:8px;height:8px;border-radius:50%;background:var(--quiet)}
.cStatus.on i{background:#30d158;box-shadow:0 0 0 3px color-mix(in srgb,#30d158,transparent 78%)}
/* looping letters and reactions rest while off screen (class set in chat.js) */
.resting,.resting *{animation-play-state:paused!important}
/* without JavaScript the thread is replaced by a plain summary */
.noJs{max-width:440px;margin:0 auto;padding:24px 20px 48px;display:grid;gap:12px;font-size:16px;font-weight:400;line-height:22px;letter-spacing:-.4px}
.noJs a{color:light-dark(#0062cc,#409cff)}

/* ---------- services: three steps, one open at a time (replaces the fixed timeline) ---------- */
.sv{--e:cubic-bezier(.23,1,.32,1);display:grid;gap:var(--s-3)}
.svStage{position:relative;display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:var(--s-3);align-items:start}
/* the line runs from one number to the next, behind the gap between cards */
.svStage:not(:last-child):before{content:"";position:absolute;left:13px;top:46px;bottom:calc(var(--s-3) * -1 - 10px);width:2px;border-radius:2px;background:color-mix(in srgb,var(--accent),transparent 78%)}
.svDot{margin-top:calc((var(--row-min) - 28px) / 2 + 2px);width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font:600 13px/1 var(--ff);font-variant-numeric:tabular-nums;background:color-mix(in srgb,var(--accent),transparent 86%);color:var(--accent);transition:background-color .25s var(--e),color .25s var(--e),box-shadow .25s var(--e)}
.svStage.open .svDot{background:var(--accent);color:#fff;box-shadow:0 0 0 4px color-mix(in srgb,var(--accent),transparent 86%)}
.svCard{max-width:none;border-radius:var(--r-group)}
.svHead{display:grid;grid-template-columns:minmax(0,1fr) 14px;align-items:center;column-gap:var(--s-3);width:100%;min-height:var(--row-min);padding:var(--row-y) var(--row-x);text-align:left;-webkit-tap-highlight-color:transparent}
.svTop{display:flex;align-items:baseline;gap:var(--s-2)}
.svTop b{font:600 var(--t-body) var(--ff);letter-spacing:-.41px;color:var(--label)}
.svTop i{font:400 var(--t-foot) var(--ff);font-style:normal;color:var(--secondary)}
/* a closed step says what is inside; the line folds away once the rows themselves are showing */
.svSum{display:grid;grid-template-rows:1fr;transition:grid-template-rows .32s var(--e),opacity .2s var(--e)}
.svStage.open .svSum{grid-template-rows:0fr;opacity:0}
.svSum small{overflow:hidden;font:400 var(--t-sub) var(--ff);letter-spacing:-.24px;color:var(--secondary);text-wrap:pretty}
.svChev{width:14px;height:14px;color:var(--secondary);transition:transform .32s var(--e)}
.svStage.open .svChev{transform:rotate(180deg)}
.root .svHead:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:var(--r-group)}
@media (hover:hover){.svHead:hover .svChev{color:var(--label)}}
.svBody{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s var(--e)}
.svStage.open .svBody{grid-template-rows:1fr}
.svBody>div{overflow:hidden}
.svBody .contactRow{opacity:0;transition:opacity .25s var(--e)}
.svStage.open .svBody .contactRow{opacity:1}
.svBody .contactRow:before{content:"";position:absolute;top:0;left:var(--row-x);right:0;height:.5px;background:var(--separator)}
.pView.in .svStage{animation:tIn .45s var(--e) backwards;animation-delay:calc(var(--k) * 90ms + 120ms)}
@media (prefers-reduced-motion:reduce){.pView.in .svStage{animation:none}.svDot,.svChev,.svBody,.svSum,.svBody .contactRow{transition:none}}
/* a message the Worker could not send */
.receipt.err{color:light-dark(#d70015,#ff453a)}