/* figma comment pins */
.fcom{position:absolute;z-index:6;display:flex;align-items:flex-start;gap:7px;pointer-events:none}
.fcom .av{width:24px;height:24px;border-radius:50% 50% 50% 3px;border:2px solid #fff;flex:none;box-shadow:0 6px 16px -6px rgba(20,32,43,.5)}
.fcom .bub{background:#fff;border:1px solid var(--line-2);border-radius:12px;border-top-left-radius:3px;padding:6px 11px;font-family:var(--hand);font-size:14px;color:var(--ink);white-space:nowrap;box-shadow:0 10px 24px -14px rgba(20,32,43,.4)}
.fcom-1{top:66%;left:4%;animation:fbobA 6s ease-in-out infinite}
.fcom-1 .av{background:var(--tool)}
.fcom-2{top:78%;right:4.5%;animation:fbobB 7.2s ease-in-out infinite}
.fcom-2 .av{background:var(--brand)}
@keyframes fbobA{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-8px) rotate(1.5deg)}}
@keyframes fbobB{0%,100%{transform:translateY(0) rotate(1deg)}50%{transform:translateY(-9px) rotate(-1.5deg)}}
@media(max-width:820px){.fcom{display:none}}
.wordmark .wm-stack{display:flex;flex-direction:column;align-items:center}
.hero .eyebrow{font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 46px}
.hero-h{display:flex;flex-direction:column;align-items:center;gap:30px;margin:0 auto 0;color:var(--ink)}
.hero-line{font-family:var(--mono);font-weight:700;font-size:clamp(17px,2.05vw,27px);letter-spacing:-.01em;line-height:1.2;color:var(--ink-soft)}
.hero-line .type{color:var(--brand)}
.hero-line .caret{display:inline-block;width:3px;height:.9em;background:var(--brand);margin-left:.06em;vertical-align:-.04em;animation:caretBlink 1.05s steps(1) infinite}
@keyframes caretBlink{50%{opacity:0}}
.hero-big{font-family:var(--display),sans-serif;font-weight:800;font-variation-settings:'opsz' 48,'wght' 800;font-size:clamp(64px,12.5vw,196px);line-height:.92;letter-spacing:-.03em;display:inline-block}
.hero-big .rl{display:inline-block;font-weight:800;transform-origin:center;will-change:transform}
.hero-big .pd{color:var(--brand)}
.h1-sel{position:relative;display:inline-block}
.sel-frame{position:absolute;inset:-20px -24px;border:1.5px solid var(--tool);border-radius:4px;pointer-events:none;opacity:0;transition:opacity .2s ease}
.h1-sel:hover .sel-frame{opacity:1}
.sel-frame .hh{position:absolute;width:10px;height:10px;background:#fff;border:1.6px solid var(--tool);border-radius:2px}
.sel-frame .tl{top:-5px;left:-5px}.sel-frame .tr{top:-5px;right:-5px}.sel-frame .bl{bottom:-5px;left:-5px}.sel-frame .br{bottom:-5px;right:-5px}
.sel-frame .tm{top:-5px;left:50%;margin-left:-5px}.sel-frame .bm{bottom:-5px;left:50%;margin-left:-5px}.sel-frame .lm{left:-5px;top:50%;margin-top:-5px}.sel-frame .rm{right:-5px;top:50%;margin-top:-5px}
.sel-chip{position:absolute;top:9px;right:9px;display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line-2);box-shadow:var(--sh);border-radius:9px;padding:6px 11px;font-family:var(--mono);font-size:12px;font-weight:700;color:var(--ink);white-space:nowrap}
.sel-chip .dot{width:8px;height:8px;border-radius:50%;background:var(--tool)}
.sel-chip .mut{color:var(--ink-soft);font-weight:700}
.sel-chip b{color:var(--tool);font-weight:700}
.canvas-comment{position:absolute;left:4.5%;bottom:15%;z-index:5;pointer-events:none;display:flex;align-items:flex-end;gap:9px;max-width:270px}
.cc-pin{width:30px;height:30px;flex:0 0 auto;border-radius:50% 50% 50% 3px;background:var(--brand);color:#fff;display:grid;place-items:center;font-family:var(--mono);font-size:12px;font-weight:700;box-shadow:0 6px 16px rgba(20,32,43,.28);transition:background .4s ease}
.cc-bub{background:#fff;border:1px solid var(--line-2);border-radius:13px;border-bottom-left-radius:3px;padding:8px 13px;box-shadow:0 16px 34px -16px rgba(20,32,43,.4);min-width:118px}
.cc-name{display:block;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:1px}
.cc-text{font-family:var(--body);font-size:14px;font-weight:500;color:var(--ink);line-height:1.3}
.cc-typing{display:inline-flex;gap:4px;align-items:center;padding:3px 0}
.cc-typing i{width:5px;height:5px;border-radius:50%;background:var(--ink-faint);animation:ccDot 1s infinite}
.cc-typing i:nth-child(2){animation-delay:.16s}.cc-typing i:nth-child(3){animation-delay:.32s}
@keyframes ccDot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
@media(max-width:1080px){.canvas-comment{display:none}}