@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){:root,:host{--u:0px}}}@property --u{syntax:"<length>";inherits:true;initial-value:0}.mock{position:relative;overflow:hidden;container-type:inline-size}.mock-canvas{--u:max(calc(100cqw / var(--mock-w)), var(--mock-min-u,0px));width:calc(var(--u) * var(--mock-w));height:calc(var(--u) * var(--mock-h));margin-left:calc(var(--u) * var(--mock-shift,0) * -1);color:var(--color-fg);font-family:var(--font-marketing-body), sans-serif;font-size:calc(var(--u) * 12);text-align:left;-webkit-user-select:none;user-select:none;line-height:1.35;position:relative}.mock-canvas :is(p,span,strong,small,b,li){font-family:inherit}.mock-at{top:calc(var(--u) * var(--y));left:calc(var(--u) * var(--x));width:calc(var(--u) * var(--w));height:calc(var(--u) * var(--h));position:absolute}.mock-icon{width:calc(var(--u) * var(--s,16));height:calc(var(--u) * var(--s,16));flex-shrink:0}.mock-icon>svg{width:100%;height:100%}svg.mock-icon{stroke-width:2px}.mock-card{border:1px solid var(--gray-100);border-radius:calc(var(--u) * 16);background:var(--surface);box-shadow:0 calc(var(--u) * 8) calc(var(--u) * 24) var(--brand-950), 0 calc(var(--u) * 1) calc(var(--u) * 2) var(--brand-950);overflow:hidden}@supports (color:color-mix(in lab, red, red)){.mock-card{box-shadow:0 calc(var(--u) * 8) calc(var(--u) * 24) color-mix(in srgb, var(--brand-950) 10%, transparent), 0 calc(var(--u) * 1) calc(var(--u) * 2) color-mix(in srgb, var(--brand-950) 5%, transparent)}}.mock-window{border:1px solid var(--gray-100);border-radius:calc(var(--u) * 20);background:var(--surface);box-shadow:0 calc(var(--u) * 24) calc(var(--u) * 48) calc(var(--u) * -12) var(--brand-950), 0 calc(var(--u) * 2) calc(var(--u) * 6) var(--brand-950);overflow:hidden}@supports (color:color-mix(in lab, red, red)){.mock-window{box-shadow:0 calc(var(--u) * 24) calc(var(--u) * 48) calc(var(--u) * -12) color-mix(in srgb, var(--brand-950) 18%, transparent), 0 calc(var(--u) * 2) calc(var(--u) * 6) color-mix(in srgb, var(--brand-950) 6%, transparent)}}.mock-row{align-items:center;gap:calc(var(--u) * var(--gap,8));display:flex}.mock-stack{gap:calc(var(--u) * var(--gap,4));flex-direction:column;display:flex}.mock-muted{color:var(--gray-600)}.mock-line{width:var(--lw,100%);height:calc(var(--u) * var(--lh,8));border-radius:var(--radius-pill);background:var(--gray-150);display:block}.mock-avatar{width:calc(var(--u) * var(--s,28));height:calc(var(--u) * var(--s,28));border-radius:var(--radius-pill);background:var(--gray-100);flex-shrink:0;display:block;position:relative;overflow:hidden}.mock-avatar>img,.mock-photo>img{object-fit:cover;width:100%;height:100%}.mock-photo{display:block;position:relative;overflow:hidden}.mock-chip{align-items:center;gap:calc(var(--u) * 6);border:1px solid var(--gray-150);border-radius:var(--radius-pill);padding:calc(var(--u) * 6) calc(var(--u) * 12);background:var(--surface);white-space:nowrap;font-weight:500;display:inline-flex}.mock-chip[data-on=true]{border-color:var(--brand-400);background:var(--brand-50);color:var(--brand-700)}.mock-badge{align-items:center;gap:calc(var(--u) * 4);border-radius:var(--radius-pill);padding:calc(var(--u) * 3) calc(var(--u) * 8);background:var(--gray-100);color:var(--gray-700);font-size:calc(var(--u) * 11);white-space:nowrap;font-weight:600;display:inline-flex}.mock-badge[data-tone=up]{background:var(--color-success-soft);color:var(--success-strong)}.mock-badge[data-tone=down]{background:var(--color-danger-soft);color:var(--color-danger-strong)}.mock-badge[data-tone=brand]{background:var(--brand-50);color:var(--brand-700)}.mock-button{justify-content:center;align-items:center;gap:calc(var(--u) * 6);border-radius:calc(var(--u) * 10);padding:calc(var(--u) * 8) calc(var(--u) * 14);background:var(--brand-500);color:var(--gray-0);white-space:nowrap;border:1px solid #0000;font-weight:600;display:inline-flex}.mock-button[data-variant=outline]{border-color:var(--gray-200);background:var(--surface);color:var(--color-fg)}.mock-button[data-variant=success]{background:var(--success)}.mock-label{color:var(--gray-500);font-size:calc(var(--u) * 10);letter-spacing:.06em;text-transform:uppercase;font-weight:600}.mock-cursor{align-items:flex-start;gap:calc(var(--u) * 2);pointer-events:none;flex-direction:column;display:flex}.mock-cursor>svg{width:calc(var(--u) * 22);height:calc(var(--u) * 22);color:var(--brand-500);fill:currentColor;filter:drop-shadow(0 calc(var(--u) * 2) calc(var(--u) * 3) var(--brand-950))}@supports (color:color-mix(in lab, red, red)){.mock-cursor>svg{filter:drop-shadow(0 calc(var(--u) * 2) calc(var(--u) * 3) color-mix(in srgb, var(--brand-950) 25%, transparent))}}.mock-cursor>span{margin-left:calc(var(--u) * 14);border-radius:calc(var(--u) * 6);padding:calc(var(--u) * 3) calc(var(--u) * 8);background:var(--brand-500);color:var(--gray-0);font-size:calc(var(--u) * 11);font-weight:600}@keyframes mock-rise{0%{opacity:0;translate:0 calc(var(--u) * 28)}}@keyframes mock-pop{0%{opacity:0;translate:0 calc(var(--u) * 12);scale:.94}}@keyframes mock-bob{50%{translate:0 calc(var(--u) * -8)}}@keyframes mock-drift{0%,to{translate:0}50%{translate:calc(var(--u) * 10) calc(var(--u) * -6)}}@keyframes mock-pulse{0%,to{box-shadow:0 0 0 0 color-mix(in srgb, var(--brand-500) 35%, transparent)}50%{box-shadow:0 0 0 calc(var(--u) * 6) color-mix(in srgb, var(--brand-500) 0%, transparent)}}@media (prefers-reduced-motion:no-preference){.mock-bob{animation:mock-bob 6s ease-in-out var(--delay,0s) infinite}.mock-drift{animation:mock-drift 7s ease-in-out var(--delay,0s) infinite}.mock-pulse{animation:mock-pulse 2.4s ease-in-out var(--delay,0s) infinite}}
.hero-mock{margin-inline:auto}.hero-mock-window{font-size:calc(var(--u) * 13)}.hero-mock-header{padding:calc(var(--u) * 30) calc(var(--u) * 24) 0;justify-content:space-between;align-items:flex-start;display:flex}.hero-mock-header .mock-muted{margin-top:calc(var(--u) * 4);font-size:calc(var(--u) * 16)}.hero-mock-title{font-size:calc(var(--u) * 30);letter-spacing:-.02em;font-weight:700;line-height:1.1}.hero-mock-header .mock-button{padding:calc(var(--u) * 10) calc(var(--u) * 14);font-size:calc(var(--u) * 14)}.hero-mock-pill{border-radius:var(--radius-pill);padding:calc(var(--u) * 10) calc(var(--u) * 14);background:var(--brand-100);color:var(--brand-600);font-size:calc(var(--u) * 14);font-weight:600}.hero-mock-org{width:calc(var(--u) * 32);height:calc(var(--u) * 32);border-radius:var(--radius-pill);background:radial-gradient(circle at 50% 58%, var(--color-danger) 0 22%, transparent 23% 31%, var(--color-danger) 32% 40%, transparent 41%), var(--accent-orange)}.hero-mock-tabs{margin:calc(var(--u) * 26) calc(var(--u) * 24) 0;border-bottom:1px solid var(--gray-150);font-size:calc(var(--u) * 16);display:flex}.hero-mock-tabs span{padding:calc(var(--u) * 14) calc(var(--u) * 16)}.hero-mock-tabs span[data-active=true]{box-shadow:inset 0 calc(var(--u) * -2) 0 var(--brand-500);color:var(--brand-600);font-weight:600}.hero-mock-toolbar{padding:calc(var(--u) * 22) calc(var(--u) * 24) 0;justify-content:space-between;align-items:center;display:flex}.hero-mock-subtitle{font-size:calc(var(--u) * 18);font-weight:600}.hero-mock-legend{align-items:center;gap:calc(var(--u) * 6);color:var(--gray-600);display:inline-flex}.hero-mock-legend:before{content:"";width:calc(var(--u) * 9);height:calc(var(--u) * 9);border-radius:calc(var(--u) * 2);background:var(--gray-300)}.hero-mock-legend[data-tone=brand]:before{background:var(--brand-500)}.hero-mock-select{align-items:center;gap:calc(var(--u) * 8);border:1px solid var(--gray-150);border-radius:calc(var(--u) * 10);padding:calc(var(--u) * 8) calc(var(--u) * 12);font-size:calc(var(--u) * 14);font-weight:600;display:inline-flex}.hero-mock-feed-panel{top:calc(var(--u) * 252);left:calc(var(--u) * 24);width:calc(var(--u) * 452);height:calc(var(--u) * 300);border-radius:calc(var(--u) * 18);padding:calc(var(--u) * 14) calc(var(--u) * 14) 0;background:var(--color-canvas);position:absolute}.hero-mock-feed{padding:calc(var(--u) * 16) calc(var(--u) * 16) 0;font-size:calc(var(--u) * 13)}.hero-mock-profile{align-items:center;gap:calc(var(--u) * 18);margin-bottom:calc(var(--u) * 12);display:flex}.hero-mock-profile dl{padding-inline:calc(var(--u) * 8);text-align:center;flex:1;justify-content:space-between;display:flex}.hero-mock-profile dt{font-size:calc(var(--u) * 16);font-weight:700}.hero-mock-profile dd{color:var(--gray-700);font-size:calc(var(--u) * 12)}.hero-mock-handle{margin-bottom:calc(var(--u) * 6);font-size:calc(var(--u) * 14);font-weight:600}.hero-mock-link{margin-top:calc(var(--u) * 6);color:var(--brand-500);font-weight:600}.hero-mock-feed-actions{margin:calc(var(--u) * 14) calc(var(--u) * -16) 0;border-top:1px solid var(--gray-100);padding-block:calc(var(--u) * 10);color:var(--gray-800);justify-content:space-around;display:flex}.hero-mock-tiles{gap:calc(var(--u) * 2);margin-inline:calc(var(--u) * -16);grid-template-columns:repeat(3,1fr);display:grid}.hero-mock-tiles>span{aspect-ratio:1;padding:calc(var(--u) * 8);font-size:calc(var(--u) * 16);text-align:center;place-items:center;font-weight:700;display:grid}.hero-mock-tiles>[data-tone=orange]{background:var(--accent-orange)}.hero-mock-tiles>[data-tone=teal]{background:var(--accent-teal);color:var(--gray-0)}.hero-mock-queue{top:calc(var(--u) * 252);left:calc(var(--u) * 496);width:calc(var(--u) * 562);box-shadow:none;position:absolute}.hero-mock-queue-head{border-bottom:1px solid var(--gray-100);padding:calc(var(--u) * 16);justify-content:space-between;align-items:center;display:flex}.hero-mock-queue-head strong{font-size:calc(var(--u) * 16)}.hero-mock-queue-row{align-items:center;gap:calc(var(--u) * 14);border-bottom:1px solid var(--gray-100);padding:calc(var(--u) * 12) calc(var(--u) * 16);display:flex}.hero-mock-thumb{width:calc(var(--u) * 44);height:calc(var(--u) * 44);border-radius:calc(var(--u) * 8);flex-shrink:0}.hero-mock-thumb[data-tone=orange]{background:var(--accent-orange)}.hero-mock-queue-copy{gap:calc(var(--u) * 4);flex:1;display:grid}.hero-mock-queue-copy strong{font-size:calc(var(--u) * 14);font-weight:600}.hero-mock-when{justify-items:end;gap:calc(var(--u) * 2);display:grid}.hero-mock-when strong{font-size:calc(var(--u) * 14)}.hero-mock-metric{justify-items:start;gap:calc(var(--u) * 10);padding:calc(var(--u) * 16);font-size:calc(var(--u) * 13);display:grid;position:absolute}.hero-mock-metric strong{font-size:calc(var(--u) * 24);letter-spacing:-.01em;font-weight:700}.hero-mock-metric-icon{width:calc(var(--u) * 40);height:calc(var(--u) * 40);border-radius:var(--radius-pill);background:var(--brand-50);color:var(--brand-500);place-items:center;display:grid}.hero-mock-reach{top:calc(var(--u) * 222);left:calc(var(--u) * 75);width:calc(var(--u) * 174)}.hero-mock-interactions{top:calc(var(--u) * 156);left:calc(var(--u) * 1186);width:calc(var(--u) * 158)}.hero-mock-interactions .hero-mock-metric-icon{background:var(--color-danger-soft);color:var(--color-danger)}@keyframes hero-mock-fresh{0%{background:var(--surface)}}@container not (min-width:44rem){.hero-mock .mock-canvas{--mock-min-u:.5px;--mock-shift:60}}@media (prefers-reduced-motion:no-preference){.hero-mock-window{animation:mock-rise .9s var(--marketing-ease-out) .12s both}.hero-mock-reach,.hero-mock-interactions{animation:mock-pop .7s var(--marketing-ease-out) var(--pop) both, mock-bob 7s ease-in-out calc(var(--pop) + .7s) infinite}.hero-mock-reach{--pop:.65s}.hero-mock-interactions{--pop:.85s}.hero-mock-queue-row[data-fresh=true]{background:var(--brand-50);animation:.9s ease-out 1.4s both hero-mock-fresh}}@media (prefers-reduced-motion:reduce){.hero-mock-queue-row[data-fresh=true]{background:var(--brand-50)}}