/* ════════════════════════════════════════════════════════════════
   DISTROVE — "Quiet Instrument"
   Monochrome, editorial, glass that behaves like glass.
   ════════════════════════════════════════════════════════════════ */

@font-face{font-family:'DM Sans';src:url('/assets/dm-sans-400.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'DM Sans';src:url('/assets/dm-sans-500.ttf') format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:'DM Sans';src:url('/assets/dm-sans-600.ttf') format('truetype');font-weight:600 800;font-display:swap}

/* ——— Tokens ——— */
:root{
 --paper:#ededeb;--paper-hi:#f6f6f4;--paper-lo:#e2e2df;--card:#fafaf8;
 --ink:#0c0c0d;--ink-2:#2b2b2e;--ink-3:#4a4a4f;--mute:#636368;--faint:#a3a3a8;
 --line:rgba(12,12,13,.08);--line-2:rgba(12,12,13,.14);--line-3:rgba(12,12,13,.24);
 --night:#0b0b0c;--night-2:#141416;--night-3:#1c1c1f;
 --fog:rgba(255,255,255,.66);--fog-2:rgba(255,255,255,.44);--nline:rgba(255,255,255,.09);
 --sans:'DM Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
 --serif:Georgia,'Times New Roman','Noto Serif',ui-serif,serif;
 --mono:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace;
 --ease:cubic-bezier(.16,1,.3,1);--ease-in:cubic-bezier(.7,0,.84,0);--ease-io:cubic-bezier(.65,0,.35,1);
 --spring:cubic-bezier(.2,1.25,.3,1);--spring-pop:cubic-bezier(.3,1.6,.4,1);
 --card-bg:linear-gradient(180deg,#fbfbf9,#f3f3f0);
 --card-shadow:inset 0 1px 0 #fff,0 0 0 1px var(--line),0 1px 1px rgba(0,0,0,.03),0 6px 16px -10px rgba(0,0,0,.14);
 --card-shadow-hover:inset 0 1px 0 #fff,0 0 0 1px var(--line-2),0 2px 2px rgba(0,0,0,.03),0 22px 40px -22px rgba(0,0,0,.3);
 --dark-bg:radial-gradient(120% 100% at 100% 100%,#27272b 0%,#0c0c0d 62%);
 --dark-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 0 0 1px #000,0 30px 60px -30px rgba(0,0,0,.6);
 --gutter:clamp(16px,4vw,48px);--max:1240px;
 color-scheme:light;
}
@supports (transition-timing-function:linear(0,1)){
 :root{
  --spring:linear(0,.034 1.3%,.137 2.8%,.567 7.7%,.788 10.8%,.918 13.8%,1.004 17.2%,1.051 20.9%,1.067 24.8%,1.062 28.4%,1.019 38.5%,1.003 46.6%,.996 58.6%,1);
  --spring-pop:linear(0,.009,.035 2.1%,.141,.281 6.7%,.723 12.9%,.938 16.7%,1.017,1.077,1.121,1.149 24.3%,1.159,1.163,1.161,1.154 29.9%,1.129 32.8%,1.051 39.6%,1.017 43.1%,.991,.977 51%,.974 53.8%,.975 57.1%,.997 69.8%,1.003 76.9%,1);
 }
}

/* ——— Base ——— */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--paper)}
body{margin:0;min-height:100vh;background:var(--paper);color:var(--ink);font:400 16px/1.55 var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-synthesis:none;overflow-x:hidden}
body::after{content:"";position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
button,input,textarea,select{font:inherit;color:inherit;letter-spacing:inherit}
button{border:0;background:none;padding:0;cursor:pointer;text-align:left;-webkit-tap-highlight-color:transparent}
button:disabled{cursor:not-allowed}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
img,svg{max-width:100%;display:block}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-weight:600}
ol,ul{margin:0}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
:where(.dark,.direction,.mix-card.lead,.studio-banner,.learning,.budget,.plan-dark,.final-card,.demo-banner,.ws-dock .active) :focus-visible{outline-color:#fff}
::selection{background:var(--ink);color:#fff}
[hidden]{display:none!important}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:fixed;left:16px;top:-80px;z-index:200;padding:12px 18px;border-radius:12px;background:var(--ink);color:#fff;transition:top .3s var(--ease)}
.skip-link:focus{top:14px}
.icon{width:20px;height:20px;flex-shrink:0}
em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.02em}
:is(h1,h2,h3,.display-xl,.display-l,.display-page,.dir-name) em{font-size:1.07em;letter-spacing:-.025em;line-height:.9}
/* Page titles are plain: the serif accent is for words inside headings and sentences. */
.display-page em{font-family:var(--sans);font-style:normal;font-weight:inherit;font-size:1em;letter-spacing:inherit;line-height:inherit}
.container{width:100%;max-width:calc(var(--max) + var(--gutter)*2);margin:0 auto;padding:0 var(--gutter)}
.mono{font:500 11px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font:500 11.5px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.eyebrow .icon{width:14px;height:14px}
.muted{color:var(--mute)}
.display-xl{font-size:clamp(2.9rem,6.3vw,6.2rem);font-weight:600;letter-spacing:-.058em;line-height:.93}
.display-l{font-size:clamp(2.3rem,5vw,4.8rem);font-weight:600;letter-spacing:-.052em;line-height:.95}
.display-page{font-size:clamp(2.3rem,4.6vw,4.2rem);font-weight:600;letter-spacing:-.052em;line-height:.95}
.br-desk{display:inline}

/* ——— Brand ——— */
.brand{display:inline-flex;align-items:center;gap:9px;white-space:nowrap}
.brand-mark{display:block;width:27px;height:27px}
.mark{width:100%;height:100%;overflow:visible}
.mark-ring,.mark-cut{transition:transform .7s var(--spring)}
.brand:hover .mark-ring,.brand:hover .mark-cut{transform:translate(-2.2px,2.2px)}
.wordmark{font-size:23px;font-weight:600;letter-spacing:-.065em;line-height:1}

/* ——— Boot ——— */
.boot{min-height:100vh;display:flex;align-items:center;justify-content:center;gap:12px}
.boot-mark{width:32px;height:32px;overflow:visible}
.boot-disc{fill:var(--ink);transform-origin:12.5px 19.5px;animation:boot-disc 1.1s var(--ease-io) infinite alternate}
.boot-ring{fill:none;stroke:var(--ink);stroke-width:2;stroke-dasharray:1;animation:draw-loop 1.1s var(--ease-io) infinite alternate}
.boot .wordmark{font-size:25px}
@keyframes boot-disc{from{transform:scale(.7)}to{transform:scale(1)}}
@keyframes draw-loop{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}

/* ════════════ MATERIALS ════════════ */
/* Liquid glass, light. Stack: translucent body → backdrop blur → specular top edge → rim light → inner thickness → lift. */
.glass{
 background:linear-gradient(180deg,rgba(255,255,255,.64),rgba(255,255,255,.3));
 -webkit-backdrop-filter:blur(20px) saturate(1.8);backdrop-filter:blur(20px) saturate(1.8);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(255,255,255,.35),inset 0 -12px 22px -16px rgba(0,0,0,.14),0 1px 1px rgba(0,0,0,.03),0 14px 34px -16px rgba(0,0,0,.26);
}
:where(.glass){position:relative}
.glass::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;background:linear-gradient(155deg,rgba(255,255,255,1),rgba(255,255,255,.1) 34%,rgba(12,12,13,.06) 60%,rgba(255,255,255,.75));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;transition:opacity .4s}
.glass.is-liquid{background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,.2))}
/* Pointer sheen: a soft specular that follows the cursor on any `.lit` surface. */
.lit{isolation:isolate;--sheen:rgba(255,255,255,.7)}
:where(.lit){position:relative}
.lit::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .5s;background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),var(--sheen),transparent 70%)}
.lit.lit-on::before{opacity:1}
.card{position:relative;isolation:isolate;padding:28px;border-radius:28px;background:var(--card-bg);box-shadow:var(--card-shadow)}
.card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.card h2{font-size:22px;letter-spacing:-.035em;line-height:1.1}
.card>.muted{margin-top:6px;font-size:14px}
.card-foot{margin-top:14px}
.ico-tile{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;flex-shrink:0;background:#fff;color:var(--ink);box-shadow:0 0 0 1px var(--line),0 1px 2px rgba(0,0,0,.05)}
.ico-tile .icon{width:18px;height:18px}
.badge{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px;border-radius:999px;font-size:12px;font-weight:500;white-space:nowrap;color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line-2);text-transform:none}
.badge.ink{background:var(--ink);color:#fff;box-shadow:none}
.badge.mono{font:500 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase}
.note{display:flex;align-items:flex-start;gap:12px;margin-top:18px;padding:14px 18px;border-radius:16px;background:rgba(12,12,13,.04);font-size:14px;color:var(--ink-3)}
.note .icon{width:17px;height:17px;margin-top:2px}
.field-note{display:block;font-size:12.5px;line-height:1.5;color:var(--mute)}

/* ════════════ CONTROLS ════════════ */
.btn{--h:46px;--busy:#fff;position:relative;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:var(--h);padding:0 20px;border-radius:999px;font-size:15px;font-weight:500;letter-spacing:-.01em;white-space:nowrap;text-align:center;user-select:none;-webkit-user-select:none;transition:transform .5s var(--spring),translate .7s var(--spring),box-shadow .3s,background .3s,color .3s,opacity .3s}
.btn:active:not(:disabled){transform:scale(.965);transition-duration:.12s}
.btn:disabled{opacity:.5;cursor:default}.metal:disabled{opacity:.55;cursor:default}
.btn .icon{width:18px;height:18px}
.btn.sm{--h:38px;padding:0 15px;font-size:14px;gap:8px}
.btn.sm .icon{width:16px;height:16px}
.btn.lg{--h:58px;padding:0 28px;font-size:16px}
.btn.full{width:100%}
.btn-ink,.btn-danger{color:#fff;overflow:hidden;background:linear-gradient(180deg,#3b3b3f 0%,#151517 48%,#050506 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 0 -1px 0 rgba(0,0,0,.5),0 0 0 1px rgba(0,0,0,.92),0 2px 3px rgba(0,0,0,.16),0 12px 24px -12px rgba(0,0,0,.62)}
.btn-ink::after,.btn-danger::after,.btn-light::after,.btn-paper::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.26) 50%,transparent 70%);transform:translateX(-130%);transition:transform .9s var(--ease)}
.btn-paper::after,.btn-light::after{background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.95) 50%,transparent 70%)}
.btn:hover::after{transform:translateX(130%)}
.btn-ink:hover,.btn-danger:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1px 0 rgba(0,0,0,.5),0 0 0 1px #000,0 3px 5px rgba(0,0,0,.18),0 18px 30px -14px rgba(0,0,0,.7)}
.btn-paper,.btn-light{--busy:var(--ink);overflow:hidden;color:var(--ink);background:linear-gradient(180deg,#fff,#f0f0ed);box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(12,12,13,.08),0 1px 2px rgba(0,0,0,.06),0 10px 22px -12px rgba(0,0,0,.28)}
.btn-paper:hover{box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(12,12,13,.14),0 2px 3px rgba(0,0,0,.07),0 16px 30px -14px rgba(0,0,0,.32)}
.btn-light{box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(255,255,255,.4),0 18px 40px -16px rgba(255,255,255,.28)}
.btn-glass{color:#fff;background:linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,.05));-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 0 0 0 1px rgba(255,255,255,.1),0 14px 30px -16px rgba(0,0,0,.9)}
.btn-glass:hover{background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.08))}
.btn.is-busy{color:transparent!important;pointer-events:none}
.btn.is-busy::before{content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;color:var(--busy);background:currentColor;animation:busy 1s infinite linear}
@keyframes busy{0%,100%{box-shadow:-10px 0 currentColor,10px 0 color-mix(in srgb,currentColor 25%,transparent);background:color-mix(in srgb,currentColor 55%,transparent)}33%{box-shadow:-10px 0 color-mix(in srgb,currentColor 25%,transparent),10px 0 color-mix(in srgb,currentColor 55%,transparent);background:currentColor}66%{box-shadow:-10px 0 color-mix(in srgb,currentColor 55%,transparent),10px 0 currentColor;background:color-mix(in srgb,currentColor 25%,transparent)}}
.is-busy:not(.btn){opacity:.55;cursor:progress}
.text-btn{display:inline-flex;align-items:center;gap:7px;font-size:14.5px;font-weight:500;color:var(--ink);padding:2px 0;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .45s var(--ease),opacity .2s}
.text-btn:hover{background-size:100% 1px}
.text-btn .icon{width:16px;height:16px}
.text-btn.destructive{color:var(--ink-3)}
.text-btn.destructive:hover{color:var(--ink)}
.icon-btn{position:relative;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;color:var(--ink-2);transition:background .25s,transform .4s var(--spring),color .2s}
.icon-btn:hover{background:rgba(12,12,13,.06);color:var(--ink)}
.icon-btn:active{transform:scale(.9)}
.icon-btn.active{background:var(--ink);color:#fff}
.icon-btn .icon{width:19px;height:19px}
.circle-btn{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;background:#fff;color:var(--ink);box-shadow:inset 0 -2px 4px rgba(0,0,0,.08),0 10px 24px -8px rgba(0,0,0,.6);transition:transform .6s var(--spring)}
.circle-btn:hover{transform:scale(1.08)}
.pill{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 15px 0 12px;border-radius:999px;font-size:13px;font-weight:500;color:var(--ink-2)}
.pill .icon{width:15px;height:15px}
.chip-mono{font:500 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:6px 10px;border-radius:999px;color:var(--fog-2);box-shadow:inset 0 0 0 1px var(--nline)}
.avatar{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;background:linear-gradient(180deg,#34343a,#0c0c0d);color:#fff;font-size:14px;font-weight:600;box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
/* Arrow that slides out and returns on hover */
.i-swap{position:relative;display:inline-grid;width:18px;height:18px;overflow:hidden;flex-shrink:0}
.i-swap .icon{grid-area:1/1;width:18px;height:18px;transition:transform .5s var(--ease)}
.i-swap .icon:last-child{transform:translate(-115%,115%)}
:is(button,a):hover>.i-swap .icon:first-child,:is(button,a):hover .i-swap .icon:first-child{transform:translate(115%,-115%)}
:is(button,a):hover .i-swap .icon:last-child{transform:none}
.i-swap.i-right .icon:last-child{transform:translateX(-115%)}
:is(button,a):hover .i-swap.i-right .icon:first-child{transform:translateX(115%)}
.text-btn .i-swap,.text-btn .i-swap .icon{width:16px;height:16px}

/* Segmented control with a sliding pill */
.seg{position:relative;display:flex;gap:2px;padding:4px;border-radius:999px;max-width:100%;overflow-x:auto;scrollbar-width:none;background:rgba(12,12,13,.055);box-shadow:inset 0 1px 2px rgba(0,0,0,.06)}
.seg::-webkit-scrollbar{display:none}
.seg button{position:relative;z-index:1;height:36px;padding:0 15px;border-radius:999px;font-size:13.5px;font-weight:500;white-space:nowrap;color:var(--ink-3);transition:color .35s}
.seg button:hover{color:var(--ink)}
.seg button.active{color:#fff}
.ind{position:absolute;left:0;top:0;z-index:0;opacity:0;border-radius:999px;pointer-events:none;background:linear-gradient(180deg,#2e2e32,#0c0c0d);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 6px 14px -6px rgba(0,0,0,.5)}
.seg-dark{background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px var(--nline)}
.seg-dark button{color:var(--fog)}
.seg-dark button:hover{color:#fff}
.seg-dark button.active{color:var(--ink)}
.seg-dark .ind{background:linear-gradient(180deg,#fff,#e6e6e3);box-shadow:inset 0 1px 0 #fff,0 6px 14px -6px rgba(0,0,0,.6)}

/* Switch (thumb springs with a little overshoot) */
.switch{position:relative;display:inline-block;flex-shrink:0;width:48px;height:28px;border-radius:999px;background:rgba(12,12,13,.14);box-shadow:inset 0 1px 3px rgba(0,0,0,.14);transition:background .35s var(--ease)}
.switch i{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:999px;background:linear-gradient(180deg,#fff,#f1f1ee);box-shadow:0 1px 2px rgba(0,0,0,.22),0 4px 10px -3px rgba(0,0,0,.28);transition:transform .6s var(--spring-pop),width .3s var(--ease)}
.switch-input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.switch-input:checked+.switch,.switch-btn[aria-checked="true"] .switch{background:var(--ink)}
.switch-input:checked+.switch i,.switch-btn[aria-checked="true"] .switch i{transform:translateX(20px)}
.rule:active .switch i,.switch-btn:active .switch i{width:27px}
.rule:active .switch-input:checked+.switch i,.switch-btn[aria-checked="true"]:active .switch i{transform:translateX(15px)}
.switch-input:focus-visible+.switch{outline:2px solid var(--ink);outline-offset:3px}
.switch-btn{border-radius:999px}

/* Forms */
form{display:grid;gap:16px}
label{display:grid;gap:7px;font-size:13px;font-weight:500;color:var(--ink-2)}
input,select,textarea{width:100%;min-height:48px;padding:12px 15px;border-radius:14px;border:1px solid var(--line-2);background:rgba(255,255,255,.82);box-shadow:inset 0 1px 2px rgba(0,0,0,.04);font-size:15px;font-weight:400;color:var(--ink);transition:border-color .2s,box-shadow .35s var(--ease),background .2s}
input:hover,select:hover,textarea:hover{border-color:var(--line-3)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ink);background-color:#fff;box-shadow:0 0 0 4px rgba(12,12,13,.08)}
input::placeholder,textarea::placeholder{color:var(--faint)}
textarea{resize:vertical;line-height:1.55;min-height:auto}
select{appearance:none;-webkit-appearance:none;padding-right:40px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%230c0c0d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center}
input[type=number]{font-variant-numeric:tabular-nums}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-error:empty{display:none}
.form-error{padding:11px 14px;border-radius:12px;background:rgba(12,12,13,.06);font-size:13.5px;font-weight:500;color:var(--ink)}
.bare-input{border:0!important;background:transparent!important;box-shadow:none!important;padding:0;min-height:0;height:100%}

/* ════════════ MOTION PRIMITIVES ════════════ */
@keyframes rise{from{opacity:0;transform:translateY(16px);filter:blur(6px)}}
@keyframes fade-in{from{opacity:0}}
@keyframes fade-out{to{opacity:0}}
@keyframes spin{to{transform:rotate(1turn)}}
@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes live{0%{box-shadow:0 0 0 0 color-mix(in srgb,currentColor 50%,transparent)}70%,100%{box-shadow:0 0 0 7px transparent}}
@keyframes reveal-in{from{opacity:0;transform:translateY(24px);filter:blur(8px)}}
@keyframes swap-in{from{opacity:0;transform:translateY(10px) scale(.985);filter:blur(5px)}}
@keyframes new-in{0%{opacity:0;transform:scale(.94);filter:blur(8px)}60%{opacity:1}}
@keyframes shake{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(2px)}30%,50%,70%{transform:translateX(-5px)}40%,60%{transform:translateX(5px)}}
@keyframes shimmer{from{background-position:120% 0}to{background-position:-20% 0}}
/* Scroll reveal: only screens that are entering animate. Re-renders after saving stay still. */
:is(.landing,.is-entering,.is-swapping,.room) [data-reveal]:not(.in){opacity:0}
:is(.landing,.is-entering,.is-swapping,.room) [data-reveal].in{animation:reveal-in 1.05s var(--ease) backwards;animation-delay:var(--d,0s)}
.sw{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .06em .14em;margin:0 -.06em -.14em}
.sw-i{display:inline-block;transition:transform 1.15s var(--ease),opacity .9s var(--ease);transition-delay:calc(var(--i)*42ms)}
:is(.landing,.is-entering,.room) [data-split]:not(.in) .sw-i{transform:translateY(112%) rotate(3deg);opacity:0}
/* Digit reels */
[data-roll]{display:inline-flex}
.reel{user-select:none;display:inline-flex;height:1em;line-height:1;overflow:hidden}
.reel-col,.reel-ch{display:inline-block;height:1em;line-height:1em;overflow:hidden}
.reel-strip{display:flex;flex-direction:column;transform:translateY(calc((var(--d) + 10) * -1em));transition:transform 1.7s var(--ease) calc(var(--k)*80ms + .15s)}
.reel-strip span{display:block;height:1em;line-height:1em;text-align:center}
:is(.landing,.is-entering,.is-swapping) [data-roll]:not(.in) .reel-strip{transform:translateY(0)}
.shake{animation:shake .45s cubic-bezier(.36,.07,.19,.97)}
.is-new{animation:new-in 1s var(--ease) backwards}
.is-entering :is(.radar-grid .opp,.assets .asset,.mix-card,.campaign,.memo,.conn,.timeline li){animation:rise .85s var(--ease) backwards;animation-delay:calc(var(--i,0)*55ms + .2s)}
.is-swapping :is(.radar-grid .opp,.assets .asset,.settings-panel>*,.connections .conn){animation:swap-in .55s var(--ease) backwards;animation-delay:calc(var(--i,0)*35ms)}
.shimmer,.scan-steps li.now .step-text,.progress-line{background:linear-gradient(100deg,var(--ink) 0%,var(--ink) 38%,#b9b9be 50%,var(--ink) 62%,var(--ink) 100%) 0 0/250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 2.2s linear infinite}
.dotgrid{display:grid;grid-template-columns:repeat(3,4px);gap:3px;flex-shrink:0}
.dotgrid i{width:4px;height:4px;border-radius:1.2px;background:var(--ink);opacity:.15;animation:matrix 1.2s infinite}
.dotgrid i:nth-child(2),.dotgrid i:nth-child(4){animation-delay:.1s}
.dotgrid i:nth-child(3),.dotgrid i:nth-child(5),.dotgrid i:nth-child(7){animation-delay:.2s}
.dotgrid i:nth-child(6),.dotgrid i:nth-child(8){animation-delay:.3s}
.dotgrid i:nth-child(9){animation-delay:.4s}
@keyframes matrix{0%,100%{opacity:.14}35%{opacity:1}}

/* ════════════ LANDING ════════════ */
.landing{overflow-x:clip}
.l-nav{position:fixed;inset:0 0 auto;z-index:60;padding:14px var(--gutter);pointer-events:none}
.l-bar{position:relative;pointer-events:auto;display:flex;align-items:center;gap:20px;max-width:var(--max);height:60px;margin:0 auto;padding:0 8px 0 20px;border-radius:999px;transition:max-width .8s var(--ease),background .5s,box-shadow .5s}
.l-nav:not(.scrolled) .l-bar{background:transparent;box-shadow:none;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.l-nav:not(.scrolled) .l-bar::after,.l-nav:not(.scrolled) .l-bar::before{opacity:0}
.l-nav.scrolled .l-bar{max-width:1000px}
.l-bar,.l-bar .brand,.l-links a,.l-actions .text-btn,.l-burger{transition:max-width .8s var(--ease),background .5s,box-shadow .5s,color .4s}
.l-nav.on-dark .l-bar{color:#fff;background:linear-gradient(180deg,rgba(38,38,42,.62),rgba(18,18,20,.42));box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -1px 0 rgba(255,255,255,.05),0 0 0 1px rgba(0,0,0,.4),0 14px 34px -16px rgba(0,0,0,.7)}
.l-nav.on-dark .l-bar::after{background:linear-gradient(155deg,rgba(255,255,255,.4),rgba(255,255,255,0) 40%,rgba(255,255,255,0) 60%,rgba(255,255,255,.2))}
.l-nav.on-dark .l-bar{--sheen:rgba(255,255,255,.12)}
.l-nav.on-dark .l-links a,.l-nav.on-dark .l-actions .text-btn{color:rgba(255,255,255,.72)}
.l-nav.on-dark .l-links a:hover{color:#fff;background:rgba(255,255,255,.08)}
.l-nav.on-dark .l-burger{color:#fff}
.l-nav.on-dark .l-cta{--busy:var(--ink);color:var(--ink);background:linear-gradient(180deg,#fff,#e9e9e6);box-shadow:inset 0 1px 0 #fff,0 8px 20px -10px rgba(0,0,0,.6)}
.l-links{display:flex;gap:2px;margin:0 auto}
.l-links a{padding:8px 14px;border-radius:999px;font-size:14.5px;font-weight:500;color:var(--ink-3);transition:background .3s,color .3s}
.l-links a:hover{background:rgba(12,12,13,.06);color:var(--ink)}
.l-actions{display:flex;align-items:center;gap:14px;margin-left:auto}
.l-burger{display:none}
.l-burger span{position:absolute;left:11px;right:11px;height:1.6px;border-radius:2px;background:currentColor;transition:transform .5s var(--spring),top .3s}
.l-burger span:first-child{top:15px}
.l-burger span:last-child{top:22px}
.menu-open .l-burger span:first-child{top:18.5px;transform:rotate(45deg)}
.menu-open .l-burger span:last-child{top:18.5px;transform:rotate(-45deg)}
.l-sheet{display:none}

.hero{position:relative;isolation:isolate;min-height:max(740px,100svh);display:grid;place-items:center;padding:130px var(--gutter) 120px;overflow:hidden;--px:0;--py:0;--out:0}
.hero-bg{position:absolute;inset:0;z-index:-1}
.hero-bloom{position:absolute;inset:-30% -20% 0;background:radial-gradient(55% 45% at 50% 42%,#fff 0%,rgba(255,255,255,.55) 42%,rgba(255,255,255,0) 72%)}
.field{position:absolute;inset:0;width:100%;height:100%;overflow:visible;transform-origin:50% 70%;transform:scale(calc(1 + var(--out)*.18));opacity:calc(1 - var(--out)*.7)}
.field .ring{fill:none;stroke:rgba(12,12,13,.075);stroke-width:1;stroke-dasharray:1;animation:draw 2s var(--ease) backwards;animation-delay:calc(var(--i)*90ms + .15s)}
.field .ripple{fill:none;stroke:rgba(12,12,13,.22);vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:center;animation:ripple 3.8s var(--ease) 1.6s infinite backwards}
@keyframes ripple{from{transform:scale(.25);opacity:.9}to{transform:scale(7);opacity:0}}
.field .route{fill:none;stroke:rgba(12,12,13,.18);stroke-width:1;stroke-dasharray:.004 .011;animation:fade-in 1.4s ease 1.2s backwards}
.field .pulse{fill:none;stroke:var(--ink);stroke-width:1.7;stroke-linecap:round;stroke-dasharray:.07 1.4;stroke-dashoffset:.07;animation:travel 3.8s cubic-bezier(.55,.05,.3,1) infinite;animation-delay:calc(var(--i)*.72s + 1.7s)}
@keyframes travel{from{stroke-dashoffset:.07}to{stroke-dashoffset:-1}}
.origin-dot{fill:var(--ink)}
.hero.paused :is(.pulse,.ripple,.live-dot){animation-play-state:paused}
.hero-chips{position:absolute;inset:0;z-index:1;pointer-events:none}
.hc{position:absolute;pointer-events:auto;display:grid;gap:11px;padding:16px;border-radius:22px;font-size:13px;color:var(--ink);text-align:left;translate:calc(var(--px)*var(--depth)*-16px) calc(var(--py)*var(--depth)*-12px + var(--out)*var(--depth)*-160px);transition:translate .9s var(--ease),scale .6s var(--spring),box-shadow .3s;animation:chip-in 1.4s var(--ease) backwards;animation-delay:calc(1.05s + var(--k)*.09s)}
.hc.receive{animation:chip-in 1.4s var(--ease) backwards,receive 1s var(--ease);animation-delay:calc(1.05s + var(--k)*.09s),0s}
@keyframes chip-in{from{opacity:0;transform:translateY(26px) scale(.9);filter:blur(16px)}}
@keyframes receive{0%{outline:1.5px solid rgba(12,12,13,.4);outline-offset:0}100%{outline:1.5px solid rgba(12,12,13,0);outline-offset:16px}}
button.hc:hover{scale:1.035}
.hc-top{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:500;color:var(--mute)}
.hc-top .icon{width:14px;height:14px}
.hc-top .mono{margin-left:auto}
.hc strong{font-size:19px;font-weight:600;letter-spacing:-.035em;line-height:1.08}
.live-dot{width:8px;height:8px;border-radius:50%;background:#fff;color:#fff;animation:live 1.8s infinite}
/* The six hero cards (homepage design pass, 21 Oct 2026): each is a small live window onto its step. They wake up in order,
   01 to 06, then rest, with a few idle details still breathing (a caret, a rolling word, a live dot). The rules describe
   the finished cards, so reduced motion simply shows them. --t0 is when each card's own moment starts. */
.hc-cap{font-size:11.5px;line-height:1.4;color:var(--ink-2)}
.hc-caret{display:inline-block;width:1.5px;height:1.05em;margin-left:1px;vertical-align:-2px;background:currentColor;animation:hc-blink 1.05s steps(1) calc(var(--t0) + 2.6s) 4 both}
@keyframes hc-blink{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes hc-type{from{clip-path:inset(0 100% 0 0)}}
@keyframes hc-pop{from{transform:scale(0)}}
/* 01 Reads your website: the address is typed and loaded, three passages are cited, the kind of business is picked. */
.hc-url{position:relative;display:flex;align-items:center;gap:7px;height:28px;padding:0 10px;border-radius:9px;background:#fff;box-shadow:0 0 0 1px var(--line),0 4px 10px -8px rgba(0,0,0,.25);font:500 11.5px/1 var(--sans);color:var(--ink);overflow:hidden}
.hc-url-dot{width:7px;height:7px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 3px rgba(12,12,13,.08)}
.hc-url-text{display:inline-block;animation:hc-type .7s steps(12,end) var(--t0) both}
.hc-url .hc-caret{margin-left:-5px}
.hc-url-bar{position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--ink);transform-origin:left;opacity:0;animation:hc-load 1s var(--ease) calc(var(--t0) + .7s) both}
@keyframes hc-load{0%{transform:scaleX(0);opacity:1}80%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
.hc-cites{display:grid;gap:6px;padding:2px 2px 0}
.hc-cite{display:flex;align-items:center;gap:5px;font-size:12px;line-height:1.3;color:var(--ink-2)}
.hc-cite>span{background:linear-gradient(rgba(12,12,13,.12),rgba(12,12,13,.12)) no-repeat 0 92%/100% 42%;animation:hc-mark .6s var(--ease) calc(var(--t0) + 1s + var(--j)*.32s) both}
@keyframes hc-mark{from{background-size:0% 42%}}
.hc-cite sup{display:inline-grid;place-items:center;width:13px;height:13px;border-radius:50%;background:var(--ink);color:#fff;font:600 7.5px/1 var(--mono);animation:hc-pop .55s var(--spring-pop) calc(var(--t0) + 1.25s + var(--j)*.32s) both}
.hc-kinds{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:3px;border-radius:999px;background:rgba(12,12,13,.06);box-shadow:inset 0 1px 2px rgba(0,0,0,.06)}
.hc-kinds span{position:relative;z-index:1;padding:5px 0;border-radius:999px;text-align:center;font-size:9.5px;font-weight:500;letter-spacing:-.01em;color:var(--ink-2);white-space:nowrap;background:none}
.hc-kinds .on{color:#fff;animation:hc-on .3s var(--ease) calc(var(--t0) + 2.45s) both}
.hc-kinds span:nth-child(2){animation:hc-off .3s var(--ease) calc(var(--t0) + 2.15s) both}
@keyframes hc-on{from{color:var(--ink-2)}}
@keyframes hc-off{from{color:#fff}}
.hc-kind-pill{position:absolute;top:3px;bottom:3px;left:3px;width:calc((100% - 6px)/4);border-radius:999px;background:var(--ink);box-shadow:0 4px 10px -4px rgba(0,0,0,.45);transform:translateX(100%);animation:hc-slide .75s var(--spring) calc(var(--t0) + 2.1s) both}
@keyframes hc-slide{from{transform:none}}
/* 02 Studies your market: three competitor ads fan out; the front one has been running for months. */
.hc-ads{position:relative;height:74px;margin-top:2px}
.hc-adthumb{position:absolute;left:50%;top:8px;width:60px;height:56px;margin-left:-30px;display:grid;align-content:end;gap:4px;padding:7px;border-radius:9px;background:#fff;box-shadow:0 0 0 1px var(--line),0 8px 16px -10px rgba(0,0,0,.35);transform:translateX(calc((var(--j) - 1)*46px)) rotate(calc((var(--j) - 1)*9deg));animation:hc-fan .9s var(--spring) calc(var(--t0) + .2s) both}
.hc-adthumb:nth-child(2){z-index:2;top:3px}
.hc-adthumb::before{content:'';position:absolute;inset:7px 7px auto;height:21px;border-radius:5px;background:linear-gradient(135deg,#ececea,#d8d8d4)}
.hc-adthumb i{height:3px;border-radius:2px;background:rgba(12,12,13,.18)}
.hc-adthumb i:nth-child(2){width:70%}.hc-adthumb i:nth-child(3){width:45%;background:var(--ink)}
@keyframes hc-fan{from{transform:none}}
.hc-run{position:absolute;left:50%;bottom:-2px;z-index:3;padding:3px 7px;border-radius:999px;background:var(--ink);color:#fff;font:500 7.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;transform:translateX(-50%);animation:hc-pop-c .55s var(--spring-pop) calc(var(--t0) + .95s) both}
@keyframes hc-pop-c{from{transform:translateX(-50%) scale(0)}}
/* 03 Picks your channels: the rows rank themselves, each fit fills, and the first one is where to start. */
.hc-rank{display:grid;gap:7px}
.hc-step{position:relative;display:grid;grid-template-columns:22px 1fr auto;align-items:center;gap:8px;height:40px;padding:0 10px;border-radius:12px;background:rgba(255,255,255,.7);box-shadow:0 0 0 1px var(--line);animation:hc-rank .95s var(--spring) calc(var(--t0) + .3s) both}
@keyframes hc-rank{from{transform:translateY(calc(var(--from)*47px))}}
.hc-step strong{min-width:0;font-size:12.5px;font-weight:500;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hc-tag{display:inline-flex;align-items:center;gap:6px;font:500 8px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.hc-fit{position:absolute;left:40px;right:12px;bottom:6px;height:2px;border-radius:2px;background:rgba(12,12,13,.08);overflow:hidden}
.hc-fit::after{content:'';position:absolute;inset:0;border-radius:inherit;background:var(--ink);transform-origin:left;transform:scaleX(var(--f));animation:hc-fill .8s var(--ease) calc(var(--t0) + 1.15s + var(--j)*.12s) both}
@keyframes hc-fill{from{transform:scaleX(0)}}
.hc-step.lead{z-index:2;background:var(--ink);color:#fff;box-shadow:0 12px 24px -12px rgba(0,0,0,.6);animation:hc-rank .95s var(--spring) calc(var(--t0) + .3s) both,hc-lead .5s var(--ease) calc(var(--t0) + 1.1s) both}
@keyframes hc-lead{from{background:rgba(255,255,255,.7);color:var(--ink);box-shadow:0 0 0 1px var(--line)}}
.hc-step.lead .hc-tag{color:rgba(255,255,255,.72)}
.hc-step.lead .hc-fit{background:rgba(255,255,255,.18)}.hc-step.lead .hc-fit::after{background:#fff}
.hc-start{animation:fade-in .5s var(--ease) calc(var(--t0) + 1.35s) both}
.hc-start .live-dot{width:6px;height:6px}
/* 05 Writes in your voice: the first email types itself, the kind of writing rolls, and it waits for approval. */
.hc-ad{aspect-ratio:1;align-content:space-between;gap:9px;color:#fff;background:linear-gradient(160deg,#26262a,#09090a);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 0 1px #000,0 34px 60px -24px rgba(0,0,0,.55)}
.hc-ad .hc-top{color:var(--fog-2);font:500 9.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;justify-content:space-between}
.hc-draft{display:grid;gap:1px;padding:9px 10px;border-radius:11px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);font-size:11px;line-height:1.42;color:rgba(255,255,255,.84)}
.hc-dl{display:block;white-space:nowrap;animation:hc-type .85s steps(24,end) calc(var(--t0) + .2s + var(--j)*.9s) both}
.hc-ad-head{font-size:27px;font-weight:600;letter-spacing:-.05em;line-height:1}
.hc-roll{display:inline-grid;height:1.06em;overflow:hidden;vertical-align:bottom;font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.02em}
.hc-roll>span{display:block;line-height:1.06;animation:hc-roll 12s var(--ease) calc(var(--t0) + 2.6s) infinite both}
@keyframes hc-roll{0%,28%{transform:translateY(0)}33%,61%{transform:translateY(-100%)}66%,94%{transform:translateY(-200%)}100%{transform:translateY(-300%)}}
.hc-ad-foot{display:flex;align-items:center;justify-content:space-between;font:500 9px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fog-2)}
.hc-switch{position:relative;flex:none;width:26px;height:15px;border-radius:999px;background:#fff;animation:hc-sw-bg .35s var(--ease) calc(var(--t0) + 2.15s) both}
.hc-switch i{position:absolute;top:2px;left:2px;width:11px;height:11px;border-radius:50%;background:var(--ink);transform:translateX(11px);animation:hc-sw .5s var(--spring) calc(var(--t0) + 2.1s) both}
@keyframes hc-sw{from{transform:none;background:rgba(255,255,255,.8)}}
@keyframes hc-sw-bg{from{background:rgba(255,255,255,.16)}}
/* 04 Finds your customers: this week's people slide in, each with a checked email. */
.hc-faces{display:flex;align-items:center;padding-left:6px}
.hc-faces i{position:relative;z-index:calc(6 - var(--j));display:grid;place-items:center;width:24px;height:24px;margin-left:-4px;border-radius:50%;background:linear-gradient(145deg,#fff,#e3e3e0);box-shadow:0 0 0 2px #f6f6f4,0 4px 8px -4px rgba(0,0,0,.3);font:600 10px/1 var(--sans);font-style:normal;color:var(--ink);animation:hc-face .6s var(--spring) calc(var(--t0) + .2s + var(--j)*.12s) both}
.hc-faces i b{position:absolute;right:-3px;bottom:-3px;width:11px;height:11px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 1.5px #f6f6f4}
.hc-faces i b::after{content:'';position:absolute;left:3.5px;top:2.5px;width:2.5px;height:4.5px;border:solid #fff;border-width:0 1.3px 1.3px 0;transform:rotate(45deg)}
.hc-faces .more{background:var(--ink);color:#fff;font-size:8.5px}
@keyframes hc-face{from{opacity:0;transform:translateX(-10px) scale(.6)}}
.hc-x strong{font-size:14px}
/* 06 Measures and adjusts: replies by channel, and the one that works grows. */
.hc-chart{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;align-items:end;height:62px;padding:0 3px;border-bottom:1px solid var(--line)}
.hc-chart i{display:block;height:100%;border-radius:5px 5px 2px 2px;background:rgba(12,12,13,.14);transform-origin:bottom;transform:scaleY(var(--h2));animation:hc-grow 2.4s var(--ease) calc(var(--t0) + .2s + var(--j)*.08s) both}
.hc-chart i.up{background:var(--ink)}
@keyframes hc-grow{0%{transform:scaleY(0)}35%,65%{transform:scaleY(var(--h))}100%{transform:scaleY(var(--h2))}}
.hc-chart-l{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:-4px;font:500 7.5px/1 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--mute);text-align:center}
.hero.paused :is(.hc-caret,.hc-roll>span){animation-play-state:paused}
/* Calm (owner, 21 Oct 2026: “not overwhelming”): only the three front cards play; the blurred ones behind show their
   finished picture, since motion in a blurred card reads as flicker. */
:is(.hc-mail,.hc-x,.hc-search) :is(.hc-adthumb,.hc-run,.hc-faces i,.hc-chart i){animation:none}
.hc-radar{left:4%;top:15%;width:236px;--k:0}
.hc-strategy{right:4%;top:16%;width:250px;--k:1}
.hc-ad{right:8%;bottom:12%;width:214px;--k:2}
.hc-mail{left:9%;bottom:14%;width:200px;--k:3;filter:blur(3px);opacity:.78;scale:.92}
.hc-x{right:25%;top:10.5%;width:150px;--k:4;filter:blur(5px);opacity:.55;scale:.8}
.hc-search{left:21%;top:11%;width:196px;--k:5;filter:blur(1.8px);opacity:.85;scale:.9}
.hero-copy{position:relative;z-index:2;display:grid;justify-items:center;max-width:1000px;text-align:center;transform:translateY(calc(var(--out)*-70px)) scale(calc(1 - var(--out)*.06));opacity:calc(1 - var(--out)*1.15)}
.hero-copy h1{margin:26px 0 24px}
.hero-lead{max-width:620px;font-size:clamp(1.02rem,1.3vw,1.18rem);line-height:1.55;color:var(--ink-3)}
.hero-form{display:flex;align-items:center;gap:10px;width:min(570px,100%);height:68px;margin-top:36px;padding:0 8px 0 22px;border-radius:999px;transition:box-shadow .4s var(--ease)}
.hero-form>.icon{color:var(--ink-3)}
.hero-form input,.search-bar input,.url-field input,.palette-search input{flex:1;min-width:0;height:100%;min-height:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;font-size:16px}
.hero-form input:focus,.search-bar input:focus,.url-field input:focus,.palette-search input:focus{box-shadow:none;background:transparent}
:is(.hero-form,.search-bar,.url-field):focus-within{box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 0 0 1px rgba(12,12,13,.18),0 0 0 6px rgba(12,12,13,.06),0 18px 40px -18px rgba(0,0,0,.35)}
.hero-form .btn{--h:52px}
.hero-under{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 20px;margin-top:22px;font-size:14px;color:var(--ink-3)}
.hero-foot{position:absolute;left:var(--gutter);right:var(--gutter);bottom:26px;z-index:2;display:flex;align-items:center;justify-content:space-between;color:var(--mute);opacity:calc(1 - var(--out)*2)}
.scroll-cue{position:relative;width:26px;height:44px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line-2)}
.scroll-cue i{position:absolute;left:50%;top:9px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--ink);animation:cue 2.2s var(--ease-io) infinite}
@keyframes cue{0%{transform:translateY(0);opacity:0}25%{opacity:1}80%{transform:translateY(16px);opacity:0}100%{opacity:0}}

.statement{padding:clamp(110px,15vw,200px) 0 clamp(70px,9vw,120px)}
.statement-text{max-width:1120px;margin-top:26px;font-size:clamp(1.75rem,3.6vw,3.4rem);font-weight:500;letter-spacing:-.042em;line-height:1.12}
.wd{color:rgba(12,12,13,.15);transition:color .6s var(--ease)}
.wd.on{color:var(--ink)}

.channels{padding:10px 0 clamp(80px,10vw,130px)}
.channels-inner{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:40px}
.channels-lead{font-size:20px;font-weight:500;letter-spacing:-.03em;white-space:nowrap}
.marquee{overflow:hidden;padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);-webkit-mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marquee-track{display:flex;width:max-content;animation:marquee 42s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-set{display:flex;align-items:center;gap:36px;padding-right:36px}
.mq-item{display:inline-flex;align-items:center;gap:10px;font-size:17px;font-weight:500;letter-spacing:-.015em;color:var(--ink-2);white-space:nowrap}
.mq-item .icon{width:18px;height:18px}
.mq-sep{font-family:var(--serif);font-size:24px;color:var(--faint)}
@keyframes marquee{to{transform:translateX(-50%)}}

.section-head{max-width:780px;margin-bottom:clamp(50px,6vw,84px)}
.section-head .eyebrow{margin-bottom:22px}
.section-head>p,.section-head.split>p{margin-top:24px;max-width:560px;font-size:1.1rem;line-height:1.6;color:var(--ink-3)}
.section-head.center{margin-inline:auto;text-align:center}
.section-head.center p{margin-inline:auto}
.section-head.split{max-width:none;display:grid;grid-template-columns:1.25fr .75fr;align-items:end;gap:40px}

.how{padding:clamp(40px,6vw,80px) 0 clamp(80px,10vw,140px)}
.how-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(40px,6vw,100px)}
.how-stage-wrap{position:relative}
.how-stage{position:sticky;top:100px;height:min(620px,calc(100vh - 140px));border-radius:34px;overflow:hidden;background:var(--paper-hi);box-shadow:inset 0 1px 0 #fff,0 0 0 1px var(--line),0 40px 80px -50px rgba(0,0,0,.4)}
.stage-grid{position:absolute;inset:0;background-image:radial-gradient(rgba(12,12,13,.13) 1px,transparent 1.3px);background-size:22px 22px;-webkit-mask:radial-gradient(75% 65% at 50% 50%,#000,transparent);mask:radial-gradient(75% 65% at 50% 50%,#000,transparent)}
.stage-rail{position:absolute;right:24px;top:28px;bottom:28px;width:2px;border-radius:2px;background:var(--line)}
.stage-rail i{display:block;height:calc(var(--p,0)*100%);border-radius:inherit;background:var(--ink)}
.stage-index{position:absolute;left:28px;bottom:24px;display:flex;gap:14px;color:var(--faint)}
.stage-index span{transition:color .4s}
.how-stage[data-step="1"] .stage-index span:nth-child(1),.how-stage[data-step="2"] .stage-index span:nth-child(2),.how-stage[data-step="3"] .stage-index span:nth-child(3){color:var(--ink)}
.how-stage .scene{position:absolute;inset:0;transition:opacity .7s var(--ease),transform .9s var(--ease),filter .7s var(--ease),visibility 0s}
.how-stage:not([data-step="1"]) .scene-1,.how-stage:not([data-step="2"]) .scene-2,.how-stage:not([data-step="3"]) .scene-3{opacity:0;visibility:hidden;transform:scale(.96) translateY(12px);filter:blur(10px);transition-delay:0s,0s,0s,.7s}
.how-steps{display:grid}
.how-step{min-height:72vh;display:flex;flex-direction:column;justify-content:center;padding:40px 0;opacity:.25;transition:opacity .6s var(--ease)}
.how-step.current{opacity:1}
.step-num{margin-bottom:24px;color:var(--mute)}
.how-step h3{font-size:clamp(2rem,3.5vw,3.2rem);letter-spacing:-.048em;line-height:1}
.how-step>p{max-width:420px;margin-top:18px;font-size:1.1rem;color:var(--ink-3)}
.how-step ul{list-style:none;display:grid;gap:12px;margin-top:28px;padding:0}
.how-step>ul li{display:flex;align-items:center;gap:12px;font-size:15px;color:var(--ink-2)}
.how-step>ul li .icon{width:18px;height:18px;padding:4px;border-radius:50%;background:var(--ink);color:#fff;stroke-width:2.4}
.step-art{display:none}
/* Scene 1 (homepage design pass, 21 Oct 2026): Forma's site, each passage cited like a footnote, the profile it becomes,
   and the founder's seal. The rules below are the finished scene; .is-playing (set by playProfile) plays it in. */
.scene-1{perspective:1500px}
.s1-site{position:absolute;left:6%;top:7%;width:65%;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px rgba(12,12,13,.07),0 2px 4px -2px rgba(0,0,0,.06),0 34px 64px -34px rgba(0,0,0,.38);transform:rotateY(10deg) rotateX(4deg) rotateZ(-1.5deg);transform-origin:80% 40%}
.s1-bar{display:flex;align-items:center;gap:5px;height:30px;padding:0 12px;background:linear-gradient(#fbfbfa,#f3f3f1);border-bottom:1px solid rgba(12,12,13,.06)}
.s1-bar>i{width:8px;height:8px;border-radius:50%;background:#dddcd8}
.s1-url{display:inline-flex;align-items:center;gap:5px;height:19px;margin:0 auto;padding:0 11px;border-radius:6px;background:#fff;box-shadow:inset 0 0 0 1px rgba(12,12,13,.07);font:500 10px/1 var(--sans);color:var(--mute);transform:translateX(-16px)}
.s1-url .icon{width:10px;height:10px}
.s1-page{position:relative;padding:14px 18px 18px;font-size:11px;line-height:1.5;color:#55555a}
.s1-nav{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.s1-logo{display:inline-flex;align-items:center;gap:6px;font:700 13px/1 var(--sans);letter-spacing:-.05em;color:var(--ink)}
.s1-logo b{width:13px;height:13px;border-radius:4px;background:conic-gradient(from 210deg,var(--ink) 0 75%,#8a8a8e 0)}
.s1-links{display:flex;gap:11px;margin-left:auto;font-size:9.5px;color:#8e8e92}.s1-links i{font-style:normal}
.s1-try{padding:4px 9px;border-radius:999px;background:var(--ink);color:#fff;font-size:9px;font-weight:600}
.s1-eyebrow{display:block;margin-bottom:7px;font:500 8.5px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#77777b}
.s1-h{margin:0 0 9px;max-width:15ch;font:700 20px/1.06 var(--sans);letter-spacing:-.045em;color:var(--ink)}
.s1-h em{font-family:var(--serif);font-weight:400;letter-spacing:-.02em}
.s1-sub{margin:0 0 15px;max-width:33ch}
.s1-low{display:grid;grid-template-columns:1fr 1.05fr;gap:14px;align-items:end}
.s1-quote{margin:0;padding-left:9px;border-left:1.5px solid var(--ink);font-size:10.5px;line-height:1.45;color:#2b2b2e}
.s1-quote small{display:block;margin-top:4px;font-size:9px;color:#8e8e92}
.s1-shot{position:relative;height:86px;border-radius:10px;background:linear-gradient(155deg,#f4f4f2,#e8e8e5);box-shadow:inset 0 0 0 1px rgba(12,12,13,.05);overflow:hidden}
.s1-shot i{position:absolute;height:12px;border-radius:999px;background:#fff;box-shadow:0 4px 10px -6px rgba(0,0,0,.3)}
.s1-shot i:nth-child(1){left:10px;top:12px;width:58%}.s1-shot i:nth-child(2){right:10px;top:34px;width:44%;background:var(--ink)}.s1-shot i:nth-child(3){left:10px;top:56px;width:36%}
/* A cited passage: a soft marker under the words, and its footnote number. */
.s1-src{color:inherit;background:linear-gradient(rgba(12,12,13,.11),rgba(12,12,13,.11)) no-repeat 0 88%/100% 42%;border-radius:2px;transition:background-size .8s var(--ease)}
.s1-h .s1-src{background-size:100% 30%}
.s1-mark,.s1-cite{display:inline-grid;place-items:center;width:12px;height:12px;margin-left:3px;border-radius:50%;background:var(--ink);color:#fff;font:600 7.5px/1 var(--mono);vertical-align:2px;transition:transform .55s var(--spring-pop)}
.s1-h .s1-mark{vertical-align:9px}
.s1-scan{position:absolute;left:0;right:0;top:0;height:44px;opacity:0;pointer-events:none;background:linear-gradient(180deg,rgba(12,12,13,0),rgba(12,12,13,.05));border-bottom:1px solid rgba(12,12,13,.3)}
/* The profile: an editorial sheet, each value carrying its passage's number. */
.s1-card{position:absolute;right:5%;bottom:7%;width:57%;padding:18px 18px 15px;border-radius:20px;background:rgba(255,255,255,.95);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(12,12,13,.07),0 2px 6px -2px rgba(0,0,0,.08),0 44px 90px -44px rgba(0,0,0,.5);transform:rotateZ(1deg)}
.s1-head{display:flex;align-items:center;gap:11px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.s1-av{flex:none;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:var(--ink);color:#fff;font:italic 400 19px/1 var(--serif)}
.s1-head strong{display:block;font:600 14.5px/1.2 var(--sans);letter-spacing:-.025em;color:var(--ink)}
.s1-head strong em{font-family:var(--serif);font-weight:400;font-size:1.08em}
.s1-head small{display:block;margin-top:2px;font-size:10.5px;color:var(--mute)}
.s1-rows{display:grid;margin:0}
.s1-row{display:grid;grid-template-columns:62px minmax(0,1fr) auto;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid rgba(12,12,13,.06)}
.s1-row dt{font:500 8.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#8e8e92}
.s1-row dd{display:contents;margin:0}
.s1-val{min-width:0;font:600 13px/1.25 var(--sans);letter-spacing:-.02em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .5s var(--ease),filter .5s var(--ease),transform .6s var(--ease)}
.s1-cite{margin:0}
.s1-foot{display:flex;align-items:center;justify-content:space-between;padding-top:12px}
.s1-state{display:grid}.s1-state>span{grid-area:1/1;display:inline-flex;align-items:center;gap:6px;font-size:11.5px;transition:opacity .45s var(--ease)}
.s1-draft{color:var(--mute);opacity:0}
.s1-done{font-weight:600;color:var(--ink)}
.s1-done svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.s1-ver{font:500 9px/1 var(--mono);letter-spacing:.08em;color:#a0a0a4}
/* The seal, stamped on the corner once the founder confirms; its ring of words turns slowly. */
.s1-seal{position:absolute;right:-24px;top:-34px;width:80px;height:80px;transform:rotate(-12deg);filter:drop-shadow(0 12px 16px rgba(0,0,0,.2))}
.s1-seal svg{width:100%;height:100%;overflow:visible}
.s1-seal .ring-o{fill:#fff;stroke:var(--ink);stroke-width:1.4}
.s1-seal .ring-l{fill:none;stroke:rgba(12,12,13,.18);stroke-width:.8}
.s1-seal text{font:600 8.4px var(--mono);letter-spacing:.04em;fill:var(--ink)}
.s1-seal .spin{transform-origin:50px 50px;animation:s1-spin 28s linear infinite}
.s1-seal .ring-i{fill:var(--ink)}
.s1-seal .tick{fill:none;stroke:#fff;stroke-width:4.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
.s1-fly{position:absolute;inset:0;pointer-events:none;z-index:3}
.s1-chip{position:absolute;left:0;top:0;padding:4px 10px;border-radius:999px;background:var(--ink);color:#fff;font:600 11px/1.3 var(--sans);letter-spacing:-.01em;white-space:nowrap;box-shadow:0 12px 26px -10px rgba(0,0,0,.55);will-change:transform,opacity}
/* Playing: everything starts unread, then lights up, lands and is confirmed. */
.scene-1.is-playing .s1-scan{animation:s1-scan 1.5s var(--ease-io) .25s both}
.scene-1.is-playing .s1-src:not(.lit){background-size:0% 42%}
.scene-1.is-playing .s1-mark:not(.lit),.scene-1.is-playing .s1-row:not(.in) .s1-cite{transform:scale(0)}
.scene-1.is-playing .s1-row:not(.in) .s1-val{opacity:0;filter:blur(6px);transform:translateY(4px)}
.scene-1.is-playing .s1-row.in{animation:s1-land .8s var(--ease)}
.scene-1.is-playing:not(.confirmed) .s1-draft{opacity:1}
.scene-1.is-playing:not(.confirmed) .s1-done{opacity:0}
.scene-1.is-playing:not(.confirmed) .s1-seal{opacity:0;transform:rotate(-46deg) scale(1.8)}
.scene-1.is-playing:not(.confirmed) .s1-seal .tick{stroke-dashoffset:1}
.scene-1.is-playing.confirmed .s1-seal{animation:s1-stamp .75s cubic-bezier(.2,1.5,.35,1) both}
.scene-1.is-playing.confirmed .s1-seal .tick{transition:stroke-dashoffset .5s var(--ease) .4s}
.scene-1.is-playing.confirmed .s1-card{animation:s1-press .6s var(--ease)}
@keyframes s1-scan{0%{opacity:0;transform:translateY(-44px)}15%,80%{opacity:1}100%{opacity:0;transform:translateY(240px)}}
@keyframes s1-land{0%{background:rgba(12,12,13,.04)}100%{background:transparent}}
@keyframes s1-stamp{0%{opacity:0;transform:rotate(-46deg) scale(1.8)}55%{opacity:1;transform:rotate(-6deg) scale(.92)}100%{opacity:1;transform:rotate(-12deg) scale(1)}}
@keyframes s1-press{0%,100%{transform:rotateZ(1deg)}35%{transform:rotateZ(1deg) translateY(2px) scale(.992)}}
@keyframes s1-spin{to{transform:rotate(1turn)}}
@media (prefers-reduced-motion:reduce){.s1-seal .spin{animation:none}}
/* Step 2: how Forma's channels get chosen, as evidence and one decision, top to bottom (example). Competitors' ads
   pinned up as the ads they are, the radar finding where customers gather, and one large card that says where to
   start, its reasons footnoted back to the ad and the place they came from. */
.scene-2{display:grid;align-content:center;padding:22px 58px 46px 36px}
.ch{display:grid;gap:12px}
.ch-head{display:flex;justify-content:space-between;align-items:center;color:var(--mute)}
.ch-label{font:500 10px var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--mute)}
/* The ads, fanned like prints pinned to a wall: the stopped one behind on the left, the proven one in front */
.ch-board{position:relative;height:198px;margin-top:8px}
.ch-ad{position:absolute;left:var(--x);top:var(--y);width:var(--w);transform:rotate(var(--r));border-radius:12px;background:#fff;box-shadow:0 0 0 1px var(--line),0 22px 40px -24px rgba(0,0,0,.5)}
.ch-ad.stopped{--x:0%;--y:14px;--w:34%;--r:-6deg;z-index:1}
.ch-ad.proven{--x:31%;--y:0px;--w:38%;--r:-1deg;z-index:3}
.ch-ad.testing{--x:65.5%;--y:12px;--w:34%;--r:5deg;z-index:2}
.ch-ad-head{display:flex;align-items:center;gap:6px;padding:7px 9px}
.ch-ad-head>span:last-child{display:grid;line-height:1.15;min-width:0}
.ch-ad-head b{font-size:10.5px;font-weight:600}
.ch-ad-head small{display:inline-flex;align-items:center;gap:3px;font-size:8.5px;color:var(--mute)}
.ch-ad-head small .icon{width:8px;height:8px}
.ch-av{flex:none;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--ink);color:#fff;font:600 9px var(--sans)}
.ch-media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--paper-lo)}
.ch-media img{display:block;width:100%;height:100%;object-fit:cover}
.ch-type{display:grid;align-content:end;height:100%;padding:10px 12px;box-sizing:border-box;background:radial-gradient(120% 90% at 30% 10%,#3a3a3f,#0c0c0d 70%);color:#fff;font-family:var(--serif);font-size:15px;line-height:1.1;letter-spacing:-.01em}
.ch-type p{margin:0}.ch-type span{font-style:italic}
.ch-play{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:rgba(255,255,255,.9);color:var(--ink);box-shadow:0 6px 16px -6px rgba(0,0,0,.5)}
.ch-play .icon{width:12px;height:12px;margin-left:2px}
.ch-ad-foot{display:flex;align-items:center;gap:8px;padding:7px 9px 8px;border-radius:0 0 12px 12px;background:var(--paper-hi)}
.ch-ad-foot>span:first-child{display:grid;flex:1;min-width:0;line-height:1.2}
.ch-ad-foot small{font:500 7.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.ch-ad-foot b{font-size:10.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-cta{flex:none;padding:4px 8px;border-radius:6px;background:var(--paper-lo);font-size:9px;font-weight:600}
.ch-tag{position:absolute;top:-11px;right:-6px;display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:999px;background:#fff;color:var(--ink);font-size:10px;font-weight:600;white-space:nowrap;box-shadow:0 0 0 1px var(--line-2),0 8px 16px -10px rgba(0,0,0,.45)}
.ch-tag.live{background:var(--ink);color:#fff;box-shadow:0 10px 20px -10px rgba(0,0,0,.6)}
.ch-tag.live i{width:6px;height:6px;border-radius:50%;background:#fff}
.ch-stamp{position:absolute;left:8%;top:40%;padding:5px 8px;border:1.5px solid var(--ink);border-radius:6px;background:rgba(255,255,255,.9);color:var(--ink);font:600 9px var(--mono);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;transform:rotate(-9deg)}
.ch-ad.stopped :is(.ch-ad-head,.ch-media,.ch-ad-foot){filter:grayscale(1);opacity:.55}
/* Footnotes: the same marks as step 1, tying each reason to what it came from */
.ch-fn{display:inline-grid;place-items:center;width:13px;height:13px;margin-left:4px;border-radius:50%;background:var(--ink);color:#fff;font:600 8px/1 var(--mono);vertical-align:1px}
.ch-tag.live .ch-fn,.ch-pick .ch-fn{background:#fff;color:#0c0c0d}
/* Where they gather: a small radar, and each place lighting up as the sweep passes it */
.ch-gather{display:flex;align-items:center;gap:14px;padding:8px 12px 8px 8px;border-radius:18px;background:rgba(255,255,255,.6);box-shadow:inset 0 0 0 1px var(--line)}
.ch-radar{position:relative;flex:none;width:58px;height:58px}
.ch-radar svg{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:var(--line-2);stroke-width:.8}
.ch-sweep{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,transparent 0deg,rgba(12,12,13,.16) 60deg,transparent 60.5deg);transform:rotate(-60deg)}
.ch-core{position:absolute;left:50%;top:50%;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;background:var(--ink)}
.ch-pin{position:absolute;left:var(--x);top:var(--y);width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 2px #fff}
.ch-pin::after{content:"";position:absolute;inset:-3px;border-radius:50%;box-shadow:0 0 0 1.5px var(--ink);opacity:0}
.ch-places{display:grid;gap:6px;min-width:0}
.ch-places>div{display:flex;flex-wrap:wrap;gap:6px}
.ch-place{display:inline-flex;align-items:center;gap:6px;padding:5px 10px 5px 8px;border-radius:999px;background:#fff;font-size:11.5px;font-weight:600;white-space:nowrap;box-shadow:0 0 0 1px var(--line),0 6px 14px -10px rgba(0,0,0,.35)}
.ch-place svg{width:12px;height:12px}
/* The decision */
.ch-pick{position:relative;padding:14px 18px 13px;border-radius:22px;background:var(--dark-bg);color:#fff;box-shadow:var(--dark-shadow)}
.ch-pick-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ch-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 10px 4px 8px;border-radius:999px;background:#fff;color:#0c0c0d;font-size:10.5px;font-weight:600}
.ch-badge .icon{width:11px;height:11px;stroke-width:2.4}
.ch-fit{display:grid;gap:5px;justify-items:end;width:96px}
.ch-fit i{position:relative;width:100%;height:4px;border-radius:2px;overflow:hidden;background:rgba(255,255,255,.18)}
.ch-fit i::after{content:"";position:absolute;left:0;top:0;bottom:0;width:92%;border-radius:inherit;background:#fff}
.ch-fit b{font:500 9px var(--mono);letter-spacing:.07em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.ch-pick h4{margin:8px 0 5px;font-size:23px;font-weight:600;letter-spacing:-.03em;line-height:1.05}
.ch-pick p{margin:0;max-width:52ch;font-size:13.5px;line-height:1.45;color:rgba(255,255,255,.74);text-wrap:pretty}
.ch-then{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:11px;padding-top:10px;border-top:1px solid rgba(255,255,255,.12)}
.ch-then>span:first-child{margin-right:4px;font:500 9.5px var(--mono);letter-spacing:.07em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.ch-next{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 8px;border-radius:999px;background:rgba(255,255,255,.08);color:rgba(255,255,255,.85);font-size:11px;font-weight:500;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.ch-next svg{width:11px;height:11px}
/* Played each time step 2 comes into view; on phones, once as it scrolls in. Before it plays, it waits empty. */
.step-art .scene-2.armed:not(.in) :is(.ch-ad,.ch-gather,.ch-pick){opacity:0}
:is(.how-stage[data-step="2"] .scene-2,.step-art .scene-2.in) .ch-ad{animation:ch-pin .8s var(--spring) both}
:is(.how-stage[data-step="2"] .scene-2,.step-art .scene-2.in) .ch-ad.stopped{animation-delay:.2s}
:is(.how-stage[data-step="2"] .scene-2,.step-art .scene-2.in) .ch-ad.testing{animation-delay:.36s}
:is(.how-stage[data-step="2"] .scene-2,.step-art .scene-2.in) .ch-ad.proven{animation-delay:.52s}
:is(.how-stage[data-step="2"] .scene-2,.step-art .scene-2.in) .ch-tag{animation:wk-flip .5s var(--spring-pop) 1.15s both}
:is(.how-stage[data-step="2"] .scene-2,.step-art .scene-2.in) .ch-tag.live i{animation:ch-live 2.2s ease-out 1.7s infinite}
:is(.how-stage[data-step="2"] .scene-2,.step-art .scene-2.in) .ch-ad.stopped :is(.ch-ad-head,.ch-media,.ch-ad-foot){animation:ch-fade .7s var(--ease) 1.25s both}
:is(.how-stage[data-step="2"] .scene-2,.step-art .scene-2.in) .ch-stamp{animation:ch-stamp .6s cubic-bezier(.2,1.5,.35,1) 1.45s both}
:is(.how-stage[data-step="2"] .scene-2,.step-art .scene-2.in) .ch-gather{animation:wk-in .6s var(--ease) 1.55s both}
:is(.how-stage[data-step="2"] .scene-2,.step-art .scene-2.in) .ch-sweep{animation:ch-sweep 1.4s var(--ease-io) 1.8s both,ch-sweep-on 8s linear 3.2s infinite}
:is(.how-stage[data-step="2"] .scene-2,.step-art .scene-2.in) .ch-pin{animation:wk-flip .45s var(--spring-pop) calc(var(--d) + 1.8s) both}
:is(.how-stage[data-step="2"] .scene-2,.step-art .scene-2.in) .ch-pin::after{animation:ch-ping 1s var(--ease) calc(var(--d) + 1.8s) both}
:is(.how-stage[data-step="2"] .scene-2,.step-art .scene-2.in) .ch-place{animation:ch-light .55s var(--spring-pop) calc(var(--d) + 1.85s) both}
:is(.how-stage[data-step="2"] .scene-2,.step-art .scene-2.in) .ch-pick{animation:wk-rise .9s var(--spring) 3.25s both}
:is(.how-stage[data-step="2"] .scene-2,.step-art .scene-2.in) .ch-fit i::after{animation:ch-fill .9s var(--ease) 3.65s both}
:is(.how-stage[data-step="2"] .scene-2,.step-art .scene-2.in) .ch-badge{animation:wk-flip .55s var(--spring-pop) 3.8s both}
:is(.how-stage[data-step="2"] .scene-2,.step-art .scene-2.in) .ch-fn{animation:ch-cite .9s var(--spring-pop) 4.1s both}
:is(.how-stage[data-step="2"] .scene-2,.step-art .scene-2.in) .ch-next{animation:wk-flip .45s var(--spring-pop) calc(var(--i)*.1s + 4.4s) both}
@keyframes ch-pin{0%{opacity:0;transform:translateY(-26px) rotate(calc(var(--r) - 7deg)) scale(1.04)}60%{opacity:1}100%{opacity:1;transform:rotate(var(--r))}}
@keyframes ch-fade{from{filter:none;opacity:1}}
@keyframes ch-stamp{0%{opacity:0;transform:rotate(-30deg) scale(1.9)}60%{opacity:1;transform:rotate(-6deg) scale(.94)}100%{opacity:1;transform:rotate(-9deg) scale(1)}}
@keyframes ch-sweep{from{transform:rotate(-60deg)}to{transform:rotate(300deg)}}
@keyframes ch-sweep-on{from{transform:rotate(300deg)}to{transform:rotate(660deg)}}
@keyframes ch-live{0%{box-shadow:0 0 0 0 rgba(255,255,255,.7)}75%,100%{box-shadow:0 0 0 7px rgba(255,255,255,0)}}
@keyframes ch-ping{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(3.4)}}
@keyframes ch-light{0%{opacity:.3;transform:scale(.92);box-shadow:0 0 0 1px var(--line)}60%{box-shadow:0 0 0 1.5px var(--ink),0 6px 14px -10px rgba(0,0,0,.35)}100%{opacity:1;transform:none}}
@keyframes ch-fill{from{width:0}}
@keyframes ch-cite{0%{transform:scale(1)}35%{transform:scale(1.6);box-shadow:0 0 0 4px rgba(127,127,127,.28)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){:is(.how-stage,.step-art) .scene-2 :is(.ch-ad,.ch-ad *,.ch-tag,.ch-tag i,.ch-stamp,.ch-gather,.ch-sweep,.ch-pin,.ch-pin::after,.ch-place,.ch-pick,.ch-fit i::after,.ch-badge,.ch-fn,.ch-next){animation:none!important}}
/* Scene 3: in motion */
.fc-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;color:var(--mute)}
.fc-bars{display:flex;align-items:flex-end;gap:8px;height:96px}
.fc-bars i{flex:1;height:var(--h);border-radius:8px 8px 3px 3px;background:var(--paper-lo);transform-origin:bottom}
.fc-bars i:last-child{background:var(--ink)}
/* Step 3: Forma's week across channels, approved once, then the results (example) */
.scene-3{display:grid;align-content:center;padding:40px 64px 56px 40px}
.wk{display:grid;gap:12px}
.wk-head{display:flex;justify-content:space-between;align-items:center;color:var(--mute)}
.wk-list{display:grid;gap:8px}
.wk-card{position:relative;display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 12px 10px 10px;border-radius:16px;background:#fff;box-shadow:0 0 0 1px var(--line),0 10px 24px -18px rgba(0,0,0,.35)}
.wk-card::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 1.5px var(--ink);opacity:0;pointer-events:none}
.wk-ico{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:var(--paper-hi);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink)}
.wk-ico svg{width:17px;height:17px}
.wk-ad{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:radial-gradient(120% 90% at 30% 10%,#3a3a3f,#0c0c0d 70%);color:#fff;font-family:var(--serif);font-size:8.5px;line-height:1.05;text-align:center;padding:4px;overflow:hidden}
.wk-ad em{font-style:italic}
.wk-card.ad .wk-ico{padding:0;background:none;box-shadow:none}
.wk-body{display:grid;gap:2px;min-width:0}
.wk-body small{font:500 10px var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wk-body strong{font-size:13px;font-weight:600;letter-spacing:-.01em;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wk-state{display:grid;justify-items:end;font-size:11px;font-weight:500;white-space:nowrap}
.wk-state>span{grid-area:1/1;display:inline-flex;align-items:center;gap:4px;padding:4px 9px;border-radius:999px;background:var(--paper-hi);box-shadow:inset 0 0 0 1px var(--line-2);color:var(--ink-3)}
.wk-state>span:last-child{background:var(--ink);color:#fff;box-shadow:none}
.wk-state>span:first-child{opacity:0}
.wk-state .icon{width:11px;height:11px;stroke-width:2.6}
.wk-approve{position:relative;display:flex;align-items:center;gap:12px;padding:4px 2px}
.wk-btn{display:grid;flex:none;font-size:12.5px;font-weight:600}
.wk-btn>span{grid-area:1/1;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 16px;border-radius:999px}
.wk-btn>span:first-child{background:var(--ink);color:#fff;box-shadow:0 10px 22px -12px rgba(0,0,0,.6);opacity:0}
.wk-btn>span:last-child{background:#fff;color:var(--ink);box-shadow:0 0 0 1px var(--line-2)}
.wk-btn .icon{width:13px;height:13px;stroke-width:2.6}
.wk-approve small{font-size:11.5px;line-height:1.35;color:var(--mute)}
.wk-cursor{position:absolute;left:96px;top:24px;width:16px;height:16px;border-radius:50%;background:rgba(12,12,13,.82);box-shadow:0 0 0 6px rgba(12,12,13,.12);opacity:0;pointer-events:none}
.wk-result{display:grid;gap:8px;padding:14px 16px;border-radius:18px;background:var(--dark-bg);color:#fff;box-shadow:0 22px 44px -22px rgba(0,0,0,.55)}
.wk-result .eyebrow,.wk-result small{color:rgba(255,255,255,.55)}
.wk-result small{font-size:11.5px}
.wk-nums{display:flex;gap:22px;font-size:14px;color:rgba(255,255,255,.8)}
.wk-nums>span{display:inline-flex;align-items:baseline;gap:7px}
.wk-reel{display:inline-flex;flex-direction:column;height:1em;overflow:hidden;font-size:30px;line-height:1;font-weight:600;letter-spacing:-.04em;color:#fff}
.wk-reel i{display:block;height:1em;font-style:normal;transform:translateY(calc(var(--n) * -1em))}
/* Played each time step 3 comes into view; on phones, once as it scrolls in. Before it plays, it waits empty. */
.step-art .scene-3.armed:not(.in) :is(.wk-card,.wk-approve,.wk-result){opacity:0}
:is(.how-stage[data-step="3"] .scene-3,.step-art .scene-3.in) .wk-card{animation:wk-in .7s var(--ease) calc(var(--i)*.16s + .3s) both}
:is(.how-stage[data-step="3"] .scene-3,.step-art .scene-3.in) .wk-state>span:first-child{animation:wk-before calc(var(--i)*.14s + 2.4s) linear both}
:is(.how-stage[data-step="3"] .scene-3,.step-art .scene-3.in) .wk-state>span:last-child{animation:wk-flip .55s var(--spring-pop) calc(var(--i)*.14s + 2.4s) both}
:is(.how-stage[data-step="3"] .scene-3,.step-art .scene-3.in) .wk-card::after{animation:wk-glow .9s var(--ease) calc(var(--i)*.14s + 2.35s) both}
:is(.how-stage[data-step="3"] .scene-3,.step-art .scene-3.in) .wk-approve{animation:wk-in .7s var(--ease) 1.1s both}
:is(.how-stage[data-step="3"] .scene-3,.step-art .scene-3.in) .wk-cursor{animation:wk-cursor 1.2s var(--ease-io) 1.35s both}
:is(.how-stage[data-step="3"] .scene-3,.step-art .scene-3.in) .wk-btn>span:first-child{animation:wk-press 1.2s var(--ease) 1.35s both}
:is(.how-stage[data-step="3"] .scene-3,.step-art .scene-3.in) .wk-btn>span:last-child{animation:wk-flip .5s var(--spring-pop) 2.15s both}
:is(.how-stage[data-step="3"] .scene-3,.step-art .scene-3.in) .wk-result{animation:wk-rise .9s var(--spring) 3.05s both}
:is(.how-stage[data-step="3"] .scene-3,.step-art .scene-3.in) .wk-reel i{animation:wk-count .8s steps(var(--n),end) 3.35s both}
@keyframes wk-in{from{opacity:0;transform:translateY(14px) scale(.985);filter:blur(4px)}}
@keyframes wk-before{0%,97%{opacity:1}100%{opacity:0}}
@keyframes wk-flip{from{opacity:0;transform:scale(.6)}}
@keyframes wk-glow{0%{opacity:0}30%{opacity:.9}100%{opacity:0}}
@keyframes wk-press{0%,58%{opacity:1;transform:none}66%{opacity:1;transform:scale(.94)}74%,100%{opacity:0;transform:none}}
@keyframes wk-cursor{0%{opacity:0;transform:translate(150px,70px)}25%{opacity:1}62%{opacity:1;transform:translate(0,0)}70%{transform:translate(0,0) scale(.75)}80%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(0,0)}}
@keyframes wk-rise{from{opacity:0;transform:translateY(18px) scale(.97)}}
@keyframes wk-count{from{transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){:is(.how-stage,.step-art) .scene-3 :is(.wk-card,.wk-card::after,.wk-state>span,.wk-approve,.wk-cursor,.wk-btn>span,.wk-result,.wk-reel i){animation:none!important}}


/* Dark section */
.dark{position:relative;padding:clamp(100px,12vw,160px) 0;border-radius:44px;background:var(--night);color:#fff;overflow:hidden}
.dark::before{content:"";position:absolute;inset:0 0 auto;height:600px;pointer-events:none;background:radial-gradient(60% 100% at 50% 0%,rgba(255,255,255,.07),transparent 70%)}
.dark .eyebrow{color:var(--fog-2)}
.dark .section-head p{color:var(--fog)}
.dark .brand{color:#fff}
.device-stage{perspective:1800px;margin-top:10px}
.device{--tilt:0;position:relative;padding:14px;border-radius:32px;background:linear-gradient(180deg,#1a1a1d,#0e0e10);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),inset 0 0 0 1px rgba(255,255,255,.07),0 80px 140px -60px rgba(0,0,0,.95);transform-origin:50% 0;transform:rotateX(calc(var(--tilt)*24deg)) scale(calc(1 - var(--tilt)*.08)) translateY(calc(var(--tilt)*30px))}
.device-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:6px 10px 16px}
.device-top .brand .wordmark{font-size:20px}
.device-top .brand-mark{width:23px;height:23px}
.device-body{min-height:460px;padding:clamp(22px,3.4vw,44px);border-radius:22px;background:var(--night-2);box-shadow:inset 0 0 0 1px var(--nline);overflow:hidden}
.device-foot{display:flex;justify-content:center;padding:22px 0 8px}
.tz{display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"head vis" "cards cards";gap:30px 40px;align-items:center}
.tz-head{grid-area:head;animation:rise .8s var(--ease) backwards}
.tz-head h3{margin-top:14px;font-size:clamp(2rem,3.6vw,3.3rem);letter-spacing:-.048em;line-height:.98}
.tz-head p{max-width:380px;margin-top:16px;color:var(--fog)}
.tz-visual{grid-area:vis;display:grid;place-items:center;min-height:280px;animation:rise .9s var(--ease) .08s backwards}
.tz-cards{grid-area:cards;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.tz-card{display:grid;gap:8px;align-content:start;padding:20px;border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 0 0 1px var(--nline);animation:rise .8s var(--ease) backwards;animation-delay:calc(var(--i)*70ms + .15s)}
.tz-card .mono{color:var(--fog-2)}
.tz-card strong{font-size:17px;font-weight:600;letter-spacing:-.025em}
.tz-card small{font-size:13px;color:var(--fog)}
.tz-visual .radar{width:min(290px,100%)}
.tz-orbit{position:relative;width:min(300px,100%)}
.tz-orbit .orbit{position:static;width:100%;max-width:none;opacity:1}
.tz-orbit-label{position:absolute;left:12%;top:18%;display:inline-flex;gap:8px;align-items:center;padding:8px 12px;border-radius:999px;background:#fff;color:var(--ink);font-size:13px;font-weight:500;box-shadow:0 10px 24px -10px rgba(0,0,0,.6)}
.tz-assets{position:relative;width:min(320px,100%);height:260px}
.tz-post{position:absolute;left:0;top:10px;width:78%;padding:18px;border-radius:20px;background:#fff;color:var(--ink);box-shadow:0 30px 60px -30px rgba(0,0,0,.8);transform:rotate(-3deg)}
.tz-post p{margin-top:12px;font-size:13.5px;line-height:1.5}
.tz-ad{position:absolute;right:0;bottom:0;width:52%;aspect-ratio:1;display:grid;align-content:end;padding:16px;border-radius:20px;background:linear-gradient(160deg,#f4f4f1,#cfcfca);color:var(--ink);box-shadow:0 30px 60px -24px rgba(0,0,0,.9);transform:rotate(4deg)}
.tz-ad span{font-size:22px;font-weight:600;letter-spacing:-.05em;line-height:1}
.tz-ad em{font-size:24px;line-height:1}
.control{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(40px,6vw,96px);margin-top:clamp(110px,13vw,170px)}
.control-copy .eyebrow{margin-bottom:22px}
.control-copy p{max-width:460px;margin:24px 0 32px;font-size:1.08rem;color:var(--fog)}
.agreement{padding:28px;border-radius:32px;--sheen:rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.025));-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 0 0 1px rgba(255,255,255,.08),0 50px 90px -50px rgba(0,0,0,.95);transition:background .5s}
.ag-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.ag-state{display:inline-flex;align-items:center;gap:8px;color:var(--fog)}
.ag-state i{width:7px;height:7px;border-radius:50%;background:#fff;color:#fff;animation:live 2s infinite}
.ag-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 0;border-bottom:1px solid var(--nline);transition:opacity .5s var(--ease)}
.ag-row strong{display:block;font-size:16px;font-weight:500;letter-spacing:-.015em}
.ag-row small{font-size:13px;color:var(--fog-2)}
.agreement .switch{background:rgba(255,255,255,.14)}
.agreement .switch-btn[aria-checked="true"] .switch{background:#fff}
.agreement .switch-btn[aria-checked="true"] .switch i{background:linear-gradient(180deg,#34343a,#0c0c0d)}
.ag-pause{display:flex;align-items:center;gap:12px;width:100%;height:56px;margin-top:20px;padding:0 18px;border-radius:17px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px var(--nline);color:#fff;font-weight:500;transition:background .4s,color .4s,transform .4s var(--spring)}
.ag-pause:hover{background:rgba(255,255,255,.1)}
.ag-pause:active{transform:scale(.98)}
.ag-pause .icon{width:18px;height:18px}
.agreement.paused .ag-row{opacity:.32}
.agreement.paused .ag-state i{animation:none;background:transparent;box-shadow:inset 0 0 0 1.5px #fff}
.agreement.paused .ag-pause{background:#fff;color:var(--ink)}
.ag-note{display:block;margin-top:14px;color:var(--fog-2)}

.pricing{padding:clamp(110px,13vw,170px) 0 clamp(90px,10vw,130px)}
.plans{display:grid;grid-template-columns:repeat(2,minmax(0,440px));justify-content:center;gap:20px;perspective:1400px}
.plan{padding:34px;border-radius:34px;background:var(--card-bg);box-shadow:var(--card-shadow),0 30px 60px -40px rgba(0,0,0,.3);transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .8s var(--ease),box-shadow .4s}
.plan h3{margin:18px 0 28px;font-size:28px;letter-spacing:-.04em;line-height:1.05}
.price{display:flex;align-items:baseline;font-size:76px;font-weight:600;letter-spacing:-.06em;line-height:1}
.price .cur{align-self:flex-start;margin-top:.1em;font-size:.42em}
.price .per{margin-left:10px;font-size:15px;font-weight:400;letter-spacing:0;color:var(--mute)}
.plan>p{margin-top:12px;color:var(--mute)}
.plan ul{list-style:none;display:grid;gap:13px;margin:26px 0 30px;padding:24px 0 0;border-top:1px solid var(--line)}
.plan li{display:flex;align-items:center;gap:10px;font-size:15px}
.plan li .icon{width:17px;height:17px}
.plan .btn{width:100%}
.plan-dark{--sheen:rgba(255,255,255,.1);background:linear-gradient(180deg,#1d1d20,#0b0b0c);color:#fff;box-shadow:var(--dark-shadow),0 40px 70px -40px rgba(0,0,0,.6)}
.plan-dark .eyebrow{color:var(--fog-2)}
.plan-dark>p,.plan-dark .per{color:var(--fog)}
.plan-dark ul{border-color:var(--nline)}
.pricing-note{margin-top:30px;text-align:center;font-size:14px;color:var(--mute)}

.final{padding:0 0 clamp(70px,9vw,110px)}
.final-card{position:relative;isolation:isolate;display:grid;align-items:center;min-height:640px;padding:clamp(40px,6vw,90px);border-radius:44px;overflow:hidden;background:var(--night);color:#fff}
.final-card::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,var(--night) 20%,rgba(11,11,12,.7) 48%,rgba(11,11,12,0) 72%)}
.final-copy{position:relative;z-index:2;max-width:580px}
.final-copy .eyebrow{color:var(--fog-2)}
.final-copy h2{margin:22px 0 36px}
.iso{position:absolute;inset:0;z-index:0;pointer-events:none}
.iso-plane{position:absolute;left:52%;top:50%;display:grid;grid-template-columns:repeat(4,210px);gap:22px;transform:translate(-8%,-50%) rotateX(54deg) rotateZ(-40deg)}
.iso-col{display:grid;gap:22px;align-content:start;will-change:transform}
.iso-col:nth-child(even){margin-top:110px}
.iso-card{display:grid;gap:10px;align-content:start;min-height:150px;padding:18px;border-radius:22px;background:linear-gradient(180deg,#f6f6f4,#dfdfdb);color:var(--ink);font-size:13px;box-shadow:inset 0 1px 0 #fff,-26px 30px 50px -18px rgba(0,0,0,.8)}
.iso-card.dark{background:linear-gradient(180deg,#26262a,#141416);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),-26px 30px 50px -18px rgba(0,0,0,.8)}
.iso-card b{font-weight:600;letter-spacing:-.02em}
.iso-card p{font-size:17px;font-weight:600;letter-spacing:-.03em;line-height:1.1}
.iso-card .icon{width:20px;height:20px}
.ic-top{display:flex;align-items:center;gap:8px}
.ic-top .dot{width:22px;height:22px;border-radius:50%;background:var(--ink)}
.ic-top b{display:block;width:60px;height:6px;border-radius:3px;background:var(--line-2)}
.ic-lines{display:grid;gap:6px}
.ic-lines i{height:6px;border-radius:3px;background:rgba(12,12,13,.13)}
.ic-lines i:nth-child(even){width:74%}
.iso-card.ad{min-height:210px;align-content:end}
.iso-card.ad span{font-size:22px;font-weight:600;letter-spacing:-.05em;line-height:1}
.iso-card.ad em{font-size:25px;line-height:1}
.rc{position:relative;width:74px;height:74px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.rc i{position:absolute;inset:14px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.rc i:nth-child(2){inset:28px;background:#fff}
.rc i:nth-child(3){inset:6px 30px auto auto;width:8px;height:8px;background:#fff;box-shadow:0 0 12px #fff}
.iso-card.chartc .fc-bars{height:110px}
.iso-card.plan{grid-template-columns:auto 1fr;align-items:center;gap:10px 12px;min-height:120px}
.iso-card.plan .mono{color:var(--mute)}
.iso-card.check{grid-auto-flow:column;justify-content:start;align-items:center;min-height:80px}
.iso-card.check .icon{width:30px;height:30px;padding:6px;border-radius:50%;background:var(--ink);color:#fff;stroke-width:2.4}

.site-foot{overflow:hidden;padding-top:40px}
.foot-row{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:30px;padding-bottom:28px;border-bottom:1px solid var(--line)}
.foot-tag{color:var(--mute)}
.foot-links{display:flex;gap:22px}
.foot-links a,.foot-links button{font-size:14px;font-weight:500;color:var(--ink-3)}
.foot-links a:hover,.foot-links button:hover{color:var(--ink)}
.site-foot .mono{color:var(--mute)}
.foot-word{margin:18px 0 -.15em;text-align:center;font-size:clamp(5rem,24.5vw,25rem);font-weight:600;letter-spacing:-.075em;line-height:.8;color:#e5e5e2;text-shadow:0 2px 1px rgba(255,255,255,.95),0 -1px 1px rgba(0,0,0,.07);user-select:none}

/* ════════════ WORKSPACE ════════════ */
.ws{min-height:100vh;display:flex;flex-direction:column}
.ws-top{position:sticky;top:0;z-index:40;padding:12px var(--gutter)}
.ws-top::before{content:"";position:absolute;inset:0 0 -34px;z-index:-1;pointer-events:none;opacity:0;background:linear-gradient(180deg,var(--paper) 58%,rgba(237,237,235,0));transition:opacity .4s}
.ws-top.scrolled::before{opacity:1}
.ws-top-inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;max-width:1400px;height:54px;margin:0 auto}
.ws-id{display:flex;align-items:center;gap:12px;min-width:0}
.ws-div{width:1px;height:22px;background:var(--line-2)}
.ws-switch{display:flex;align-items:center;gap:10px;min-width:0;padding:4px 10px 4px 4px;border-radius:999px;transition:background .25s}
.ws-switch:hover{background:rgba(12,12,13,.06)}
.ws-switch>.icon{width:15px;height:15px;color:var(--mute)}
.ws-switch-text{display:grid;min-width:0;line-height:1.2}
.ws-switch-text strong{overflow:hidden;font-size:14px;font-weight:600;letter-spacing:-.015em;white-space:nowrap;text-overflow:ellipsis}
.ws-switch-text small{font-size:11.5px;color:var(--mute);white-space:nowrap}
.ws-tabs{position:relative;display:flex;gap:2px;padding:5px;border-radius:999px}
.tab{position:relative;z-index:1;display:inline-flex;align-items:center;gap:7px;color:var(--ink-3);font-weight:500;transition:color .35s}
.ws-tabs .tab{height:40px;padding:0 18px;border-radius:999px;font-size:14.5px}
.tab:hover{color:var(--ink)}
.tab.active{color:#fff}
.tab-count{display:grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--ink);color:#fff;font-size:10.5px;font-weight:600;transition:background .3s,color .3s}
.tab.active .tab-count{background:#fff;color:var(--ink)}
.ws-actions{display:flex;align-items:center;justify-content:flex-end;gap:4px}
.op-chip{display:inline-flex;align-items:center;gap:8px;height:36px;margin-right:4px;padding:0 13px 0 11px;border-radius:999px;font-size:13px;font-weight:500;color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line-2);transition:background .25s}
.op-chip:hover{background:rgba(12,12,13,.05)}
.orb{width:10px;height:10px;border-radius:50%;color:var(--ink);background:radial-gradient(circle at 35% 30%,#fff 0,#7a7a80 30%,#0c0c0d 72%);animation:live 2.6s infinite}
.op-chip.paused .orb{animation:none;background:transparent;box-shadow:inset 0 0 0 1.6px var(--ink-3)}
.new-btn{margin-left:6px}
.avatar-btn{display:grid;place-items:center;width:36px;height:36px;margin-left:6px;border-radius:50%;background:linear-gradient(180deg,#fff,#eaeae7);box-shadow:inset 0 1px 0 #fff,0 0 0 1px var(--line-2),0 2px 6px -2px rgba(0,0,0,.14);font-size:14px;font-weight:600;transition:transform .4s var(--spring)}
.avatar-btn:hover{transform:scale(1.06)}
.ws-main{flex:1;width:100%;max-width:calc(1260px + var(--gutter)*2);margin:0 auto;padding:10px var(--gutter) 90px}
.ws-dock{display:none}
.demo-banner{display:flex;align-items:center;gap:14px;margin-top:6px;padding:8px 8px 8px 18px;border-radius:999px;background:var(--dark-bg);color:#fff;font-size:14px;box-shadow:var(--dark-shadow)}
.demo-banner>span:nth-child(2){flex:1;color:var(--fog)}
.demo-banner strong{color:#fff;font-weight:500}
.db-dot{width:8px;height:8px;flex-shrink:0;border-radius:50%;background:#fff;color:#fff;animation:live 2s infinite}
.demo-banner .btn{--busy:var(--ink);background:linear-gradient(180deg,#fff,#ececea);color:var(--ink);box-shadow:inset 0 1px 0 #fff}
.ws-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;max-width:calc(1260px + var(--gutter)*2);margin:0 auto;padding:26px var(--gutter) 34px;border-top:1px solid var(--line);font-size:13.5px;color:var(--mute)}
.ws-foot>span:first-child{display:flex;align-items:center;gap:8px}
.ws-foot .icon{width:16px;height:16px}

.page-head{display:grid;gap:30px;padding:clamp(34px,5.5vw,72px) 0 clamp(34px,4vw,54px)}
.page-head.has-art{grid-template-columns:1.2fr .8fr;align-items:center}
.ph-meta{display:flex;align-items:center;gap:14px;margin-bottom:24px}
.ph-index{display:inline-flex;align-items:center;gap:8px;color:var(--ink)}
.ph-index i{width:22px;height:1px;background:var(--line-3)}
.ph-index .icon{width:14px;height:14px}
.lead{max-width:540px;margin-top:22px;font-size:1.1rem;color:var(--ink-3)}
.ph-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.ph-art{display:grid;justify-items:center}
.row-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin:clamp(56px,7vw,90px) 0 22px}
.row-head h2{font-size:clamp(1.6rem,2.6vw,2.3rem);letter-spacing:-.045em;line-height:1}
.row-head>.mono{color:var(--mute)}
.filter-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px}
.count-label{flex-shrink:0;color:var(--mute)}
.empty{display:grid;justify-items:center;gap:10px;padding:clamp(40px,6vw,70px) 24px;border-radius:28px;text-align:center;box-shadow:inset 0 0 0 1px var(--line);background:repeating-linear-gradient(135deg,transparent 0 12px,rgba(12,12,13,.018) 12px 13px)}
.empty-mark{display:grid;place-items:center;width:52px;height:52px;margin-bottom:8px;border-radius:17px;background:var(--dark-bg);color:#fff;box-shadow:var(--dark-shadow)}
.empty h3{font-size:22px;letter-spacing:-.035em}
.empty p{max-width:420px;color:var(--mute)}
.empty .btn{margin-top:12px}

/* Today */
.onboard{display:grid;grid-template-columns:1.35fr auto 1fr;align-items:center;gap:30px;padding:clamp(24px,3.4vw,40px);border-radius:32px;background:var(--card-bg);box-shadow:var(--card-shadow)}
.onboard-form{gap:0}
.onboard-form>label{color:var(--ink-3)}
.url-field{display:flex;align-items:center;gap:10px;height:64px;margin-top:10px;padding:0 7px 0 20px;border-radius:999px}
.url-field>.icon{color:var(--ink-3)}
.onboard-form p{margin-top:12px;font-size:13.5px;color:var(--mute)}
.onboard-or{display:grid;justify-items:center;align-self:stretch;grid-template-rows:1fr auto 1fr;gap:10px}
.onboard-or::before,.onboard-or::after{content:"";width:1px;background:var(--line-2)}
.onboard-or span{font-family:var(--serif);font-style:italic;font-size:22px;color:var(--faint)}
.onboard-alt{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:20px;border-radius:22px;background:#fff;box-shadow:0 0 0 1px var(--line),0 8px 20px -14px rgba(0,0,0,.2);transition:box-shadow .3s}
.onboard-alt:hover{box-shadow:0 0 0 1px var(--line-2),0 16px 30px -18px rgba(0,0,0,.3)}
.onboard-alt strong{display:block;font-weight:500}
.onboard-alt small{font-size:13px;color:var(--mute)}
.onboard-steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:18px 0 0;padding:0}
.onboard-steps li{display:grid;gap:6px;padding:22px;border-radius:24px;box-shadow:inset 0 0 0 1px var(--line)}
.onboard-steps .mono{color:var(--mute)}
.onboard-steps strong{font-size:19px;letter-spacing:-.025em}
.onboard-steps small{font-size:13.5px;color:var(--mute)}
.today-grid{display:grid;grid-template-columns:1.45fr 1fr;gap:18px}
.direction{--sheen:rgba(255,255,255,.07);position:relative;display:flex;flex-direction:column;min-height:440px;padding:34px;border-radius:32px;overflow:hidden;background:var(--dark-bg);color:#fff;box-shadow:var(--dark-shadow);transform:perspective(1400px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .9s var(--ease)}
.orbit{position:absolute;right:-3%;bottom:-5%;z-index:-1;width:64%;max-width:430px;pointer-events:none}
.orbit-ring{fill:none;stroke:rgba(255,255,255,.1);stroke-dasharray:2 5}
.orbit-path{fill:none;stroke:rgba(255,255,255,.55);stroke-width:1.2;stroke-dasharray:1}
.is-entering .orbit-path,.tz-orbit .orbit-path{animation:draw 1.6s var(--ease) .5s backwards}
.orbit-node circle{fill:rgba(255,255,255,.3)}
.orbit-node.lit circle{fill:#fff}
.orbit-node .halo{fill:none!important;stroke:rgba(255,255,255,.35);transform-box:fill-box;transform-origin:center;animation:halo 3s var(--ease) infinite}
@keyframes halo{from{transform:scale(.5);opacity:1}to{transform:scale(1.8);opacity:0}}
.orbit-node text{fill:rgba(255,255,255,.4);font:500 9px var(--mono)}
.orbit-node.lit text{fill:#fff}
.is-entering .orbit-node{animation:fade-in .6s var(--ease) backwards;animation-delay:calc(var(--i)*.1s + .8s)}
.dir-top{display:flex;align-items:center;justify-content:space-between}
.dir-top .eyebrow,.dir-top .mono{color:var(--fog-2)}
.dir-name{margin-top:auto;padding-top:60px;font-family:var(--serif);font-style:italic;font-size:24px;color:var(--fog)}
.direction h2{max-width:560px;margin-top:8px;font-size:clamp(2rem,3.5vw,3.1rem);letter-spacing:-.048em;line-height:.98}
.direction>p{max-width:470px;margin-top:16px;font-size:15px;color:var(--fog)}
.dir-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:28px;padding-top:20px;border-top:1px solid var(--nline);font-size:14px;color:var(--fog)}
.dir-foot>span{display:flex;align-items:center;gap:8px}
.dir-foot .icon{width:16px;height:16px}
.count{display:grid;place-items:center;min-width:38px;height:38px;padding:0 10px;border-radius:13px;background:var(--dark-bg);color:#fff;font-size:15px!important;box-shadow:var(--dark-shadow)}
.rows{display:grid;gap:3px;margin-top:18px}
.row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;width:100%;padding:11px;border-radius:17px;transition:background .25s}
.row:hover{background:rgba(12,12,13,.045)}
.row strong{display:block;font-size:15px;font-weight:500;letter-spacing:-.012em}
.row small{display:block;font-size:13px;color:var(--mute)}
.row small.mono{font-size:10.5px}
.quiet{display:flex;align-items:center;gap:14px;padding:14px;border-radius:17px;background:rgba(12,12,13,.035)}
.quiet strong{display:block;font-weight:500}
.quiet small{display:block;font-size:13px;color:var(--mute)}
.quiet-check{display:grid;place-items:center;width:40px;height:40px;flex-shrink:0;border-radius:50%;background:var(--ink);color:#fff}
.quiet-check .icon{width:18px;height:18px}
.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-radius:28px;overflow:hidden;background:var(--card-bg);box-shadow:var(--card-shadow)}
.metrics.three{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:18px}
.metric{display:grid;align-content:start;gap:12px;padding:24px 26px}
.metric+.metric{border-left:1px solid var(--line)}
.metric-label{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:var(--mute)}
.metric-label .icon{width:15px;height:15px}
.metric strong{font-size:clamp(2.2rem,3.4vw,3.1rem);font-weight:600;letter-spacing:-.055em;line-height:1;font-variant-numeric:tabular-nums}
.metric strong small{font-size:.38em;font-weight:500;letter-spacing:0;color:var(--mute)}
.metric>small{font-size:12px;color:var(--mute)}
.spark{width:120px;height:34px;overflow:visible}
.spark-line{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;stroke-dasharray:1}
.spark-area{fill:rgba(12,12,13,.05)}
.spark circle{fill:var(--ink)}
.is-entering .spark-line{animation:draw 1.6s var(--ease) .6s backwards}
.dots{display:flex;flex-wrap:wrap;align-items:center;gap:5px;min-height:34px}
.dots i{width:10px;height:10px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line-3)}
.dots i.on{background:var(--ink);box-shadow:none}
.cap{display:block;height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.cap i{display:block;width:var(--w);height:100%;border-radius:inherit;background:var(--ink)}
.today-bottom{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}
.timeline{position:relative;list-style:none;margin-top:18px;padding:0}
.timeline::before{content:"";position:absolute;left:5px;top:12px;bottom:12px;width:1px;background:var(--line-2);transform-origin:top}
.is-entering .timeline::before{animation:grow-y 1.2s var(--ease) .3s backwards}
@keyframes grow-y{from{transform:scaleY(0)}}
.timeline li{position:relative;display:grid;grid-template-columns:auto 1fr;gap:16px;padding:10px 0}
.tl-dot{position:relative;z-index:1;width:11px;height:11px;margin-top:6px;border-radius:50%;background:var(--card);box-shadow:inset 0 0 0 2px var(--ink)}
.timeline li:first-child .tl-dot{background:var(--ink)}
.timeline strong{display:block;font-size:15px;font-weight:500}
.timeline p{font-size:13.5px;color:var(--ink-3)}
.timeline small{display:block;margin-top:4px;color:var(--mute)}

/* Strategy */
.identity{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:22px}
.monogram{display:grid;place-items:center;width:74px;height:74px;border-radius:23px;background:var(--dark-bg);color:#fff;font-family:var(--serif);font-style:italic;font-size:42px;box-shadow:var(--dark-shadow)}
.id-text h2{font-size:24px}
.id-text p{margin-top:4px;font-size:15px;color:var(--ink-3)}
.status{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 13px;border-radius:999px;font-size:13px;font-weight:500;white-space:nowrap;color:var(--ink-3);box-shadow:inset 0 0 0 1px var(--line-2)}
.status.ok{background:var(--ink);color:#fff;box-shadow:none}
.status .icon{width:14px;height:14px;stroke-width:2.4}
.thesis{display:grid;grid-template-columns:auto 1fr;gap:26px;margin-top:clamp(44px,6vw,70px)}
.thesis-mark{font-family:var(--serif);font-style:italic;font-size:clamp(7rem,12vw,11rem);line-height:.72;color:var(--ink)}
.thesis p{max-width:900px;margin-top:16px;font-size:clamp(1.35rem,2.4vw,2.05rem);font-weight:500;letter-spacing:-.035em;line-height:1.25}
.mix{display:grid;grid-template-columns:1.25fr 1fr 1fr;grid-auto-rows:minmax(230px,auto);gap:14px}
.mix-card{display:flex;flex-direction:column;gap:10px;padding:24px;border-radius:26px;background:var(--card-bg);box-shadow:var(--card-shadow);transition:transform .6s var(--ease),box-shadow .4s}
.mix-card:hover,.campaign:hover,.opp:hover,.asset:hover{transform:translateY(-3px);box-shadow:var(--card-shadow-hover)}
.mc-top{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.mc-top .badge{margin-left:auto}
.mc-n{color:var(--mute)}
.mix-card h3{font-size:21px;letter-spacing:-.03em;line-height:1.1}
.mix-card p{font-size:14px;color:var(--ink-3)}
.mc-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:14px;border-top:1px solid var(--line);font-size:13px;color:var(--mute)}
.mix-card.lead{--sheen:rgba(255,255,255,.08);grid-row:span 2;background:var(--dark-bg);color:#fff;box-shadow:var(--dark-shadow)}
.mix-card.lead:hover{box-shadow:var(--dark-shadow),0 40px 60px -30px rgba(0,0,0,.5)}
.mix-card.lead .ico-tile{background:rgba(255,255,255,.1);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.mix-card.lead .badge{background:#fff;color:var(--ink);box-shadow:none}
.mix-card.lead .mc-n{color:var(--fog-2)}
.mix-card.lead h3{margin-top:auto;font-size:clamp(2rem,3vw,2.7rem);letter-spacing:-.048em;line-height:1}
.mix-card.lead p{font-size:15px;color:var(--fog)}
.mix-card.lead .mc-foot{margin-top:18px;border-color:var(--nline);color:var(--fog)}
.campaigns{display:grid;gap:10px}
.campaign{display:grid;grid-template-columns:auto minmax(0,1fr);grid-auto-flow:column;grid-auto-columns:auto;align-items:center;gap:14px;padding:14px 20px 14px 14px;border-radius:22px;background:var(--card-bg);box-shadow:var(--card-shadow);transition:transform .6s var(--ease),box-shadow .4s}
.cmp-text strong{display:block;font-size:16px;font-weight:500;letter-spacing:-.015em}
.cmp-text small{font-size:13.5px;color:var(--mute)}
.cmp-status{display:flex;align-items:center;gap:12px}
.cmp-track{display:flex;gap:4px}
.cmp-track i{width:18px;height:4px;border-radius:2px;background:var(--line-2)}
.cmp-track i.on{background:var(--ink)}
.cmp-status .badge{text-transform:capitalize}
.memory{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.memory>.muted{grid-column:1/-1}
.memo{position:relative;display:flex;flex-direction:column;min-height:160px;padding:26px 26px 22px;border-radius:24px;background:#fff;box-shadow:0 0 0 1px var(--line),0 10px 24px -18px rgba(0,0,0,.2)}
.memo-q{height:22px;font-family:var(--serif);font-style:italic;font-size:52px;line-height:.6;color:var(--faint)}
.memo p{margin-top:10px;font-family:var(--serif);font-style:italic;font-size:21px;line-height:1.3;letter-spacing:-.01em}
.memo .icon-btn{position:absolute;top:12px;right:12px;opacity:0;transition:opacity .25s,background .25s}
.memo:hover .icon-btn,.memo .icon-btn:focus-visible{opacity:1}
.sources{margin-top:clamp(44px,6vw,70px);border-radius:22px;background:#fff;box-shadow:0 0 0 1px var(--line)}
.sources summary{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;list-style:none;cursor:pointer;font-weight:500}
.sources summary::-webkit-details-marker{display:none}
.sources summary>span{display:flex;align-items:center;gap:10px}
.sources summary .mono{color:var(--mute)}
.sources summary>.icon{transition:transform .5s var(--spring)}
.sources[open] summary>.icon{transform:rotate(180deg)}
.sources-body{display:grid;grid-template-rows:1fr}
.sources[open] .sources-body{animation:accordion .6s var(--ease)}
@keyframes accordion{from{grid-template-rows:0fr;opacity:0}}
.sources-body>div{overflow:hidden}
.sources a{display:grid;grid-template-columns:1fr auto;gap:4px 12px;padding:14px 22px;border-top:1px solid var(--line);transition:background .2s}
.sources a:hover{background:rgba(12,12,13,.03)}
.sources a .icon{width:16px;height:16px;color:var(--mute)}
.sources a p{grid-column:1/-1;font-size:13.5px;color:var(--ink-3)}

/* Radar */
.radar-wrap{display:grid;justify-items:center;gap:16px;width:100%}
.radar{--sweep:7s;position:relative;isolation:isolate;width:min(380px,100%);aspect-ratio:1;border-radius:50%;color:#fff;background:radial-gradient(circle,#1f1f23 0%,#0c0c0d 72%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),inset 0 0 70px rgba(0,0,0,.85),0 0 0 9px rgba(255,255,255,.55),0 0 0 10px var(--line),0 40px 70px -30px rgba(0,0,0,.55)}
.device .radar{box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),inset 0 0 70px rgba(0,0,0,.85),0 0 0 9px rgba(255,255,255,.03),0 0 0 10px var(--nline)}
.radar svg{position:absolute;inset:0;width:100%;height:100%}
.radar-lines{fill:none;stroke:rgba(255,255,255,.1);stroke-width:.25}
.radar-core{fill:#fff}
.radar-sweep{position:absolute;inset:0;z-index:1;border-radius:50%;pointer-events:none;background:conic-gradient(from 0deg,rgba(255,255,255,0) 0deg,rgba(255,255,255,0) 285deg,rgba(255,255,255,.14) 352deg,rgba(255,255,255,.5) 359.4deg,rgba(255,255,255,0) 360deg);animation:sweep var(--sweep) linear infinite}
@keyframes sweep{to{transform:rotate(1turn)}}
.radar.is-scanning{--sweep:1.4s}
.radar-label{position:absolute;z-index:2;transform:translate(-50%,-50%);font:500 9px var(--mono);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;color:rgba(255,255,255,.36)}
.blip{position:absolute;z-index:3;display:grid;place-items:center;width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:50%}
.blip>span{position:relative;width:8px;height:8px;border-radius:50%;box-shadow:inset 0 0 0 1.6px rgba(255,255,255,.9);animation:hit-dot var(--sweep) linear infinite;animation-delay:calc(var(--sweep) * var(--a) / 360);transition:scale .3s var(--spring)}
.blip.saved>span{background:#fff;box-shadow:0 0 10px rgba(255,255,255,.5)}
.blip>span::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid #fff;opacity:0;animation:hit-ring var(--sweep) linear infinite;animation-delay:inherit}
@keyframes hit-dot{0%{transform:scale(1.7)}14%,100%{transform:scale(1)}}
@keyframes hit-ring{0%{opacity:.9;transform:scale(.6)}22%{opacity:0;transform:scale(2.6)}100%{opacity:0}}
button.blip:hover>span,button.blip:focus-visible>span{scale:1.5}
button.blip::before{content:attr(aria-label);position:absolute;left:50%;bottom:calc(100% + 4px);max-width:220px;padding:6px 10px;border-radius:10px;background:#fff;color:var(--ink);font:500 12px/1.3 var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;opacity:0;transform:translate(-50%,4px);transition:opacity .2s,transform .3s var(--ease);box-shadow:0 10px 24px -10px rgba(0,0,0,.6)}
button.blip:hover::before,button.blip:focus-visible::before{opacity:1;transform:translate(-50%,0)}
.radar-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;font-size:12.5px;color:var(--mute)}
.radar-legend span{display:inline-flex;align-items:center;gap:7px}
.radar-legend i{width:9px;height:9px;border-radius:50%}
.lg-new{box-shadow:inset 0 0 0 1.6px var(--ink)}
.lg-saved{background:var(--ink)}
.search-bar{display:flex;align-items:center;gap:12px;height:70px;margin-bottom:22px;padding:0 9px 0 24px;border-radius:999px}
.search-bar>.icon{color:var(--ink-3)}
.search-bar .btn{--h:52px}
/* Research: one compact row per lead in a single card; the radar smaller beside the title. */
.find-list{border-radius:22px;background:var(--card);box-shadow:var(--card-shadow);overflow:hidden}
.lead-row{display:flex;align-items:center;gap:6px;padding-right:12px;box-shadow:inset 0 1px 0 var(--line)}.lead-row:first-child{box-shadow:none}
.lead-open{flex:1;min-width:0;display:flex;align-items:center;gap:14px;padding:9px 6px 9px 18px;min-height:0;line-height:1.3;text-align:left;border-radius:0;transition:background .2s}.lead-row:hover{background:var(--paper-hi)}
.lead-ico{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;flex:none;background:#fff;box-shadow:0 0 0 1px var(--line)}.lead-ico .icon,.lead-ico svg{width:16px;height:16px}
.lead-text{flex:1;min-width:0;display:grid;gap:2px}.lead-text strong{font-weight:500;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lead-text small{color:var(--mute);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lead-meta{display:flex;align-items:center;gap:10px;flex:none}.lead-ch{font-size:12.5px;color:var(--mute)}
.radar-wrap.compact{max-width:300px;margin-left:auto}
/* Content: one row per piece with a small preview, in one card. */
.content-list{border-radius:22px;background:var(--card);box-shadow:var(--card-shadow);overflow:hidden}
.content-row{display:flex;align-items:center;gap:14px;width:100%;padding:10px 18px;text-align:left;box-shadow:inset 0 1px 0 var(--line);transition:background .2s}.content-row:first-child{box-shadow:none}.content-row:hover{background:var(--paper-hi)}
.content-row>.i-swap{flex:none;color:var(--mute)}
.ct-thumb{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;flex:none;overflow:hidden;background:#fff;box-shadow:0 0 0 1px var(--line)}.ct-thumb .icon,.ct-thumb svg{width:17px;height:17px}
.ct-thumb.img img{width:100%;height:100%;object-fit:cover}.ct-thumb.art{background:linear-gradient(160deg,#e9e9e6,#cfcfcb)}.ct-thumb.art em{font:italic 18px/1 var(--serif);color:var(--ink)}
.ct-text{flex:1;min-width:0;display:grid;gap:2px}.ct-text strong{font-weight:500;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ct-text small{color:var(--mute);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lead-filters-end{display:flex;align-items:center;gap:14px;flex-shrink:0}
.lead-ch-pick select{height:40px;padding:0 38px 0 16px;border-radius:999px;border:0;background-color:var(--paper-hi);box-shadow:inset 0 0 0 1px var(--line-2);font-size:14px;cursor:pointer;max-width:200px}
@media (max-width:760px){.content-row{padding:10px 14px;gap:12px}.content-row>.i-swap{display:none}.ct-text strong{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.lead-meta .lead-ch{display:none}.lead-open{padding-left:14px;gap:12px}.radar-wrap.compact{max-width:220px;margin:0 auto}}
.radar-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
.opp{display:flex;flex-direction:column;gap:10px;padding:24px;border-radius:26px;background:var(--card-bg);box-shadow:var(--card-shadow);transition:transform .6s var(--ease),box-shadow .4s}
.opp-top{display:flex;align-items:center;justify-content:space-between;margin:-6px -8px 6px 0}
.chan{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 12px 0 10px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px var(--line);font-size:12.5px;font-weight:500}
.chan .icon{width:15px;height:15px}
.opp h2{font-size:21px;letter-spacing:-.03em;line-height:1.15}
.opp>p{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;font-size:14.5px;color:var(--ink-3)}
.reason{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:14px;background:rgba(12,12,13,.04);font-size:13.5px;color:var(--ink-2)}
.reason .icon{width:16px;height:16px;margin-top:2px}
.opp-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:14px;border-top:1px solid var(--line)}
.opp-foot .mono{color:var(--mute)}
.heart{position:relative;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;color:var(--ink-3);transition:transform .45s var(--spring-pop),background .25s,color .25s}
.heart:hover{background:rgba(12,12,13,.06);color:var(--ink)}
.heart:active{transform:scale(.84)}
.heart.saved{color:var(--ink)}
.heart.saved svg{fill:currentColor}
.heart>i{position:absolute;inset:6px;border-radius:50%;pointer-events:none;border:1.5px solid var(--ink);opacity:0}
.heart>i::before{content:"";position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px;border-radius:50%;background:var(--ink);box-shadow:0 -15px 0 var(--ink),13px -7px 0 var(--ink),13px 7px 0 var(--ink),0 15px 0 var(--ink),-13px 7px 0 var(--ink),-13px -7px 0 var(--ink);opacity:0}
.heart.burst svg{animation:heart-pop .6s var(--spring-pop)}
.heart.burst>i{animation:burst-ring .55s var(--ease) forwards}
.heart.burst>i::before{animation:burst-dots .6s var(--ease) forwards}
@keyframes heart-pop{0%{transform:scale(.5)}100%{transform:scale(1)}}
@keyframes burst-ring{0%{opacity:.9;transform:scale(.3)}100%{opacity:0;transform:scale(1.5)}}
@keyframes burst-dots{0%{opacity:1;transform:scale(.4)}100%{opacity:0;transform:scale(1.25)}}
.add-source{margin-top:24px}

/* Studio */
.studio-banner{--sheen:rgba(255,255,255,.07);display:grid;grid-template-columns:1fr 1.1fr;align-items:center;gap:30px;margin-bottom:clamp(40px,5vw,64px);padding:clamp(28px,4vw,48px);border-radius:32px;background:radial-gradient(100% 120% at 0% 0%,#28282c,#0c0c0d 60%);color:#fff;box-shadow:var(--dark-shadow)}
.sb-copy .eyebrow{color:var(--fog-2)}
.sb-copy h2{margin-top:14px;font-size:clamp(1.9rem,3.3vw,2.9rem);letter-spacing:-.048em;line-height:.98}
.formats{display:grid;gap:10px;perspective:1000px}
.format{--sheen:rgba(255,255,255,.1);display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:14px 18px 14px 14px;border-radius:19px;background:rgba(255,255,255,.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),inset 0 0 0 1px rgba(255,255,255,.07);color:#fff;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:background .3s,transform .7s var(--ease)}
.format:hover{background:rgba(255,255,255,.1)}
.fmt-ico{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:linear-gradient(180deg,#fff,#e7e7e4);color:var(--ink);box-shadow:inset 0 1px 0 #fff}
.format strong{display:block;font-size:15.5px;font-weight:500}
.format small{font-size:13px;color:var(--fog)}
.assets{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.asset{display:flex;flex-direction:column;padding:10px;border-radius:26px;background:var(--card-bg);box-shadow:var(--card-shadow);transition:transform .6s var(--ease),box-shadow .4s}
.ap{position:relative;display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;width:100%;height:236px;padding:18px;border-radius:18px;overflow:hidden;text-align:left;background:#fff;box-shadow:0 0 0 1px var(--line)}
.ap:not(.ap-image)::after{content:"";position:absolute;inset:auto 0 0;height:56px;background:linear-gradient(rgba(255,255,255,0),#fff);pointer-events:none}
.ap p{font-size:14px;line-height:1.5;color:var(--ink-2);white-space:pre-line}
.ap-author{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.ap-author strong{display:block;font-size:13.5px;line-height:1.2}
.ap-author small{font-size:12px;color:var(--mute)}
.ap-author>.icon{width:16px;height:16px;margin-left:auto;color:var(--ink-3)}
.ap-av{display:grid;place-items:center;width:32px;height:32px;flex-shrink:0;border-radius:50%;background:var(--dark-bg);color:#fff;font-size:13px;font-weight:600}
.ap-email{background:repeating-linear-gradient(#fff 0 26px,rgba(12,12,13,.05) 26px 27px)}
.ap-kicker{display:inline-flex;align-items:center;gap:6px;margin-bottom:10px;font-size:12px;font-weight:500;color:var(--mute)}
.ap-kicker .icon{width:14px;height:14px}
.ap-subject{display:block;margin-bottom:6px;font-size:15px;letter-spacing:-.015em}
.ap-article{padding-left:30px;background:linear-gradient(90deg,transparent 18px,rgba(12,12,13,.1) 18px 19px,transparent 19px),#fff}
.ap-image{padding:0;background:var(--night)}
.ap-image img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.asset:hover .ap-image img,.asset:hover .type-art{transform:scale(1.04)}
.type-art{display:flex;flex-direction:column;justify-content:space-between;height:100%;padding:18px;background:radial-gradient(120% 90% at 100% 0%,#f6f6f3,#d4d4cf);color:var(--ink);transition:transform 1s var(--ease)}
.type-art span{display:flex;align-items:center;justify-content:space-between;font:500 9.5px var(--mono);letter-spacing:.08em}
.type-art span .icon{width:14px;height:14px}
.type-art strong{font-size:32px;font-weight:600;letter-spacing:-.055em;line-height:.95}
.image-preview .type-art strong{font-size:48px}
.asset-info{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 6px 6px 10px}
.asset-info h3{font-size:15.5px;letter-spacing:-.02em}
.asset-info span{font-size:12.5px;color:var(--mute)}
.st{display:inline-flex;align-items:center;gap:5px;text-transform:capitalize}
.st::before{content:"";width:7px;height:7px;border-radius:50%;box-shadow:inset 0 0 0 1.4px currentColor}
.st-approved,.st-published,.st-queued{color:var(--ink)}
.st-approved::before,.st-published::before{background:currentColor}
.schedule{padding:8px}
.sched{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;padding:14px;border-radius:18px}
.sched+.sched{border-top:1px solid var(--line)}
.sched-date{display:grid;justify-items:center;align-content:center;width:54px;height:58px;border-radius:15px;background:var(--dark-bg);color:#fff;line-height:1;box-shadow:var(--dark-shadow)}
.sched-date strong{font-size:21px}
.sched-date small{margin-top:3px;color:var(--fog);font-size:9.5px}
.sched-text strong{display:block;font-weight:500}
.sched-text small{font-size:13px;color:var(--mute)}
.sched-text p{margin-top:6px;font-size:13px;color:var(--ink-3)}

/* Results */
.results-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:18px;margin-top:18px}
.bars{position:relative;display:grid;grid-template-columns:repeat(7,1fr);gap:10px;height:270px;margin-top:22px;padding-top:22px}
.bars-grid{position:absolute;inset:22px 0 30px;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none}
.bars-grid i{height:1px;background:var(--line)}
.bar{position:relative;z-index:1;display:grid;grid-template-rows:auto 1fr auto;justify-items:center;gap:8px}
.bar-val{color:var(--mute);opacity:0;transform:translateY(4px);transition:opacity .3s,transform .4s var(--ease)}
.bar:hover .bar-val,.bar.today .bar-val{opacity:1;transform:none}
.bar-track{display:flex;align-items:flex-end;width:100%;max-width:48px;height:100%;border-radius:14px;background:rgba(12,12,13,.035)}
.bar-track i{display:block;width:100%;height:max(var(--h),6px);border-radius:14px;background:linear-gradient(180deg,#d9d9d5,#c4c4bf);box-shadow:inset 0 1px 0 rgba(255,255,255,.7);transform-origin:bottom;transition:transform 1.2s var(--spring) calc(var(--i)*70ms + .25s),background .3s}
.bar.today .bar-track i{background:linear-gradient(180deg,#3b3b3f,#0c0c0d);box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.bar:hover .bar-track i{background:linear-gradient(180deg,#8d8d92,#56565b)}
:is(.is-entering,.is-swapping) .chart-card:not(.in) .bar-track i{transform:scaleY(0)}
.bar small{font-size:12px;color:var(--mute)}
.learning{--sheen:rgba(255,255,255,.07);display:flex;flex-direction:column;align-items:flex-start;padding:34px;border-radius:28px;background:var(--dark-bg);color:#fff;box-shadow:var(--dark-shadow)}
.learning .eyebrow{color:var(--fog-2)}
.learning h2{margin:14px 0;font-size:clamp(1.9rem,3vw,2.6rem);letter-spacing:-.048em;line-height:.98}
.learning p{margin-bottom:28px;color:var(--fog)}
.learning .btn{margin-top:auto}
.table-wrap{padding:6px;overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14.5px}
th{padding:14px 16px;border-bottom:1px solid var(--line);text-align:left;font:500 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
td{padding:16px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
tr:last-child td{border-bottom:0}
td strong{display:block;font-weight:500}
td small{display:block;margin-top:2px;font-size:12.5px;color:var(--mute)}
tbody tr{transition:background .2s}
tbody tr:hover{background:rgba(12,12,13,.03)}

/* Settings */
.connections{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.conn{display:flex;flex-direction:column;gap:10px}
.conn-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.conn-glyph,.conn-hero{display:grid;place-items:center;width:52px;height:52px;border-radius:17px;background:var(--dark-bg);color:#fff;box-shadow:var(--dark-shadow)}
.conn-glyph .icon{width:22px;height:22px}
.conn-state{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:500;color:var(--mute)}
.conn-state i{width:8px;height:8px;border-radius:50%;box-shadow:inset 0 0 0 1.5px currentColor}
.conn.on .conn-state{color:var(--ink)}
.conn.on .conn-state i{background:var(--ink);color:var(--ink);animation:live 2.4s infinite}
.conn h2{font-size:22px}
.conn>p{font-size:14.5px;color:var(--ink-3)}
.conn .btn{align-self:flex-start;margin-top:auto}
.conn .field-note+.btn,.conn>p+.btn{margin-top:14px}
.context{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.context p{margin-top:10px;font-size:15px}
.rules{display:grid;gap:22px}
.rule-list{display:grid;border-radius:20px;background:#fff;box-shadow:0 0 0 1px var(--line)}
label.rule{position:relative;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 20px;cursor:pointer;transition:background .2s}
label.rule:hover{background:rgba(12,12,13,.02)}
.rule+.rule{border-top:1px solid var(--line)}
.rule-text strong{display:block;font-size:15.5px;font-weight:500;color:var(--ink)}
.rule-text small{display:block;margin-top:2px;font-size:13.5px;font-weight:400;color:var(--mute)}
.budget{--sheen:rgba(255,255,255,.07);display:grid;grid-template-columns:1fr auto;align-items:end;gap:26px 30px;padding:clamp(28px,4vw,46px);border-radius:32px;background:var(--dark-bg);color:#fff;box-shadow:var(--dark-shadow)}
.budget .eyebrow{color:var(--fog-2)}
.budget-amount{margin:16px 0 14px;font-size:clamp(3rem,6.4vw,5.4rem);font-weight:600;letter-spacing:-.06em;line-height:1;font-variant-numeric:tabular-nums}
.budget-amount .of{font-size:.34em;font-weight:500;letter-spacing:-.02em;color:var(--fog)}
.budget p{max-width:520px;color:var(--fog)}
.gauge{grid-column:1/-1}
.gauge-ticks{display:flex;align-items:flex-end;justify-content:space-between;height:40px}
.gauge-ticks i{width:3px;height:20px;border-radius:2px;background:rgba(255,255,255,.14);transition:background .35s calc(var(--i)*22ms + .3s)}
.gauge-ticks i:nth-child(5n+1){height:34px}
.gauge-ticks i.on{background:#fff}
:is(.is-entering,.is-swapping) .budget:not(.in) .gauge-ticks i.on{background:rgba(255,255,255,.14)}
.gauge-scale{display:flex;justify-content:space-between;margin-top:10px;color:var(--fog-2)}

/* ════════════ DIALOG ════════════ */
dialog#modal{width:min(560px,calc(100vw - 32px));max-height:min(88vh,920px);padding:40px 40px 34px;border:0;border-radius:32px;overflow:auto;overscroll-behavior:contain;color:var(--ink);background:linear-gradient(180deg,rgba(252,252,250,.92),rgba(243,243,240,.9));-webkit-backdrop-filter:blur(30px) saturate(1.6);backdrop-filter:blur(30px) saturate(1.6);box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(255,255,255,.6),0 0 0 1px rgba(0,0,0,.07),0 50px 120px -40px rgba(0,0,0,.5);transform-origin:var(--ox,50%) var(--oy,50%);scrollbar-width:thin}
dialog#modal.wide{width:min(760px,calc(100vw - 32px))}
dialog#modal::backdrop{background:rgba(12,12,13,.3);-webkit-backdrop-filter:blur(8px) saturate(.8);backdrop-filter:blur(8px) saturate(.8)}
dialog#modal.opening{animation:dlg-in .6s var(--ease)}
dialog#modal.opening::backdrop{animation:fade-in .6s var(--ease)}
dialog#modal.closing{animation:dlg-out .2s var(--ease-in) forwards}
dialog#modal.closing::backdrop{animation:fade-out .2s ease forwards}
@keyframes dlg-in{from{opacity:0;transform:scale(.9) translateY(8px);filter:blur(10px)}}
@keyframes dlg-out{to{opacity:0;transform:scale(.96) translateY(6px);filter:blur(4px)}}
.sheet-grip{display:none}
.modal-close{position:absolute;top:18px;right:18px;z-index:3}
.modal-body>*{animation:rise .65s var(--ease) backwards}
.modal-body>:nth-child(2){animation-delay:.05s}.modal-body>:nth-child(3){animation-delay:.1s}.modal-body>:nth-child(4){animation-delay:.14s}.modal-body>:nth-child(n+5){animation-delay:.18s}
.modal-body form>*{animation:rise .6s var(--ease) backwards;animation-delay:.12s}
.modal-body form>:nth-child(2){animation-delay:.16s}.modal-body form>:nth-child(3){animation-delay:.2s}.modal-body form>:nth-child(4){animation-delay:.24s}.modal-body form>:nth-child(n+5){animation-delay:.28s}
.modal-head{margin-bottom:26px;padding-right:36px}
.modal-head .eyebrow{margin-bottom:14px}
#modal-title{font-size:clamp(1.9rem,4.2vw,2.55rem);letter-spacing:-.048em;line-height:1}
.modal-description{margin-top:14px;font-size:15px;color:var(--ink-3)}
.modal-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;margin-top:4px}
.modal-switch{margin-top:22px;text-align:center;font-size:14px;color:var(--mute)}
.modal-body>.field-note{margin-top:14px;text-align:center}
.reset-demo{display:flex;margin:18px auto 0}
.angle{margin-bottom:18px;padding:22px;border-radius:20px;background:var(--dark-bg);color:#fff;box-shadow:var(--dark-shadow)}
.angle .eyebrow{color:var(--fog-2)}
.angle p{margin-top:8px;font-family:var(--serif);font-style:italic;font-size:25px;line-height:1.22}
.playbook{list-style:none;display:grid;margin:0 0 18px;padding:0}
.playbook li{display:grid;grid-template-columns:34px 1fr;gap:10px;padding:13px 0;border-bottom:1px solid var(--line);font-size:15px;animation:rise .6s var(--ease) backwards;animation-delay:calc(var(--i)*60ms + .2s)}
.playbook .mono{padding-top:4px;color:var(--mute)}
.meta-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px}
.meta-pair span{display:grid;gap:5px;padding:14px 16px;border-radius:15px;background:rgba(12,12,13,.045);font-size:14px;font-weight:500}
.meta-pair small{color:var(--mute)}
.source-link{display:flex;align-items:center;gap:10px;margin:16px 0 10px;padding:14px 16px;border-radius:15px;background:#fff;box-shadow:0 0 0 1px var(--line);font-weight:500;transition:box-shadow .25s}
/* The lead window (owner, 26 Oct 2026): one per kind of lead, built around what to do next. A person reads like a
   contact card (who, why them, the opening line, where things are, one main action); a conversation like a reply to
   write; a place like a pitch to prepare. The rare tools sit under More. */
.lw{display:grid;gap:18px}
.lw>*{animation:lw-in .55s var(--ease) both}
.lw>:nth-child(2){animation-delay:.04s}.lw>:nth-child(3){animation-delay:.08s}.lw>:nth-child(4){animation-delay:.12s}.lw>:nth-child(5){animation-delay:.16s}.lw>:nth-child(6){animation-delay:.2s}.lw>:nth-child(7){animation-delay:.24s}
@keyframes lw-in{from{opacity:0;transform:translateY(8px)}}
.lw-head{display:flex;align-items:flex-start;gap:16px;padding-right:36px}
.lw-av{flex:none;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:var(--dark-bg);color:#fff;font-size:24px;font-weight:600;letter-spacing:-.02em;box-shadow:var(--dark-shadow)}
.lw-mark{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:#fff;box-shadow:0 0 0 1px var(--line),0 10px 22px -16px rgba(0,0,0,.4)}
.lw-mark svg{width:22px;height:22px}
.lw-head h2{margin:6px 0 4px;font-size:clamp(26px,4vw,32px);font-weight:600;letter-spacing:-.035em;line-height:1.04;text-wrap:balance}
.lw-head p{margin:0;font-size:14.5px;line-height:1.45;color:var(--ink-3)}
:is(.lw-thread,.lw-place) .lw-head h2{font-size:clamp(22px,3vw,26px);letter-spacing:-.03em;line-height:1.12}
.lw-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:-4px}
.lw-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--line-2);font-size:12.5px;font-weight:500;color:var(--ink-2);white-space:nowrap}
.lw-chip .icon{width:12px;height:12px;stroke-width:2.3}
.lw-chip.ok{background:var(--ink);color:#fff;box-shadow:none}
.lw-chip.link{transition:box-shadow .25s,transform .35s var(--spring)}
.lw-chip.link:hover{box-shadow:inset 0 0 0 1px var(--ink);transform:translateY(-1px)}
.lw-why,.lw-line,.lw-where{display:grid;gap:8px}
.lw-why p{display:flex;align-items:flex-start;gap:10px;margin:0;font-size:15px;line-height:1.5;color:var(--ink)}
.lw-why p .icon{flex:none;width:16px;height:16px;margin-top:3px}
.lw-why small{display:block;margin-top:4px;font-size:13px;color:var(--mute)}
.lw-line blockquote{margin:0;padding:2px 0 2px 16px;border-left:2px solid var(--ink);font-family:var(--serif);font-size:19px;line-height:1.4;letter-spacing:-.01em;color:var(--ink)}
.lw-quote{margin:0;padding:14px 16px 14px 18px;border-radius:16px;background:#fff;box-shadow:0 0 0 1px var(--line);font-family:var(--serif);font-size:16.5px;line-height:1.5;color:var(--ink-2)}
.lw-mail summary,.lw-more summary{display:inline-flex;align-items:center;gap:6px;cursor:pointer;list-style:none;font-size:13.5px;font-weight:600;color:var(--ink-2)}
.lw-mail summary::-webkit-details-marker,.lw-more summary::-webkit-details-marker{display:none}
.lw-mail summary .icon,.lw-more summary .icon{width:13px;height:13px;transition:transform .35s var(--spring)}
.lw-mail[open] summary .icon,.lw-more[open] summary .icon{transform:rotate(90deg)}
.lw-mail-body{display:grid;gap:8px;margin-top:10px;padding:14px 16px;border-radius:14px;background:#fff;box-shadow:0 0 0 1px var(--line);font-size:14px;line-height:1.55;color:var(--ink-2);animation:lw-in .4s var(--ease) both}
.lw-mail-body p{margin:0}
/* Where things are: five steps, the done ones filled in turn, the current one pulsing softly */
.lw-steps{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin:2px 0 0;padding:0}
.lw-steps li{position:relative;display:grid;justify-items:center;align-content:start;gap:5px;text-align:center;font-size:12px;font-weight:500;color:var(--mute)}
.lw-steps li::before{content:"";position:absolute;top:6px;right:50%;width:100%;height:1.5px;background:var(--line-2)}
.lw-steps li:first-child::before{display:none}
.lw-steps li.done::before{background:var(--ink);animation:lw-line .45s var(--ease) calc(var(--i)*.14s + .2s) both;transform-origin:left}
.lw-steps i{position:relative;z-index:1;width:13px;height:13px;border-radius:50%;background:var(--paper-hi);box-shadow:inset 0 0 0 1.5px var(--line-2)}
.lw-steps li.done{color:var(--ink)}
.lw-steps li.done i{background:var(--ink);box-shadow:0 0 0 3px var(--paper-hi);animation:wk-flip .45s var(--spring-pop) calc(var(--i)*.14s + .25s) both}
.lw-steps li.now i{animation:wk-flip .45s var(--spring-pop) calc(var(--i)*.14s + .25s) both,lw-now 2.2s ease-out calc(var(--i)*.14s + .8s) infinite}
.lw-steps small{font:500 10px var(--mono);letter-spacing:.03em;color:var(--mute)}
@keyframes lw-line{from{transform:scaleX(0)}}
@keyframes lw-now{0%{box-shadow:0 0 0 3px var(--paper-hi),0 0 0 3px rgba(12,12,13,.3)}75%,100%{box-shadow:0 0 0 3px var(--paper-hi),0 0 0 10px rgba(12,12,13,0)}}
.lw-status{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:12px 14px;border-radius:14px;background:rgba(12,12,13,.04)}
.lw-reply{display:flex;align-items:flex-start;gap:9px;flex-basis:100%;margin:0 0 4px;font-size:14.5px;line-height:1.45;color:var(--ink)}.lw-reply .icon{flex:none;width:15px;height:15px;margin-top:3px}
.lw-acts{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.lw-save .icon{width:15px;height:15px}
.lw-save.on{background:var(--ink);color:#fff;box-shadow:none}
.lw-more{padding-top:14px;border-top:1px solid var(--line)}
.lw-more-body{display:grid;justify-items:start;gap:10px;margin-top:12px;animation:lw-in .4s var(--ease) both}
.lw-more-body .text-btn{display:inline-flex;align-items:center;gap:7px}
.lw-more-body .text-btn small{margin-left:4px;font-weight:400;color:var(--mute)}
.lw-read{display:grid;gap:6px;max-width:100%}
.lw-read p{margin:0;font-size:13.5px;line-height:1.55;color:var(--ink-3)}
.lw-demo{margin-top:14px}
/* A person in the Research list shows as a person */
.lead-ico.lead-av{border-radius:50%;background:var(--dark-bg);color:#fff;font-size:13px;font-weight:600;box-shadow:none}
@media (max-width:560px){.lw-head{gap:12px}.lw-av{width:48px;height:48px;font-size:20px}.lw-steps li{font-size:10.5px}.lw-line blockquote{font-size:17px}}
@media (prefers-reduced-motion:reduce){.lw>*,.lw-steps li::before,.lw-steps i,.lw-mail-body,.lw-more-body{animation:none!important}}
.source-link span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.source-link:hover{box-shadow:0 0 0 1px var(--ink)}
.source-link .icon{width:17px;height:17px}
.image-preview{max-height:360px;aspect-ratio:1;border-radius:20px;overflow:hidden;box-shadow:0 0 0 1px var(--line)}
.image-preview img{width:100%;height:100%;object-fit:cover}
.editor-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:-4px;font-size:13px;color:var(--mute)}
.char-meter{display:inline-flex;align-items:center;gap:8px;font-variant-numeric:tabular-nums}
.char-meter svg{width:20px;height:20px;transform:rotate(-90deg)}
.char-meter circle{fill:none;stroke:var(--line-2);stroke-width:2.4}
.char-meter .cm-fill{stroke:var(--ink);stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--fill,0));stroke-linecap:round;transition:stroke-dashoffset .35s var(--ease)}
.char-meter.over{color:var(--ink);font-weight:600}
.char-meter.over svg{animation:shake .4s}
.i-flip{display:inline-grid;width:16px;height:16px}
.i-flip .icon{grid-area:1/1;width:16px;height:16px;transition:transform .45s var(--spring-pop),opacity .25s,filter .25s}
.i-flip .icon:last-child,.copied .i-flip .icon:first-child{opacity:0;transform:scale(.4);filter:blur(3px)}
.copied .i-flip .icon:last-child{opacity:1;transform:none;filter:none}
.asset-secondary{display:flex;flex-wrap:wrap;gap:20px;margin-top:4px;padding-top:16px;border-top:1px solid var(--line)}
.scheduled-preview{margin-bottom:18px;padding:18px;border-radius:20px;background:#fff;box-shadow:0 0 0 1px var(--line)}
.scheduled-preview p{font-size:15px;white-space:pre-line}
.conn-hero{width:62px;height:62px;margin-bottom:22px;border-radius:20px}
.conn-hero .icon{width:26px;height:26px}
.progress-line:empty{display:none}
.progress-line{position:relative;padding:12px 14px 12px 44px;border-radius:14px;font-size:14px;font-weight:500;background-color:transparent}
.progress-line::before{content:"";position:absolute;left:14px;top:50%;width:18px;height:18px;margin-top:-9px;border-radius:50%;border:2px solid var(--line-2);border-top-color:var(--ink);animation:spin .8s linear infinite}
.progress-line::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:rgba(12,12,13,.045)}
.review-content{display:grid;gap:20px}
.review-content>.btn{justify-self:start}
.thinking{display:flex;align-items:center;gap:14px;font-size:15px;font-weight:500}
.skeleton{display:grid;gap:11px}
.skeleton i{height:12px;border-radius:6px;background:linear-gradient(90deg,var(--paper-lo) 0%,#fbfbf9 50%,var(--paper-lo) 100%) 0 0/200% 100%;animation:shimmer 1.5s linear infinite}
.skeleton i:nth-child(2){width:94%}.skeleton i:nth-child(3){width:97%}.skeleton i:nth-child(4){width:58%}
.streamed{display:grid;gap:14px;font-size:16px;line-height:1.62}
.stream-w{animation:stream .7s var(--ease) backwards;animation-delay:calc(var(--i)*16ms)}
@keyframes stream{from{opacity:0;filter:blur(6px)}}
/* Website scanner */
.scan{display:grid;gap:20px}
.scan-frame{border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px var(--line),0 16px 34px -24px rgba(0,0,0,.35)}
.scan-page{position:relative;display:grid;gap:14px;padding:20px;overflow:hidden}
.scan-line{position:absolute;inset:0 0 auto;height:72px;background:linear-gradient(180deg,rgba(12,12,13,0),rgba(12,12,13,.07));border-bottom:1.5px solid var(--ink);animation:scan-loop 2.4s var(--ease-io) infinite}
@keyframes scan-loop{0%{transform:translateY(-72px)}100%{transform:translateY(230px)}}
.scan-steps{list-style:none;display:grid;gap:3px;padding:0}
.scan-steps li{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:13px;font-size:14.5px;color:var(--faint);transition:color .4s,background .4s}
.scan-steps li.now{background:rgba(12,12,13,.045)}
.scan-steps li.done{color:var(--ink-2)}
.step-ico{position:relative;display:grid;place-items:center;width:22px;height:22px;flex-shrink:0;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line-2);transition:background .4s,box-shadow .4s}
.step-ico .spin{position:absolute;inset:0;border-radius:50%;border:1.5px solid transparent;border-top-color:var(--ink);opacity:0}
.scan-steps li.now .spin{opacity:1;animation:spin .8s linear infinite}
.step-ico .icon{width:13px;height:13px;stroke-width:2.6;stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .5s var(--ease) .1s}
.scan-steps li.done .step-ico{background:var(--ink);box-shadow:none;color:#fff}
.scan-steps li.done .icon{stroke-dashoffset:0}
/* Command palette */
dialog#modal.palette-modal{width:min(620px,calc(100vw - 32px));margin:12vh auto auto;padding:0}
.palette-modal .modal-close,.palette-modal .sheet-grip{display:none!important}
.palette-modal .modal-body>*{animation:none}
.palette-search{display:flex;align-items:center;gap:12px;height:64px;padding:0 20px;border-bottom:1px solid var(--line)}
.palette-search>.icon{color:var(--ink-3)}
.palette-search input{font-size:17px}
kbd{padding:4px 7px;border-radius:7px;font:500 11px var(--mono);color:var(--mute);box-shadow:inset 0 0 0 1px var(--line-2)}
.palette-list{max-height:min(420px,56vh);overflow:auto;padding:8px;scrollbar-width:thin}
.palette-item{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;width:100%;padding:7px 10px 7px 7px;border-radius:15px;transition:background .15s,color .15s}
.palette-item .ico-tile{width:34px;height:34px;border-radius:11px}
.palette-item .ico-tile .icon{width:16px;height:16px}
.palette-item.is-active{background:var(--dark-bg);color:#fff}
.palette-item.is-active .ico-tile{background:rgba(255,255,255,.12);color:#fff;box-shadow:none}
.palette-item.is-active .pi-kind{color:var(--fog)}
.pi-text{overflow:hidden;font-size:14.5px;font-weight:500;white-space:nowrap;text-overflow:ellipsis}
.pi-kind{color:var(--mute)}
.palette-empty{padding:30px;text-align:center;color:var(--mute)}
.palette-foot{display:flex;gap:18px;padding:12px 20px;border-top:1px solid var(--line);color:var(--mute)}

/* Toast */
#toast{inset:auto;margin:0;border:0;position:fixed;left:50%;bottom:28px;z-index:120;display:flex;align-items:center;gap:12px;max-width:min(520px,calc(100vw - 32px));padding:9px 20px 9px 9px;border-radius:999px;color:#fff;font-size:14px;font-weight:500;background:rgba(18,18,20,.84);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 0 0 1px rgba(0,0,0,.5),0 24px 50px -18px rgba(0,0,0,.6);opacity:0;pointer-events:none;overflow:hidden;transform:translate(-50%,26px) scale(.92);filter:blur(8px);transition:transform .6s var(--spring),opacity .35s,filter .45s var(--ease)}
#toast.visible{opacity:1;pointer-events:auto;transform:translate(-50%,0) scale(1);filter:none}
#toast.leaving{opacity:0;transform:translate(-50%,12px) scale(.97);filter:blur(5px);transition-duration:.4s}
.toast-ico{display:grid;place-items:center;width:30px;height:30px;flex-shrink:0;border-radius:50%;background:#fff;color:var(--ink)}
.toast-ico .icon{width:15px;height:15px;stroke-width:2.6;stroke-dasharray:30;stroke-dashoffset:30}
#toast.visible .toast-ico .icon{animation:toast-draw .5s var(--ease) .15s forwards}
@keyframes toast-draw{to{stroke-dashoffset:0}}
#toast.error .toast-ico{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55)}
.toast-bar{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.28);transform-origin:left;transform:scaleX(0)}
#toast.visible .toast-bar{animation:toast-bar 5s linear forwards}
@keyframes toast-bar{from{transform:scaleX(1)}to{transform:scaleX(0)}}

/* How did you find us? (public/found.js): a small pill in the corner of Home that grows into the question only when
   tapped. One glass surface: it arrives with a spring, its dot rings three times and rests, the tap grows it into the
   card (its size follows with a spring, the chips land one by one), the × folds it back, and the thanks seals it. */
.found{position:fixed;right:24px;bottom:24px;z-index:60;width:max-content;max-width:calc(100vw - 32px);border-radius:26px;overflow:hidden;color:var(--ink);transform-origin:100% 100%;
 background:linear-gradient(180deg,rgba(252,252,250,.95),rgba(244,244,241,.92));
 box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(255,255,255,.4),0 0 0 1px rgba(12,12,13,.06),0 2px 4px rgba(0,0,0,.04),0 24px 50px -24px rgba(0,0,0,.36),0 10px 22px -14px rgba(0,0,0,.18);
 opacity:0;transform:translateY(22px) scale(.94);filter:blur(8px);transition:opacity .45s var(--ease),transform .8s var(--spring),filter .5s var(--ease),box-shadow .35s var(--ease)}
.found.in{opacity:1;transform:none;filter:none}
.found.in:not(.open):hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(255,255,255,.4),0 0 0 1px rgba(12,12,13,.08),0 3px 6px rgba(0,0,0,.05),0 30px 56px -24px rgba(0,0,0,.42),0 12px 24px -14px rgba(0,0,0,.2)}
.found.out{opacity:0;transform:translateY(14px) scale(.97);filter:blur(6px);transition:opacity .35s var(--ease),transform .45s var(--ease),filter .35s var(--ease)}
.found.open{width:380px}
.found:has(.found-open:focus-visible){box-shadow:0 0 0 2px var(--ink),0 24px 50px -24px rgba(0,0,0,.36)}
.found-pill{display:flex;align-items:center;gap:2px;padding:5px 7px 5px 5px}
.found.open .found-pill{display:none}
.found-open{display:flex;align-items:center;gap:13px;min-width:0;padding:7px 8px 7px 14px;border-radius:21px;text-align:left;color:inherit}
.found-open:focus-visible{outline:0}
.found-dot{position:relative;width:8px;height:8px;flex-shrink:0;border-radius:50%;background:var(--ink)}
.found.in .found-dot::after{content:"";position:absolute;inset:-5px;border-radius:50%;box-shadow:0 0 0 1.5px rgba(12,12,13,.32);opacity:0;animation:found-ring 1.5s var(--ease) .9s 3}
.found-pill-text{display:grid;gap:1px;min-width:0}
.found-pill-text strong{font-size:14px;font-weight:600;letter-spacing:-.015em;line-height:1.3}
.found-pill-text small{font-size:12.5px;line-height:1.35;color:var(--mute)}
.found-x{width:32px;height:32px;flex-shrink:0;border-radius:50%;display:grid;place-items:center;color:var(--mute);transition:background .25s,color .25s,transform .45s var(--spring)}
.found-x:hover{background:rgba(12,12,13,.06);color:var(--ink);transform:rotate(90deg)}
.found-x .icon{width:16px;height:16px}
.found-card{display:none}
.found.open .found-card{display:block;animation:found-card-in .45s var(--ease) .1s backwards}
@keyframes found-card-in{from{opacity:0;transform:translateY(8px)}}
.found-body{padding:18px 20px 20px}
.found-top{display:flex;align-items:center;justify-content:space-between;margin:-2px -8px 0 0}
.found-eyebrow{display:inline-flex;align-items:center;gap:9px;font:500 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.found-eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ink)}
.found-title{margin:8px 0 6px;font-size:24px;font-weight:600;letter-spacing:-.035em;line-height:1.08}
.found-sub{margin:0 0 16px;font-size:14px;line-height:1.45;color:var(--ink-3);text-wrap:pretty}
.found-sub b{color:var(--ink);font-weight:600}
.found-chips{display:flex;flex-wrap:wrap;gap:7px}
.found-chip{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 13px 0 11px;border-radius:999px;font-size:13.5px;font-weight:500;color:var(--ink-2);background:linear-gradient(180deg,#fff,#f3f3f0);box-shadow:inset 0 1px 0 #fff,0 0 0 1px var(--line-2),0 1px 2px rgba(0,0,0,.05);transition:transform .45s var(--spring),box-shadow .3s,opacity .3s,color .3s}
.found.open .found-chip{animation:found-chip .6s var(--spring) backwards;animation-delay:calc(.16s + var(--i) * .035s)}
@keyframes found-chip{from{opacity:0;transform:translateY(8px) scale(.92)}}
.found-chip .icon{width:15px;height:15px;flex-shrink:0}
.found-chip:hover{transform:translateY(-1px);color:var(--ink);box-shadow:inset 0 1px 0 #fff,0 0 0 1px var(--line-3),0 6px 14px -8px rgba(0,0,0,.3)}
.found-chip:active{transform:scale(.95);transition-duration:.12s}
.found-chip[aria-pressed="true"]{color:#fff;background:linear-gradient(180deg,#3b3b3f 0%,#151517 48%,#050506 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 0 0 1px #000,0 8px 18px -8px rgba(0,0,0,.55)}
.found-chips.has-pick .found-chip:not([aria-pressed="true"]){opacity:.55}
.found-chips.has-pick .found-chip:not([aria-pressed="true"]):hover{opacity:1}
.found.open .found-chip.found-pop{animation:found-pop .5s var(--spring-pop)}
@keyframes found-pop{35%{transform:scale(1.08)}}
.found-more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--ease)}
.found-more-in{min-height:0;overflow:hidden;padding:0 8px 26px;margin:0 -8px -26px;opacity:0;transform:translateY(-6px);transition:opacity .3s var(--ease),transform .5s var(--ease)}
.found.picked .found-more{grid-template-rows:1fr}
.found.picked .found-more-in{opacity:1;transform:none;transition-delay:.12s}
.found-field{display:grid;gap:7px;margin-top:14px}
.found-field span{font-size:12.5px;font-weight:500;color:var(--ink-2)}
.found-field input{height:42px;padding:0 14px;border:0;border-radius:13px;font:inherit;font-size:14px;color:var(--ink);background:#fff;box-shadow:inset 0 0 0 1px var(--line-2),inset 0 1px 2px rgba(0,0,0,.04);transition:box-shadow .25s}
.found-field input::placeholder{color:var(--faint)}
.found-field input:focus-visible{outline:0;box-shadow:inset 0 0 0 1.5px var(--ink),0 0 0 4px rgba(12,12,13,.07)}
.found-where{display:none}
.found.other .found-where{display:grid}
.found-error{margin:10px 0 0;font-size:13px;font-weight:500;color:var(--ink)}
.found-error:empty{display:none}
.found-actions{display:flex;align-items:center;gap:18px;margin-top:16px}
.found-send{--h:40px;padding:0 24px;font-size:14px}
.found-done{display:none;padding:24px 22px 24px}
.found.done .found-body{display:none}
.found.done .found-done{display:grid;justify-items:start}
.found-seal{position:relative;width:44px;height:44px;margin-bottom:16px;border-radius:50%;display:grid;place-items:center;color:#fff;background:linear-gradient(180deg,#3b3b3f,#050506);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 0 0 1px #000,0 10px 22px -10px rgba(0,0,0,.6);animation:found-seal .7s var(--spring-pop) both}
.found-seal::after{content:"";position:absolute;inset:-7px;border-radius:50%;box-shadow:0 0 0 1px rgba(12,12,13,.2);animation:found-ring 1.2s var(--ease) .25s both}
.found-seal .icon{width:20px;height:20px;stroke-width:2.4;stroke-dasharray:30;stroke-dashoffset:30;animation:toast-draw .5s var(--ease) .32s forwards}
@keyframes found-seal{from{opacity:0;transform:scale(.4)}}
@keyframes found-ring{from{opacity:1;transform:scale(.7)}to{opacity:0;transform:scale(1.5)}}
.found-thanks{margin:0;font-size:22px;font-weight:600;letter-spacing:-.03em;line-height:1.15;text-wrap:balance;animation:found-rise .6s var(--ease) .15s both}
.found-note{margin:8px 0 0;font-size:14px;color:var(--ink-3);animation:found-rise .6s var(--ease) .26s both}
@keyframes found-rise{from{opacity:0;transform:translateY(8px)}}
@media (max-width:899px){
 .found{right:auto;left:50%;bottom:calc(92px + env(safe-area-inset-bottom));max-width:calc(100vw - 24px);translate:-50% 0;transform-origin:50% 100%;transition-property:opacity,transform,filter,box-shadow,bottom}
 .found.open{width:min(420px,calc(100vw - 24px))}
 /* The plan page has no tab bar to clear. */
 .found.in-room{bottom:calc(16px + env(safe-area-inset-bottom))}
 .found.typing{bottom:calc(var(--kb,0px) + 12px)}
}
@media (prefers-reduced-motion:reduce){
 .found,.found.in,.found.out,.found.in:not(.open):hover{transform:none;filter:none;transition:opacity .25s}
 :is(.found.in .found-dot::after,.found.open .found-card,.found.open .found-chip,.found-seal,.found-seal::after,.found-thanks,.found-note){animation:none}
 .found-seal .icon{animation:none;stroke-dashoffset:0}
 .found-more,.found-more-in{transition:none}
}
@media print{.found{display:none}}

/* The Strategist's compass (public/compass.js), in glass (owner, 3 Nov 2026, after Codex's “a quietly curious
   presence”): a clear puck with real thickness, its stacked layers showing the edge as it tilts; a light travelling
   round the rim; fine engraved marks; a steel needle floating inside, casting its shadow on the face; the puck hovering
   over a soft shadow. compass.js tilts and lifts it (greeting, considering, presenting, waiting) and turns the needle;
   while the week is read a glint sweeps the face and the marks come up one by one. */
.cmp{--thick:calc(var(--size) * .11);position:relative;display:inline-block;width:var(--size);height:var(--size);flex:none;border-radius:50%;perspective:calc(var(--size) * 4)}
.cmp-body{position:absolute;inset:0;border-radius:50%;transform-style:preserve-3d;transform:rotateX(28deg) rotateY(-12deg);will-change:transform}
.cmp-shadow{position:absolute;left:12%;right:12%;top:calc(100% + var(--size) * .03);height:calc(var(--size) * .17);border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,rgba(18,20,28,.3),rgba(18,20,28,.1) 60%,rgba(18,20,28,0));filter:blur(max(1px,calc(var(--size) * .028)))}
.cmp:not(.big) .cmp-shadow{display:none}
/* The glass's thickness: four layers below the top, each a little more shaded */
.cmp-slab i{position:absolute;inset:0;border-radius:50%;transform:translateZ(calc(var(--thick) * var(--z) * -.25));background:radial-gradient(circle,rgba(255,255,255,0) 70%,rgba(150,156,170,calc(.08 + var(--z) * .05)) 100%);box-shadow:inset 0 0 0 max(.7px,calc(var(--size) * .008)) rgba(255,255,255,calc(.95 - var(--z) * .15)),0 0 0 max(.5px,calc(var(--size) * .004)) rgba(70,76,92,calc(.1 + var(--z) * .06))}
/* The face, engraved, near the bottom of the glass */
.cmp-face{position:absolute;inset:0;overflow:hidden;border-radius:50%;transform:translateZ(calc(var(--thick) * -.72));background:radial-gradient(circle at 50% 42%,rgba(255,255,255,.34) 0,rgba(246,247,250,.16) 50%,rgba(176,182,196,.22) 74%,rgba(108,114,132,.42) 89%,rgba(255,255,255,.7) 95.5%,rgba(132,138,154,.5) 100%)}
.cmp-face svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.cmp-ticks line{stroke:#22242c;stroke-linecap:round}
.cmp-ticks .t1{stroke-width:.9;opacity:.16}
.cmp-ticks .t2{stroke-width:1.4;opacity:.3}
.cmp-ticks .t3{stroke-width:2.2;opacity:.62}
.cmp-chapter{fill:none;stroke:rgba(34,36,44,.1);stroke-width:.8}
.cmp-n{fill:#22242c;opacity:.7;font:600 15px var(--sans);letter-spacing:.02em}
.cmp-scan{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,rgba(255,255,255,.95),rgba(255,255,255,0) 16%,rgba(255,255,255,0) 84%,rgba(255,255,255,.5));opacity:0;transition:opacity .6s var(--ease);animation:cmp-scan 1.4s linear infinite}
@keyframes cmp-scan{to{transform:rotate(360deg)}}
/* The needle floats in the middle of the glass, its shadow on the face below */
.cmp-float{position:absolute;inset:0;transform:translateZ(calc(var(--thick) * -.32));transform-style:preserve-3d}
.cmp-float>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.cmp-needle{transform-origin:50% 50%;will-change:transform;filter:drop-shadow(calc(var(--size) * .012) calc(var(--size) * .032) calc(var(--size) * .014) rgba(20,22,30,.32))}
.cmp-pin{position:absolute;left:50%;top:50%;width:calc(var(--size) * .085);height:calc(var(--size) * .085);transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 36% 30%,#fff 0%,#e3e4e8 35%,#8e919a 100%);box-shadow:0 calc(var(--size) * .012) calc(var(--size) * .02) rgba(20,22,30,.35)}
/* The top of the glass: a soft highlight, the bright rim, and a light that travels round it */
.cmp-glass{position:absolute;inset:0;border-radius:50%;pointer-events:none;transform:translateZ(0);background:radial-gradient(ellipse 54% 30% at 34% 16%,rgba(255,255,255,.95),rgba(255,255,255,.3) 42%,rgba(255,255,255,0) 70%),radial-gradient(circle at 70% 26%,rgba(255,255,255,.9) 0,rgba(255,255,255,0) 4.5%),radial-gradient(ellipse 44% 14% at 60% 91%,rgba(255,255,255,.7),rgba(255,255,255,0) 72%),radial-gradient(circle,rgba(255,255,255,0) 72%,rgba(92,98,114,.2) 88%,rgba(255,255,255,0) 94%),linear-gradient(180deg,rgba(255,255,255,0) 55%,rgba(96,102,120,.1));box-shadow:inset 0 0 0 max(.8px,calc(var(--size) * .011)) rgba(255,255,255,.98),inset 0 calc(var(--size) * .02) calc(var(--size) * .035) rgba(255,255,255,.75),inset 0 calc(var(--size) * -.04) calc(var(--size) * .08) rgba(58,62,76,.2),0 0 0 max(.5px,calc(var(--size) * .004)) rgba(40,44,58,.22)}
.cmp-glass::after{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from var(--a,0deg),rgba(255,255,255,0) 0 14%,rgba(255,255,255,.98) 22%,rgba(255,255,255,0) 30% 62%,rgba(255,255,255,.7) 70%,rgba(255,255,255,0) 78%);-webkit-mask:radial-gradient(closest-side,transparent calc(100% - max(2px,var(--size) * .04)),#000 calc(100% - max(1px,var(--size) * .015)));mask:radial-gradient(closest-side,transparent calc(100% - max(2px,var(--size) * .04)),#000 calc(100% - max(1px,var(--size) * .015)));animation:metal-turn 6s linear infinite}
/* The seal: the same glass, a check engraved in steel */
.cmp-check{position:absolute;inset:22%;width:56%;height:56%}
.cmp-check path{fill:none;stroke:#1d1e24;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:20;stroke-dashoffset:20}
/* The listings leaving the compass for the channels */
.cmp-bead{position:fixed;z-index:90;width:13px;height:13px;margin:-6.5px 0 0 -6.5px;border-radius:50%;pointer-events:none;background:radial-gradient(circle at 34% 30%,#fff 0%,#d4d4d9 40%,#6e6e74 100%);box-shadow:0 0 0 .5px rgba(0,0,0,.3),0 3px 8px rgba(0,0,0,.35)}
@media (prefers-reduced-motion:reduce){.cmp-glass::after,.cmp-scan{animation:none}}

/* Your Strategist suggests (public/strategist.js): the Monday note on Home, between the goal and Needs you, after
   ElevenLabs' launch banners. What was reviewed (quiet), the move and one button, and the Strategist’s compass. The first opening
   plays the review of the week: the needle searches while each count is read and the ticks light up, then it settles
   and the words rise. Approving turns the needle to the channels and sends the three listings there as chrome beads. The reasons are in the sheet. */
.stg{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:200px minmax(0,1fr) 330px;align-items:center;min-height:286px;margin:0 0 30px;scroll-margin-top:96px;border-radius:28px;background:linear-gradient(180deg,#fdfdfc,#f6f6f4);box-shadow:inset 0 0 0 1px var(--line),0 1px 2px rgba(0,0,0,.03),0 24px 48px -34px rgba(0,0,0,.25)}
.stg::after{content:"";position:absolute;z-index:8;inset:0;background:linear-gradient(100deg,transparent 32%,rgba(255,255,255,.55) 45%,rgba(255,255,255,.85) 50%,rgba(255,255,255,.55) 55%,transparent 68%);transform:translateX(-115%);pointer-events:none}
/* Last week (before there is one, what it looked at): quiet grey, the numbers in ink. */
.stg-lw{padding:0 0 0 38px}
.stg-lw-h{margin:0 0 14px;font:600 11px/1.3 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--faint)}
.stg-list{display:grid;gap:13px;margin:0;padding:0;list-style:none;font-size:15px;line-height:1.3;color:#87878c}
.stg-list b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.stg-mid{position:relative;align-self:stretch;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:36px 8px;text-align:center}
/* The byline: who writes, and when. The Strategist's small compass, its name, the day; New while it is the first note. */
.stg-by{display:inline-flex;align-items:center;gap:10px;font-size:14.5px;line-height:1;letter-spacing:-.01em;white-space:nowrap}
.stg-by-cmp{display:inline-flex;flex:none}
.stg-by strong{font-weight:600;color:var(--ink)}
.stg-by-day{color:var(--mute)}
.stg-by-day::before{content:"";display:inline-block;width:3px;height:3px;margin:0 10px 0 0;border-radius:50%;background:var(--faint);vertical-align:middle}
.stg-title{margin:16px 0 10px;font-size:clamp(28px,2.6vw,36px);font-weight:600;letter-spacing:-.045em;line-height:1.04;text-wrap:balance}
.stg-w{display:inline-block}
.stg-sub{margin:0;font-size:16px;line-height:1.45;color:var(--ink-3);text-wrap:balance}
/* What is done and what is left, in one line under the why; last week's line shows here on a phone only. */
.stg-ready{display:inline-flex;align-items:center;gap:9px;margin:16px 0 0;font-size:14.5px;line-height:1.4;color:var(--mute);text-align:left}
.stg-ready strong{font-weight:600;color:var(--ink)}
.stg-ready>span:last-child{text-wrap:pretty}
.stg-ready .stg-tick{width:20px;height:20px}
.stg-ready .stg-tick .icon{width:11px;height:11px}
.stg-week{display:none;margin:14px 0 0;font-size:14px;line-height:1.45;color:var(--mute);text-wrap:balance}
.stg-week strong{font-weight:600;color:var(--ink-2)}
/* Last week streams in (after transitions.dev's “Streaming text”): word after word every 60 ms, each through opacity and
   a 1 px blur over 350 ms. In the column while the week is read, one line after another; in the sentence when the note
   resolves; on the samples page when a note comes into view. */
.stg{--stream-gap:60ms;--stream-fade:350ms}
@keyframes stg-stream{from{opacity:0;filter:blur(1px)}}
.stg-acts{display:flex;justify-content:center;align-items:center;gap:24px;margin-top:22px}
.stg-go{--h:48px;padding:0 24px}
.stg-whybtn{color:var(--ink-3)}
/* What it is reading, one line at a time in a small window: the line leaving rolls up and out as the next rolls up and
   in, in step and a full line apart, so two lines never share pixels (owner, 2 Nov 2026: the words “blend into each
   other awkwardly”); the window's edges are soft. */
.stg-think{display:none;position:absolute;left:0;right:0;top:50%;height:48px;margin:0;overflow:hidden;font-size:22px;font-weight:500;letter-spacing:-.025em;line-height:48px;color:var(--ink);-webkit-mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent)}
.stg-think span{position:absolute;left:0;right:0;top:0;opacity:0}
/* New, in Distrove's liquid metal (the plan page's buttons): a chrome rim that turns, a chrome body whose light slides,
   the pointer's highlight and the halo from motion.js (metalAll). */
.stg-new.metal{padding:1.5px;cursor:default;vertical-align:middle;box-shadow:0 0 0 .5px rgba(0,0,0,.35),0 5px 12px -5px rgba(0,0,0,.45)}
.stg-new.metal::before{inset:-4px;filter:blur(7px)}
.stg-new.metal>span{padding:5px 11px 5px;font:600 12px/1 var(--sans);letter-spacing:.01em;color:#141416;text-shadow:0 1px 0 rgba(255,255,255,.75);background:linear-gradient(100deg,#c4c4c8 0%,#fbfbfc 18%,#8f8f95 34%,#e6e6e9 50%,#a7a7ad 68%,#fdfdfd 84%,#bdbdc2 100%) 0 0/260% 100%;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 1px rgba(0,0,0,.22);animation:stg-chrome 5.5s ease-in-out infinite alternate}
@keyframes stg-chrome{to{background-position:100% 0}}
.stg.fresh .stg-new.metal{animation:stg-pop .7s var(--spring-pop) .5s backwards,metal-turn 7s linear infinite}
/* The compass, the way into the sheet, and what was drafted */
.stg-vis{position:relative;align-self:stretch;min-height:286px}
.stg-cmp{position:absolute;left:67px;top:45px;width:196px;height:196px;border-radius:50%;cursor:pointer}
.stg-cmp-go{position:absolute;z-index:6;left:172px;top:76px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--ink);background:#fff;box-shadow:0 0 0 1px rgba(12,12,13,.06),0 8px 20px -8px rgba(0,0,0,.35);transition:transform .5s var(--spring)}
.stg-cmp-go .icon{width:17px;height:17px}
.stg-cmp:hover .stg-cmp-go{transform:scale(1.12)}
.stg-x{position:absolute;z-index:7;right:14px;top:14px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:var(--ink-3);background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 0 0 1px var(--line);transition:background .2s,color .2s,transform .4s var(--spring)}
.stg-x:hover{color:var(--ink);background:#fff;transform:scale(1.06)}
.stg-x .icon{width:14px;height:14px}
/* The review of the week */
.stg.thinking .stg-copy{visibility:hidden}
.stg.thinking .stg-think{display:block;transform:translateY(-18px)}
.stg.thinking .stg-cmp-go{opacity:0}
.stg.thinking .cmp-scan{opacity:1}
.stg.thinking .cmp-ticks line{animation:cmp-lit .5s var(--ease) both;animation-delay:calc(.15s + var(--i) * 34ms)}
@keyframes cmp-lit{from{opacity:.1}}
.stg.thinking .stg-list .stg-sw{animation:stg-stream var(--stream-fade) cubic-bezier(.22,1,.36,1) both;animation-delay:calc(.4s + var(--i) * .62s + var(--v) * var(--stream-gap))}
/* .9 s a line, one every .62 s: a line's way out (69 to 100%) and the next one's way in (0 to 31%) take the same .28 s
   on the same curve, starting together. */
.stg.thinking .stg-think span{animation:stg-read .9s linear both;animation-delay:calc(.25s + var(--i) * .62s)}
.stg.thinking .stg-think span:last-child{animation-name:stg-read-last}
@keyframes stg-read{0%{opacity:0;transform:translateY(100%);filter:blur(3px);animation-timing-function:cubic-bezier(.65,0,.35,1)}31%,69%{opacity:1;transform:none;filter:blur(0);animation-timing-function:cubic-bezier(.65,0,.35,1)}100%{opacity:0;transform:translateY(-100%);filter:blur(3px)}}
@keyframes stg-read-last{0%{opacity:0;transform:translateY(100%);filter:blur(3px);animation-timing-function:cubic-bezier(.65,0,.35,1)}31%,100%{opacity:1;transform:none;filter:blur(0)}}
/* Waiting behind the introduction: the review has not started (removing held starts it from the top), and while the
   compass flies in from the introduction, the note's own is hidden until it lands. */
.stg.held :is(.stg-think span,.stg-think span:last-child,.stg-list .stg-sw,.cmp-ticks line){animation:none}
.stg.held .cmp-scan{opacity:0}
.stg.landing :is(.stg-cmp,.stg-done-seal) .cmp{visibility:hidden}
/* The note resolves */
.stg.fresh::after{animation:stg-sweep 1.5s var(--ease-io) both}
.stg.fresh .stg-title .stg-w{animation:stg-word .9s var(--ease) both;animation-delay:calc(.1s + var(--i) * 40ms)}
.stg.fresh .stg-sub{animation:stg-rise .7s var(--ease) .38s both}
.stg:is(.fresh,.stream) .stg-week .stg-sw,.stg.stream .stg-list .stg-sw{animation:stg-stream var(--stream-fade) cubic-bezier(.22,1,.36,1) both;animation-delay:calc(.12s + var(--w) * var(--stream-gap))}
.stg.fresh .stg-ready{animation:stg-rise .7s var(--ease) .46s both}
.stg.fresh .stg-acts{animation:stg-rise .7s var(--ease) .56s both}
.stg.fresh .stg-cmp-go{animation:stg-pop .6s var(--spring-pop) .55s both}
@keyframes stg-sweep{to{transform:translateX(115%)}}
@keyframes stg-word{from{opacity:0;transform:translateY(.45em);filter:blur(6px)}}
@keyframes stg-rise{from{opacity:0;transform:translateY(10px)}}
@keyframes stg-pop{from{opacity:0;transform:scale(.4)}}
@keyframes stg-sheen{from{transform:translateX(-120%)}to{transform:translateX(120%)}}
/* Approved */
.stg-done{display:none;grid-column:1/-1;align-items:center;gap:20px;padding:26px 30px}
.stg.done{min-height:0}
.stg.done>:not(.stg-done){display:none}
.stg.done .stg-done{display:flex}
.stg-done-seal{position:relative;flex:none;width:58px;height:58px}
.stg.done .stg-done-seal{animation:stg-pop .8s var(--spring-pop) both}
.stg.done .cmp-check path{animation:toast-draw .55s var(--ease) .35s forwards}
.stg-done-text{flex:1;min-width:0;text-align:left}
.stg-done .stg-title{margin:0 0 5px;font-size:clamp(21px,2.1vw,25px)}
.stg.done .stg-done .stg-w{animation:stg-word .8s var(--ease) both;animation-delay:calc(.05s + var(--i) * 34ms)}
.stg.done .stg-done .stg-sub{animation:stg-rise .6s var(--ease) .3s both}
.stg.done .stg-open{animation:stg-rise .6s var(--ease) .42s both}
.stg.leaving{pointer-events:none}
.stg.leaving>*{opacity:0;transition:opacity .3s var(--ease)}
/* The listings on their way to the channels, and the channel arriving there (or on the phone's Channels tab). */
.side-sub a.stg-arrive{animation:stg-arrive 1.9s var(--ease) both}
.side-sub a.stg-arrive .side-dot{animation:stg-dot .9s var(--spring-pop) .1s both}
@keyframes stg-arrive{0%{opacity:0;transform:translateX(-10px);background:rgba(12,12,13,.12)}22%{opacity:1;transform:none;background:rgba(12,12,13,.1)}100%{background:rgba(12,12,13,0)}}
@keyframes stg-dot{0%{transform:scale(0)}55%{transform:scale(2)}100%{transform:scale(1)}}
.ws-dock a.stg-land{animation:stg-land .7s var(--spring-pop)}
@keyframes stg-land{40%{transform:scale(1.18)}}
/* See why: the Strategist's week in three steps on a thin line. What it read (counts that roll), what it found (the
   reasons, the founder's words as a quote), what is ready (the listing, a tab per directory). */
.sw-head{display:flex;align-items:center;gap:16px}
.sw-cmp{display:inline-flex;flex:none}
.sw-by{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--mute)}
.sw-by strong{font-weight:600;color:var(--ink)}
.sw-by span::before{content:"";display:inline-block;width:3px;height:3px;margin:0 8px 0 0;border-radius:50%;background:var(--faint);vertical-align:middle}
.sw-title{margin:6px 0 0;font-size:26px;font-weight:600;letter-spacing:-.04em;line-height:1.08;text-wrap:balance}
.sw-steps{position:relative;display:grid;gap:28px;margin:28px 0 0;padding:0;list-style:none}
.sw-steps::before{content:"";position:absolute;left:13.5px;top:30px;bottom:40px;width:1px;background:linear-gradient(180deg,var(--line-3),var(--line) 85%,transparent)}
.sw-step{display:grid;grid-template-columns:28px minmax(0,1fr);gap:16px;animation:stg-rise .65s var(--ease) both;animation-delay:calc(.1s + var(--i) * .12s)}
.sw-num{position:relative;z-index:1;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:600;color:#fff;background:var(--ink);box-shadow:0 0 0 5px #f7f7f5,inset 0 1px 0 rgba(255,255,255,.2)}
.sw-body{min-width:0}
.sw-body h3{margin:4px 0 14px;font-size:15.5px;font-weight:600;letter-spacing:-.01em}
.sw-based{margin:16px 0 0;font-size:13px;line-height:1.45;color:var(--mute)}
.sw-note{margin:-4px 0 12px;font-size:14px;line-height:1.45;color:var(--ink-3)}
.sw-left{display:flex;align-items:center;gap:12px;margin:0;padding:13px 16px;border-radius:16px;font-size:15px;line-height:1.4;color:var(--ink-2);background:#fff;box-shadow:inset 0 0 0 1px var(--line),0 1px 2px rgba(0,0,0,.03)}
.sw-left-i{width:30px;height:30px;flex:none;border-radius:50%;display:grid;place-items:center;color:var(--ink);background:var(--paper-hi);box-shadow:inset 0 0 0 1px var(--line-2)}
.sw-left-i .icon{width:15px;height:15px}
.sw-finds{display:grid;gap:11px;margin:0;padding:0;list-style:none}
.sw-finds li{display:flex;align-items:flex-start;gap:12px;font-size:15px;line-height:1.45;color:var(--ink-2)}
.stg-tick{width:22px;height:22px;flex:none;border-radius:50%;display:grid;place-items:center;color:#fff;background:var(--ink)}
.stg-tick .icon{width:12px;height:12px;stroke-width:2.8}
.sw-quote{position:relative;margin:18px 0 0;padding:20px 22px 18px 58px;border-radius:18px;background:#fff;box-shadow:inset 0 0 0 1px var(--line),0 14px 28px -24px rgba(0,0,0,.3)}
.sw-qmark{position:absolute;left:18px;top:10px;font:italic 400 58px/1 var(--serif);color:var(--line-3)}
.sw-quote blockquote{margin:0;font:italic 400 20.5px/1.35 var(--serif);letter-spacing:-.01em;color:var(--ink);text-wrap:pretty}
.sw-quote figcaption{margin-top:8px;font-size:13px;color:var(--mute)}
.sw-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.sw-tab{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px 0 6px;border-radius:999px;font-size:13.5px;font-weight:500;color:var(--ink-2);background:#fff;box-shadow:inset 0 0 0 1px var(--line-2);transition:background .25s,color .25s,box-shadow .25s,transform .4s var(--spring)}
.sw-tab:hover{transform:translateY(-1px)}
.sw-tab.on{color:#fff;background:var(--ink);box-shadow:0 8px 16px -10px rgba(0,0,0,.55)}
.stg-m{width:24px;height:24px;flex:none;display:grid;place-items:center;border-radius:50%;color:var(--ink);background:#fff;box-shadow:inset 0 0 0 1px var(--line-2)}
.stg-m .icon{width:13px;height:13px}
.stg-m i{font-style:normal;font-size:11.5px;font-weight:700;line-height:1}
.sw-listing{padding:16px;border-radius:18px;background:#fff;box-shadow:inset 0 0 0 1px var(--line-2),0 18px 34px -26px rgba(0,0,0,.35)}
.sw-listing.swap{animation:sw-swap .45s var(--ease)}
@keyframes sw-swap{from{opacity:.35;transform:translateY(5px)}}
.sw-where{margin:0 0 14px;font-size:12.5px;line-height:1.4;color:var(--mute)}
.sw-where strong{font-weight:600;color:var(--ink)}
.stg-l-top{display:flex;align-items:center;gap:12px}
.stg-l-logo{width:44px;height:44px;flex:none;overflow:hidden;border-radius:12px;display:grid;place-items:center;font-size:19px;font-weight:600;color:#fff;background:var(--dark-bg);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 0 0 1px #000}
.stg-l-logo img{width:100%;height:100%;object-fit:cover}
.stg-l-top strong{display:block;font-size:15px;font-weight:600}
.stg-l-top small{display:block;margin-top:2px;font-size:13px;line-height:1.35;color:var(--ink-3)}
.stg-l-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.stg-l-tags span{padding:4px 9px;border-radius:999px;font-size:11.5px;font-weight:500;color:var(--ink-2);background:var(--paper-hi);box-shadow:inset 0 0 0 1px var(--line)}
.sw-then{margin:10px 0 0;font-size:13px;color:var(--mute)}
.sw-acts{margin-top:20px}
@media (max-width:560px){.sw-head{padding-right:30px}.sw-quote{padding-left:48px}.sw-qmark{left:12px}.sw-title{font-size:22px}}
@media (max-width:899px){
 .stg{grid-template-columns:minmax(0,1fr);border-radius:26px}
 .stg-lw{display:none}.stg-week{display:block}.stg-week+.stg-title{margin-top:10px}
 .stg-vis{order:-1;width:330px;min-height:286px;justify-self:center}
 .stg-mid{padding:0 22px 30px}
 .stg-title{margin-top:14px;font-size:27px}
 .stg-by{font-size:14px;gap:8px}.stg-by-day::before{margin-right:8px}.stg-wd{display:none}
 .stg-acts{flex-direction:column;gap:14px;width:100%}.stg-go{width:100%}
 .stg-think{top:46%}
 .stg-done{flex-direction:column;align-items:flex-start;gap:14px;padding:24px 22px}.stg-open{align-self:stretch}
}
@media (prefers-reduced-motion:reduce){
 .stg *,.stg::after,.cmp-ring,.cmp-ring::after,.cmp-scan,.side-sub a.stg-arrive,.side-sub a.stg-arrive .side-dot{animation:none!important;transition:none!important}
 .sw-step,.sw-listing.swap{animation:none!important}
 .cmp-check path{stroke-dashoffset:0}
}
@media print{.stg{display:none}}
/* Docked (owner, 3 Nov 2026): the note folded into a slim bar where it was, in the same material, the compass small on
   its left. Waiting: the move with its accent and Open; started: the channel and its progress; idle: when the next note
   comes. The whole bar opens; Not for us is in its menu. */
.stb{position:relative;display:flex;align-items:center;margin:0 0 30px;border-radius:22px;background:linear-gradient(180deg,#fdfdfc,#f6f6f4);box-shadow:inset 0 0 0 1px var(--line),0 1px 2px rgba(0,0,0,.03),0 18px 36px -30px rgba(0,0,0,.32)}
.stb-main{flex:1;min-width:0;display:flex;align-items:center;gap:15px;padding:14px 18px 14px 15px;border-radius:inherit;text-align:left;transition:background .3s var(--ease)}
.stb-main:not(:disabled):hover{background:rgba(255,255,255,.7)}
.stb-main:disabled{cursor:default}
.stb-cmp{display:inline-flex;flex:none;transition:transform .5s var(--spring)}
.stb-main:not(:disabled):hover .stb-cmp{transform:scale(1.06)}
.stb-text{flex:1;min-width:0;display:grid;gap:3px}
.stb-by{display:flex;align-items:center;font-size:12.5px;line-height:1.3;color:var(--mute);white-space:nowrap}
.stb-by strong{font-weight:600;color:var(--ink)}
.stb-by span::before{content:"";display:inline-block;width:3px;height:3px;margin:0 8px;border-radius:50%;background:var(--faint);vertical-align:middle}
.stb-line{overflow:hidden;font-size:16px;font-weight:600;letter-spacing:-.02em;line-height:1.3;color:var(--ink);white-space:nowrap;text-overflow:ellipsis}
.stb.idle .stb-line{font-weight:500;color:var(--ink-2)}
.stb-steps{display:flex;gap:4px;margin-top:5px}
.stb-steps i{width:22px;height:4px;border-radius:2px;background:var(--line-2)}
.stb-steps i.on{background:var(--ink)}
.stb-go{display:inline-flex;align-items:center;gap:7px;flex:none;font-size:14px;font-weight:500;color:var(--ink-2)}
.stb-go .icon{width:16px;height:16px;transition:transform .45s var(--spring)}
.stb-main:hover .stb-go .icon{transform:translate(2px,-2px)}
.stb-menu{flex:none;margin-right:10px}
.stb-menu .menu-pop{left:auto;right:0;bottom:auto;top:calc(100% + 8px);min-width:190px}
.stb.landing .stb-cmp .cmp{visibility:hidden}
.stb.morphing{overflow:hidden}
.stb.arriving :is(.stb-text,.stb-go,.stb-menu){animation:stg-rise .6s var(--ease) .18s both}
.stb.arriving .stb-steps i.on{animation:stg-pop .5s var(--spring-pop) both;animation-delay:calc(.5s + var(--n,0) * 90ms)}
@media (max-width:640px){.stb-go{display:none}.stb-main{padding:13px 12px 13px 13px;gap:12px}.stb-line{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:15px}}
@media (prefers-reduced-motion:reduce){.stb *,.stb{animation:none!important;transition:none!important}}
/* Write my note now, under the note on the owner's own account (real accounts, docs/SPEC-strategist.md) */
.stg-owner{display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;margin:-14px 0 30px 4px}
.stg-owner small{font-size:12px;color:var(--faint)}
/* The work in Why this?, when it is text (an email, an ad, a reply, a store page) */
.sw-text{margin:12px 0 0;font-size:14px;line-height:1.55;color:var(--ink-2);white-space:pre-line;text-wrap:pretty}
/* The samples page (demo, ?suggest=samples): each note with what it is above it */
.stg-gallery{margin:0 0 34px}
.stg-gallery-head{margin:10px 0 22px}
.stg-gallery-head h2{margin:8px 0 6px;font-size:30px;letter-spacing:-.04em;line-height:1.05}
.stg-gallery-head p{margin:0;max-width:620px;font-size:15px;line-height:1.5;color:var(--mute)}
.stg-sample{margin:0 0 30px}
.stg-sample figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:0 0 10px 6px;font-size:13.5px;color:var(--mute)}
.stg-sample figcaption strong{font-weight:600;color:var(--ink)}
.stg-sample figcaption b{font-weight:500;padding:2px 9px;border-radius:999px;color:var(--ink-2);background:rgba(12,12,13,.05);box-shadow:inset 0 0 0 1px var(--line)}
.stg-sample .stg{margin:0}

/* Meet your Strategist (public/strategist.js strategistIntro, after ElevenLabs' “What’s new” windows): once, the first
   time Home opens with a note. A dark stage plays the Strategist's Monday (the needle points at each thing it looks at,
   draws them in, finds its bearing and names the move, then the work is drafted) while the line below for each part
   lights up. See your first note flies the compass into the note (compass.js flyCompass). */
dialog#modal.stg-intro{width:min(500px,calc(100vw - 32px));padding:0;overflow:hidden auto}
.stg-intro .sheet-grip{display:none}
.stg-intro .modal-close{color:rgba(255,255,255,.72);background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.stg-intro .modal-close:hover{color:#fff;background:rgba(255,255,255,.14)}
.stg-intro .modal-close:focus-visible{outline-color:#fff}
.stg-intro .modal-body>.sti{animation:none}
.sti-stage{--cy:110px;position:relative;isolation:isolate;height:236px;overflow:hidden;color:#fff;background:radial-gradient(64% 84% at 50% 42%,#2a2a2f 0%,#131315 56%,#08080a 100%)}
.sti-stage::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.3;mix-blend-mode:overlay;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.sti-stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent)}
/* The instrument's field: three rings around the compass (the middle one turns), and a pulse when it draws the week in */
.sti-rings{position:absolute;inset:0;z-index:-1;pointer-events:none}
.sti-rings i{position:absolute;left:50%;top:var(--cy);width:var(--d);height:var(--d);margin:calc(var(--d) / -2) 0 0 calc(var(--d) / -2);border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.sti-rings i:nth-child(1){--d:176px}
.sti-rings i:nth-child(2){--d:292px;box-shadow:none;border:1px dashed rgba(255,255,255,.09);animation:cmp-scan 90s linear infinite}
.sti-rings i:nth-child(3){--d:424px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
.sti-rings::after{content:"";position:absolute;left:50%;top:var(--cy);width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;box-shadow:0 0 0 1px rgba(255,255,255,.42),0 0 26px rgba(255,255,255,.14);opacity:0}
.sti.s1 .sti-rings::after{animation:sti-pulse 1.5s var(--ease) .45s}
@keyframes sti-pulse{from{opacity:.9;transform:scale(.92)}to{opacity:0;transform:scale(3.4)}}
.sti-cmp{position:absolute;z-index:1;left:50%;top:var(--cy);width:112px;height:112px;margin:-56px 0 0 -56px}
.sti-cmp::before{content:"";position:absolute;inset:-62%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.13),rgba(255,255,255,.03) 60%,transparent);pointer-events:none}
.sti-cmp .cmp{display:block}
.sti-cmp .cmp-face{background:radial-gradient(circle at 50% 42%,rgba(255,255,255,.12) 0,rgba(255,255,255,.04) 55%,rgba(200,206,222,.12) 80%,rgba(255,255,255,.5) 95%,rgba(180,186,200,.3) 100%)}
.sti-cmp .cmp-slab i{background:radial-gradient(circle,rgba(255,255,255,0) 70%,rgba(220,226,240,calc(.05 + var(--z) * .04)) 100%)}
.sti-cmp .cmp-ticks line,.sti-cmp .cmp-n{stroke:#fff;fill:#fff}
.sti-cmp .cmp-needle path:nth-of-type(1){fill:#fff}.sti-cmp .cmp-needle path:nth-of-type(2){fill:#cfd1d8}.sti-cmp .cmp-needle path:nth-of-type(3){fill:#5a5c64}.sti-cmp .cmp-needle path:nth-of-type(4){fill:#3a3c43}
.sti-cmp .cmp-needle{filter:drop-shadow(0 calc(var(--size) * .03) calc(var(--size) * .02) rgba(0,0,0,.6))}
/* What it looks at: glass chips that light up as the needle reaches them, take a check, and are drawn into the compass */
.sti-src{position:absolute;z-index:2;display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 12px 0 9px;border-radius:999px;font-size:12.5px;font-weight:500;letter-spacing:-.005em;white-space:nowrap;color:rgba(255,255,255,.58);background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 10px 22px -12px rgba(0,0,0,.9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:color .35s,background .35s,box-shadow .35s,transform .55s var(--spring);animation:sti-in .8s var(--spring) backwards;animation-delay:calc(.32s + var(--i) * 90ms)}
.sti-src.tl{left:32px;top:calc(var(--cy) - 46px)}
.sti-src.tr{right:32px;top:calc(var(--cy) - 46px)}
.sti-src.br{right:46px;top:calc(var(--cy) + 16px)}
.sti-src.bl{left:46px;top:calc(var(--cy) + 16px)}
.sti-src-i{display:grid;width:14px;height:14px}
.sti-src-i .icon{grid-area:1/1;width:14px;height:14px;transition:opacity .3s var(--ease),transform .5s var(--spring-pop)}
.sti-src-i .icon+.icon{opacity:0;transform:scale(.3);stroke-width:2.6}
.sti-src.on{color:#fff;background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.36),0 0 28px -6px rgba(255,255,255,.4);transform:scale(1.06)}
.sti-src.read{color:rgba(255,255,255,.9);background:rgba(255,255,255,.09);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.sti-src.read .sti-src-i .icon:first-child{opacity:0;transform:scale(.3)}
.sti-src.read .sti-src-i .icon+.icon{opacity:1;transform:none}
.sti.s1 .sti-src{opacity:0;transform:translate(var(--tx,0px),var(--ty,0px)) scale(.2);transition:transform .8s cubic-bezier(.55,0,.2,1) calc(var(--i) * 70ms),opacity .5s var(--ease-in) calc(.3s + var(--i) * 70ms)}
@keyframes sti-in{from{opacity:0;transform:translateY(8px) scale(.86);filter:blur(5px)}}
/* The move, word by word, and the work it drafted, where the note on Home shows it */
.sti-move{position:absolute;z-index:2;left:24px;right:24px;top:calc(var(--cy) + 80px);margin:0;text-align:center;font-size:21px;font-weight:600;letter-spacing:-.035em;line-height:1.12;color:#fff;text-wrap:balance}
.sti-move .stg-w{opacity:0;transform:translateY(.45em);filter:blur(6px);transition:opacity .6s var(--ease),transform .9s var(--ease),filter .6s var(--ease);transition-delay:calc(var(--i) * 45ms)}
.sti.s2 .sti-move .stg-w{opacity:1;transform:none;filter:none}
.sti-chip{position:absolute;z-index:3;left:calc(50% - 90px);top:calc(var(--cy) + 30px);display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 13px 0 10px;border-radius:999px;font-size:12.5px;font-weight:500;white-space:nowrap;color:var(--ink);background:rgba(255,255,255,.95);box-shadow:0 0 0 1px rgba(0,0,0,.5),0 14px 28px -12px rgba(0,0,0,.9);opacity:0;transform:translateX(-12px) scale(.9)}
.sti-chip .icon{width:13px;height:13px;stroke-width:2.6}
.sti.s3 .sti-chip{opacity:1;transform:none;transition:opacity .4s var(--ease),transform .8s var(--spring)}
/* The kinds of work it writes, one after another, rolling through the chip like a counter's window */
.sti-work{display:grid;height:1.4em;overflow:hidden;line-height:1.4em}
.sti-work>span{grid-area:1/1;white-space:nowrap}
.sti-work>span+span{opacity:0}
.sti.s3 .sti-work>span{animation:sti-roll 8s var(--ease) infinite both;animation-delay:calc(var(--k) * 2s)}
@keyframes sti-roll{0%{opacity:0;transform:translateY(85%)}6%,22%{opacity:1;transform:none}28%,100%{opacity:0;transform:translateY(-85%)}}
.sti-stage .sti-new{position:absolute;left:22px;top:25px;animation:stg-pop .7s var(--spring-pop) .55s backwards,metal-turn 7s linear infinite}
/* What it does, one line per part; each lights up as the stage plays it */
.sti-body{padding:26px 34px 30px}
.sti-body>*{animation:rise .7s var(--ease) backwards}
.sti-body>:nth-child(1){animation-delay:.14s}.sti-body>:nth-child(2){animation-delay:.2s}.sti-body>:nth-child(3){animation-delay:.26s}.sti-body>:nth-child(4){animation-delay:.32s}
.sti #modal-title{font-size:31px;letter-spacing:-.045em;line-height:1.04}
.sti-lead{margin:10px 0 0;font-size:15.5px;line-height:1.5;color:var(--ink-3);text-wrap:pretty}
.sti-steps{display:grid;gap:16px;margin:20px 0 24px;padding:0;list-style:none}
.sti-steps li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:14px;align-items:center;font-size:14px;line-height:1.42;color:var(--mute);text-wrap:pretty}
.sti-steps strong{display:block;margin-bottom:2px;font-size:15px;font-weight:600;letter-spacing:-.012em;color:var(--ink)}
.sti-ico{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--ink-2);background:#fff;box-shadow:inset 0 0 0 1px var(--line-2),0 1px 2px rgba(0,0,0,.04);transition:color .5s var(--ease),background .5s var(--ease),box-shadow .5s var(--ease)}
.sti-ico .icon{width:18px;height:18px}
.sti.s0 .sti-steps li:nth-child(1) .sti-ico,.sti.s1 .sti-steps li:nth-child(2) .sti-ico,.sti.s3 .sti-steps li:nth-child(3) .sti-ico{color:#fff;background:linear-gradient(180deg,#3b3b3f,#0c0c0d);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 0 0 1px #000,0 10px 18px -10px rgba(0,0,0,.65);animation:sti-on .7s var(--spring-pop)}
@keyframes sti-on{35%{transform:scale(1.16)}}
.sti-go{--h:52px;width:100%;font-size:15.5px}
/* The copy that flies from the stage to the note: above any dialog (a manual popover), never in the way */
.cmp-fly{position:fixed;inset:auto;z-index:95;margin:0;padding:0;border:0;background:none;overflow:visible;pointer-events:none;will-change:transform}
@media (max-width:640px){
 dialog#modal.stg-intro{width:100vw;padding:0}
 .sti-stage{--cy:104px;height:232px}
 .sti-cmp{width:92px;height:92px;margin:-46px 0 0 -46px}
 .sti-cmp .cmp{--size:92px!important}
 .sti-src{height:28px;padding:0 10px 0 7px;gap:6px;font-size:11.5px}
 .sti-src.tl,.sti-src.bl{left:14px}.sti-src.tr,.sti-src.br{right:14px}
 .sti-src.tl,.sti-src.tr{top:calc(var(--cy) - 42px)}.sti-src.bl,.sti-src.br{top:calc(var(--cy) + 12px)}
 .sti-chip{left:calc(50% - 80px);top:calc(var(--cy) + 22px)}
 .sti-move{font-size:19px;top:calc(var(--cy) + 66px)}
 .sti-body{padding:24px 22px calc(22px + env(safe-area-inset-bottom))}
 .sti #modal-title{font-size:28px}
 .sti-steps{gap:14px;margin:20px 0 24px}
}
@media (prefers-reduced-motion:reduce){.sti *,.sti *::before,.sti *::after{animation:none!important;transition:none!important}}

/* ════════════ VIEW TRANSITIONS ════════════ */
.ws-main{view-transition-name:ws-page}
.ws-top{view-transition-name:ws-top}
.ws-dock{view-transition-name:ws-dock}
html:is([data-vt="portal"],[data-vt="fade"]) :is(.ws-main,.ws-top,.ws-dock){view-transition-name:none}
::view-transition-old(ws-top),::view-transition-old(ws-dock){display:none}
::view-transition-new(ws-top),::view-transition-new(ws-dock),::view-transition-group(ws-top),::view-transition-group(ws-dock),::view-transition-group(ws-page){animation:none}
html[data-vt="page"]::view-transition-old(root),html[data-vt="page"]::view-transition-new(root){animation:none}
::view-transition-old(ws-page),::view-transition-new(ws-page){mix-blend-mode:normal;height:auto}
html[data-dir="forward"]::view-transition-old(ws-page){animation:.34s var(--ease-in) both vt-out-left}
html[data-dir="forward"]::view-transition-new(ws-page){animation:.75s var(--ease) both vt-in-right}
html[data-dir="back"]::view-transition-old(ws-page){animation:.34s var(--ease-in) both vt-out-right}
html[data-dir="back"]::view-transition-new(ws-page){animation:.75s var(--ease) both vt-in-left}
@keyframes vt-out-left{to{opacity:0;transform:translateX(-50px);filter:blur(10px)}}
@keyframes vt-out-right{to{opacity:0;transform:translateX(50px);filter:blur(10px)}}
@keyframes vt-in-right{from{opacity:0;transform:translateX(70px);filter:blur(12px)}}
@keyframes vt-in-left{from{opacity:0;transform:translateX(-70px);filter:blur(12px)}}
html[data-vt="portal"]::view-transition-old(root){animation:.95s var(--ease-io) both vt-recede}
html[data-vt="portal"]::view-transition-new(root){animation:1.05s var(--ease) both vt-portal}
@keyframes vt-portal{from{clip-path:circle(0 at var(--vt-x,50%) var(--vt-y,50%))}to{clip-path:circle(150vmax at var(--vt-x,50%) var(--vt-y,50%))}}
@keyframes vt-recede{to{transform:scale(.93);filter:blur(8px) brightness(.85)}}
html[data-vt="fade"]::view-transition-old(root){animation:.4s var(--ease-in) both vt-fade-out}
html[data-vt="fade"]::view-transition-new(root){animation:.85s var(--ease) both vt-fade-in}
@keyframes vt-fade-out{to{opacity:0;transform:scale(.98);filter:blur(6px)}}
@keyframes vt-fade-in{from{opacity:0;transform:scale(1.02);filter:blur(10px)}}

/* ════════════ RESPONSIVE ════════════ */
@media (max-width:1280px){
 .ws-switch-text{display:none}
 .op-text{display:none}
 .op-chip{width:36px;padding:0;justify-content:center}
}
@media (max-width:1180px){
 .new-btn span{display:none}
 .btn.new-btn{width:38px;padding:0}
 .ws-tabs .tab{padding:0 14px}
 .hc-x,.hc-search{display:none}
 .hc-radar{left:2.5%;top:14%;width:220px}
 .hc-strategy{right:2.5%;width:236px}
 .hc-mail{left:4%}
 .hc-ad{display:none}
}
@media (max-width:1040px){
 .today-grid,.results-grid,.studio-banner{grid-template-columns:1fr}
 .mix{grid-template-columns:1fr 1fr}
 .mix-card.lead{grid-column:1/-1;grid-row:auto;min-height:300px}
 .onboard{grid-template-columns:1fr}
 .onboard-or{grid-template-rows:none;grid-template-columns:1fr auto 1fr;align-items:center}
 .onboard-or::before,.onboard-or::after{width:100%;height:1px}
 .hero-chips .hc-mail{display:none}
 /* The floating cards near the website box would cover it on narrower screens (found 9 Oct 2026). */
 .hc-mail{display:none}
 .hc-radar,.hc-strategy{width:200px}
}
@media (max-width:899px){
 .l-links,.l-actions>.text-btn{display:none}
 .l-burger{display:grid}
 .l-bar{padding-left:18px}
 .l-sheet{display:grid;position:absolute;left:var(--gutter);right:var(--gutter);top:84px;gap:18px;padding:22px;border-radius:28px;pointer-events:auto;opacity:0;visibility:hidden;transform:translateY(-10px) scale(.97);transform-origin:top right;transition:opacity .35s var(--ease),transform .6s var(--spring),visibility 0s .35s}
 .l-nav.menu-open .l-sheet{opacity:1;visibility:visible;transform:none;transition-delay:0s}
 .l-nav.menu-open .l-bar{max-width:var(--max);background:linear-gradient(180deg,rgba(255,255,255,.64),rgba(255,255,255,.3));-webkit-backdrop-filter:blur(20px) saturate(1.8)!important;backdrop-filter:blur(20px) saturate(1.8)!important}
 .l-sheet nav{display:grid}
 .l-sheet nav a{padding:10px 4px;font-size:28px;font-weight:600;letter-spacing:-.045em;border-bottom:1px solid var(--line);opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease),transform .6s var(--ease)}
 .l-nav.menu-open .l-sheet nav a{opacity:1;transform:none;transition-delay:calc(var(--i)*60ms + .08s)}
 .l-sheet-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
 .hero-chips{display:none}
 .hero{padding-top:120px}
 .section-head.split,.control,.how-grid{grid-template-columns:1fr}
 .how-stage-wrap{display:none}
 .how-step{min-height:0;padding:0 0 64px;opacity:1}
 .step-art{position:relative;display:block;height:400px;margin-top:30px;border-radius:28px;overflow:hidden;background:var(--paper-hi);box-shadow:inset 0 1px 0 #fff,0 0 0 1px var(--line)}
 .step-art .scene{position:absolute;inset:0}
 .step-art .scene-2{position:relative;inset:auto;padding:18px 14px 24px}
 .step-art .ch{gap:12px}.step-art .ch-board{height:172px}.step-art .ch-ad-head{padding:5px 6px;gap:4px}.step-art .ch-av{width:14px;height:14px;font-size:7.5px}.step-art .ch-ad-head b{font-size:9px}.step-art .ch-ad-head small{font-size:7px}.step-art .ch-ad-foot{padding:5px 6px 6px}.step-art .ch-ad-foot b{font-size:8.5px}.step-art .ch-ad-foot small{font-size:6.5px}.step-art .ch-cta{display:none}.step-art .ch-tag{top:-15px;font-size:8.5px;padding:3px 7px;right:-4px}.step-art .ch-stamp{left:5%;top:30%;font-size:6.5px;letter-spacing:.03em;padding:3px 5px}.step-art .ch-type{font-size:11px;padding:7px 8px}.step-art .ch-play{width:22px;height:22px;margin:-11px 0 0 -11px}
 .step-art .ch-gather{gap:12px;padding:9px 10px 9px 8px}.step-art .ch-radar{width:58px;height:58px}.step-art .ch-place{font-size:10.5px;padding:4px 8px 4px 7px}.step-art .ch-pick{padding:14px 15px}.step-art .ch-pick h4{font-size:20px}.step-art .ch-pick p{font-size:12.5px}
 .step-art .scene-3{padding:20px 18px}
 .step-art{height:auto;min-height:400px}
 .step-art .scene-3{position:relative;inset:auto}
 .step-art .wk-card{padding:9px 10px 9px 9px}.step-art .wk-body strong{white-space:normal}.step-art .wk-approve small{font-size:11px}
 .tz{grid-template-columns:1fr;grid-template-areas:"head" "vis" "cards"}
 .tz-cards{grid-template-columns:1fr}
 .plans{grid-template-columns:minmax(0,480px)}
 .foot-row{grid-template-columns:1fr auto;gap:18px}
 .foot-tag{display:none}
 /* Workspace: tabs move to a floating dock */
 .ws-tabs{display:none}
 .ws-top-inner{grid-template-columns:1fr auto}
 .hide-sm{display:none}
 .ws-dock.glass{background:linear-gradient(180deg,rgba(250,250,248,.86),rgba(238,238,235,.76))}
 .ws-dock{position:fixed;left:50%;bottom:calc(12px + env(safe-area-inset-bottom));z-index:45;display:flex;gap:2px;width:min(460px,calc(100vw - 24px));padding:6px;border-radius:28px;transform:translateX(-50%)}
 .ws-dock .tab{flex:1;display:grid;justify-items:center;gap:3px;padding:8px 0 7px;border-radius:22px;font-size:10.5px}
 .ws-dock .tab .icon{width:21px;height:21px}
 .ws-dock .ind{border-radius:22px}
 .ws-dock .tab-count{position:absolute;top:3px;right:calc(50% - 22px);min-width:16px;height:16px;font-size:9.5px}
 .ws-main{padding-bottom:120px}
 .ws-foot{flex-wrap:wrap;padding-bottom:120px}
 html[data-kind="workspace"] #toast{bottom:calc(96px + env(safe-area-inset-bottom))}
 .page-head.has-art{grid-template-columns:1fr}
 .ph-art .radar{width:min(300px,100%)}
 .metrics{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 .metric:nth-child(3){border-left:0}
 .metric:nth-child(n+3){border-top:1px solid var(--line)}
 .metrics.three .metric:nth-child(3){border-left:0}
 .today-bottom,.connections,.context{grid-template-columns:1fr}
 .identity{grid-template-columns:auto 1fr}
 .identity .status{justify-self:start}
 .identity .btn{justify-self:end}
 .filter-bar{flex-direction:column;align-items:stretch}
 .count-label{align-self:flex-end}
 .lead-filters-end{justify-content:space-between}
}
@media (max-width:640px){
 dialog#modal,dialog#modal.wide{width:100vw;max-width:100vw;max-height:92vh;margin:auto 0 0;padding:30px 20px calc(24px + env(safe-area-inset-bottom));border-radius:30px 30px 0 0;transform-origin:50% 100%}
 dialog#modal.opening{animation:sheet-in .6s var(--spring)}
 dialog#modal.closing{animation:sheet-out .25s var(--ease-in) forwards}
 @keyframes sheet-in{from{transform:translateY(100%)}}
 @keyframes sheet-out{to{transform:translateY(100%)}}
 .sheet-grip{display:block;width:40px;height:5px;margin:-16px auto 16px;border-radius:3px;background:var(--line-2)}
 .modal-close{top:14px;right:12px}
 dialog#modal.palette-modal{margin:auto 0 0;border-radius:30px 30px 0 0}
 .form-grid,.meta-pair{grid-template-columns:1fr}
 .modal-actions{justify-content:stretch}
 .modal-actions .btn{flex:1}
 .hero{min-height:max(640px,100svh);padding:110px var(--gutter) 110px}
 .hero-form{flex-wrap:wrap;height:auto;padding:8px;border-radius:30px}
 .hero-form>.icon{margin-left:12px}
 .hero-form input{height:48px;flex-basis:calc(100% - 50px)}
 .hero-form .btn{width:100%}
 .br-desk{display:none}
 .hero-foot>.mono{display:none}
 .hero-foot{justify-content:center}
 .l-cta{display:none}
 .channels-inner{grid-template-columns:1fr;gap:18px}
 .price{font-size:64px}
 .final-card{min-height:560px;align-items:end;border-radius:32px}
 .final-card::before{background:linear-gradient(0deg,var(--night) 38%,rgba(11,11,12,.6) 62%,rgba(11,11,12,0) 85%)}
 .iso-plane{left:30%;top:28%;grid-template-columns:repeat(4,160px)}
 .dark{border-radius:32px}
 .device{padding:8px;border-radius:24px}
 .device-top .chip-mono,.device-top .brand .wordmark{display:none}
 .device-body{min-height:0;padding:20px;border-radius:18px}
 .tz-assets{height:220px}
 .ws-id .wordmark,.ws-div{display:none}
 .ws-actions{gap:0}
 .op-chip{margin-right:2px}
 .new-btn{margin-left:2px}
 .avatar-btn{margin-left:4px}
 .demo-banner{flex-wrap:wrap;border-radius:22px;padding:14px 14px 14px 18px}
 .demo-banner>span:nth-child(2){flex-basis:calc(100% - 30px)}
 .demo-banner .btn{width:100%}
 .direction{min-height:0;padding:26px;border-radius:28px}
 .dir-name{padding-top:36px}
 .orbit{width:78%;opacity:.7}
 .card{padding:22px;border-radius:24px}
 .mix{grid-template-columns:1fr}
 .campaign{grid-template-columns:auto 1fr;gap:12px 14px}
 .campaign .cmp-status{grid-column:2}
 .campaign>.i-swap{display:none}
 .search-bar{flex-wrap:wrap;height:auto;padding:8px;border-radius:30px}
 .search-bar>.icon{margin-left:14px}
 .search-bar input{height:48px;flex-basis:calc(100% - 50px)}
 .search-bar .btn{width:100%}
 .radar-grid,.assets{grid-template-columns:1fr}
 .url-field{flex-wrap:wrap;height:auto;padding:8px;border-radius:26px}
 .url-field>.icon{margin-left:12px}
 .url-field input{height:48px;flex-basis:calc(100% - 50px)}
 .url-field .btn{width:100%}
 .onboard-steps{grid-template-columns:1fr}
 .budget{grid-template-columns:1fr}
 .budget>.btn{justify-self:start}
 .metrics.three{grid-template-columns:1fr}
 .metrics.three .metric{border-left:0!important}
 .metrics.three .metric+.metric{border-top:1px solid var(--line)}
 .metric{padding:20px}
 .thesis{grid-template-columns:1fr;gap:0}
 .thesis-mark{height:56px}
 thead{display:none}
 tbody tr{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px;padding:16px 14px}
 tbody tr+tr{border-top:1px solid var(--line)}
 td{padding:0;border:0}
 td:first-child{grid-column:1/-1}
 td[data-label]::before{content:attr(data-label);display:block;margin-bottom:2px;font:500 10px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
 .ws-foot{justify-content:center;text-align:center}
 .row-head{flex-wrap:wrap}
 .rules .card-top{flex-direction:column;align-items:flex-start}
}
@media (hover:none){
 .memo .icon-btn{opacity:1}
}

/* ════════════ REDUCED MOTION ════════════ */
@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
 .marquee-track,.radar-sweep,.field .pulse,.field .ripple,.scroll-cue i{animation:none!important}
 .radar-sweep{background:conic-gradient(from 300deg,rgba(255,255,255,0),rgba(255,255,255,.12) 55deg,rgba(255,255,255,0) 60deg)}
 .hc,.hero-copy,.field,.device{translate:none!important;transform:none!important}
 .wd{color:var(--ink)}
}

/* Connected campaign work reuses the established surfaces and type. */
.hub-section{padding:clamp(20px,3vw,36px);margin:24px 0}.hub-section h2{font-size:clamp(23px,3vw,34px);margin:10px 0}.hub-section p{line-height:1.65}.hub-row{display:flex;gap:18px;align-items:center;justify-content:space-between;padding:18px 0;border-bottom:1px solid var(--line,#dededb)}.hub-row>div{min-width:0;flex:1}.hub-row input{width:100%;margin:8px 0}.hub-row small{display:block;overflow-wrap:anywhere}.hub-row .text-btn{flex-shrink:0}.pipeline-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}.pipeline-column{padding:18px;min-width:0}.pipeline-column h3{text-transform:capitalize;font-size:15px;margin-bottom:18px}.pipeline-item{display:block;text-align:left;width:100%;padding:14px;margin:10px 0;background:rgba(0,0,0,.035);border:1px solid rgba(0,0,0,.08);border-radius:14px}.pipeline-item strong,.pipeline-item small{display:block;overflow-wrap:anywhere}.pipeline-item small{font-size:12px;margin-top:8px;color:var(--muted,#666)}.hub-section details{margin-top:20px}.hub-section .card-top{gap:18px}.hub-section .card-top .btn{flex-shrink:0}.hub-section .meta-pair{margin:20px 0}#toast:focus-within .toast-bar,#toast:hover .toast-bar{animation-play-state:paused}
/* Owner dashboard */
.admin-board{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;margin:24px 0} /* wide tables scroll inside their card instead of widening the page */
.admin-board .metrics.three{margin-top:0}
.admin-accounts{padding:clamp(18px,2.6vw,30px)}
.admin-accounts-head{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between;margin-bottom:8px}
.admin-accounts-head h2{margin:0;font-size:clamp(22px,2.6vw,30px)}
.admin-search{flex:1 1 240px;max-width:360px}
.admin-search input{width:100%}
.admin-accounts .table-wrap{padding:0;margin:0 -6px}
.admin-accounts td small+small{margin-top:0}
.admin-accounts tr[hidden]{display:none}
.admin-accounts td:nth-child(n+4){white-space:nowrap}
@media(max-width:1000px){.pipeline-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:600px){.pipeline-grid{grid-template-columns:1fr}.hub-row{flex-wrap:wrap}.hub-row>div{flex-basis:100%}.hub-section .card-top{flex-direction:column;align-items:flex-start}.hub-section .meta-pair{grid-template-columns:1fr}}

/* Guided next step, using the existing ink/paper materials. */
.guided-step{min-height:0;margin-bottom:24px;padding:36px;isolation:isolate}.guided-step h2{font-size:clamp(30px,4vw,48px);max-width:900px}.guided-step p{max-width:720px}.step-actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:24px}.step-actions small{color:var(--muted);margin-left:auto}.up-next{margin-bottom:40px}.secondary-today{margin-top:40px}.step-complete{animation:step-in .4s ease both}@keyframes step-in{from{opacity:.3;transform:translateY(5px)}to{opacity:1;transform:none}}@media(max-width:640px){.guided-step{padding:24px}.step-actions small{width:100%;margin:0}}@media(prefers-reduced-motion:reduce){.step-complete{animation:none}}
.checkin-taps{display:flex;gap:10px;flex-wrap:wrap}.checkin-taps .btn{min-width:64px;min-height:48px}.checkin-inline{padding:20px 0;border-bottom:1px solid var(--line)}.checkin-inline:last-child{border-bottom:0}.checkin-inline p{margin-bottom:14px}.guided-step .checkin-taps{margin:0}input[type=number]{font-variant-numeric:tabular-nums}
.preview-page{max-width:1080px;margin:0 auto;padding:30px clamp(20px,5vw,64px) 80px}.preview-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:50px}.preview-page .page-head{padding-top:24px}.preview-field{padding:20px 0;border-top:1px solid var(--line)}.preview-field h3{font-size:18px}.preview-field blockquote{margin:16px 0;color:var(--muted);font-family:Georgia,serif;font-style:italic}.preview-actions{display:flex;gap:14px;flex-wrap:wrap;margin:28px 0}.preview-steps{padding-left:22px;line-height:1.7;max-width:760px}.preview-page .scan{max-width:620px;margin:auto}.preview-page .hub-section{margin-bottom:24px}@media(max-width:640px){.preview-actions>.btn{width:100%}.preview-nav{margin-bottom:24px}}

/* Review refinements, using the existing controls and spacing. */
.hub-section>.row-head{margin-top:0}
.result-actions,.campaign-controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.memo>.text-btn{margin-top:auto;padding-top:18px;align-self:flex-start}
/* Today: the plan is context, not a second call to action. */
.plan-strip{display:grid;grid-template-columns:1fr auto;align-items:center;gap:24px;margin-bottom:18px}
.plan-strip h2{margin-top:10px;font-size:clamp(1.5rem,2.4vw,2rem);letter-spacing:-.04em;line-height:1.05}
.plan-strip p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:680px;margin-top:8px;font-size:14.5px;color:var(--ink-3)}
.plan-strip-meta{display:inline-flex;align-items:center;gap:7px;margin-top:12px;font-size:13px;color:var(--mute)}
.plan-strip-meta .icon{width:15px;height:15px}
@media (max-width:640px){.plan-strip{grid-template-columns:1fr}.plan-strip .btn{justify-self:start}}
/* Profile dialog: evidence is a disclosure, not a field. */
.evidence{border-radius:16px;background:rgba(12,12,13,.04)}
.evidence summary{display:flex;align-items:center;gap:10px;padding:12px 14px;list-style:none;cursor:pointer;font-size:14px;font-weight:500;color:var(--ink-2);border-radius:inherit}
.evidence summary::-webkit-details-marker{display:none}
.evidence summary:hover{color:var(--ink)}
.evidence summary>.icon{width:16px;height:16px}
.evidence summary>.icon:last-child{margin-left:auto;transition:transform .45s var(--spring)}
.evidence[open] summary>.icon:last-child{transform:rotate(180deg)}
.evidence-body{display:grid;gap:10px;padding:0 14px 14px}
.evidence[open] .evidence-body{animation:rise .45s var(--ease)}
.evidence-row{display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:2px 10px;padding-top:10px;border-top:1px solid var(--line)}
.evidence-row .mono,.evidence-row .ev-key{color:var(--mute);font-size:12.5px}
/* A fold (UX audit 1): an optional part of a form. Opens with a smooth height change where the browser can animate it. */
details.fold{border-radius:14px;background:var(--paper-hi);box-shadow:inset 0 0 0 1px var(--line-2)}
details.fold>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:13px 16px;font-size:14px;font-weight:500;border-radius:14px}
details.fold>summary::-webkit-details-marker{display:none}
details.fold>summary small{color:var(--mute);font-weight:400;font-size:12.5px}
details.fold>summary::after{content:"";margin-left:auto;flex:none;width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .45s var(--spring)}
details.fold[open]>summary::after{transform:translateY(1px) rotate(-135deg)}
details.fold>summary:focus-visible{outline:2px dashed var(--mute);outline-offset:3px}
.fold-body{display:grid;gap:14px;padding:2px 16px 16px}
@supports (interpolate-size:allow-keywords){details.fold{interpolate-size:allow-keywords}details.fold::details-content{height:0;opacity:0;overflow:clip;transition:height .42s var(--ease),opacity .3s ease,content-visibility .42s allow-discrete}details.fold[open]::details-content{height:auto;opacity:1}}
@media (prefers-reduced-motion:reduce){details.fold::details-content{transition:none}details.fold>summary::after{transition:none}}
/* Is this right? */
.confirm-form{display:grid;gap:14px}
.cf-label{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.cf-read{font-size:11.5px;color:var(--mute);font-weight:400}
.field-note.center{text-align:center}
.palette-head{margin:10px 12px 4px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}.palette-head:first-child{margin-top:4px}
.records-fold{margin-top:40px}.records-fold .fold-body{gap:16px}
/* Home: the goal in one line. */
.goal-strip{display:flex;align-items:center;gap:14px;margin:0 0 6px;padding:14px 18px;border-radius:18px;background:var(--card);box-shadow:var(--card-shadow)}
.gs-ico{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;flex:none;background:var(--paper-hi);box-shadow:inset 0 0 0 1px var(--line)}.gs-ico .icon{width:18px;height:18px}
.gs-text{flex:1;min-width:0;display:grid;gap:3px}.gs-text strong{font-weight:600;font-size:15px}.gs-text small{color:var(--mute);font-size:12.5px}.gs-text small .text-btn{font-size:inherit;padding:0}
/* Nothing counted yet: the goal, what Distrove sees, and one question with two quiet answers. */
.gs-ask{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;margin-top:9px}.gs-ask>span{font-size:13.5px;font-weight:500;margin-right:4px}.gs-ask .btn{padding:6px 15px;font-size:13px}
.gs-bar{display:block;height:4px;margin-top:5px;border-radius:99px;background:var(--line);overflow:hidden}.gs-bar i{display:block;height:100%;width:var(--w);border-radius:inherit;background:var(--ink);transition:width .9s var(--ease)}
/* Home: what Distrove did, in one line. */
.activity-line{display:flex;align-items:center;gap:12px;margin-top:22px;padding:14px 18px;border-radius:18px;color:var(--ink);text-decoration:none;box-shadow:inset 0 0 0 1px var(--line-2);transition:background .2s}
.activity-line:hover{background:var(--paper-hi)}.activity-line>.icon{width:18px;height:18px;color:var(--mute)}
.activity-line>span:first-of-type{flex:1;display:grid;gap:2px;min-width:0}.activity-line small{color:var(--mute);font-size:12px}.activity-line strong{font-weight:500;font-size:14.5px}
.al-more{font-size:13px;color:var(--mute);white-space:nowrap}
.campaign.add{opacity:.8}.campaign.add:hover{opacity:1}
/* One line of results (channel page). */
.funnel-line,.lead-sum{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:18px 0 0;font-size:14px;color:var(--ink-3)}
.funnel-line .icon{width:16px;height:16px;color:var(--mute)}.funnel-line .text-btn,.lead-sum .text-btn{margin-left:auto}
.lead-sum{margin:0 0 4px}.lead-sum strong{color:var(--ink);font-weight:600}.lead-sum>i{font-style:normal;color:var(--faint)}
/* The channel tabs scroll on phones: the edge fades to say so. */
@media (max-width:760px){#people-seg,#campaign-tabs{-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}}
/* More menu: opens from its button with a small scale and blur (transitions.dev, origin-aware dropdown). */
details.menu{position:relative;display:inline-block}
details.menu>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
details.menu>summary::-webkit-details-marker{display:none}
.menu-dots{letter-spacing:1px;font-weight:700;line-height:1}
.menu-pop{position:absolute;left:0;bottom:calc(100% + 8px);z-index:30;display:grid;min-width:230px;padding:6px;border-radius:16px;background:#fff;box-shadow:0 0 0 1px var(--line-2),0 18px 40px -16px rgba(0,0,0,.28);transform-origin:bottom left;animation:menu-in .22s var(--ease) both}
.menu-pop button{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border-radius:10px;text-align:left;font-size:14px;color:var(--ink)}
.menu-pop button:hover,.menu-pop button:focus-visible{background:var(--paper-hi)}
.menu-pop button .icon{width:16px;height:16px;color:var(--ink-3)}
.menu-pop button.destructive{margin-top:4px;box-shadow:inset 0 1px 0 var(--line);border-radius:0 0 10px 10px}
@keyframes menu-in{from{opacity:0;transform:scale(.94) translateY(4px);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}
.fu-history{display:grid;gap:8px;margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}.fu-history p{display:flex;gap:12px;font-size:13.5px;margin:0}.fu-history small{flex:none;width:52px;color:var(--mute)}
/* Log a result: two counters with steppers. */
.counters{display:grid;grid-template-columns:1fr 1fr;gap:10px}/* Three numbers, or any on a phone: one row each, the label left and the stepper right, so the buttons sit together. */
.counters.three{grid-template-columns:1fr;gap:8px}.counters.three .counter{grid-template-columns:1fr auto;align-items:center;padding:10px 12px 10px 18px}.counters.three .stepper{width:156px}
.counter{display:grid;gap:10px;padding:14px 16px;border-radius:16px;background:var(--paper-hi);box-shadow:inset 0 0 0 1px var(--line-2)}
.counter>span{font-size:13.5px;font-weight:500}
.stepper{display:flex;align-items:center;gap:6px}
.stepper button{display:grid;place-items:center;padding:0;width:34px;height:34px;flex:none;border-radius:50%;font-size:18px;line-height:1;background:#fff;box-shadow:0 0 0 1px var(--line-2);transition:transform .2s var(--spring),box-shadow .2s}
.stepper button:hover{box-shadow:0 0 0 1px var(--ink)}.stepper button:active{transform:scale(.92)}
.stepper input{flex:1;min-width:0;height:40px;padding:0;text-align:center;font-size:22px;font-weight:600;font-variant-numeric:tabular-nums;border:0;background:transparent;box-shadow:none;-moz-appearance:textfield}
.stepper input::-webkit-inner-spin-button,.stepper input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.stepper input.pop{animation:num-pop .35s var(--spring)}
@keyframes num-pop{0%{transform:scale(.82);filter:blur(2px);opacity:.6}100%{transform:none;filter:none;opacity:1}}
@media (max-width:420px){.counters{grid-template-columns:1fr;gap:8px}.counters .counter{grid-template-columns:1fr auto;align-items:center;padding:10px 12px 10px 18px}.counters .stepper{width:156px}}
.evidence-row strong{font-size:13px;font-weight:500}
.evidence-row p{grid-column:1/-1;font-size:13.5px;color:var(--ink-3)}
/* Text buttons inside the dark next-step card must stay legible. */
.guided-step .text-btn{color:var(--fog)}
.guided-step .text-btn:hover{color:#fff}
/* Prepared campaigns: who does what, the review panel, the first week. */
.who-does{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:4px 0 18px}
.who-does section{padding:16px 18px;border-radius:18px;background:rgba(12,12,13,.04)}
.who-does .eyebrow{margin-bottom:10px}
.who-does ul{list-style:none;display:grid;gap:9px;margin:0;padding:0}
.who-does li{display:grid;grid-template-columns:auto 1fr;gap:9px;align-items:start;font-size:14px;line-height:1.45}
.who-does li .icon{width:15px;height:15px;margin-top:2px;stroke-width:2.2}
.who-does.on-dark section{background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px var(--nline)}
.who-does.on-dark .eyebrow{color:var(--fog-2)}
.who-does.on-dark li{color:#fff}
.prepare-note{margin-top:14px;text-align:center;font-size:13.5px;color:var(--mute)}
.prepared-review{margin-bottom:24px}
.prepared-review>p{max-width:720px;color:var(--fog)}
.prep-target{display:inline-flex;align-items:center;gap:8px;margin:14px 0 18px;padding:7px 13px;border-radius:999px;background:rgba(255,255,255,.1);font-size:13.5px;font-weight:500}
.prep-target .icon{width:15px;height:15px}
.first-week{margin-bottom:14px}
.first-week .eyebrow{color:var(--fog-2);margin-bottom:10px}
.first-week ol{list-style:none;display:grid;gap:8px;margin:0;padding:0}
.first-week li{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:baseline;font-size:14px}
.owner{display:inline-block;min-width:66px;padding:2px 8px;border-radius:999px;font:500 10.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;text-align:center}
.owner.distrove{background:rgba(255,255,255,.14);color:#fff}
.owner.you{background:#fff;color:var(--ink)}
.prep-drafts{font-size:13.5px;color:var(--fog-2)}
.prepared-plan .who-does{margin-bottom:0}
@media (max-width:640px){.who-does{grid-template-columns:1fr}}

/* Secondary fields tucked under a quiet disclosure (Create dialog, draft editor) */
.more-options{margin:4px 0 2px;border-top:1px solid var(--line)}
.more-options summary{list-style:none;cursor:pointer;padding:12px 0;font-size:13.5px;font-weight:500;color:var(--mute);display:flex;align-items:center;gap:8px}
.more-options summary::-webkit-details-marker{display:none}
.more-options summary::before{content:'+';display:inline-grid;place-items:center;width:18px;height:18px;border:1px solid var(--line);border-radius:50%;font-size:12px;transition:transform .4s var(--spring)}
.more-options[open] summary::before{transform:rotate(45deg)}
.more-options summary:hover{color:var(--ink)}

/* Business logo from the website, shown instead of the initial */
.avatar.has-logo{background:#fff;box-shadow:0 0 0 1px var(--line-2),0 1px 3px rgba(0,0,0,.08);overflow:hidden}
.avatar.has-logo img{width:72%;height:72%;object-fit:contain;display:block}

/* ---------- Market research ---------- */
.monogram.has-logo{background:#fff;box-shadow:0 0 0 1px var(--line-2);overflow:hidden}
.monogram.has-logo img{width:68%;height:68%;object-fit:contain;display:block}
.market-cta{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:26px 28px;margin:18px 0 8px}
.market-cta h2{margin:6px 0 8px}
.market-cta p{max-width:62ch;margin:0}
.market-cta .btn{flex-shrink:0}
.market-empty{padding:28px}
.market-foot{margin:28px 0 8px}
.feed-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin-bottom:12px}
.feed-ad{background:#fff;color:#1c1e21;border-radius:14px;box-shadow:0 0 0 1px rgba(0,0,0,.08),0 12px 32px -18px rgba(0,0,0,.35);overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;display:flex;flex-direction:column}
.fa-head{display:flex;align-items:center;gap:10px;padding:12px 14px 8px}
.fa-head div{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.fa-head strong{font-size:14.5px;font-weight:600}
.fa-head small{font-size:12.5px;color:#65676b;display:flex;align-items:center;gap:4px}
.fa-head small .icon{width:11px;height:11px}
.fa-avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#1c1e21;color:#fff;font-weight:600;font-size:15px;flex-shrink:0;overflow:hidden}
.fa-avatar.has-logo{background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.1)}
.fa-avatar.has-logo img{width:70%;height:70%;object-fit:contain}
.fa-more{color:#65676b;letter-spacing:1px;font-size:12px}
.fa-text{margin:0;padding:0 14px 10px;font-size:14.5px;line-height:1.4}
.fa-media{aspect-ratio:1;background:#f0f2f5;position:relative;overflow:hidden}
.fa-media>img,.fa-media .type-art{width:100%;height:100%;object-fit:cover;display:block;border-radius:0}
.fa-empty{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:20px;text-align:center;color:#65676b}
.fa-media.is-making::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.7) 50%,transparent 70%);background-size:220% 100%;animation:fa-sheen 1.4s linear infinite}
@keyframes fa-sheen{from{background-position:120% 0}to{background-position:-120% 0}}
.fa-cta{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;background:#f0f2f5}
.fa-cta div{display:flex;flex-direction:column;min-width:0}
.fa-cta small{font-size:11.5px;color:#65676b;letter-spacing:.02em}
.fa-cta strong{font-size:15px;font-weight:600;line-height:1.3}
.fa-btn{flex-shrink:0;background:#e4e6eb;color:#1c1e21;font-weight:600;font-size:13.5px;padding:8px 12px;border-radius:6px}
.fa-actions{display:flex;justify-content:space-around;padding:8px 6px;border-top:1px solid #e4e6eb;margin:0 10px;color:#65676b;font-size:13.5px;font-weight:500}
.fa-open{padding:4px 12px 12px;display:flex;justify-content:flex-end}
.fa-open .text-btn{color:#1c1e21}
.pattern-list{display:grid;gap:12px}
.pattern{display:flex;gap:18px;padding:20px 22px}
.pattern>.mono{color:var(--mute);padding-top:3px}
.pattern h3,.mk-angle h3,.ad-row h3{margin:0 0 6px;font-size:17px}
.pattern p,.mk-angle p,.ad-row p{margin:0;color:var(--ink-2)}
.ev-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.ev-chip{display:inline-flex;align-items:center;gap:5px;font-size:12px;padding:4px 10px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line-2);color:var(--ink-2)}
.ev-chip .icon{width:12px;height:12px}
.angle-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.mk-angle{padding:20px 22px}
.ad-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.ad-row{padding:18px 20px;display:flex;flex-direction:column;gap:8px}
.ad-meta{display:flex;justify-content:space-between;align-items:center;gap:10px}
.ad-run{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:var(--mute);white-space:nowrap}
.ad-run .icon{width:13px;height:13px}
.ad-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:auto;padding-top:6px}
.ad-foot .text-btn{margin-left:auto}
.ad-cta-pill{font-size:12px;font-weight:600;padding:4px 10px;border-radius:6px;background:var(--line)}
.comp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.comp{display:flex;gap:14px;padding:18px 20px;color:inherit;text-decoration:none;transition:transform .4s var(--spring)}
.comp:hover,.place:hover{transform:translateY(-2px)}
.comp-mark{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--ink);color:#fff;font-weight:600;flex-shrink:0}
.comp div,.place div{display:flex;flex-direction:column;min-width:0}
.comp small,.place small{color:var(--mute);font-size:12.5px}
.comp p,.place p{margin:8px 0 0;color:var(--ink-2);font-size:14px}
.place-list{display:grid;gap:10px}
.place{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 20px;color:inherit;text-decoration:none;transition:transform .4s var(--spring)}
.place>.icon{flex-shrink:0;color:var(--mute)}
@media (max-width:720px){.market-cta{flex-direction:column;align-items:flex-start;padding:22px}.feed-grid{grid-template-columns:1fr}.ad-list,.comp-grid,.angle-grid{grid-template-columns:1fr}.pattern{padding:18px}}

/* New campaign: goal and approach picks */
.new-campaign{display:grid;gap:18px}
.picks{border:0;margin:0;padding:0;display:grid;gap:8px}
.picks legend{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin-bottom:8px;padding:0}
.goal-picks{grid-template-columns:repeat(3,1fr)}
.pick{position:relative;display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:14px;box-shadow:inset 0 0 0 1px var(--line-2);cursor:pointer;transition:box-shadow .3s var(--spring),background .3s}
.pick:hover{box-shadow:inset 0 0 0 1px var(--line-3)}
.pick input{position:absolute;top:0;left:0;margin:0;opacity:0;pointer-events:none}
.pick span{display:flex;flex-direction:column;gap:3px}
.pick strong{font-weight:500;font-size:15px}
.pick small{color:var(--mute);font-size:13px;line-height:1.4}
.pick:has(input:checked){box-shadow:inset 0 0 0 1.5px var(--ink);background:var(--paper-hi)}
.pick:has(input:focus-visible){outline:2px dashed var(--mute);outline-offset:3px}
.goal-pick{align-items:center;justify-content:center;text-align:center;min-height:64px}
.pick-tag{display:inline-block;margin-left:6px;font-size:10.5px!important;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--ink)!important;padding:2px 7px;border-radius:999px;background:var(--line);vertical-align:middle}
@media (max-width:600px){.goal-picks{grid-template-columns:1fr}.goal-pick{justify-content:flex-start;text-align:left;min-height:0}}

/* ════════════ WORKSPACE FRAME: sidebar, breadcrumb, dock ════════════ */
.ws-side{display:none}
.ws-body{min-width:0;display:flex;flex-direction:column;min-height:100vh}
.ws-top-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:calc(1260px + var(--gutter)*2);height:54px;margin:0 auto}
.crumbs{display:flex;align-items:center;gap:6px;min-width:0;font-size:14px;color:var(--mute)}
.crumbs a{color:var(--mute);text-decoration:none;white-space:nowrap;transition:color .2s}
.crumbs a:hover{color:var(--ink)}
.crumbs [aria-current]{color:var(--ink);font-weight:500;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.crumbs .icon{width:14px;height:14px;flex-shrink:0}
.search-btn{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 8px 0 12px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line-2);color:var(--mute);font-size:13.5px;transition:background .2s,color .2s}
.search-btn:hover{background:rgba(12,12,13,.05);color:var(--ink)}
.search-btn .icon{width:16px;height:16px}
.search-btn kbd{font:500 11px/1 var(--mono,ui-monospace,monospace);padding:4px 6px;border-radius:6px;background:var(--line)}
.account-links{display:grid;gap:8px;margin:4px 0 12px}
.admin-message{white-space:pre-wrap;max-width:44ch}
.listen-card .card-top{gap:16px;flex-wrap:wrap}
.listen-places{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.listen-actions{display:flex;align-items:center;gap:12px}
/* An industry channel: where its weekly post goes, each place a link to it. */
.listen-spots{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.listen-spots a.badge{text-decoration:none;transition:background .2s,border-color .2s}.listen-spots a.badge:hover{border-color:var(--ink)}
.thread-list{display:grid;gap:14px}
.thread-card{display:grid;gap:10px}
.thread-top{display:flex;justify-content:space-between;align-items:center;gap:12px;color:var(--mute);font-size:13px}
.thread-card h3{margin:0;font-size:17px;line-height:1.35}
.thread-card h3 a{color:var(--ink);text-decoration:none}
.thread-card h3 a .icon{width:14px;height:14px;vertical-align:-1px;color:var(--mute)}
.thread-card h3 a:hover{text-decoration:underline}
.thread-card textarea{width:100%}
.thread-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.answered summary{display:flex;justify-content:space-between;cursor:pointer}
.start-here{display:grid;gap:14px;padding:clamp(24px,4vw,40px)}
.start-here h2{margin:0;font-size:clamp(26px,3.4vw,36px);line-height:1.15}
.start-here .hero-form{max-width:640px;margin:6px 0 2px}
.start-here .text-btn{justify-self:start}
.mail-chips{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 14px}
.mail-chip{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:999px;border:1px solid var(--line-2);background:var(--card);font:500 14px/1 var(--sans);color:var(--ink);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.mail-chip .icon{width:16px;height:16px;flex-shrink:0}
.mail-chip:hover{border-color:var(--line-3)}
.mail-chip[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--paper-hi)}
.mail-steps{display:grid;gap:12px;margin:0 0 16px;padding:18px;border-radius:18px;background:var(--paper-lo);border:1px solid var(--line)}
.mail-steps ol{list-style:none;margin:0;padding:0;display:grid;gap:12px;counter-reset:mail}
.mail-steps li{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start;counter-increment:mail;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.mail-steps li::before{content:counter(mail);display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--card);border:1px solid var(--line-2);font:500 12px/1 var(--mono,ui-monospace,monospace);color:var(--ink)}
.mail-steps li span{padding-top:4px}
.mail-badge{justify-self:start;display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:var(--card);border:1px solid var(--line-2);font:500 12px/1 var(--sans);color:var(--ink-2)}
.mail-badge .icon{width:14px;height:14px}
.mail-open{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line-3)}
.mail-open .icon{width:14px;height:14px}
.mail-copy{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:9px;background:var(--card);border:1px solid var(--line-2);font:500 12.5px/1.3 var(--mono,ui-monospace,monospace);color:var(--ink);cursor:pointer}
.mail-copy .icon{width:13px;height:13px}
.mail-advanced summary{cursor:pointer;font-weight:500;font-size:14px;color:var(--ink-2)}
.mail-servers{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:10px 0 0;font-size:13.5px;color:var(--mute)}
.mail-servers span{min-width:120px}
.mail-works{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13px;color:var(--mute)}
.mail-works .icon{width:15px;height:15px;color:var(--ink-2)}
.mail-works span{margin-left:2px}

@media (min-width:900px){
 .ws{display:grid;grid-template-columns:248px minmax(0,1fr);align-items:start}
 .ws-side{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:4px;padding:18px 12px 14px;border-right:1px solid var(--line);overflow-y:auto}
 .ws-top .ws-id,.ws-top .top-account{display:none}
 .side-brand{display:flex;padding:4px 10px 14px}
 .side-switch{display:flex;align-items:center;gap:10px;padding:7px;border-radius:14px;color:inherit;text-decoration:none;transition:background .2s}
 .side-switch:hover,.side-switch.active{background:rgba(12,12,13,.06)}
 .side-switch .ws-switch-text{display:grid!important;min-width:0;line-height:1.2}
 .side-switch strong{overflow:hidden;font-size:14px;font-weight:600;white-space:nowrap;text-overflow:ellipsis}
 .side-switch small{font-size:11.5px;color:var(--mute)}
 .side-nav{display:grid;gap:2px;margin-top:12px}
 .side-link{display:flex;align-items:center;gap:11px;min-height:40px;padding:0 12px;border-radius:12px;font-size:14.5px;font-weight:500;color:var(--ink-2);text-decoration:none;transition:background .2s,color .2s}
 .side-link .icon{width:18px;height:18px;color:var(--mute);flex-shrink:0}
 .side-link:hover{background:rgba(12,12,13,.05);color:var(--ink)}
 .side-link.active{background:var(--ink);color:var(--paper-hi)}
 .side-link.active .icon{color:inherit}
button.side-link{width:100%;border:0;background:none;font:inherit;font-size:14.5px;font-weight:500;text-align:left;cursor:pointer}
 .side-link.side-quiet{font-size:14px}
 .side-count{margin-left:auto;min-width:20px;height:20px;padding:0 7px;border-radius:999px;display:inline-grid;place-items:center;font-size:11.5px;font-weight:600;font-variant-numeric:tabular-nums;background:var(--line-2);color:var(--ink)}
 .side-link.active .side-count{background:rgba(255,255,255,.18);color:inherit}
 .side-sub{display:grid;gap:1px;margin:2px 0 8px 21px;padding-left:10px;border-left:1px solid var(--line-2)}
 .side-sub a,.side-sub .side-new{display:flex;align-items:center;gap:9px;min-width:0;padding:6px 8px;border-radius:9px;font-size:13.5px;color:var(--ink-2);text-decoration:none;text-align:left;transition:background .2s}
 .side-sub a span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
 .side-sub a:hover,.side-sub .side-new:hover{background:rgba(12,12,13,.05)}
 .side-sub a.active{background:rgba(12,12,13,.08);color:var(--ink);font-weight:500}
 .side-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;box-shadow:inset 0 0 0 1.5px var(--ink-3)}
 .side-dot.on{background:var(--ink);box-shadow:none}
 .side-new{color:var(--mute)!important}
 .side-new .icon{width:14px;height:14px}
 .side-foot{margin-top:auto;display:grid;gap:2px;padding-top:12px;border-top:1px solid var(--line)}
 .side-account{display:flex;align-items:center;gap:10px;margin-top:6px;padding:6px;border-radius:12px;font-size:13.5px;color:var(--ink-2);text-align:left;transition:background .2s}
 .side-account:hover{background:rgba(12,12,13,.05)}
 .side-account .avatar-btn{margin:0;width:30px;height:30px;font-size:13px;pointer-events:none}
 .ws-dock{display:none!important}
}
@media (max-width:899px){
 .crumbs{display:none}
 .ws-view-campaign .crumbs,.ws[data-view="campaign"] .crumbs,.ws[data-view="market"] .crumbs{display:flex;flex:1;justify-content:center}
 .search-btn{width:38px;padding:0;justify-content:center}
 .search-btn span,.search-btn kbd{display:none}
}

.conn-keys{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.conn-keys .icon{width:15px;height:15px}

.prep-places{display:grid;gap:6px;margin:14px 0 4px}
.prep-places a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.08);color:inherit;text-decoration:none;transition:background .2s}
.prep-places a:hover{background:rgba(255,255,255,.14)}
.prep-places a strong{font-weight:500}
.prep-places a small{flex:1;opacity:.7;font-size:12.5px;min-width:0}
.prep-places a .icon{width:15px;height:15px;flex-shrink:0;opacity:.7}

/* ════════════ HOME: the journey ════════════ */
.journey{margin:6px 0 30px}
.journey ol{list-style:none;margin:0;padding:0;display:grid}
/* Each step: its mark on the line, what it is, and (done or waiting beside the path) one real button on the right. */
.journey li{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:start;gap:4px 18px;padding:12px 0}
.journey li:not(:last-child)::before{content:"";position:absolute;left:16px;top:50px;bottom:-12px;width:2px;border-radius:2px;background:var(--line-2)}
.journey li.js-done:not(:last-child)::before{background:var(--ink)}
.js-mark{position:relative;z-index:1;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:600;color:var(--mute);background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--line-3)}
.js-mark .icon{width:15px;height:15px}
.js-done .js-mark{background:var(--ink);color:var(--paper-hi);box-shadow:none}
.js-current .js-mark{color:var(--paper-hi);background:var(--ink);box-shadow:0 0 0 5px var(--paper),0 0 0 6.5px var(--ink)}
.js-missed .js-mark{color:var(--ink);background:var(--paper-hi);box-shadow:none;outline:1.5px dashed var(--ink-3);outline-offset:-1.5px}
.js-body{display:grid;gap:3px;align-content:start;padding-top:6px;min-width:0}
.js-body strong{font-size:16px;font-weight:500;letter-spacing:-.01em}
.js-body p{margin:0;font-size:14px;line-height:1.5;color:var(--mute);max-width:72ch}
.js-done .js-body p{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.js-act{align-self:center;white-space:nowrap}
.js-act .icon{width:14px;height:14px}
.js-missed .js-body strong{color:var(--ink)}
.js-missed .js-body p{color:var(--ink-3)}
.js-upcoming .js-body strong,.js-skipped .js-body strong{font-weight:400;color:var(--ink-3)}
.js-upcoming .js-body p,.js-skipped .js-body p{font-size:13.5px;color:var(--faint)}
/* The next step: a dark card across the row, its place in the journey, one sentence and one button. */
.js-current .js-body{grid-column:2/-1;gap:8px;padding:22px 24px 24px;border-radius:22px;background:linear-gradient(180deg,#1b1b1e,#0c0c0d);color:var(--paper-hi);box-shadow:0 22px 44px -26px rgba(0,0,0,.55);animation:js-in .8s var(--ease) both}
.js-kicker{font:500 11px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.js-current .js-body strong{font-size:22px;letter-spacing:-.02em}
.js-current .js-body p{color:rgba(255,255,255,.74);font-size:15px}
.js-current .js-body .btn{justify-self:start;margin-top:8px}
@keyframes js-in{from{opacity:0;transform:translateY(10px) scale(.985);filter:blur(4px)}}
@media (max-width:640px){.journey li{grid-template-columns:34px minmax(0,1fr)}.js-act{grid-column:2;justify-self:start;margin-top:6px}.js-done .js-body p{white-space:normal}}
@media (prefers-reduced-motion:reduce){.js-current .js-body{animation:none}}
.journey-strip{display:flex;gap:4px;margin:2px 0 6px;overflow-x:auto;scrollbar-width:none}
.jstep{flex:1;min-width:48px;display:grid;justify-items:center;gap:6px;padding:10px 2px;border-radius:14px;font-size:12px;color:var(--mute);transition:background .2s}
.jstep i{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1.5px var(--line-3)}
.jstep i .icon{width:12px;height:12px}
.jstep.js-done{color:var(--ink-2)}
.jstep.js-done i{background:var(--ink);color:var(--paper-hi);box-shadow:none}
.jstep.js-current{color:var(--ink);font-weight:600}
.jstep.js-current i{box-shadow:inset 0 0 0 6px var(--ink)}
.jstep:not(:disabled):hover{background:rgba(12,12,13,.05)}
.jstep:disabled{cursor:default}
.journey-note{margin:0 0 22px;font-size:14.5px;color:var(--ink-2);max-width:70ch}
@media (max-width:640px){.jstep{font-size:10.5px;min-width:42px}.js-current .js-body{padding:18px}}

/* ════════════ CAMPAIGN PAGE ════════════ */
.stage{list-style:none;display:flex;align-items:center;gap:0;margin:-6px 0 18px;padding:0;max-width:520px}
.stage li{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--mute);white-space:nowrap}
.stage li:not(:last-child)::after{content:"";width:48px;height:2px;margin:0 12px;border-radius:2px;background:var(--line-2)}
.stage li.done:not(:last-child)::after{background:var(--ink)}
.stage li i{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1.5px var(--line-3)}
.stage li i .icon{width:11px;height:11px}
.stage li.done{color:var(--ink-2)}
.stage li.done i{background:var(--ink);color:var(--paper-hi);box-shadow:none}
.stage li.now{color:var(--ink);font-weight:600}
.stage li.now i{box-shadow:inset 0 0 0 5px var(--ink)}
.waiting-strip{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 16px;padding:12px 16px;border-radius:14px;background:var(--paper-hi);box-shadow:inset 0 0 0 1px var(--line-2);font-size:14px}
.waiting-strip strong{font-weight:600;margin-right:4px}
.waiting-strip .chip{font-size:12.5px;padding:3px 10px;border-radius:999px;background:var(--line)}
.autopilot-box p{margin:6px 0 8px;color:var(--ink-2)}
.history>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;list-style:none;cursor:pointer}
.history>summary::-webkit-details-marker{display:none}
.history>summary .mono{color:var(--mute)}
.history[open]>summary{margin-bottom:10px}
@media (max-width:640px){.stage li:not(:last-child)::after{width:22px;margin:0 8px}}

/* Competitors' ads as ads */
.comp-ad-run{display:flex;align-items:center;gap:6px;padding:12px 14px 0;font-size:12px;font-weight:600;color:#1c1e21}
.comp-ad-run .icon{width:13px;height:13px}
.comp-ad-on{display:inline-flex;align-items:center;gap:5px;margin-right:4px;padding-right:9px;border-right:1px solid var(--line-2)}.comp-ad-on svg{width:13px;height:13px}
.fa-body{padding:0 14px 10px}
.fa-body summary{list-style:none;cursor:pointer}
.fa-body summary::-webkit-details-marker{display:none}
.fa-body .fa-text{display:block;padding:0}
.fa-text.clamp{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.fa-body[open] .fa-text.clamp{display:block;-webkit-line-clamp:unset;overflow:visible}
.fa-see{display:inline-block;margin-top:4px;font-size:13px;font-weight:600;color:#65676b}
.fa-body[open] .fa-see{font-size:0}
.fa-body[open] .fa-see::after{content:"See less";font-size:13px}
.comp-ad-foot{display:grid;gap:8px;padding:12px 14px 14px;border-top:1px solid #e4e6eb;font-size:13px;line-height:1.45;color:#4b4f56}
.comp-ad-foot p{margin:0}
.comp-ad-foot strong{color:#1c1e21}
.comp-ad-foot .text-btn{justify-self:start;color:#1c1e21}
.market-note{margin:-6px 0 14px}
.creative-look .mono .icon{width:15px;height:15px}

/* ════════════ PLAYS: how you sell, what Distrove does, coming soon ════════════ */
.id-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.id-chips .chip{font-size:12px;padding:4px 10px;border-radius:999px;background:var(--line);color:var(--ink-2)}
.how-you-sell{border:0;margin:6px 0 0;padding:14px 0 0;border-top:1px solid var(--line)}
.how-you-sell legend{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);padding:0}
.how-you-sell .field-note{margin:4px 0 10px}
.level-tag,.pick-level{display:inline-flex;align-self:flex-start;font-size:11px;font-weight:600;letter-spacing:.04em;padding:3px 9px;border-radius:999px;background:var(--line);color:var(--ink-2)}
.mix-card .level-tag{margin:-2px 0 8px}
.mix-card.lead .level-tag{background:rgba(255,255,255,.14);color:inherit}
.pick-level{margin-top:4px}
.level-line{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-size:14px;font-weight:500;color:var(--ink-2)}
.level-line .icon{width:16px;height:16px}
.soon-card{position:relative;isolation:isolate;display:grid;gap:8px;justify-items:start;margin:16px 0 4px;padding:18px 20px;border-radius:18px;background:var(--paper-hi);overflow:hidden}
.soon-card p{margin:0;font-weight:500}
.soon-ring{position:absolute;inset:0;z-index:-1;border-radius:inherit;padding:1.5px;background:conic-gradient(from var(--soon-a,0deg),var(--line-2),var(--ink-3),var(--line-2) 40%,var(--line-2));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:soon-spin 4.5s linear infinite}
@property --soon-a{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes soon-spin{to{--soon-a:360deg}}
.soon-noted{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;color:var(--ink-2)}
.soon-noted .icon{width:15px;height:15px}
@media (prefers-reduced-motion:reduce){.soon-ring{animation:none}}

/* ════════════ COLD EMAIL ════════════ */
.leads-find form{display:grid;gap:12px;margin-top:12px}
.leads-find .btn{justify-self:start}
.lead-list{display:grid;gap:10px}
.lead-card{padding:16px 18px;display:grid;gap:8px}
.lead-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.lead-top div{display:flex;flex-direction:column;min-width:0}
.lead-top small{color:var(--mute);font-size:13px}
.lead-line{margin:0;font-family:var(--serif);font-style:italic;font-size:17px;line-height:1.35;color:var(--ink)}
.lead-why{margin:0;font-size:13px}
.lead-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
/* People tab (UX audit 1, C2): everyone but hot leads as compact rows in one card; the action sits on the right. */
.lead-list.compact{gap:0;border-radius:20px;background:var(--card);box-shadow:var(--card-shadow);overflow:hidden}
.lead-list.compact>.lead-card{border-radius:0;background:none;box-shadow:inset 0 1px 0 var(--line);padding:12px 18px;grid-template-columns:minmax(230px,1fr) minmax(0,max-content);align-items:center;column-gap:18px;row-gap:3px}
.lead-list.compact>.lead-card:first-child{box-shadow:none}
.lead-list.compact .lead-top{grid-column:1}.lead-list.compact .lead-top strong{font-weight:500}
.lead-list.compact .lead-actions{grid-column:2;grid-row:1/span 4;justify-content:flex-end;max-width:400px;row-gap:6px}
.lead-list.compact .lead-actions .lead-q{font-size:12.5px;color:var(--mute)}
.lead-list.compact .lead-top>div{min-width:0}.lead-list.compact .lead-top small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lead-list.compact .lead-line{grid-column:1;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lead-list.compact .lead-why{display:none}
.lead-list.compact .lead-mail{grid-column:1;margin:0}
.lead-list.compact>.need-more{grid-column:1/-1}
@media (max-width:760px){.lead-list.compact>.lead-card{grid-template-columns:minmax(0,1fr)}.lead-list.compact .lead-actions{grid-column:1;grid-row:auto;justify-content:flex-start}}
.lead-sent{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-2)}
.lead-sent .icon{width:14px;height:14px}

/* ════════════ PLATFORM LOGOS ════════════ */
.brand-icon{stroke:none}
.mark-row{display:inline-flex;align-items:center;gap:10px;margin:0 0 12px;color:var(--ink-2)}
.mark-row .icon{width:18px;height:18px}
.soon-card .mark-row{margin:2px 0 0}
.pick-mark{width:16px!important;height:16px!important;vertical-align:-3px;margin-right:2px;color:var(--ink-2)}
/* Add a channel: the goal it works toward, the plan note, what each channel does every week, the rest folded away. */
.nc-goal{display:flex;align-items:center;gap:10px;margin:0;padding:12px 16px;border-radius:14px;background:var(--paper-hi);box-shadow:inset 0 0 0 1px var(--line-2);font-size:14px;color:var(--mute)}
.nc-goal .icon{flex:none;width:18px;height:18px;color:var(--ink-2)}.nc-goal span{flex:1;min-width:0}.nc-goal strong{color:var(--ink);font-weight:600}
.nc-note{margin:0;font-size:13.5px;line-height:1.5;color:var(--mute)}.nc-note .text-btn{font-size:inherit;padding:0}
.nc-facts{display:flex!important;flex-direction:row!important;flex-wrap:wrap;align-items:center;gap:6px!important;margin-top:6px;font-size:12.5px;color:var(--mute)}
.nc-facts b{font-weight:600;color:var(--ink)}.nc-facts i{font-style:normal;opacity:.5}
.nc-more{margin-top:2px}.nc-more summary{cursor:pointer;list-style:none;padding:10px 4px;font-size:13.5px;font-weight:500;color:var(--ink-2)}.nc-more summary::-webkit-details-marker{display:none}
.nc-more summary::after{content:"";display:inline-block;width:6px;height:6px;margin-left:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .3s var(--spring)}
.nc-more[open] summary::after{transform:translateY(1px) rotate(-135deg)}.nc-more .picks{margin-top:4px}
/* Edit details on a channel. */
.channel-form{display:grid;gap:16px}.channel-form .field-note{margin-top:6px}
.cd-rhythm{border:0;margin:0;padding:0}.cd-rhythm legend{padding:0;margin-bottom:8px;font-size:14px;font-weight:500}
.cd-line{display:flex;justify-content:space-between;gap:12px;margin:0;padding:12px 16px;border-radius:14px;background:var(--paper-hi);box-shadow:inset 0 0 0 1px var(--line-2);font-size:14px;color:var(--mute)}.cd-line strong{color:var(--ink);font-weight:600}
.ico-tile .brand-icon{width:18px;height:18px}
.conn-keys .btn .icon{width:16px;height:16px}
.comp-mark.has-logo,.fa-avatar.has-logo{background:#fff;box-shadow:inset 0 0 0 1px var(--line-2);overflow:hidden}
.comp-mark.has-logo img,.fa-avatar.has-logo img{width:100%;height:100%;object-fit:cover;display:block}
.comp-mark.has-logo img{width:70%;height:70%;object-fit:contain;margin:auto}
.place-mark{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;flex-shrink:0;background:var(--paper-hi);box-shadow:inset 0 0 0 1px var(--line-2);color:var(--mute);overflow:hidden}
.place-mark img{width:70%;height:70%;object-fit:contain}
.place-mark .icon{width:16px;height:16px}
.place{justify-content:flex-start}
.place>div{flex:1}

.ap-image{position:relative}
.ap-platform{position:absolute;top:10px;right:10px;display:inline-flex;gap:6px;padding:6px 8px;border-radius:999px;background:rgba(255,255,255,.92);color:#1c1e21;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.ap-platform .icon{width:15px;height:15px}
.ap-kicker .brand-icon{width:15px;height:15px}

/* Publishing kit */
.kit-preview{margin:4px 0 14px;padding:16px 18px;border-radius:16px;background:var(--paper-hi);box-shadow:inset 0 0 0 1px var(--line-2)}
.kit-preview p{margin:0;white-space:pre-wrap;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.kit-image{padding:0;overflow:hidden;max-width:360px}
.kit-image img,.kit-image .type-art{display:block;width:100%}
.kit-actions{display:flex;flex-wrap:wrap;gap:10px}
.kit-actions .btn .icon{width:17px;height:17px}
.kit-time{display:flex;align-items:center;gap:8px;margin:14px 0 4px;font-size:13.5px;color:var(--mute)}
.kit-time .icon{width:15px;height:15px}
.kit-done{margin-top:16px;padding-top:16px;border-top:1px solid var(--line);display:grid;gap:6px}

/* One question at a time */
.q-text{margin:0 0 16px;font-size:19px;line-height:1.45;color:var(--ink);max-width:56ch}
.q-options{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.q-option{padding:10px 16px;border-radius:999px;background:var(--paper-hi);box-shadow:inset 0 0 0 1px var(--line-2);font-size:14.5px;color:var(--ink);text-align:left;transition:box-shadow .2s,background .2s}
.q-option:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
/* A choice made with a radio (the rhythm, Edit details): the pill is the control, the chosen one filled. */
label.q-option{position:relative;display:inline-flex;align-items:center;cursor:pointer}
.q-option input{position:absolute;top:0;left:0;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.q-option:has(input:checked){background:var(--ink);color:var(--paper-hi);box-shadow:none}
.q-option:has(input:focus-visible){outline:2px dashed var(--mute);outline-offset:3px}

/* ════════════ THE PLAN ON A PAGE ════════════ */
.plan-page{margin:18px 0 26px;padding:30px 32px 28px;border-radius:26px;background:linear-gradient(180deg,#1b1b1e,#0c0c0d);color:var(--paper-hi);box-shadow:0 30px 60px -36px rgba(0,0,0,.6)}
.plan-page .eyebrow{color:rgba(255,255,255,.6)}
.plan-headline{margin:10px 0 10px;font-size:clamp(24px,3.2vw,34px);line-height:1.12;letter-spacing:-.025em;font-weight:500;max-width:26ch;text-wrap:balance}
.plan-detail{margin:0 0 22px;max-width:70ch;color:rgba(255,255,255,.7);font-size:15px;line-height:1.55}
.plan-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;position:relative}
.plan-step{display:grid;gap:10px;align-content:start}
.plan-when{display:flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.plan-when i{width:10px;height:10px;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5)}
.plan-step.now .plan-when{color:#fff;font-weight:600}
.plan-step.now .plan-when i{background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.14)}
.plan-card{display:grid;gap:10px;align-content:start;height:100%;padding:18px;border-radius:18px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.plan-step.now .plan-card{background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.plan-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.plan-card .mark-row{margin:0;color:#fff}
.plan-card .level-tag{background:rgba(255,255,255,.12);color:rgba(255,255,255,.85)}
.plan-card h3{margin:0;font-size:17px;font-weight:600;letter-spacing:-.01em}
.plan-card>p{margin:0;font-size:14px;line-height:1.5;color:rgba(255,255,255,.72)}
.plan-outcome{display:flex;gap:8px;align-items:flex-start;margin:2px 0 0!important;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.07);color:#fff!important;font-size:14px}
.plan-outcome .icon{width:16px;height:16px;flex-shrink:0;margin-top:2px}
.plan-outcome small{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.plan-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:4px}
.plan-page .btn-paper{background:rgba(255,255,255,.12);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.plan-page .btn-ink{background:#fff;color:#0c0c0d}
.plan-page .text-btn{color:rgba(255,255,255,.75)}
.plan-basis{margin-top:24px;padding-top:18px;border-top:1px solid rgba(255,255,255,.12);display:grid;gap:10px}
.basis-chips{display:flex;flex-wrap:wrap;gap:8px}
.basis-chip{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.08);color:rgba(255,255,255,.85);font-size:13px;transition:background .2s}
.basis-chip:hover{background:rgba(255,255,255,.16)}
.basis-chip .icon{width:14px;height:14px}
.also-list{display:grid;gap:8px;margin-bottom:22px}
.also{display:flex;align-items:center;gap:14px;min-width:0;padding:14px 16px;border-radius:16px;background:var(--paper-hi);box-shadow:inset 0 0 0 1px var(--line-2);text-align:left;transition:transform .3s var(--spring)}
.also:hover{transform:translateY(-1px)}
.also>span:nth-child(2){flex:1;display:flex;flex-direction:column;min-width:0}
.also strong{font-weight:500}
.also small{color:var(--mute);font-size:13px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
@media (max-width:900px){.plan-page{padding:24px 20px}.plan-steps{grid-template-columns:1fr}}

/* Create: ideas first */
.ideas{display:grid;gap:8px;margin:4px 0 6px}
.idea{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:16px;background:var(--paper-hi);box-shadow:inset 0 0 0 1px var(--line-2);text-align:left;transition:box-shadow .2s,transform .3s var(--spring)}
.idea:hover{box-shadow:inset 0 0 0 1.5px var(--ink);transform:translateY(-1px)}
.idea-mark{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;flex-shrink:0;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line-2)}
.idea-mark .icon{width:18px;height:18px}
.idea-text{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.idea-text strong{font-weight:500;font-size:15px}
.idea-text small{color:var(--mute);font-size:13px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.idea>.icon{width:16px;height:16px;color:var(--mute)}
.or-line{display:flex;align-items:center;gap:12px;margin:14px 0 6px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.or-line::before,.or-line::after{content:"";flex:1;height:1px;background:var(--line-2)}

/* Cold email, Level A: funnel, hot leads, one-tap replies, booking link, automated sending soon */
.lead-top-row{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin-bottom:14px;container-type:inline-size}
.lead-top-row .soon-card{margin:0}
.lead-funnel{list-style:none;margin:0;padding:20px 22px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-radius:20px;background:var(--paper-hi);box-shadow:inset 0 0 0 1px var(--line-2)}
.lead-funnel li{display:grid;gap:6px;align-content:start;min-width:0;padding:0 14px}
.lead-funnel li:first-child{padding-left:0}.lead-funnel li:last-child{padding-right:0}
.lead-funnel li+li{border-left:1px solid var(--line)}
.lf-label{font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lead-funnel strong{font-size:30px;line-height:1;font-weight:500;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.lf-bar{display:block;height:4px;border-radius:99px;background:var(--line)}
.lf-bar i{display:block;height:100%;width:var(--w);border-radius:inherit;background:var(--ink-3);transition:width .8s var(--ease)}
.lead-funnel .goal .lf-bar i{background:var(--ink)}
.lead-funnel .goal .lf-label{color:var(--ink)}
.lead-funnel small{font-size:12px;color:var(--mute);min-height:1.3em}
.lead-funnel small b{font-weight:600;color:var(--ink-2)}
@media (prefers-reduced-motion:reduce){.lf-bar i{transition:none}}
.soon-float{margin:0;align-content:start;box-shadow:0 18px 40px -24px rgba(0,0,0,.35);animation:soon-bob 6s ease-in-out infinite}
.soon-float strong{font-size:16px;font-weight:600}
.soon-float p{font-weight:400;font-size:13.5px;color:var(--ink-2);line-height:1.45}
@keyframes soon-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@media (prefers-reduced-motion:reduce){.soon-float{animation:none}}
.booking-card{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;margin-bottom:14px}
.booking-card>div:first-child{display:grid;gap:2px;flex:1 1 260px}
.booking-card small{color:var(--mute);font-size:13px}
.booking-row{display:flex;gap:8px;flex:1 1 300px}
.booking-row input{flex:1;min-width:0}
.hot-leads{display:grid;gap:10px;margin-bottom:14px}
.hot-leads .eyebrow{display:inline-flex;align-items:center;gap:6px}
.hot-leads .eyebrow .icon,.lead-card .badge .icon,.leads-summary.hot .eyebrow .icon{width:13px;height:13px}
.lead-card.st-hot{box-shadow:inset 0 0 0 1.5px var(--ink)}
.lead-card.st-no,.lead-card.st-meeting{opacity:.72}
.lead-card .badge{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.lead-q{font-size:13px;color:var(--mute)}
.chip-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:999px;background:var(--paper-hi);box-shadow:inset 0 0 0 1px var(--line-2);font-size:13.5px;color:var(--ink);transition:box-shadow .2s}
.chip-btn:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.chip-btn .icon{width:14px;height:14px}
.leads-summary.hot{box-shadow:inset 0 0 0 1.5px var(--ink)}
.leads-summary .eyebrow{display:inline-flex;align-items:center;gap:6px}
@media (max-width:760px){.lead-top-row{grid-template-columns:1fr}.lead-funnel{padding:14px 16px}.lead-funnel small{font-size:11px}}

/* ════════════ RESULTS ════════════ */
.results-hero{margin:18px 0 18px;padding:28px 32px 22px;border-radius:26px;background:linear-gradient(180deg,#1b1b1e,#0c0c0d);color:var(--paper-hi);box-shadow:0 30px 60px -36px rgba(0,0,0,.6);display:grid;gap:10px}
.results-hero .eyebrow{color:rgba(255,255,255,.6)}
.rh-main{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px}
.rh-head{margin:0;font-size:clamp(30px,4.4vw,50px);line-height:1.02;letter-spacing:-.03em;font-weight:500}
.rh-head strong{font-weight:500;font-variant-numeric:tabular-nums}
.rh-facts{margin:8px 0 0;color:rgba(255,255,255,.7);font-size:15px}
.rh-trend{display:grid;gap:6px;justify-items:end}
.rh-weeks{display:flex;align-items:flex-end;gap:5px;height:54px}
.rh-weeks i{width:12px;height:var(--h);border-radius:4px;background:rgba(255,255,255,.28)}
.rh-weeks i.now{background:#fff}
.rh-trend small{color:rgba(255,255,255,.7);font-size:12.5px}
.quick-log{display:grid;gap:10px;margin-top:12px;padding-top:14px;border-top:1px solid rgba(255,255,255,.12)}
.quick-log>span{font-size:13.5px;color:rgba(255,255,255,.7)}
.quick-row{display:flex;flex-wrap:wrap;gap:8px}
.quick-row select{height:36px;padding:0 12px;border-radius:999px;background:rgba(255,255,255,.1);color:#fff;border:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);font-size:13.5px;max-width:220px}
.quick-row select option{color:#0c0c0d}
.quick-btn{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:999px;background:#fff;color:#0c0c0d;font-size:13.5px;font-weight:500;transition:transform .2s var(--spring)}
.quick-btn:active{transform:scale(.96)}
.quick-btn .icon{width:14px;height:14px}
.quick-btn.ghost{background:rgba(255,255,255,.1);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.decision-card{display:grid;gap:8px;justify-items:start;padding:22px 24px;margin-bottom:22px;box-shadow:inset 0 0 0 1.5px var(--ink)}
.decision-card .eyebrow{display:inline-flex;align-items:center;gap:6px}
.decision-card .eyebrow .icon{width:13px;height:13px}
.decision-card h2{margin:0;font-size:22px;letter-spacing:-.02em}
.decision-card p{margin:0;color:var(--ink-2);max-width:62ch}
.decision-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:6px}
.working-list{display:grid;gap:10px}
.working-note{margin:8px 0 0}
.work-row{padding:16px 18px;display:grid;gap:14px}
.work-row.best{box-shadow:inset 0 0 0 1.5px var(--ink)}
.work-top{display:flex;align-items:center;gap:12px}
.work-name{flex:1;min-width:0;display:grid;gap:2px}
.work-name h3{margin:0;font-size:16px;font-weight:600;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.work-name small{color:var(--mute);font-size:13px}
.funnel-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:10px}
.funnel-steps li{display:grid;gap:3px}
.fs-bar{display:block;height:6px;border-radius:99px;background:var(--line)}
.fs-bar i{display:block;height:100%;width:var(--w);border-radius:inherit;background:var(--ink)}
.funnel-steps strong{font-size:20px;font-weight:500;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.funnel-steps small{font-size:12px;color:var(--mute)}
.hub-section .funnel-steps{margin-top:16px}
.results-pair{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:22px 0}
.wins-card,.did-card{padding:20px 22px;display:grid;gap:12px;align-content:start}
.wins-card h2,.did-card h2{margin:0;font-size:20px}
.win-list,.did-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.win-list li{display:flex;gap:12px;align-items:flex-start}
.win-list li>span:last-child{display:grid;gap:1px}
.win-list strong{font-weight:500;font-size:14.5px}
.win-list small{color:var(--mute);font-size:12.5px}
.win-dot{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;flex-shrink:0;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line-2)}
.win-meeting .win-dot,.win-hot .win-dot{background:var(--ink);color:#fff;box-shadow:none}
.win-dot .icon{width:14px;height:14px}
.did-list li{display:flex;align-items:baseline;gap:10px}
.did-list strong{min-width:2.4ch;font-size:20px;font-weight:500;font-variant-numeric:tabular-nums}
.did-list span{color:var(--ink-2);font-size:14.5px}
.did-total{display:flex;gap:10px;align-items:flex-start;margin:4px 0 0;padding:12px 14px;border-radius:14px;background:var(--paper)}
.did-total .icon{width:16px;height:16px;margin-top:3px}
.did-total span{display:grid;gap:1px}
.did-total small{color:var(--mute);font-size:12.5px}
@media (max-width:760px){.results-hero{padding:22px 20px 18px}.results-pair{grid-template-columns:1fr}.rh-trend{justify-items:start}}

/* First run: Distrove gets the business started */
.first-run{display:grid;gap:10px;padding:24px 26px;margin-bottom:22px;box-shadow:inset 0 0 0 1.5px var(--ink)}
.strategy-changes p{margin:0}
.pw-keep{display:grid;gap:12px;text-align:left}.pw-keep h2{margin:0}.pw-keep p{margin:0;line-height:1.55}.pw-keep .google-btn{justify-content:center}.pw-keep .pw-fine{color:var(--mute);opacity:1;text-align:center}
.pw-redact{filter:blur(6px);user-select:none;pointer-events:none;opacity:.85}
.pw-home{margin:0 0 28px}.pw-home .pw-stage{margin:0}
.scorecard,.challenged{padding:clamp(20px,3vw,32px);margin:24px 0;display:grid;gap:12px}.scorecard h2,.challenged h2{margin:0}.scorecard>p,.challenged>p{margin:0;line-height:1.6}
.score-list{display:grid;gap:10px}.score-item{border-radius:16px;box-shadow:inset 0 0 0 1px var(--line);padding:4px 16px}.score-item summary{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center;padding:12px 0;cursor:pointer;list-style:none}.score-item summary::-webkit-details-marker{display:none}.score-item summary small{grid-column:1/-1;color:var(--mute);line-height:1.5}.score-name{font-weight:600}
.score-grid{margin:0 0 12px;display:grid;gap:10px}.score-row{display:grid;grid-template-columns:minmax(150px,220px) 1fr;gap:12px;padding-top:10px;border-top:1px solid var(--line)}.score-row dt{font-size:13px;color:var(--mute)}.score-row dd{margin:0;display:flex;flex-wrap:wrap;gap:6px 10px;align-items:baseline}.score-why{flex:1 1 220px;font-size:15px;line-height:1.5}
.rating{font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line)}.rating.r-strong{background:var(--ink);color:var(--paper,#f4f4f2);box-shadow:none}.rating.r-unknown{color:var(--mute)}
.basis-tag{font-size:12px;padding:2px 8px;border-radius:999px;background:rgba(12,12,13,.05);color:var(--ink);text-decoration:none}.basis-tag.muted{color:var(--mute)}.basis-tag.ev:hover{text-decoration:underline}
.why-here{padding:clamp(20px,3vw,32px);margin:24px 0;display:grid;gap:14px}.why-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}.why-list li{display:grid;gap:4px}.why-list li strong{font-size:13px;font-weight:500;color:var(--mute)}.why-list li span:not(.basis-tag){font-size:17px;line-height:1.5}.why-list .basis-tag{justify-self:start}
.not-now{display:grid;gap:8px;padding-top:14px;border-top:1px solid var(--line)}.not-now p{margin:0;line-height:1.5;color:var(--mute)}.not-now p strong{color:var(--ink);font-weight:600}
.scorecard-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;list-style:none;font-weight:600}.scorecard-toggle::-webkit-details-marker{display:none}.scorecard[open] .scorecard-toggle .icon{transform:rotate(180deg)}
.objections{list-style:none;margin:0;padding:0;display:grid;gap:10px}.objections li{display:grid;gap:2px;padding:12px 14px;border-radius:14px;box-shadow:inset 0 0 0 1px var(--line)}.objections li p{margin:0;line-height:1.5}
@media (max-width:640px){.score-row{grid-template-columns:1fr;gap:4px}}
.evidence-list{display:grid;gap:22px}.worked-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}.worked-list li{display:grid;gap:6px;padding:12px 14px;border-radius:14px;box-shadow:inset 0 0 0 1px var(--line)}.worked-top{display:flex;justify-content:space-between;gap:12px;align-items:baseline}.worked-top span{font:500 12px var(--mono);color:var(--mute)}.worked-bar{display:block;height:6px;border-radius:99px;background:rgba(12,12,13,.06);overflow:hidden}.worked-bar i{display:block;height:100%;background:var(--ink);border-radius:99px}.worked-list .text-btn{justify-self:start;font-size:13px}.evidence-list section{display:grid;gap:8px}.evidence-list ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}.evidence-list li{display:grid;gap:2px;padding:12px 14px;border-radius:14px;background:var(--card-bg);box-shadow:inset 0 0 0 1px var(--line)}.evidence-list li p{margin:0;line-height:1.5}.evidence-list .text-btn{justify-self:start;font-size:13px}.change-list{list-style:none;margin:4px 0;padding:0;display:grid;gap:8px}.change-list li{display:flex;align-items:center;gap:10px;font-weight:500}.change-list .mono{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line);font-size:11px;color:var(--mute)}
/* The plan's state and its goal, on the dark plan card (owner, 26 Oct 2026): the goal reads as a pill whose target
   locks on as the card arrives; the state dot is filled when tailored, hollow for the first draft, pulsing while tailoring. */
.plan-state{display:inline-flex;align-items:center;gap:8px}
.plan-state i{position:relative;top:-1px;width:8px;height:8px;border-radius:50%;flex:none}
.plan-state.tailored i{background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.14)}
.plan-state.draft i{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7)}
.plan-state.tailoring i{background:#fff;animation:ps-pulse 1.6s ease-out infinite}
@keyframes ps-pulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.55)}80%,100%{box-shadow:0 0 0 8px rgba(255,255,255,0)}}
.plan-goal{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;width:fit-content;max-width:100%;margin:14px 0 6px;padding:5px 14px 5px 5px;border-radius:999px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);color:rgba(255,255,255,.66);font-size:14px}
.plan-goal strong{color:#fff;font-weight:600}
.pg-target{position:relative;display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:#fff;color:#0c0c0d}
.pg-target .icon{width:15px;height:15px;stroke-width:2.2}
.pg-target i{position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 1.5px rgba(255,255,255,.75);opacity:0;pointer-events:none}
.pg-src{padding-left:10px;border-left:1px solid rgba(255,255,255,.16);font:500 10.5px var(--mono);letter-spacing:.07em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.plan-page.in .pg-target i{animation:pg-lock 1.1s var(--ease) .35s both}
.plan-page.in .pg-target i+i{animation-delay:.5s}
.plan-page.in .pg-target .icon{animation:pg-aim .9s var(--spring-pop) .3s both}
@keyframes pg-lock{0%{opacity:0;transform:scale(2.8)}40%{opacity:.85}100%{opacity:0;transform:scale(1)}}
@keyframes pg-aim{from{transform:scale(.4) rotate(-40deg);opacity:0}}
@media (max-width:560px){.plan-goal{border-radius:18px;padding-right:12px}.pg-src{border-left:0;padding-left:38px;width:100%;margin-top:-6px}}
@media (prefers-reduced-motion:reduce){.plan-state.tailoring i,.plan-page.in .pg-target i,.plan-page.in .pg-target .icon{animation:none}}
.first-run .eyebrow{display:inline-flex;align-items:center;gap:6px}
.first-run .eyebrow .icon{width:13px;height:13px}
.first-run h2{margin:0}
.first-run p{margin:0;max-width:60ch}
.first-run .scan-steps{margin:8px 0 0}
.first-run .step-text{display:grid;gap:1px}
.first-run .step-text small{font-size:12.5px;color:var(--mute);-webkit-text-fill-color:var(--mute)}

/* Weekly email: settings card and preview */
.weekly-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:12px}
.digest-preview{display:grid;gap:8px;padding:22px 24px;border-radius:18px;background:var(--paper-hi);box-shadow:inset 0 0 0 1px var(--line-2)}
.digest-preview h3{margin:0;font-size:22px;font-weight:600;letter-spacing:-.01em}
.digest-preview .dp-result{margin:0;font-size:16px;color:var(--ink)}
.digest-preview .eyebrow{margin-top:12px}
.digest-preview ul{margin:0;padding-left:18px;display:grid;gap:8px}
.digest-preview li small{display:block;color:var(--mute);font-size:13px}
.digest-preview p{margin:0}

/* ════════════ THIS WEEK AND CHANNELS ════════════ */
.goal-card{padding:24px 26px;border-radius:24px;background:var(--dark-bg);color:#fff;box-shadow:var(--dark-shadow);display:grid;gap:10px;margin:6px 0 8px}
.goal-card .eyebrow{color:rgba(255,255,255,.6)}
.goal-card h2{margin:0;font-size:clamp(26px,3.4vw,38px);font-weight:500;letter-spacing:-.03em}
.gc-top,.gc-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.gc-foot{font-size:14px;color:rgba(255,255,255,.75)}.gc-foot strong{color:#fff}
.gc-foot .text-btn{color:rgba(255,255,255,.75)}
.gc-chip{padding:6px 12px;border-radius:99px;background:rgba(255,255,255,.14);font-size:12.5px;font-weight:500}
.gc-bar{height:8px;border-radius:99px;background:rgba(255,255,255,.14);overflow:hidden}.gc-bar i{display:block;height:100%;width:var(--w);background:#fff;border-radius:inherit}
.queue{display:grid;gap:8px}
.q-row{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:18px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line-2)}
.q-row.hot{box-shadow:inset 0 0 0 1.5px var(--ink)}
.q-text{flex:1;display:grid;gap:2px;min-width:0}.q-text strong{font-weight:500;font-size:15.5px}.q-text small{color:var(--mute);font-size:13px}
.q-act{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.q-act .checkin-taps{display:flex;gap:6px;flex-wrap:wrap}.q-act .checkin-taps .btn{padding:7px 12px;font-size:13px}
.q-snooze{font-size:12.5px;color:var(--mute)}
.caught-up-card{display:grid;gap:6px;justify-items:start;padding:18px 20px}
/* Needs you: one card; the first thing on top, the rest as quiet rows separated by hairlines. */
.needs{border-radius:22px;background:var(--card);box-shadow:var(--card-shadow);overflow:hidden}
.need-row{display:flex;align-items:center;gap:14px;padding:13px 18px;box-shadow:inset 0 1px 0 var(--line)}
.need-row:first-child{box-shadow:none}
.need-ico{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;flex:none;background:var(--paper-hi);color:var(--ink-3);box-shadow:inset 0 0 0 1px var(--line)}
.need-ico .icon{width:16px;height:16px}
.need-text{flex:1;display:grid;gap:2px;min-width:0}.need-text strong{font-weight:500;font-size:14.5px}
.need-text small{color:var(--mute);font-size:12.5px;line-height:1.45;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.need-act{display:flex;align-items:center;gap:10px;flex:none}
.need-act .checkin-taps{display:flex;gap:6px}.need-act .checkin-taps .btn{padding:7px 12px;font-size:13px}
.need-snooze{font-size:12px;color:var(--mute)}
.need-first{padding:20px 20px 20px 18px;background:var(--paper-hi)}
/* A quiet second way under a step's reason (“Or send them yourself”): small, muted, the ink underline on hover. */
/* What a held channel waits on (audit 6 Nov 2026, R1): quiet in its first week, in ink once nothing new has come for a week. */
.need-held{display:flex;align-items:flex-start;gap:6px;margin-top:5px;font-size:12px;line-height:1.45;color:var(--mute)}
.need-held .icon{flex:none;width:12px;height:12px;margin-top:2px}
.need-held.is-late{color:var(--ink)}.need-held.is-late .icon{stroke-width:2.4}
/* The first step's reason is read in full, up to four lines (a phone cut it at two). */
.need-first .need-text small{-webkit-line-clamp:4}
.need-text .need-alt{justify-self:start;margin-top:5px;font-size:12.5px;color:var(--mute);gap:5px}.need-text .need-alt:hover{color:var(--ink)}.need-text .need-alt .i-swap,.need-text .need-alt .i-swap .icon{width:13px;height:13px}
.need-first .need-ico{width:40px;height:40px;border-radius:13px;background:#fff;color:var(--ink)}.need-first .need-ico .icon{width:19px;height:19px}
.need-first .need-text strong{font-size:16.5px}.need-first .need-text small{font-size:13.5px}.need-first .eyebrow{margin-bottom:2px}
.need-list{box-shadow:inset 0 1px 0 var(--line)}
.need-more{display:block;width:100%;padding:12px 18px;text-align:left;font-size:13px;font-weight:500;color:var(--ink-3);box-shadow:inset 0 1px 0 var(--line)}.need-more:hover{color:var(--ink)}
.wk-list{display:grid;gap:10px}.wk-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:14px 16px;border-radius:14px;background:var(--paper-hi);box-shadow:inset 0 0 0 1px var(--line-2)}
.wk-row .checkin-taps{display:flex;gap:6px}
.ch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin-bottom:8px}
.ch-card{display:grid;gap:6px;align-content:start;text-align:left;padding:18px;border-radius:20px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line-2);transition:transform .3s var(--spring),box-shadow .2s}
.ch-card:hover{transform:translateY(-2px)}
.ch-card.best{box-shadow:inset 0 0 0 1.5px var(--ink)}
.ch-card.add{background:transparent;box-shadow:inset 0 0 0 1.5px var(--line-2)}
.ch-top{display:flex;justify-content:space-between;align-items:center}
.ch-card strong{margin-top:6px;font-size:17px;font-weight:600}.ch-card small{color:var(--mute);font-size:13.5px;line-height:1.45}
.ch-line{display:grid;gap:2px;margin-top:8px;padding-top:10px;border-top:1px solid var(--line);font-size:13px;color:var(--ink-2)}
.ch-state{margin:-6px 0 14px}
.why-card{padding:16px 18px;border-radius:18px;background:var(--paper-hi);box-shadow:inset 0 0 0 1px var(--line-2);margin-bottom:18px}.why-card p{margin:6px 0 0;font-size:15.5px;max-width:70ch}
.batch-card{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:24px 26px;border-radius:24px;background:var(--card);box-shadow:inset 0 0 0 1.5px var(--ink);margin-bottom:14px}
.batch-card h2{margin:6px 0;font-size:28px;font-weight:600;letter-spacing:-.02em}.batch-card p{margin:0;color:var(--ink-2);max-width:60ch}
.tw-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.also-card,.rhythm-card{padding:18px 20px;display:grid;gap:8px;align-content:start}
.tw-list{margin:4px 0 0;padding-left:18px;display:grid;gap:6px;font-size:14.5px}.tw-list .text-btn{font-size:13px;margin-left:4px}
.rc-actions{display:flex;gap:14px}
.plan-details summary{display:flex;justify-content:space-between;align-items:center;cursor:pointer;list-style:none}
.plan-details summary::-webkit-details-marker{display:none}
.plan-details[open] summary{margin-bottom:12px}
@media (max-width:760px){.tw-grid{grid-template-columns:1fr}.q-row{flex-wrap:wrap}.q-act{width:100%;justify-content:flex-start}.need-row{flex-wrap:wrap}.need-act{width:100%;padding-left:46px}.need-first .need-act{padding-left:54px}}
/* Prepared channel: the full plan folded away */
.prep-more{margin-top:14px}
.prep-more summary{cursor:pointer;color:rgba(255,255,255,.8);font-size:14px;text-decoration:underline;text-underline-offset:3px}
.prep-more[open] summary{margin-bottom:12px}

/* ════════════ PUBLIC SITE: FOR YOUR BUSINESS, TEAM, EXAMPLE, PRICING ════════════ */

.hc-logo{width:20px;height:20px;display:grid;place-items:center}.hc-logo .icon,.hc-logo svg{width:16px;height:16px}
.kinds{padding:clamp(80px,10vw,140px) 0}
/* Kinds of business (owner, 15 Nov 2026: “extremely beautiful and nicely animated”): the site's sliding pill, which fills
   as it waits to move on; a switch that fades out and brings the new kind in row by row; the dark card ticking through its week. */
.kind-seg{width:max-content;margin:28px 0 18px;padding:5px}
.kind-seg button{height:44px;padding:0 20px;font-size:14.5px}
.kind-fill{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,rgba(255,255,255,.06),rgba(255,255,255,.26));clip-path:inset(0 100% 0 0 round 999px);opacity:0}
.kind-seg.kind-auto .kind-fill{animation:kind-fill 9.5s linear forwards}
.kind-seg:is(.kind-hold,.kind-off) .kind-fill{animation-play-state:paused}
@keyframes kind-fill{0%{opacity:1;clip-path:inset(0 100% 0 0 round 999px)}92%{opacity:1}100%{opacity:.6;clip-path:inset(0 0 0 0 round 999px)}}
.kind-panel{padding:clamp(22px,3vw,34px);border-radius:28px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line-2),0 30px 60px -40px rgba(0,0,0,.25);display:grid;gap:22px;overflow:hidden}
.kind-panel>*{transition:opacity .24s var(--ease-in),transform .24s var(--ease-in),filter .24s var(--ease-in)}
.kind-panel.kp-out>*{opacity:0;transform:translateY(-8px);filter:blur(6px)}
.kind-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.kind-head h3{margin:0;font-size:clamp(24px,3vw,32px);font-weight:600;letter-spacing:-.03em}.kind-head small{color:var(--mute);font-size:14.5px}
.kind-aim{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:99px;background:var(--ink);color:#fff;font-size:14px;white-space:nowrap;overflow:hidden}.kind-aim .icon{width:15px;height:15px;flex-shrink:0}
.kind-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:22px}
.kind-channels{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.kind-channels li{display:flex;gap:14px;align-items:center;padding:14px 16px;border-radius:18px;background:var(--paper-hi);box-shadow:inset 0 0 0 1px var(--line-2);transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .7s var(--ease),box-shadow .35s,background .35s}
.kind-channels li.tilting{background:#fff;box-shadow:inset 0 0 0 1px var(--line-2),0 18px 30px -22px rgba(0,0,0,.35);transition:transform .2s var(--ease),box-shadow .35s,background .35s}
.kind-channels li>span:last-child{display:grid;gap:2px}.kind-channels strong{font-size:16px;font-weight:600}.kind-channels small{color:var(--mute);font-size:14px;line-height:1.45}
.kind-ico{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex-shrink:0;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line-2)}.kind-ico svg{width:20px;height:20px}
.kind-does{padding:20px;border-radius:20px;background:var(--dark-bg);color:#fff;display:grid;gap:14px;align-content:start}
.kind-does .eyebrow{color:rgba(255,255,255,.65);display:inline-flex;gap:6px;align-items:center}.kind-does .eyebrow .icon{width:13px;height:13px}
.kind-does ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}.kind-does li{display:flex;gap:10px;font-size:15px;line-height:1.45}
.kd-tick{position:relative;display:grid;place-items:center;width:18px;height:18px;flex-shrink:0;margin-top:2px}.kd-tick .icon{width:16px;height:16px}
.kd-ring{position:absolute;inset:2px;border-radius:50%;border:1.6px solid rgba(255,255,255,.2);border-top-color:#fff;opacity:0}
.kd-piece{margin:0;padding:13px 15px 14px;border-radius:16px;background:rgba(255,255,255,.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 0 0 1px rgba(255,255,255,.07);display:grid;gap:8px}
.kd-piece figcaption{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12.5px;color:var(--fog)}
.kd-piece figcaption>span:first-child{display:inline-flex;align-items:center;gap:7px}.kd-piece figcaption svg{width:14px;height:14px}
.kd-ex{padding:3px 8px;border-radius:99px;background:rgba(255,255,255,.08);font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase}
.kd-type{margin:0;display:grid;font-size:14.5px;line-height:1.5}.kd-type>span{grid-area:1/1}
.kind-panel.kd-armed .kd-full,.kd-type.typing .kd-full{color:transparent}
.kd-type.typing .kd-typed::after,.kind-panel.kd-armed .kd-typed::after{content:'';display:inline-block;width:2px;height:1.05em;margin-left:2px;vertical-align:-.17em;border-radius:1px;background:#fff;animation:kd-caret 1.05s steps(1) infinite}
.kind-panel.kd-armed .kd-ring{opacity:1}
.kind-panel.kd-armed .kd-tick .icon{opacity:0}
.kind-panel.kd-armed .kd-tasks li>span:last-child{color:var(--fog-2)}
.kind-panel.kd-play .kd-ring{opacity:1;animation:kd-spin .75s linear infinite,kd-ring-out .3s var(--ease) forwards;animation-delay:0s,calc(.45s + var(--i)*.7s)}
.kind-panel.kd-play .kd-tick .icon{animation:kd-check .6s var(--spring-pop) backwards;animation-delay:calc(.5s + var(--i)*.7s)}
.kind-panel.kd-play .kd-tick .icon path{stroke-dasharray:24;animation:kd-draw .45s var(--ease) backwards;animation-delay:calc(.52s + var(--i)*.7s)}
.kind-panel.kd-play .kd-tasks li>span:last-child{animation:kd-lit .6s var(--ease) backwards;animation-delay:calc(.5s + var(--i)*.7s)}
@keyframes kd-spin{to{rotate:360deg}}
@keyframes kd-ring-out{to{opacity:0;scale:.4}}
@keyframes kd-check{from{opacity:0;scale:.3}}
@keyframes kd-draw{from{stroke-dashoffset:24}}
@keyframes kd-lit{from{color:var(--fog-2)}}
@keyframes kd-caret{50%{opacity:0}}
.kind-panel.kp-in .kind-title>div>*,.kind-panel.kp-in .kind-aim>*{animation:kp-rise .7s var(--ease) backwards}
.kind-panel.kp-in .kind-head small{animation-delay:.06s}
.kind-panel.kp-in .kind-channels li{animation:kp-rise .8s var(--ease) backwards;animation-delay:calc(.1s + var(--i)*.075s)}
.kind-panel.kp-in .kind-ico svg{animation:kp-pop .7s var(--spring-pop) backwards;animation-delay:calc(.22s + var(--i)*.075s)}
.kind-panel.kp-in .kind-does{animation:kp-rise .85s var(--ease) backwards;animation-delay:.16s}
@keyframes kp-rise{from{opacity:0;transform:translateY(14px);filter:blur(6px)}}
@keyframes kp-pop{from{opacity:0;scale:.4;rotate:-14deg}}
.kind-you{margin:0;font-size:13.5px;color:rgba(255,255,255,.6)}
/* The emblem: drawn in as the panel arrives, then one small gesture on a slow loop. */
.kind-title{display:flex;align-items:center;gap:18px;min-width:0}
.kind-em{--em-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 1px rgba(255,255,255,.06),0 16px 28px -14px rgba(0,0,0,.55);position:relative;flex-shrink:0;display:grid;place-items:center;width:64px;height:64px;border-radius:20px;overflow:hidden;color:#fff;background:radial-gradient(120% 90% at 30% 0%,#3a3a3f 0%,#141416 58%,#0c0c0d 100%);box-shadow:var(--em-shadow)}
.kind-em::after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.26) 48%,transparent 66%);transform:translateX(-130%)}
.kind-em svg{width:34px;height:34px;overflow:visible}
.kind-em :is(.em-dots,.em-lights) circle,.kind-em .em-cursor{fill:#fff;stroke:none}
.kind-em .em-cursor{stroke:#141416;stroke-width:1.1;paint-order:stroke}
.kind-em .em-track{opacity:.28}
.kind-em :is(.em-ring,.em-pin,.em-dots circle,.em-bars path,.em-cursor,.em-drop,.em-fill){transform-box:fill-box}
.in>.kind-panel .kind-em{animation:em-in .95s var(--spring-pop) backwards,em-halo 1.6s var(--ease) .3s}
.in>.kind-panel .kind-em::after{animation:em-sheen 1.3s var(--ease) .55s}
.in>.kind-panel .kind-em .d{stroke-dasharray:1;animation:em-draw 1s var(--ease) backwards;animation-delay:calc(.28s + var(--s)*.2s)}
.in>.kind-panel .kind-em :is(.em-ring,.em-dots,.em-lights,.em-bars,.em-cursor,.em-drop,.em-track,.em-fill){animation:em-fade .5s var(--ease) .85s backwards}
.kind-em .em-ring{transform-origin:center;animation:em-ripple 3s var(--ease) 1.2s infinite!important;opacity:0}
.kind-em .em-pin{animation:em-bob 3s var(--ease-io) 1.2s infinite!important}
.kind-em .em-dots circle{animation:em-dot 1.5s var(--ease-io) infinite!important}
.kind-em .em-dots circle:nth-child(2){animation-delay:.16s!important}.kind-em .em-dots circle:nth-child(3){animation-delay:.32s!important}
.kind-em .em-bars path{transform-origin:bottom;animation:em-grow 3.2s var(--ease) infinite!important;animation-delay:calc(1s + var(--b)*.14s)!important}
.kind-em .em-cursor{transform-origin:0 0;animation:em-click 3.2s var(--ease) 1s infinite!important}
.kind-em .em-drop{animation:em-drop 2.8s var(--ease) 1s infinite backwards!important}
.kind-em .em-fill{transform-origin:left;animation:em-install 2.8s var(--ease) 1s infinite backwards!important}
@keyframes em-in{from{opacity:0;transform:scale(.4) rotate(-18deg);filter:blur(6px)}}
@keyframes em-halo{0%{box-shadow:var(--em-shadow),0 0 0 0 rgba(12,12,13,.3)}100%{box-shadow:var(--em-shadow),0 0 0 18px rgba(12,12,13,0)}}
@keyframes em-sheen{from{transform:translateX(-130%)}to{transform:translateX(130%)}}
@keyframes em-draw{from{stroke-dashoffset:1}}
@keyframes em-fade{from{opacity:0}}
@keyframes em-bob{0%,58%,100%{transform:translateY(0)}28%{transform:translateY(-2.4px)}}
@keyframes em-ripple{0%,52%{opacity:0;transform:scale(.35)}58%{opacity:.95;transform:scale(.5)}100%{opacity:0;transform:scale(1.45)}}
@keyframes em-dot{0%,60%,100%{transform:translateY(0);opacity:.55}30%{transform:translateY(-1.6px);opacity:1}}
@keyframes em-grow{0%{transform:scaleY(.25)}35%,80%{transform:scaleY(1)}100%{transform:scaleY(.25)}}
@keyframes em-click{0%,30%,100%{transform:translate(0,0) scale(1)}14%{transform:translate(-1.4px,-1.2px) scale(1)}20%{transform:translate(-1.4px,-1.2px) scale(.82)}}
@keyframes em-drop{0%{transform:translateY(-4px);opacity:0}25%,55%{transform:translateY(0);opacity:1}75%,100%{transform:translateY(2px);opacity:0}}
@keyframes em-install{0%,30%{transform:scaleX(0)}70%,88%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
@media (prefers-reduced-motion:reduce){.kind-em,.kind-em *,.kind-em::after{animation:none!important}.kind-em .em-ring{opacity:0}}
@media (max-width:620px){.kind-title{gap:14px}.kind-em{width:54px;height:54px;border-radius:17px}.kind-em svg{width:29px;height:29px}}
/* The team, one week passed hand to hand (owner, 26 Oct 2026; example). A light runs along Forma's week above the
   cards; as it reaches each day the card wakes and its work plays: the plan, the proof, the draft, the founder's
   approval on the line, then the send and the reply. On phones each card plays as it scrolls in. */
.team-relay{position:relative;margin-top:6px}
.team .team-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.team-card{--mx:50%;--my:0%;position:relative;display:grid;grid-template-rows:auto 1fr auto;gap:14px;padding:12px 12px 18px;border-radius:24px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);transition:transform .55s var(--spring),box-shadow .4s}
.team-card::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(280px circle at var(--mx) var(--my),rgba(255,255,255,.09),transparent 65%);opacity:0;transition:opacity .4s;pointer-events:none}
.team-card::after{content:"";position:absolute;inset:-1px;border-radius:inherit;box-shadow:0 0 0 1.5px rgba(255,255,255,.65),0 0 46px -8px rgba(255,255,255,.3);opacity:0;pointer-events:none}
@media (hover:hover) and (prefers-reduced-motion:no-preference){.team-card:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}.team-card:hover::before{opacity:1}}
.tc-text{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;align-content:start;gap:10px 12px;padding:0 8px}
.tc-text p{grid-column:1/-1}
.team-ico{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:rgba(255,255,255,.1)}.team-ico .icon{width:18px;height:18px}
.team-card h3{margin:0;font-size:19px;font-weight:600;letter-spacing:-.02em}.tc-text p{margin:0;color:rgba(255,255,255,.7);font-size:14.5px;line-height:1.5}
.tc-done{display:inline-flex;align-items:center;gap:7px;justify-self:start;margin:0 8px;padding:5px 11px 5px 8px;border-radius:999px;background:rgba(255,255,255,.08);color:rgba(255,255,255,.82);font:500 11px var(--mono);letter-spacing:.03em}
.tc-done .icon{width:12px;height:12px;stroke-width:2.4}
/* Each card's window onto its work */
.tc-art{position:relative;height:140px;box-sizing:border-box;padding:12px;border-radius:17px;background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.02));box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);overflow:hidden}
/* Strategist: the compass settles and the channels fall into order */
.tc-plan{display:grid;grid-template-columns:56px minmax(0,1fr);gap:12px;align-items:center}
.tc-compass{width:56px;height:56px;fill:none;stroke:rgba(255,255,255,.3);stroke-width:1.1}
.tc-compass .tick{stroke:rgba(255,255,255,.5)}
.tc-compass .needle{transform-origin:20px 20px;transform:rotate(58deg)}
.tc-compass .needle path{fill:#fff;stroke:none}.tc-compass .needle .s{fill:rgba(255,255,255,.3)}
.tc-compass .hub{fill:#0c0c0d;stroke:#fff;stroke-width:1.2}
.tc-plan ol{list-style:none;margin:0;padding:0;display:grid;gap:6px;min-width:0}
.tc-plan li{display:flex;align-items:center;gap:7px;height:28px;padding:0 6px 0 9px;border-radius:9px;background:rgba(255,255,255,.06);font-size:11.5px;color:rgba(255,255,255,.78);white-space:nowrap}
.tc-plan li svg{flex:none;width:12px;height:12px}
.tc-plan li span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.tc-plan li:first-child{background:#fff;color:#0c0c0d;font-weight:600}
.tc-plan li b{flex:none;padding:2px 6px;border-radius:999px;background:#0c0c0d;color:#fff;font-size:8.5px;font-weight:600}
/* Researcher: the sweep finds them, and the ad they keep paying for turns over */
.tc-scan{display:grid;grid-template-columns:74px minmax(0,1fr);gap:12px;align-items:center}
.tc-radar{position:relative;width:74px;height:74px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.08),transparent 72%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.tc-radar::before,.tc-radar::after{content:"";position:absolute;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.tc-radar::before{inset:14px}.tc-radar::after{inset:34.5px;background:#fff;box-shadow:none}
.tc-radar .sw{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,transparent 0deg,rgba(255,255,255,.26) 60deg,transparent 60.5deg);transform:rotate(-60deg)}
.tc-radar .bl{position:absolute;left:var(--bx);top:var(--by);width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:#fff;box-shadow:0 0 10px 1px rgba(255,255,255,.7)}
.tc-ad{margin:0;border-radius:11px;overflow:hidden;background:#fff;color:#0c0c0d;box-shadow:0 16px 30px -14px rgba(0,0,0,.9);transform:rotate(2.5deg)}
.tc-ad img{display:block;width:100%;height:66px;object-fit:cover}
.tc-ad figcaption{display:grid;gap:1px;padding:6px 8px 7px;line-height:1.2}
.tc-ad b{font-size:10.5px;font-weight:600}
.tc-ad small{display:inline-flex;align-items:center;gap:5px;font-size:9.5px;font-weight:500;color:var(--ink-3)}
.tc-ad small i{width:5px;height:5px;border-radius:50%;background:#0c0c0d}
/* Copywriter: the introduction types itself, in Forma's own words */
.tc-write{display:grid;align-content:start;gap:8px}
.tc-to{font-size:10.5px;color:rgba(255,255,255,.72)}
.tc-to small{margin-right:5px;font:500 9px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.42)}
.tc-lines{font-size:12.5px;line-height:1.45;color:#fff}
.tc-write .ln{display:block;white-space:nowrap}
.tc-write .ln:last-child::after{content:"";display:inline-block;width:1.5px;height:1.05em;margin-left:2px;background:#fff;vertical-align:-2px;animation:tc-blink 1.05s steps(1) infinite}
.tc-write mark{padding:0 1px;border-radius:2px;color:#fff;background:linear-gradient(transparent 56%,rgba(255,255,255,.3) 56%) no-repeat 0 0/100% 100%}
.tc-voice{position:absolute;right:10px;bottom:10px;padding:3px 8px;border-radius:999px;background:#fff;color:#0c0c0d;font-size:9.5px;font-weight:600}
/* Sales rep: approved, sent from Forma's address, and the reply comes back */
.tc-send{display:grid;align-content:start;gap:9px}
.tc-out{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:8px;align-items:center;padding:7px 8px;border-radius:12px;background:rgba(255,255,255,.07)}
.tc-env{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.1)}.tc-env .icon{width:14px;height:14px}
.tc-who{display:grid;min-width:0;line-height:1.25}.tc-who b{font-size:10.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tc-who small{font-size:9px;color:rgba(255,255,255,.5)}
.tc-st{display:grid;justify-items:end;font-size:9.5px;font-weight:600}
.tc-st>span{grid-area:1/1;display:inline-flex;align-items:center;gap:3px;padding:3px 7px;border-radius:999px;white-space:nowrap;opacity:0}
.tc-st .icon{width:10px;height:10px;stroke-width:2.6}
.tc-st>span:nth-child(1){background:rgba(255,255,255,.14)}.tc-st>span:nth-child(2){background:rgba(255,255,255,.08);color:rgba(255,255,255,.75)}
.tc-st>span:nth-child(3){opacity:1;background:#fff;color:#0c0c0d}
.tc-reply{display:flex;align-items:flex-end;gap:7px;margin-left:12px}
.tc-av{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#fff;color:#0c0c0d;font:600 10px var(--sans)}
.tc-bubble{padding:7px 10px;border-radius:13px 13px 13px 4px;background:rgba(255,255,255,.13);font-size:11.5px;line-height:1.3;color:#fff}
.tc-chip{justify-self:end;display:inline-flex;align-items:center;gap:5px;padding:4px 9px 4px 7px;border-radius:999px;background:#fff;color:#0c0c0d;font-size:10px;font-weight:600}.tc-chip .icon{width:11px;height:11px}
/* The week, above the cards: a light runs from day to day, and the founder's yes sits on the line before Thursday */
.team-track{position:relative;height:50px;margin:0 0 8px}
.tt-line,.tt-fill{position:absolute;left:0;right:0;top:12px;height:1.5px;border-radius:2px;background:rgba(255,255,255,.12)}
.tt-fill{background:linear-gradient(90deg,rgba(255,255,255,.15),rgba(255,255,255,.85));transform-origin:left}
.tt-spark{position:absolute;top:12.75px;left:100%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.14),0 0 20px 5px rgba(255,255,255,.45);opacity:0}
.tt-node{position:absolute;left:var(--x);top:12.75px;transform:translateX(-50%)}
.tt-node b{display:block;width:11px;height:11px;margin:-5.5px auto 0;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.12)}
.tt-node small{display:block;margin-top:9px;font:500 10px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.75);text-align:center}
.tt-approve{position:absolute;left:var(--x);top:1px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:5px;padding:5px 11px 5px 8px;border-radius:999px;background:#fff;color:#0c0c0d;font-size:11px;font-weight:600;white-space:nowrap;box-shadow:0 10px 26px -10px rgba(255,255,255,.4)}
.tt-approve .icon{width:12px;height:12px;stroke-width:2.6}
/* The week plays: the light runs, the days light up and each card wakes when it arrives */
.team-relay.in .tt-fill{animation:tt-fill 6.2s var(--ease-io) both}
.team-relay.in .tt-spark{animation:tt-spark 6.2s var(--ease-io) both}
.team-relay.in .tt-node b{animation:tt-on .5s var(--spring-pop) var(--t) both}
.team-relay.in .tt-node small{animation:tt-day .5s var(--ease) var(--t) both}
.team-relay.in .tt-approve{animation:tt-stamp .6s cubic-bezier(.2,1.5,.35,1) var(--t) both}
.team-card::after{animation:tc-glow 1.5s var(--ease) var(--at) both}
.team-card .tc-art{animation:tc-wake .6s var(--ease) var(--at) both}
.team-card .tc-done{animation:wk-in .5s var(--ease) calc(var(--at) + var(--dn,1.2s)) both}
.team-card .tc-compass .needle{animation:tc-needle 1.4s var(--ease) calc(var(--at) + .1s) both}
.team-card .tc-plan li{animation:wk-in .5s var(--ease) calc(var(--at) + .3s + var(--k)*.12s) both}
.team-card .tc-plan li b{animation:wk-flip .45s var(--spring-pop) calc(var(--at) + .95s) both}
.team-card .tc-radar .sw{animation:ch-sweep 1.2s var(--ease-io) calc(var(--at) + .05s) both,ch-sweep-on 6s linear calc(var(--at) + 1.25s) infinite}
.team-card .tc-radar .bl{animation:wk-flip .4s var(--spring-pop) calc(var(--at) + .35s) both}
.team-card .tc-radar .bl+.bl{animation-delay:calc(var(--at) + .8s)}
.team-card .tc-ad{animation:tc-turn .8s var(--spring) calc(var(--at) + .65s) both}
.team-card .tc-write .ln{animation:tc-type .42s steps(var(--c)) calc(var(--at) + .15s + var(--k)*.44s) both}
.team-card .tc-write mark{animation:tc-mark .5s var(--ease) calc(var(--at) + 1.45s) both}
.team-card .tc-voice{animation:wk-flip .45s var(--spring-pop) calc(var(--at) + 1.55s) both}
.team-card .tc-out{animation:wk-in .5s var(--ease) calc(var(--at) + .05s) both}
.team-card .tc-st>span:nth-child(1){animation:tc-show .65s var(--ease) calc(var(--at) + .1s) both}
.team-card .tc-st>span:nth-child(2){animation:tc-show .5s var(--ease) calc(var(--at) + .75s) both}
.team-card .tc-st>span:nth-child(3){animation:wk-flip .45s var(--spring-pop) calc(var(--at) + 1.25s) both}
.team-card .tc-env{animation:tc-fly .5s var(--ease) calc(var(--at) + .8s) both}
.team-card .tc-reply{animation:wk-rise .7s var(--spring) calc(var(--at) + 1.6s) both}
.team-card .tc-chip{animation:wk-flip .45s var(--spring-pop) calc(var(--at) + 2.05s) both}
@keyframes tt-fill{0%{transform:scaleX(0)}9.7%{transform:scaleX(.125)}32.3%{transform:scaleX(.375)}54.8%{transform:scaleX(.625)}78.2%{transform:scaleX(.75)}87.9%{transform:scaleX(.875)}100%{transform:scaleX(1)}}
@keyframes tt-spark{0%{left:0;opacity:0}3%{opacity:1}9.7%{left:12.5%}32.3%{left:37.5%}54.8%{left:62.5%}78.2%{left:75%}87.9%{left:87.5%}96%{opacity:1}100%{left:100%;opacity:0}}
@keyframes tt-on{from{transform:scale(.6);background:#0b0b0c;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4)}}
@keyframes tt-day{from{color:rgba(255,255,255,.35)}}
@keyframes tt-stamp{0%{opacity:0;transform:translateX(-50%) scale(1.7) rotate(-10deg)}60%{opacity:1;transform:translateX(-50%) scale(.94) rotate(2deg)}100%{opacity:1;transform:translateX(-50%)}}
@keyframes tc-glow{0%{opacity:0}22%{opacity:1}100%{opacity:0}}
@keyframes tc-wake{from{opacity:.3;filter:saturate(0) brightness(.8)}}
@keyframes tc-needle{0%{transform:rotate(-80deg)}35%{transform:rotate(100deg)}58%{transform:rotate(34deg)}78%{transform:rotate(68deg)}100%{transform:rotate(58deg)}}
@keyframes tc-turn{from{opacity:0;transform:perspective(520px) rotateY(-75deg) rotate(2.5deg) scale(.9)}}
@keyframes tc-type{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes tc-mark{from{background-size:0% 100%}}
@keyframes tc-blink{50%{opacity:0}}
@keyframes tc-show{0%{opacity:0;transform:scale(.75)}18%,82%{opacity:1;transform:none}100%{opacity:0}}
@keyframes tc-fly{40%{transform:translate(5px,-3px) rotate(-8deg)}}
/* Says it is an example, above the week line */
.team-example{position:absolute;right:0;top:-30px;color:rgba(255,255,255,.4);font-size:10.5px}
@media (max-width:900px){.team-example{position:static;display:block;margin:0 0 12px}}
/* Each card waits, paused, for the week to start (desktop: the whole relay in view, so it wakes as the light
   arrives); on phones and tablets each card waits until it is on screen itself. */
.team-relay .team-card::after,.team-relay .team-card *,.team-relay .team-card *::after{animation-play-state:paused!important}
.team-relay.in .team-card::after,.team-relay.in .team-card *,.team-relay.in .team-card *::after{animation-play-state:running!important}
/* Phones and tablets: no week line; each card plays as it scrolls in */
@media (max-width:900px){.team-track{display:none}.team .team-card{--at:.25s!important}.team-relay .team-card:not(.in)::after,.team-relay .team-card:not(.in) *,.team-relay .team-card:not(.in) *::after{animation-play-state:paused!important}}
@media (prefers-reduced-motion:reduce){.team-relay *,.team-relay *::after,.team-card::after{animation:none!important}}
.team-total{display:flex;gap:12px;align-items:flex-start;margin:22px 0 0;padding:16px 20px;border-radius:18px;background:rgba(255,255,255,.08);max-width:560px}
.team-total .icon{width:18px;height:18px;margin-top:3px}.team-total span{display:grid;gap:2px}.team-total small{color:rgba(255,255,255,.6);font-size:13px}
.example{padding:clamp(80px,10vw,140px) 0}
.ex-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:28px}
.ex-card{padding:22px;border-radius:24px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line-2);display:grid;gap:14px;align-content:start}
.ex-ad{border-radius:16px;background:#fff;box-shadow:0 1px 0 var(--line),0 12px 30px -20px rgba(0,0,0,.3);overflow:hidden}
.ex-ad-top{display:flex;gap:10px;align-items:center;padding:12px 14px}.ex-ad-top span:last-child{display:grid}.ex-ad-top strong{font-size:14px}.ex-ad-top small{color:var(--mute);font-size:12px}
.ex-av{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:#fff;font-weight:600}
.ex-ad>p{margin:0;padding:0 14px 12px;font-size:14px;color:var(--ink-2)}
.ex-ad-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 14px;background:var(--paper)}.ex-ad-foot span{padding:7px 12px;border-radius:8px;background:var(--paper-lo);font-size:13px;font-weight:500}
.ex-note{margin:0;font-size:14px;color:var(--ink-2)}
.ex-list{margin:0;padding-left:20px;display:grid;gap:12px}.ex-list li{display:grid;gap:2px}.ex-list small{color:var(--mute);font-size:13.5px;line-height:1.45}
.ex-dark{background:var(--dark-bg);color:#fff;box-shadow:var(--dark-shadow)}.ex-dark .eyebrow{color:rgba(255,255,255,.6)}
.ex-dark h3{margin:0;font-size:clamp(26px,3vw,34px);font-weight:600;letter-spacing:-.03em}.ex-dark p{margin:0;color:rgba(255,255,255,.75)}
.ex-cta{justify-self:start;padding:10px 16px;border-radius:99px;background:#fff;color:#0c0c0d;font-size:14px;font-weight:600}
.ex-people{list-style:none;margin:0;padding:0;display:grid;gap:10px}.ex-people li{display:grid;gap:4px;padding:12px 14px;border-radius:14px;background:var(--paper-hi)}
.ex-people li>span{display:flex;justify-content:space-between;gap:10px}.ex-people small{color:var(--mute);font-size:12.5px}.ex-people em{font-size:14px;color:var(--ink-2)}
.ex-cta-row{display:flex;align-items:center;gap:14px;margin-top:22px;color:var(--mute);font-size:14px}
.plans.plans-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.pricing-page{padding-top:clamp(130px,16vw,190px)}
@media (max-width:900px){.kind-grid,.ex-grid{grid-template-columns:1fr}.team .team-grid{grid-template-columns:1fr 1fr}.plans.plans-3{grid-template-columns:1fr}}
@media (max-width:560px){.team .team-grid{grid-template-columns:1fr}}
/* Hero: the longer headline stays on two lines; the live-run cards have room for their text */
.hero .hero-copy h1.display-xl{font-size:clamp(2.4rem,4.5vw,4.6rem)}
.hc-x{width:190px}
.hc-mail strong,.hc-x strong{font-size:14px;line-height:1.3}

/* Plans: settings card and the choose-a-plan dialog */
.billing-card h2 em{font-size:.8em;color:var(--mute)}
.plan-meters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:14px 0 4px}
.plan-meter{position:relative;display:grid;gap:4px;padding:14px 16px 18px;border-radius:16px;background:var(--paper-hi);box-shadow:inset 0 0 0 1px var(--line-2);overflow:hidden}
.plan-meter span{font-size:13px;color:var(--mute)}
.plan-meter strong{font-size:18px;font-weight:600;letter-spacing:-.01em}
.plan-meter i{position:absolute;left:0;bottom:0;height:3px;width:calc(var(--p) * 100%);background:var(--ink);transition:width .6s var(--ease)}
.plan-pick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:16px 0 10px}
.plan-option{display:grid;grid-template-rows:auto 1fr auto;gap:14px;padding:22px;border-radius:22px;background:var(--paper-hi);box-shadow:inset 0 0 0 1px var(--line-2)}
.plan-option>div{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.plan-option strong{font-size:18px;font-weight:600}
.plan-option .po-price{font-size:22px;font-weight:600;letter-spacing:-.02em}
.plan-option .po-price small{font-size:13px;font-weight:400;color:var(--mute)}
.plan-option ul{list-style:none;margin:0;padding:0;display:grid;align-content:start;gap:9px;font-size:14px}
.plan-option li{display:flex;gap:8px;align-items:flex-start}
.plan-option li .icon{width:15px;height:15px;flex:none;margin-top:2px}
.plan-option .btn{width:100%;align-self:end}
.plan-option.dark{background:linear-gradient(180deg,#1d1d20,#0b0b0c);color:#fff;box-shadow:var(--dark-shadow)}
.plan-option.dark .po-price small{color:rgba(255,255,255,.6)}
@media (max-width:640px){.plan-pick,.plan-meters{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.plan-meter i{transition:none}}
.plan-pick.single{grid-template-columns:minmax(0,420px);justify-content:center}

/* Pricing, v2: value first — per day, per person, and what every plan includes */
.plans.pv{align-items:stretch;gap:18px;max-width:1180px;margin:0 auto}
.pv-plan{position:relative;display:flex;flex-direction:column;padding:30px 30px 28px}
.pv-plan h3{margin:14px 0 20px}
.pv-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pv-tag{padding:5px 11px;border-radius:999px;font-size:12px;font-weight:500;letter-spacing:.01em;background:var(--paper-hi);box-shadow:inset 0 0 0 1px var(--line-2);white-space:nowrap}
.plan-dark .pv-tag{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);color:#fff}
.pv-day{margin:12px 0 0;min-height:2.9em;font-size:14px;line-height:1.45;color:var(--mute)}
.plan-dark .pv-day{color:var(--fog)}
.pv-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:3px 10px;margin:20px 0 0;padding:18px 20px;border-radius:20px;background:var(--paper-hi);box-shadow:inset 0 0 0 1px var(--line-2)}
.pv-hero strong{font-size:21px;font-weight:600;letter-spacing:-.025em}
.pv-hero strong{grid-area:1/1}.pv-hero span{grid-area:2/1/3/3;font-size:13.5px;color:var(--mute)}
.pv-unit{grid-area:1/2;padding:4px 10px;white-space:nowrap;border-radius:999px;font-family:inherit;font-style:normal;font-size:12.5px;font-weight:600;background:var(--ink);color:var(--paper-hi)}
.plan-dark .pv-hero{background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.13)}
.plan-dark .pv-hero span{color:var(--fog)}
.plan-dark .pv-unit{background:#fff;color:#0c0c0d}
.pv-plan ul{flex:1;align-content:start;margin:22px 0 26px;padding-top:22px;gap:12px}
.pv-plan li{align-items:flex-start;font-size:14.5px;line-height:1.4}
.pv-plan li .icon{flex:none;margin-top:1px}
.pv-plan li b{font-weight:600}
.pv-role{display:block;margin-bottom:3px;font:500 10px/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.plan-dark .pv-role{color:var(--fog-2)}
.pv-plan li:has(.pv-role) .icon{margin-top:16px}
.pv-plan li.pv-plus{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--fog-2)}
.pv-cta{display:grid;gap:10px;justify-items:center}
.pv-cta small{font-size:12.5px;color:var(--mute)}
.plan-dark .pv-cta small{color:var(--fog)}
.pv-best{box-shadow:var(--dark-shadow),0 50px 90px -40px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.06) inset}
.pv-badge{position:absolute;top:-13px;left:50%;translate:-50% 0;display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:999px;font-size:12.5px;font-weight:600;background:#fff;color:#0c0c0d;box-shadow:0 10px 24px -10px rgba(0,0,0,.45),inset 0 0 0 1px rgba(0,0,0,.06);white-space:nowrap}
.pv-badge .icon{width:14px;height:14px}
.pv-always{max-width:1180px;margin:26px auto 0;padding:26px 28px;border-radius:28px;background:var(--card-bg);box-shadow:var(--card-shadow)}
.pv-always-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;margin-top:16px}
.pv-always-grid>div{display:grid;gap:6px;align-content:start}
.pv-always-grid .icon{width:20px;height:20px;margin-bottom:4px}
.pv-always-grid strong{font-size:15px;font-weight:600}
.pv-always-grid span{font-size:13.5px;line-height:1.45;color:var(--mute)}
.pv-faq{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:40px;max-width:1180px;margin:90px auto 0}
.pv-faq h2{font-size:clamp(1.8rem,3vw,2.6rem);letter-spacing:-.04em;line-height:1.05}
.pv-faq-list{display:grid;border-top:1px solid var(--line)}
.pv-faq details{border-bottom:1px solid var(--line)}
.pv-faq summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 2px;font-size:16.5px;font-weight:500;cursor:pointer;list-style:none}
.pv-faq summary::-webkit-details-marker{display:none}
.pv-faq summary .icon{flex:none;width:18px;height:18px;transition:rotate .35s var(--ease)}
.pv-faq details[open] summary .icon{rotate:45deg}
.pv-faq details p{margin:0 0 20px;max-width:62ch;color:var(--mute);line-height:1.55}
@media (max-width:1100px){.pv-always-grid{grid-template-columns:1fr 1fr}}
@media (max-width:900px){.plans.pv{max-width:480px}.pv-best{margin-top:10px}.pv-faq{grid-template-columns:1fr;gap:18px;margin-top:64px}.pv-day{min-height:0}}
@media (max-width:560px){.pv-hero strong{font-size:18px}.pv-always-grid{grid-template-columns:1fr}.pv-plan{padding:26px 22px 24px}.pv-always{padding:22px 20px}}
@media (prefers-reduced-motion:reduce){.pv-faq summary .icon{transition:none}}

/* Terms and privacy */
.legal{padding:clamp(130px,16vw,180px) 0 clamp(80px,10vw,120px)}
.legal-wrap{display:grid;grid-template-columns:minmax(0,240px) minmax(0,720px);gap:24px 64px;justify-content:center}
.legal-head{grid-column:1/-1;display:grid;gap:12px;max-width:720px;margin:0 auto 30px;text-align:center;justify-items:center}
.legal-head p{color:var(--mute);font-size:17px}
.legal-head .mono{font-size:12px;color:var(--mute)}
.legal-toc{position:sticky;top:110px;align-self:start;display:grid;gap:2px}
.legal-toc a{padding:7px 12px;border-radius:10px;font-size:14px;color:var(--mute);text-decoration:none}
.legal-toc a:hover{background:var(--paper-hi);color:var(--ink)}
.legal-body{display:grid;gap:34px}
.legal-body section{scroll-margin-top:110px}
.legal-body h2{display:flex;align-items:baseline;gap:14px;margin:0 0 12px;font-size:21px;font-weight:600;letter-spacing:-.02em}
.legal-body h2 .mono{font-size:12px;font-weight:400;color:var(--mute)}
.legal-body p{margin:0 0 12px;line-height:1.65;color:var(--ink-3,var(--ink))}
.legal-contact{padding-top:24px;border-top:1px solid var(--line)}
.legal-contact a{color:inherit}
@media (max-width:900px){.legal-wrap{grid-template-columns:1fr}.legal-toc{display:none}}
.legal-lang{margin-top:2px;font-size:13.5px;color:var(--mute)}
.legal-lang:hover{color:var(--ink)}

/* Liquid metal button: a turning chrome ring with a pointer-following highlight (motion.js metalAll). */
@property --a{syntax:"<angle>";inherits:true;initial-value:0deg}
.metal-wrap{position:relative;isolation:isolate;display:inline-grid;justify-items:center}
.metal-wrap.full{display:grid;width:100%}
.metal-wrap::after{content:"";position:absolute;left:14%;right:14%;top:100%;height:22px;margin-top:4px;border-radius:50%;background:conic-gradient(from var(--a,0deg),rgba(255,255,255,0),rgba(255,255,255,.26),rgba(255,255,255,0) 40%,rgba(255,255,255,.16) 70%,rgba(255,255,255,0));filter:blur(10px);opacity:.75;pointer-events:none;animation:metal-turn 7s linear infinite}
.metal{--mx:50%;--my:0%;--hot:0;position:relative;display:inline-grid;width:auto;border:0;padding:2.5px;border-radius:999px;cursor:pointer;
 background:radial-gradient(60px 40px at var(--mx) var(--my),rgba(255,255,255,calc(.35 + var(--hot) * .65)),transparent 70%),conic-gradient(from var(--a),#77777d,#fbfbfc 7%,#5d5d63 16%,#d8d8dc 27%,#48484d 38%,#fff 49%,#6a6a70 60%,#cfcfd4 73%,#4f4f55 86%,#77777d);
 animation:metal-turn 7s linear infinite;transition:translate .5s var(--ease);box-shadow:0 0 0 1px rgba(0,0,0,.4),0 14px 34px -14px rgba(0,0,0,.7)}
.metal::before{content:"";position:absolute;inset:-7px;border-radius:inherit;z-index:-1;background:conic-gradient(from calc(var(--a) * -1),transparent,rgba(255,255,255,.5) 12%,transparent 30%,rgba(255,255,255,.3) 55%,transparent 72%);filter:blur(12px);opacity:calc(.4 + var(--hot) * .45)}
.metal>span{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px 24px;border-radius:inherit;color:#fff;font:600 15px/1.2 var(--sans);white-space:nowrap;background:radial-gradient(140% 120% at 50% -10%,#3a3a3f,#121214 55%,#070708);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -10px 18px rgba(0,0,0,.55)}
.metal>span small{font-weight:400;opacity:.7}
.metal.big>span{padding:17px 32px;font-size:16.5px}
.metal.full{width:100%}
.metal:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.metal:active>span{background:radial-gradient(140% 120% at 50% -10%,#2c2c30,#0c0c0e 55%,#050506)}
@keyframes metal-turn{to{--a:360deg}}
@media (prefers-reduced-motion:reduce){.metal,.metal-wrap::after{animation:none}}

/* The teaser preview */
.pw-url{display:flex;align-items:center;gap:10px;max-width:560px;margin:0 auto 26px;padding:12px 20px;border-radius:999px;background:var(--card-bg);box-shadow:var(--card-shadow);font-size:15px}
.pw-url .icon{width:16px;height:16px;color:var(--mute)}
.pw-stage{display:grid;grid-template-columns:minmax(0,250px) minmax(0,1fr);gap:26px;align-items:start}
.pw-steps{position:sticky;top:24px;display:grid;gap:2px;padding:18px;border-radius:22px;background:var(--card-bg);box-shadow:var(--card-shadow)}
.pw-steps h3{margin:0 0 8px;font-size:14px;font-weight:600}
.pw-step{display:grid;grid-template-columns:20px 1fr;gap:10px;align-items:center;padding:7px 0;font-size:14px;color:var(--mute);transition:color .4s}
.pw-step i{position:relative;width:18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line)}
.pw-step.run{color:var(--ink)}.pw-step.run i{box-shadow:inset 0 0 0 1.5px var(--ink)}
.pw-step.run i::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid transparent;border-top-color:var(--ink);animation:pw-spin .8s linear infinite}
.pw-step.done{color:var(--ink)}.pw-step.done i{background:var(--ink);box-shadow:none}
.pw-step.done i::before{content:"";position:absolute;left:6px;top:4px;width:4px;height:8px;border:solid var(--paper-hi);border-width:0 1.6px 1.6px 0;rotate:45deg}
.pw-steps small{display:block;margin-top:10px;padding-top:10px;border-top:1px solid var(--line);font-size:12.5px;color:var(--mute)}
@keyframes pw-spin{to{rotate:360deg}}
.pw-results{display:grid;gap:14px}
.pw-block{display:grid;gap:12px;padding:22px 24px;border-radius:22px;background:var(--card-bg);box-shadow:var(--card-shadow)}
.pw-new{animation:pw-in .6s var(--ease) both}
.pw-pending{gap:10px}.pw-pending i{display:block;height:12px;border-radius:6px;background:linear-gradient(90deg,var(--line),var(--paper-hi),var(--line));background-size:200% 100%;animation:pw-shimmer 1.4s linear infinite}.pw-pending i:nth-child(1){width:34%}.pw-pending i:nth-child(2){width:88%}.pw-pending i:nth-child(3){width:62%}
@keyframes pw-shimmer{to{background-position:-200% 0}}
@keyframes pw-in{from{opacity:0;translate:0 14px}}
.pw-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.pw-pill{padding:4px 10px;border-radius:999px;font-size:12px;font-weight:500;background:var(--paper-hi);box-shadow:inset 0 0 0 1px var(--line);white-space:nowrap}
.pw-pill.dark{background:var(--ink);color:var(--paper-hi);box-shadow:none}
.pw-lead{margin:0;font-size:clamp(19px,2.2vw,23px);line-height:1.3;letter-spacing:-.02em;font-weight:500}
.pw-row,.pw-ghost{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:12px;align-items:center}
.pw-ico{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:var(--paper-hi);box-shadow:inset 0 0 0 1px var(--line);font-size:12px;font-weight:600}
.pw-ico svg,.pw-ico img{width:18px;height:18px}
.pw-row strong{display:block;font-weight:600}
.pw-row span:not(.pw-ico):not(.pw-pill){font-size:13.5px;color:var(--mute)}
.pw-locked{position:relative;display:grid;gap:10px}
.pw-ghost{grid-template-columns:36px minmax(0,1fr);filter:blur(5px);opacity:.7;user-select:none}
.pw-ghost .pw-ico{background:var(--line)}
.pw-bars{display:grid;gap:7px}.pw-bars i{height:10px;border-radius:6px;background:var(--line)}
.pw-lock{position:absolute;left:50%;top:50%;translate:-50% -50%;display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;background:var(--paper-hi);box-shadow:0 8px 20px -12px rgba(0,0,0,.35),inset 0 0 0 1px var(--line);font-size:13px;font-weight:500;white-space:nowrap}
.pw-lock svg{width:14px;height:14px}
.pw-person{position:relative;display:grid;gap:14px;padding:20px;border-radius:18px;overflow:hidden;background:linear-gradient(180deg,#1b1b1e,#0c0c0d);color:#fff}
.pw-person::before{content:"";position:absolute;right:-10%;top:-40%;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.12),transparent 65%);pointer-events:none}
.pw-person-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pw-avatar{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#4a4a50,#232326);font-weight:600;box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)}
.pw-person-top strong{display:block;font-size:16px}
.pw-person-top span{font-size:13px;color:var(--fog)}
.pw-check{margin-left:auto;display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.1);font-size:12px;color:#fff!important}
.pw-check .icon{width:13px;height:13px}
.pw-email{font:14px var(--mono);color:var(--fog)}
.pw-email b{font-weight:400;color:#fff;filter:blur(4px)}
.pw-first{margin:0;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);font-family:var(--serif);font-style:italic;font-size:16.5px;line-height:1.45}
.pw-first small{display:block;margin-bottom:6px;font:500 11px var(--mono);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:var(--fog)}
.pw-unlock{position:relative;display:grid;gap:16px;justify-items:center;padding:34px 24px 30px;border-radius:26px;text-align:center;overflow:hidden;background:radial-gradient(120% 90% at 50% 0%,#26262a,#0b0b0c 70%);color:#fff}
.pw-unlock .eyebrow{color:var(--fog)}
.pw-unlock h2{margin:0;font-size:clamp(24px,3vw,32px);line-height:1.08;letter-spacing:-.035em;font-weight:600}
.pw-unlock p{margin:0;max-width:54ch;color:var(--fog)}
.pw-toggle{display:inline-flex;padding:4px;border-radius:999px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.pw-toggle button{border:0;border-radius:999px;padding:8px 16px;background:none;color:var(--fog);font:500 13.5px var(--sans);cursor:pointer}
.pw-toggle button[aria-pressed="true"]{background:#fff;color:#0c0c0d}
.pw-flow{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;font-size:12.5px;color:var(--fog)}
.pw-flow i{font-style:normal;opacity:.5}
.pw-fine{font-size:12.5px;color:rgba(255,255,255,.5)}
.preview-actions .pw-unlock{width:100%}
.home-unlock{justify-items:start;text-align:left;margin-bottom:20px;animation:none}
.home-unlock-pick{display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;align-items:center;max-width:620px;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.home-unlock-pick .pw-ico{background:rgba(255,255,255,.1);box-shadow:none}
.home-unlock-pick strong{display:block}.home-unlock-pick span{font-size:13.5px;color:var(--fog)}
.home-unlock-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
@media (max-width:860px){.pw-stage{grid-template-columns:1fr}.pw-steps{position:static}}
@media (max-width:560px){.pw-row{grid-template-columns:36px minmax(0,1fr)}.pw-row .pw-pill{display:none}.pw-check{margin-left:0}.metal.big>span{padding:15px 20px;font-size:15px}.pw-lock{white-space:normal;text-align:center;width:max-content;max-width:90%}}
@media (prefers-reduced-motion:reduce){.pw-new,.pw-pending i,.pw-step.run i::after{animation:none}}
/* The free preview's redesign, a mockup on this computer only (#/preview/sample, public/preview-mock.js, owner 7 Nov 2026):
   what Distrove understood, the plan with the week's people, the first email ready to send, the competitor, then the ask
   as the last of four steps. Monochrome; every motion settles to its end state under reduced motion. */
.pw-compare{display:flex;flex-direction:column;align-items:center;gap:8px;margin:-18px auto 28px}
.pw-compare small{font-size:12px;color:var(--mute)}
.pw-compare .seg+.seg{margin-top:2px}
.pw-mock .pw-head .pw-pill{flex:none}
/* “Your business” as read: a quiet quote mark, the name in ink, who and what marked as with a highlighter that sweeps in. */
.pw-biz{position:relative;overflow:hidden;gap:16px;padding:24px 24px 26px}
.pw-biz::after{content:"\201C";position:absolute;right:20px;bottom:-62px;font:italic 400 210px/1 var(--serif);color:var(--ink);opacity:.045;pointer-events:none}
.pw-biz .pw-pill{display:inline-flex;align-items:center;gap:6px}
.pw-biz .pw-pill .icon{width:12px;height:12px;stroke-width:2.4}
.pw-biz .pw-lead{position:relative;z-index:1;max-width:34ch;font-size:clamp(21px,2.5vw,27px);line-height:1.34;letter-spacing:-.024em;color:var(--ink-3);text-wrap:pretty}
.pw-biz .pw-lead b{font-weight:600;color:var(--ink)}
.pw-biz mark{padding:0 2px;margin:0 -2px;border-radius:3px;color:var(--ink);background:linear-gradient(transparent 60%,rgba(12,12,13,.075) 60%,rgba(12,12,13,.075) 94%,transparent 94%) 0 0/0% 100% no-repeat;transition:background-size .9s var(--ease) var(--md,0s);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.pw-biz:is(.in,:not([data-reveal])) mark{background-size:100% 100%}
@media (prefers-reduced-motion:reduce){.pw-biz mark{transition:none;background-size:100% 100%}}
/* The plan: one answer, the week as faces, why, and what comes next. */
.pw-plan{position:relative;overflow:hidden;gap:20px;padding:24px 24px 22px}
.pw-plan::before{content:"";position:absolute;right:-140px;top:-170px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.95),rgba(255,255,255,0) 66%);pointer-events:none}
.pw-plan>*{position:relative}
.pw-plan>.pw-head{align-items:flex-start}
.pw-plan-label{display:grid;gap:7px}
.pw-plan-label b{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600;letter-spacing:-.005em;color:var(--ink)}
.pw-plan-label b svg{flex:none;width:16px;height:16px}
.pw-plan-title{margin:0;max-width:20ch;font-size:clamp(30px,3.8vw,42px);line-height:1.04;letter-spacing:-.04em;font-weight:600;text-wrap:balance}
.pw-plan-title em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.015em}
.pw-plan-week{display:grid;gap:12px}
.pw-plan-who{margin:0;max-width:54ch;font-size:clamp(16px,1.5vw,17.5px);line-height:1.5;color:var(--ink-3)}
.pw-plan-who b{font-weight:600;color:var(--ink)}
.pw-week{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.pw-week i{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--paper-hi);box-shadow:inset 0 0 0 1.5px var(--line-2);opacity:0;transform:scale(.55);transition:opacity .5s var(--ease),transform .7s var(--ease);transition-delay:calc(.35s + var(--i)*40ms)}
.pw-week i:not(.is-found){background:radial-gradient(circle at 50% 37%,rgba(12,12,13,.1) 0 4.2px,transparent 4.7px),radial-gradient(ellipse 10.5px 8px at 50% 108%,rgba(12,12,13,.1) 98%,transparent 100%),var(--paper-hi)}
.pw-week i.is-found{background:linear-gradient(135deg,#3c3c41,#0c0c0d);color:#fff;font:600 10.5px/1 var(--sans);letter-spacing:.02em;box-shadow:0 0 0 3px var(--paper-hi),0 0 0 4px var(--ink),0 8px 16px -8px rgba(0,0,0,.55)}
.pw-plan:is(.in,:not([data-reveal])) .pw-week i{opacity:1;transform:none}
.pw-week.is-places i{border-radius:10px;background:var(--paper-hi)}
.pw-week.is-places i:not(.is-found){background:linear-gradient(rgba(12,12,13,.09),rgba(12,12,13,.09)) 50% 40%/14px 3px no-repeat,linear-gradient(rgba(12,12,13,.07),rgba(12,12,13,.07)) 50% 62%/9px 3px no-repeat,var(--paper-hi)}
.pw-week.is-places i.is-found{background:linear-gradient(135deg,#3c3c41,#0c0c0d)}.pw-week i.is-found svg{width:14px;height:14px}
.pw-week-note{font-size:13px;color:var(--mute)}.pw-week-note b{font-weight:600;color:var(--ink)}
.pw-plan-why{display:grid;grid-template-columns:46px minmax(0,1fr);gap:14px;align-items:start;padding-top:20px;border-top:1px solid var(--line)}
.pw-plan-why .pw-mono svg{width:20px;height:20px}
.pw-plan-why .eyebrow{display:block;margin:2px 0 7px}
.pw-plan-why p{margin:0;max-width:56ch;font-size:15px;line-height:1.55;color:var(--mute);text-wrap:pretty}
.pw-plan-why b{font-weight:500;color:var(--ink)}
/* Found and kept for the start: hidden tiles with a lock seal, what it is, and what it gives. */
.pw-also{display:flex;align-items:center;gap:16px;padding:12px 16px 12px 14px;border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,.25));box-shadow:inset 0 0 0 1px var(--line)}
.pw-also strong{display:block;font-size:14px;font-weight:600;line-height:1.3;letter-spacing:-.005em}
.pw-also small{display:block;margin-top:2px;font-size:13px;line-height:1.45;color:var(--mute)}
.pw-stack{position:relative;flex:none;display:flex;align-items:center;padding:0 6px 4px 0}
.pw-stack i{position:relative;width:30px;height:30px;margin-left:-11px;border-radius:10px;background:linear-gradient(135deg,#f2f2ef,#dededa);box-shadow:0 0 0 2px #f7f7f5,inset 0 0 0 1px rgba(12,12,13,.05)}
.pw-stack i:first-child{margin-left:0}
.pw-stack i::after{content:"";position:absolute;left:7px;right:9px;top:10px;height:3.5px;border-radius:2px;background:rgba(12,12,13,.22);box-shadow:0 6px 0 -.5px rgba(12,12,13,.13);filter:blur(1.4px)}
.pw-stack.is-rivals i::after{left:9px;right:9px;top:9px;height:10px;border-radius:3px;box-shadow:none}
.pw-stack.is-marks{gap:6px;padding:0}
.pw-stack.is-marks i{display:grid;place-items:center;margin-left:0;background:linear-gradient(180deg,#fff,#efefec);box-shadow:0 0 0 2px #f7f7f5,inset 0 0 0 1px var(--line)}
.pw-stack.is-marks i::after{display:none}.pw-stack.is-marks svg{width:15px;height:15px}
.pw-stack.is-people i{border-radius:50%}
.pw-stack.is-places i::after{left:8px;right:8px;top:9px;height:3.5px;box-shadow:0 6px 0 -.5px rgba(12,12,13,.13),0 12px 0 -.5px rgba(12,12,13,.08)}
.pw-stack.is-people i::after{left:50%;right:auto;top:7px;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;box-shadow:0 10px 0 1px rgba(12,12,13,.14)}
.pw-stack b{position:absolute;right:-1px;bottom:-2px;display:grid;place-items:center;width:19px;height:19px;border-radius:50%;background:var(--ink);color:#fff;box-shadow:0 0 0 2px #f7f7f5,0 5px 12px -5px rgba(0,0,0,.55)}
.pw-stack b svg{width:10px;height:10px;stroke-width:2.5}
/* The first email: her line written in front of the founder, and the one step left. */
.pw-letter-body{position:relative;margin:4px 0 0;font-family:var(--serif);font-style:italic;font-size:clamp(19px,2.1vw,23px);line-height:1.42;letter-spacing:-.005em;color:#fff;text-wrap:pretty}
.pw-letter-body .pw-hi{display:block;margin-bottom:10px}
.pw-avatar.is-open{background:none;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.28)}
.pw-slot{display:inline-block;padding:1px 9px 2px;border-radius:999px;background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);font:500 .7em/1.5 var(--sans);font-style:normal;letter-spacing:0;vertical-align:.18em;color:var(--fog)}
.pw-thread{gap:14px}
.pw-thread-where{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--fog)}.pw-thread-where svg{flex:none;width:15px;height:15px}.pw-thread-where b{font-weight:600;color:#fff}
.pw-thread-q{margin:0;font-size:clamp(17px,1.8vw,19px);font-weight:500;line-height:1.4;letter-spacing:-.012em;color:#fff;text-wrap:pretty}
.pw-thread-reply{position:relative;display:grid;grid-template-columns:32px minmax(0,1fr);gap:12px;padding-top:4px}
.pw-thread-reply::before{content:"";position:absolute;left:15.25px;top:-12px;height:16px;width:1.5px;border-radius:1px;background:rgba(255,255,255,.2)}
.pw-thread-you{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:linear-gradient(180deg,#fff,#e6e6e3);color:#0c0c0d;font:600 11px/1 var(--sans);letter-spacing:.02em}
.pw-thread-reply small{display:block;margin:6px 0 4px;font-size:12.5px;color:var(--fog)}
.pw-thread-reply .pw-letter-body{margin:0;font-size:clamp(17px,1.9vw,20px)}
.pw-letter-foot.is-end{justify-content:flex-end;padding-top:2px;border-top:0}
.pw-letter-body .w{opacity:0;filter:blur(6px);transition:opacity .45s ease,filter .7s var(--ease);transition-delay:calc(.55s + var(--w)*55ms)}
.pw-work:is(.in,:not([data-reveal])) .pw-sheet[data-pos="0"] .pw-letter-body .w{opacity:1;filter:none}
.pw-letter-foot{display:flex;align-items:center;justify-content:space-between;gap:12px 16px;flex-wrap:wrap;padding-top:16px;border-top:1px solid rgba(255,255,255,.1)}
.pw-letter-foot small{font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fog)}
.pw-send{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 18px;border:0;border-radius:999px;background:linear-gradient(180deg,#fff,#e9e9e6);color:#0c0c0d;font:600 14px var(--sans);cursor:pointer;box-shadow:inset 0 1px 0 #fff,0 12px 26px -12px rgba(255,255,255,.4);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.pw-send:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 #fff,0 16px 30px -12px rgba(255,255,255,.5)}
.pw-send svg{width:13px;height:13px;stroke-width:2.4}
/* The competitor at a glance. */
.pw-rival-main{display:grid;grid-template-columns:46px minmax(0,1fr);gap:14px;align-items:center}
.pw-mono{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:linear-gradient(180deg,#fff,#ededea);box-shadow:inset 0 0 0 1px var(--line),0 8px 16px -12px rgba(0,0,0,.4);font:600 15px/1 var(--sans);letter-spacing:-.02em}
.pw-rival-main strong{display:block;font-size:17px;font-weight:600;letter-spacing:-.01em}
.pw-rival-main p{margin:2px 0 0;font-size:14.5px;line-height:1.5;color:var(--mute)}
/* The ask: the last of four steps, three done. */
.pw-go{position:relative;overflow:hidden;gap:18px;padding:28px 26px 24px;border-radius:26px;background:radial-gradient(120% 90% at 50% 0%,#28282c,#0b0b0c 70%);color:#fff;box-shadow:0 34px 60px -34px rgba(0,0,0,.6)}
.pw-go::before{content:"";position:absolute;left:10%;right:10%;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent)}
.pw-go h2{margin:0;font-size:clamp(27px,3.3vw,36px);line-height:1.05;letter-spacing:-.035em;font-weight:600;text-wrap:balance}
.pw-go h2 em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em}
.pw-go p{margin:0;max-width:56ch;line-height:1.55;color:var(--fog)}
.pw-track{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:6px}
.pw-track span{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px 7px;font-size:12.5px;line-height:1.25;color:var(--fog)}
.pw-track span::before{content:"";grid-column:1/-1;height:3px;border-radius:2px;background:linear-gradient(#fff,#fff) 0 0/0% 100% no-repeat,rgba(255,255,255,.14);transition:background-size .8s var(--ease);transition-delay:calc(.35s + var(--i)*.16s)}
.pw-go:is(.in,:not([data-reveal])) .pw-track .is-done::before{background-size:100% 100%,auto}
.pw-track i{display:grid;place-items:center;width:16px;height:16px;border-radius:50%;background:#fff;color:#0c0c0d}
.pw-track i svg{width:10px;height:10px;stroke-width:3}
.pw-track .is-next{color:#fff}
.pw-track .is-next i{background:none;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6)}
.pw-go:is(.in,:not([data-reveal])) .pw-track .is-next i{animation:pw-next 2s ease-out 1.1s infinite}
@keyframes pw-next{0%{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6),0 0 0 0 rgba(255,255,255,.35)}100%{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6),0 0 0 9px rgba(255,255,255,0)}}
.pw-go-actions{display:grid;gap:10px}
.pw-trust{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;margin:2px 0 0;padding:0;list-style:none;font-size:13px;color:rgba(255,255,255,.82)}
.pw-trust li{display:inline-flex;align-items:center;gap:6px}.pw-trust svg{width:13px;height:13px;stroke-width:2.4;opacity:.9}
.pw-go .google-btn{justify-content:center}
.pw-go .pw-fine{text-align:center;color:rgba(255,255,255,.5)}.pw-go .pw-fine a{color:inherit}
/* The handoff: a thread out of the plan, the capsule, and on into the work; a soft light runs down the thread. */
.pw-bridge{display:grid;justify-items:center;margin:-14px 0}
.pw-bridge-line{position:relative;display:block;width:1.5px;height:26px;overflow:hidden;background:linear-gradient(var(--line-2),var(--line-2));transform-origin:50% 0;transform:scaleY(0);transition:transform .6s var(--ease) .1s}
.pw-bridge-line+.pw-bridge-pill+.pw-bridge-line{transition-delay:.55s}
.pw-bridge:is(.in,:not([data-reveal])) .pw-bridge-line{transform:none}
.pw-bridge-line::after{content:"";position:absolute;left:0;right:0;top:-12px;height:12px;background:linear-gradient(transparent,var(--ink),transparent);opacity:0}
.pw-bridge:is(.in,:not([data-reveal])) .pw-bridge-line::after{animation:pw-flow 2.4s ease-in-out 1.2s infinite}
.pw-bridge:is(.in,:not([data-reveal])) .pw-bridge-pill+.pw-bridge-line::after{animation-delay:1.5s}
@keyframes pw-flow{0%{transform:translateY(0);opacity:0}30%{opacity:.7}100%{transform:translateY(40px);opacity:0}}
.pw-bridge-pill{display:inline-flex;align-items:center;gap:10px;margin:0;padding:7px 8px 7px 14px;border-radius:999px;background:var(--card-bg);box-shadow:var(--card-shadow),0 10px 24px -14px rgba(0,0,0,.3);font-size:14px;font-weight:500;color:var(--ink-3);opacity:0;transform:scale(.92);transition:opacity .5s var(--ease) .35s,transform .7s var(--ease) .35s}
.pw-bridge:is(.in,:not([data-reveal])) .pw-bridge-pill{opacity:1;transform:none}
.pw-bridge-pill span{display:inline-flex;align-items:center;gap:7px}
.pw-bridge-pill span svg{flex:none;width:15px;height:15px}
.pw-bridge-pill b{font-weight:400;color:var(--mute)}
.pw-bridge-pill .is-us{padding:6px 14px 6px 6px;border-radius:999px;background:var(--ink);color:#fff;font-weight:600}
.pw-bridge-logo{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#fff;color:var(--ink)}
.pw-bridge-logo .mark{width:14px;height:14px}
@media (prefers-reduced-motion:reduce){.pw-bridge-line,.pw-bridge-pill{transform:none;opacity:1;transition:none}.pw-bridge .pw-bridge-line::after{animation:none!important}}
@media (max-width:560px){.pw-bridge-pill{display:inline-grid;justify-items:center;gap:6px;width:min-content;padding:10px 8px 8px;font-size:13.5px;border-radius:22px}.pw-bridge-pill span{white-space:nowrap}.pw-bridge-pill b{display:none}}
/* The work, handled: a stack of channel sheets with the finished piece in front, tabs to bring any sheet forward, and
   the week's rhythm under it. */
.pw-work{gap:18px}
.pw-work-title{margin:0;font-size:clamp(28px,3.4vw,38px);line-height:1.05;letter-spacing:-.04em;font-weight:600;text-wrap:balance}
.pw-work-title em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.015em}
.pw-work-lead{margin:0;max-width:56ch;font-size:15.5px;line-height:1.55;color:var(--ink-3)}
.pw-deck-tabs{justify-self:start}
.pw-deck-tabs button{display:inline-flex;align-items:center;gap:7px}
.pw-deck-tabs button svg{flex:none;width:14px;height:14px}
.pw-deck-tabs:not(.has-ind) button.active{background:linear-gradient(180deg,#2e2e32,#0c0c0d);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
/* What a chat already showed of the other channels, or a founder’s own plan: each named with why. */
.pw-also.is-named{display:grid;gap:12px}
.pw-next-row{display:flex;align-items:center;gap:14px}
.pw-next-row strong{display:block;font-size:14px;font-weight:600}.pw-next-row small{display:block;margin-top:2px;font-size:13px;line-height:1.45;color:var(--mute)}
.pw-deck{display:grid;padding-top:30px}
.pw-sheet{grid-area:1/1;position:relative;display:grid;align-content:start;gap:16px;padding:22px;border-radius:20px;overflow:hidden;color:#fff;background:linear-gradient(180deg,#1d1d20,#0c0c0d);box-shadow:0 24px 50px -30px rgba(0,0,0,.6);transform-origin:50% 0;transition:transform .8s var(--ease),filter .6s ease}
.pw-sheet::before{content:"";position:absolute;right:-12%;top:-45%;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.11),transparent 65%);pointer-events:none}
.pw-sheet>*{position:relative}
.pw-sheet[data-pos="0"]{z-index:3}
.pw-sheet[data-pos="1"]{z-index:2;transform:translateY(-15px) scale(.955);filter:brightness(.7)}
.pw-sheet[data-pos="2"]{z-index:1;transform:translateY(-30px) scale(.91);filter:brightness(.48)}
.pw-sheet:not([data-pos="0"]){pointer-events:none}
.pw-sheet:not([data-pos="0"])>*{opacity:0;transition:opacity .2s}
.pw-sheet[data-pos="0"]>*{opacity:1;transition:opacity .45s ease .18s}
.pw-work[data-reveal]:not(.in) .pw-sheet[data-pos]{transform:none}
.pw-sheet-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pw-sheet-mark{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:#fff;color:#0c0c0d}
.pw-sheet-mark svg{width:16px;height:16px}
.pw-sheet-head b{font-size:15px;font-weight:600}
.pw-sheet-head small{margin-left:auto;font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fog)}
.pw-sheet.is-piece .pw-sheet-head small{color:#fff}
.pw-sheet .pw-thread{display:grid;gap:14px}
.pw-sheet:not(.is-piece){grid-template-rows:auto 1fr auto}
.pw-skel{display:grid;align-content:center;gap:12px;padding:4px 0;filter:blur(2.2px)}
.sk-row{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:12px;align-items:center}
.sk-row.is-in{margin-left:18px}
.sk-av{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.16)}
.sk-tile{width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.16)}
.sk-bars{display:grid;gap:7px}.sk-bars i{display:block;height:8px;border-radius:5px;background:rgba(255,255,255,.17)}
.sk-row em,.sk-ad em{display:block;width:58px;height:20px;border-radius:999px;background:rgba(255,255,255,.12)}
.sk-q{padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.06)}
.sk-ads{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sk-ad{display:grid;gap:9px;padding:10px;border-radius:14px;background:rgba(255,255,255,.06)}
.sk-img{display:block;aspect-ratio:4/3;border-radius:10px;background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,.06))}
.sk-vids{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.sk-vid{display:grid;gap:8px}.sk-vid i{display:block;aspect-ratio:9/13;border-radius:10px;background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.05))}
.pw-sheet-makes{display:flex;align-items:center;gap:10px;margin:0;font-size:15.5px;font-weight:500;line-height:1.4}
.pw-sheet-seal{display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;background:#fff;color:#0c0c0d}
.pw-sheet-seal svg{width:11px;height:11px;stroke-width:2.5}
.pw-rhythm{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:2px 0 0;padding:0;list-style:none}
.pw-rhythm li{position:relative;display:grid;align-content:start;gap:3px;padding:12px;border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,.3));box-shadow:inset 0 0 0 1px var(--line);opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .6s var(--ease);transition-delay:calc(.6s + var(--i)*.1s)}
.pw-work:is(.in,:not([data-reveal])) .pw-rhythm li{opacity:1;transform:none}
.pw-rhythm li:not(:last-child)::after{content:"";position:absolute;right:-9px;top:26px;width:6px;height:6px;border-top:1.5px solid var(--line-2);border-right:1.5px solid var(--line-2);transform:rotate(45deg)}
.pw-rhythm span{display:grid;place-items:center;width:28px;height:28px;margin-bottom:6px;border-radius:9px;background:var(--ink);color:#fff}
.pw-rhythm span svg{width:14px;height:14px}
.pw-rhythm b{font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.pw-rhythm small{font-size:14px;font-weight:500;line-height:1.3;color:var(--ink)}
@media (prefers-reduced-motion:reduce){.pw-sheet,.pw-sheet>*,.pw-rhythm li{transition:none}.pw-rhythm li{opacity:1;transform:none}}
@media (max-width:560px){.pw-deck-tabs button:not(.active) span{display:none}.pw-rhythm{grid-template-columns:1fr 1fr}.pw-rhythm li::after{display:none}.pw-sheet{padding:18px}.pw-sheet-head small{margin-left:0;width:100%}}
@media (prefers-reduced-motion:reduce){.pw-week i,.pw-letter-body .w{opacity:1;transform:none;filter:none;transition:none}.pw-track span::before{transition:none}.pw-go .pw-track .is-done::before{background-size:100% 100%,auto}.pw-go.in .pw-track .is-next i{animation:none}}
@media (max-width:860px){.pw-stage-done .pw-steps{order:1}}
@media (max-width:560px){.pw-compare{margin-top:0}.pw-plan{padding:22px 20px 20px}.pw-mock .pw-head{flex-wrap:wrap;gap:8px}.pw-week i{width:26px;height:26px}.pw-go{padding:24px 20px 20px}.pw-track{gap:6px}.pw-track span{font-size:11.5px}.pw-also{align-items:flex-start}.pw-send{width:100%;justify-content:center}}
/* The preview builds itself (owner, 25 Oct 2026). Every part is timed from the start of its phase (--at, set by the
   page and negative once the phase is under way, so drawing the stage again continues the movement instead of
   restarting it). The markup only carries the timing under .pw-build; reduced motion gets the still stage. */
.pw-site-wrap{display:grid;grid-template-rows:1fr}
.pw-site-wrap>div{min-height:0;overflow:hidden}
.pw-site{border-radius:14px;background:var(--paper-hi);box-shadow:inset 0 0 0 1px var(--line);transform-origin:100% 0}
.pw-site-bar{display:flex;align-items:center;gap:5px;padding:9px 12px;border-bottom:1px solid var(--line)}
.pw-site-bar i{flex:none;width:7px;height:7px;border-radius:50%;background:var(--line-2)}
.pw-site-bar span{margin-left:8px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:500 11.5px var(--mono);color:var(--mute)}
.pw-site-page{position:relative;display:grid;gap:7px;padding:14px 16px 16px;overflow:hidden}
.pw-site-page b{font-size:14.5px;font-weight:600;line-height:1.3;letter-spacing:-.01em}
.pw-site-page p{margin:0;font-size:13.5px;line-height:1.5;color:var(--mute)}
.pw-site-page mark{padding:1px 0;border-radius:3px;color:var(--ink);background:linear-gradient(rgba(12,12,13,.075),rgba(12,12,13,.075)) 0 0/100% 100% no-repeat}
.pw-site-skel{gap:10px}
.pw-site-skel b,.pw-site-skel p{height:11px;border-radius:6px;background:linear-gradient(90deg,var(--line),var(--paper),var(--line)) 0 0/200% 100%}
.pw-site-skel b{width:58%;height:14px;margin-bottom:4px}.pw-site-skel p{width:94%}.pw-site-skel p:nth-of-type(2){width:86%}.pw-site-skel p:last-child{width:48%}
.pw-site-page>b,.pw-site-page>p{position:relative;z-index:1}
.pw-site-scan{position:absolute;inset:0 0 auto;height:56px;pointer-events:none;background:linear-gradient(180deg,rgba(12,12,13,0),rgba(12,12,13,.05));border-bottom:1.5px solid var(--ink);opacity:0}
.pw-choices{position:absolute;inset:0;pointer-events:none}
.pw-choices i{--step:46px;--y1:0px;--s1:.94;--s2:.72;--o:0;position:absolute;inset:0;display:grid;place-items:center;border-radius:11px;background:var(--paper-hi);box-shadow:inset 0 0 0 1px var(--line),0 8px 18px -12px rgba(0,0,0,.3);opacity:0}
.pw-choices i.me{--y1:-8px;--s1:1.16;--s2:1;--o:1;z-index:1;box-shadow:inset 0 0 0 1px var(--line-2),0 16px 28px -14px rgba(0,0,0,.42)}
.pw-choices svg,.pw-choices img{width:18px;height:18px}
@media (max-width:560px){.pw-choices i{--step:41px}}
@media (prefers-reduced-motion:no-preference){
 .pw-build .pw-site-skel b,.pw-build .pw-site-skel p{animation:pw-shimmer 1.4s linear infinite}
 .pw-build .pw-site-scan{opacity:.5;animation:pw-scan 2.4s var(--ease-io) var(--at) infinite}
 .pw-build [data-b]{animation:pw-rise .9s var(--ease) var(--at) both}
 .pw-build [data-f]{animation:pw-fade .7s var(--ease) calc(var(--at) + var(--d)) both}
 .pw-build [data-pop]{animation:pw-pop .6s var(--spring) calc(var(--at) + var(--d)) both}
 .pw-build .pw-results span.pw-w{display:inline-block;font-size:inherit;color:inherit;animation:pw-word .6s var(--ease) calc(var(--at) + var(--w)) both}
 .pw-build .pw-site-page mark{animation:pw-mark .5s var(--ease-io) calc(var(--at) + var(--d)) both}
 .pw-build .pw-site-wrap.fold{animation:pw-fold .8s var(--ease) calc(var(--at) + var(--fold)) both}
 .pw-build .pw-site-wrap.fold .pw-site{animation:pw-fold-away .8s var(--ease) calc(var(--at) + var(--fold)) both}
 .pw-build .pw-lead-wrap{display:grid;grid-template-rows:1fr;animation:pw-unfold .8s var(--ease) calc(var(--at) + var(--fold)) both}
 .pw-build .pw-lead-wrap>p{min-height:0;overflow:hidden}
 .pw-build :is(.pw-ico,.pw-mono)[data-choices]{position:relative;z-index:1}
 .pw-build :is(.pw-ico,.pw-mono)[data-choices]>:not(.pw-choices){animation:pw-show .01s linear calc(var(--at) + 880ms) both}
 .pw-build .pw-choices i{animation:pw-choose 1.05s var(--ease-io) calc(var(--at) + 80ms) both}
 .pw-build .pw-person::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.1) 50%,transparent 65%);animation:pw-shine 1.4s var(--ease-io) calc(var(--at) + 200ms) both}
 .pw-build .pw-person .pw-redact{animation:pw-fade .7s var(--ease) calc(var(--at) + 420ms) both}
 .pw-build .pw-step.tick i{animation:pw-pop .55s var(--spring) var(--at) both}
 .pw-build .pw-keep[data-b],.pw-build .pw-unlock[data-b]{animation-name:pw-rise-keep;animation-duration:1.1s}
 .pw-build :is(.pw-keep,.pw-unlock)[data-b]>*{animation:pw-fade .7s var(--ease) calc(var(--at) + 180ms + var(--i,0) * 90ms) both}
 .pw-build :is(.pw-keep,.pw-unlock)[data-b]>:nth-child(2){--i:1}.pw-build :is(.pw-keep,.pw-unlock)[data-b]>:nth-child(3){--i:2}.pw-build :is(.pw-keep,.pw-unlock)[data-b]>:nth-child(4){--i:3}.pw-build :is(.pw-keep,.pw-unlock)[data-b]>:nth-child(n+5){--i:4}
}
@media (prefers-reduced-motion:no-preference) and (max-width:560px){.pw-build [data-b]{animation-name:pw-rise-sm}}
@media (prefers-reduced-motion:no-preference){.pw-build [data-b]:has(.pw-person){animation-name:pw-rise-sm}}
@keyframes pw-scan{from{translate:0 -100%}to{translate:0 230px}}
@keyframes pw-rise{from{opacity:0;translate:0 26px;scale:.985;filter:blur(10px)}}
@keyframes pw-rise-sm{from{opacity:0;translate:0 20px;scale:.99;filter:blur(5px)}}
@keyframes pw-rise-keep{from{opacity:0;translate:0 34px;scale:.96;filter:blur(12px)}}
@keyframes pw-fade{from{opacity:0;translate:0 6px;filter:blur(5px)}}
@keyframes pw-pop{from{opacity:0;scale:.5}}
@keyframes pw-word{from{opacity:0;translate:0 .45em;filter:blur(6px)}}
@keyframes pw-mark{from{background-size:0% 100%;color:var(--mute)}}
@keyframes pw-fold{45%{opacity:0}to{grid-template-rows:0fr;opacity:0;margin-bottom:-12px}}
@keyframes pw-fold-away{to{scale:.9;translate:0 -10px;filter:blur(8px)}}
@keyframes pw-unfold{from{grid-template-rows:0fr;margin-top:-12px}}
@keyframes pw-show{from{opacity:0}}
@keyframes pw-shine{from{translate:-100% 0}to{translate:100% 0}}
@keyframes pw-choose{
 0%{opacity:0;translate:calc(var(--x0) * var(--step)) 10px;scale:.8}
 18%,30%{opacity:1;translate:calc(var(--x0) * var(--step)) 0;scale:1}
 62%{opacity:1;translate:calc(var(--x1) * var(--step)) var(--y1);scale:var(--s1)}
 76%{opacity:var(--o);translate:calc(var(--x1) * var(--step)) 0;scale:var(--s2)}
 100%{opacity:0;translate:calc(var(--x1) * var(--step)) 0;scale:var(--s2)}
}

/* Pricing without a free card: the preview is the free part */
.plans.pv{grid-template-columns:repeat(2,minmax(0,1fr));max-width:900px}
.pv-free{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;max-width:900px;margin:0 auto 34px;padding:20px 24px;border-radius:24px;background:var(--card-bg);box-shadow:var(--card-shadow)}
.pv-free>div{display:grid;gap:4px;max-width:560px}
.pv-free strong{font-size:17px;font-weight:600}
.pv-free span:not(.eyebrow){font-size:14px;color:var(--mute)}
@media (max-width:900px){.plans.pv{grid-template-columns:minmax(0,1fr)}}

/* Continue with Google */
.google-btn{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:6px}
.google-btn svg{width:18px;height:18px}
.auth-or{display:flex;align-items:center;gap:12px;margin:10px 0 14px;color:var(--mute);font-size:13px}
.auth-or::before,.auth-or::after{content:"";flex:1;height:1px;background:var(--line)}

/* Sending from the founder's mailbox */
.send-card .send-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.send-card .eyebrow .icon{width:14px;height:14px;vertical-align:-2px}
.approve-list{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:8px;max-height:46vh;overflow:auto}
.approve-list li{padding:10px 12px;border:1px solid var(--line);border-radius:12px;display:grid;gap:6px}
.approve-row{display:flex;align-items:flex-start;gap:10px;font-weight:500;cursor:pointer}
.approve-row input{width:18px;height:18px;min-height:0;margin:2px 0 0;padding:0;flex:none;border-radius:4px;box-shadow:none;accent-color:var(--ink);cursor:pointer}
.approve-row input:focus{box-shadow:none}
.approve-row>span{display:flex;flex-direction:column;min-width:0}
.approve-row small{color:var(--mute);font-size:13px;font-weight:400}
.approve-list details summary{cursor:pointer;font-size:13px;color:var(--ink-2)}
.mail-step{margin:14px 0 0;font-size:12.5px;color:var(--mute)}
.mail-preview{white-space:pre-wrap;font:inherit;font-size:13.5px;line-height:1.5;margin:8px 0 0;padding:10px 12px;border-radius:10px;background:var(--paper-hi)}
.postal-note{display:grid;gap:8px;margin:0 0 16px;padding:14px 16px;border-radius:14px;background:var(--paper-hi)}
.postal-note p{margin:0}
.lead-reply{display:flex;align-items:flex-start;gap:8px;margin:0;font-size:14px;color:var(--ink-2)}
.lead-reply .icon{width:15px;height:15px;flex:none;margin-top:3px}
.lead-funnel small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lead-funnel small i{font-style:normal}
@container (max-width:820px){.lead-funnel small i{display:none}}
/* Phones: one row per stage */
@container (max-width:520px){.lead-funnel{grid-template-columns:1fr;gap:0}
 .lead-funnel li{grid-template-columns:84px minmax(0,1fr) 28px 62px;align-items:center;gap:10px;padding:9px 0!important}
 .lead-funnel li+li{border-left:0;border-top:1px solid var(--line)}
 .lead-funnel strong{font-size:18px;text-align:right;order:3}.lf-bar{order:2}.lead-funnel small{order:4;min-height:0;text-align:right}
 .lead-funnel small i{display:none}.lf-label{font-size:10.5px}}
.send-note{font-size:12.5px;color:var(--mute);line-height:1.45}

/* The launch offer as a ticket: the price, a perforation with two notches cut out, and a stub that copies the code.
   Dark on light cards, light on dark ones; the one-line ticket above a pay button is glass on the dark opening. */
.offer{--stub:104px;--notch:7px;position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) var(--stub);width:100%;margin:14px 0 2px;border-radius:16px;overflow:hidden;text-align:left;color:#fff;background:radial-gradient(130% 170% at 0% 0%,#323237,#0c0c0d 62%);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(255,255,255,.06);
 -webkit-mask:radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 0,#0000 97%,#000) top/100% 51% no-repeat,radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 100%,#0000 97%,#000) bottom/100% 51% no-repeat;
 mask:radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 0,#0000 97%,#000) top/100% 51% no-repeat,radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 100%,#0000 97%,#000) bottom/100% 51% no-repeat}
.offer-main{display:grid;align-content:center;gap:3px;min-width:0;padding:13px 14px 13px 16px}
.offer-k{font:500 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.offer-price{display:flex;align-items:baseline;gap:8px;line-height:1.1}
.offer-price b{font-size:24px;font-weight:650;letter-spacing:-.035em}
.offer-price s{font-size:14px;color:rgba(255,255,255,.42);text-decoration-thickness:1.5px}
.offer-main small{font-size:12px;color:rgba(255,255,255,.55)}
.offer-stub{position:relative;display:grid;place-content:center;justify-items:center;gap:5px;padding:10px 6px;border:0;border-left:1.5px dashed rgba(255,255,255,.24);border-radius:0;background:rgba(255,255,255,.04);color:inherit;font:inherit;cursor:pointer;transition:background .3s var(--ease),color .3s var(--ease)}
.offer-code{font:700 13px var(--mono);letter-spacing:.1em;transition:transform .35s var(--spring-pop)}
.offer-stub small{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:rgba(255,255,255,.55);transition:color .3s var(--ease)}
.offer-stub small .icon{width:11px;height:11px}
.offer-stub:hover{background:rgba(255,255,255,.1)}.offer-stub:hover .offer-code{transform:translateY(-1px)}
.offer-stub:hover small{color:#fff}
.offer-stub:active .offer-code{transform:scale(.95)}
.offer-stub:focus-visible{outline:2px solid currentColor;outline-offset:-5px}
.offer-stub.copied{background:#fff;color:var(--ink)}.offer-stub.copied small{color:var(--ink-2)}
.offer-sheen{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(110deg,transparent 32%,rgba(255,255,255,.16) 48%,transparent 62%) no-repeat;background-size:260% 100%;background-position:130% 0}
/* On a dark card: a light ticket. */
.plan-dark .offer,.plan-option.dark .offer{color:var(--ink);background:linear-gradient(180deg,#fff,#efefec);box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(12,12,13,.06)}
.plan-dark .offer-k,.plan-option.dark .offer-k,.plan-dark .offer-main small,.plan-option.dark .offer-main small,.plan-dark .offer-stub small,.plan-option.dark .offer-stub small{color:var(--mute)}
.plan-dark .offer-price s,.plan-option.dark .offer-price s{color:var(--mute)}
.plan-dark .offer-stub,.plan-option.dark .offer-stub{border-left-color:var(--line-3);background:rgba(12,12,13,.03)}
.plan-dark .offer-stub:hover,.plan-option.dark .offer-stub:hover{background:rgba(12,12,13,.07)}.plan-dark .offer-stub:hover small,.plan-option.dark .offer-stub:hover small{color:var(--ink)}
.plan-dark .offer-stub.copied,.plan-option.dark .offer-stub.copied{background:var(--ink);color:#fff}.plan-dark .offer-stub.copied small,.plan-option.dark .offer-stub.copied small{color:rgba(255,255,255,.75)}
.plan-dark .offer-sheen,.plan-option.dark .offer-sheen{background-image:linear-gradient(110deg,transparent 32%,rgba(255,255,255,.9) 48%,transparent 62%)}
.plan-option>.offer{display:grid;align-items:stretch;justify-content:normal;gap:0;margin:0} /* not the card's flex header row */
.plan-option:has(>.offer){grid-template-rows:auto auto 1fr auto}
/* One line above a pay button. */
.offer-line{--stub:98px;width:fit-content;max-width:100%;justify-self:center;margin:0;grid-template-columns:minmax(0,auto) var(--stub)}
.offer-line .offer-main{padding:9px 16px 9px 18px;gap:1px}
.offer-line strong{font-size:14px;font-weight:600;letter-spacing:-.01em}
.offer-line .offer-stub{padding:8px 6px;gap:3px}
.pw-unlock .offer-line,.room-hero .offer-line{background:rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(255,255,255,.12)}
.home-unlock .offer-line{justify-self:start}
@media (max-width:420px){.offer{--stub:94px}.offer-main{padding:12px 10px 12px 14px}.offer-price b{font-size:22px}.offer-line{--stub:90px}.offer-line .offer-main{padding:9px 12px 9px 14px}.offer-line strong{font-size:13px}}
@media (prefers-reduced-motion:no-preference){.in .offer-sheen{animation:offer-shine 1.3s var(--ease-io) .95s both}.offer-stub.copied .offer-code{animation:offer-pop .45s var(--spring-pop)}}
@media (prefers-reduced-motion:reduce){.offer-stub,.offer-code,.offer-stub small{transition:none}}
@keyframes offer-shine{to{background-position:-30% 0}}
@keyframes offer-pop{40%{transform:scale(1.08)}}
.admin-switch{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:18px 22px;margin-top:16px}
.admin-switch strong{display:block;font-size:15px}.admin-switch small{display:block;margin-top:3px;font-size:13px;color:var(--mute)}

/* Details only the founder knows (docs/SPEC-phase-a.md, part 2) */
.fill-parts{display:grid;gap:10px;margin:0 0 14px;padding:14px 16px;border-radius:16px;background:var(--paper-hi);box-shadow:inset 0 0 0 1px var(--line-2)}
.fill-head{display:flex;gap:10px;align-items:flex-start}
.fill-head .icon{width:16px;height:16px;flex:none;margin-top:2px}
.fill-head strong{display:block;font-size:14.5px}.fill-head small{display:block;margin-top:2px;font-size:12.5px;color:var(--mute)}
.fill-parts label{display:grid;gap:6px;font-size:13px;font-weight:500}
.fill-parts .btn{justify-self:start}
.fill-personal{margin:-4px 0 12px}
[data-approve-asset]:disabled{opacity:.45;cursor:not-allowed}
.fill-grid{display:grid;gap:10px;align-items:end}
@media (min-width:640px){.fill-grid.two{grid-template-columns:1fr 1fr}}
.fill-field{display:grid;gap:4px;align-content:end}
.fill-field label{display:grid;gap:6px;font-size:13px;font-weight:500}
.ff-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.ff-tag{flex:none;font-size:11px;font-weight:500;color:var(--mute);white-space:nowrap}
.ff-tag.keep{color:var(--ink-2)}
.ff-tag.keep::before{content:"● ";font-size:8px;vertical-align:2px}
.ff-show{justify-self:start;font-size:12px}
.approve-hint{margin-right:auto;align-self:center;font-size:13px;color:var(--ink-3)}
.approve-hint:empty{display:none}
.fill-done{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 12px;padding:10px 14px;border-radius:14px;background:var(--ink);color:#fff;font-size:13.5px}
.fill-done .icon{width:15px;height:15px}
.fill-done .text-btn{color:#fff;margin-left:auto}
.saved-facts{display:grid;gap:10px;margin:6px 0 16px;padding:14px 16px;border:0;border-radius:16px;background:var(--paper-hi);box-shadow:inset 0 0 0 1px var(--line-2)}
.saved-facts legend{padding:0;font-weight:600;font-size:14.5px}
.sf-row{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:end}
.sf-remove{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:12px;background:transparent;color:var(--mute);cursor:pointer}
.sf-remove:hover{background:rgba(12,12,13,.06);color:var(--ink)}
.sf-remove .icon{width:16px;height:16px}
@media (max-width:560px){.approve-hint{flex-basis:100%;margin:0 0 4px}}
.fill-head{align-items:center}
.fill-group{display:grid;gap:10px;padding-top:4px}
.fill-group+.fill-group{padding-top:12px;border-top:1px solid var(--line)}
.fg-label{margin:0;font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.fg-label span{font-weight:400;letter-spacing:0;text-transform:none;color:var(--mute);font-size:12.5px}
.fill-field{display:grid;gap:6px}
.ff-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.ff-top label{font-size:13.5px;font-weight:500}
.ff-show{flex:none;font-size:12px;color:var(--mute)}
.ff-show:hover{color:var(--ink)}

/* Draft window, design pass (7 Oct 2026): marks in the draft, progress, a border light while questions remain */
.fill-parts{position:relative;isolation:isolate}
.fill-beam{position:absolute;inset:0;z-index:-1;border-radius:inherit;padding:1.5px;pointer-events:none;background:conic-gradient(from var(--beam-a,0deg),transparent 0 62%,rgba(12,12,13,.08) 70%,rgba(12,12,13,.55) 84%,transparent 96%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:beam-spin 4.2s linear infinite;transition:opacity .6s var(--ease)}
@property --beam-a{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes beam-spin{to{--beam-a:360deg}}
.fill-parts.ready .fill-beam{opacity:0}
.fill-head .fp-count{margin-left:auto;font-size:12.5px;font-variant-numeric:tabular-nums;color:var(--mute)}
.fp-bar{height:3px;border-radius:99px;background:var(--line);overflow:hidden;margin:-2px 0 2px}
.fp-bar i{display:block;height:100%;width:var(--w,0%);border-radius:inherit;background:var(--ink);transition:width .5s var(--spring)}
.ff-top label{display:inline-flex;align-items:center;gap:6px}
.ff-check{display:inline-grid;place-items:center;width:0;height:16px;border-radius:50%;background:var(--ink);color:#fff;overflow:hidden;opacity:0;transform:scale(.4);transition:width .3s var(--ease),opacity .3s var(--ease),transform .45s var(--spring-pop)}
.ff-check .icon{width:10px;height:10px;stroke-width:3}
.fill-field.answered .ff-check{width:16px;opacity:1;transform:none}
.fill-field{max-height:140px;transition:max-height .32s var(--ease),opacity .25s var(--ease),margin .32s var(--ease)}
.fill-field.folding{max-height:0;opacity:0;margin:-5px 0;overflow:hidden}
.orb{display:inline-block;width:14px;height:14px;border-radius:50%;vertical-align:-2px;background:radial-gradient(circle at 32% 30%,#fff 0 18%,transparent 46%),conic-gradient(from var(--orb-a,0deg),#fff,#8a8a8f,#2b2b2e,#c9c9cc,#fff);box-shadow:0 0 10px rgba(255,255,255,.35);animation:orb-turn 1.1s linear infinite}
@property --orb-a{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes orb-turn{to{--orb-a:360deg}}
.draft-wrap{position:relative;border-radius:14px;background:rgba(255,255,255,.82);transition:background .2s}
.draft-wrap:focus-within{background:#fff}
.draft-wrap textarea{position:relative;z-index:1;background:transparent!important}
.draft-mirror{position:absolute;inset:0;overflow:hidden;box-sizing:border-box;border-style:solid;border-color:transparent;white-space:pre-wrap;overflow-wrap:break-word;word-break:break-word;color:transparent;pointer-events:none}
.draft-mirror mark{color:transparent;border-radius:4px}
.draft-mirror mark.m{background:rgba(12,12,13,.08);box-shadow:0 0 0 1.5px rgba(12,12,13,.16)}
.draft-mirror mark.p{background:none;text-decoration:underline dotted rgba(12,12,13,.35);text-underline-offset:4px;color:transparent}
.draft-mirror mark.f{background:rgba(12,12,13,.16);animation:fill-glow 1.9s var(--ease) forwards}
@keyframes fill-glow{0%{background:rgba(12,12,13,.24);box-shadow:0 0 0 3px rgba(12,12,13,.08)}100%{background:rgba(12,12,13,0);box-shadow:0 0 0 0 rgba(12,12,13,0)}}
.fill-done{animation:done-in .5s var(--spring-pop) both}
@keyframes done-in{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}
[data-approve-asset]{transition:background .35s var(--ease),color .35s var(--ease),box-shadow .35s var(--ease),opacity .3s}
@media (prefers-reduced-motion:reduce){.fill-beam{animation:none;opacity:0}.orb{animation:none}.draft-mirror mark.f{animation:none;background:none}.fill-field,.ff-check,.fp-bar i,.fill-done{transition:none;animation:none}}
.ff-top label{gap:0}.fill-field.answered .ff-check{margin-right:7px}.ff-check{transition:width .3s var(--ease),opacity .3s var(--ease),transform .45s var(--spring-pop),margin .3s var(--ease)}

/* Directories and marketplaces: this month's listings (lib/monthly.mjs) */
.listings-card{display:grid;gap:14px;padding:24px 26px;border-radius:24px;background:var(--card);box-shadow:inset 0 0 0 1.5px var(--ink),0 18px 40px -30px rgba(0,0,0,.35)}
.lc-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.lc-head h2{margin:6px 0;font-size:28px;font-weight:600;letter-spacing:-.02em}.lc-head p{margin:0;color:var(--ink-2);max-width:60ch}
.lc-count{flex:none;margin-top:4px;font-size:13px;font-variant-numeric:tabular-nums;color:var(--mute)}
.lc-bar{margin:0}
.listing-rows{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.listing-row{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px 14px;border-radius:16px;background:#fff;box-shadow:0 0 0 1px var(--line);transition:opacity .3s var(--ease),background .3s var(--ease)}
.lr-mark{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--ink);color:#fff;font-weight:600;font-size:16px}
.lr-text{display:grid;gap:2px;min-width:0}.lr-text strong{font-size:15px}.lr-text small{font-size:13px;color:var(--mute);line-height:1.4}.lr-text .lr-need{color:var(--ink);opacity:.72}
.lr-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:6px 12px}
.lr-actions .icon{width:14px;height:14px}
.lr-skip{color:var(--mute)}
.lr-state{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:500;color:var(--ink-2)}
.listing-row.is-submitted,.listing-row.is-skipped{background:transparent}
.listing-row.is-submitted .lr-mark{background:var(--paper-lo);color:var(--ink-2)}
.listing-row.is-skipped{opacity:.6}.listing-row.is-skipped .lr-mark{background:var(--paper-lo);color:var(--mute)}
@media (max-width:640px){.listing-row{grid-template-columns:40px minmax(0,1fr)}.lr-actions{grid-column:1/-1;justify-content:flex-start}.lc-head{flex-direction:column;gap:4px}}

/* A partner's or creator's introduction, readable before it opens in the email app. */
.lead-mail{margin:2px 0 10px;font-size:13px;color:var(--mute)}.lead-mail summary{cursor:pointer;width:max-content;color:var(--ink);font-weight:500;list-style:none}.lead-mail summary::-webkit-details-marker{display:none}.lead-mail summary::after{content:' +';opacity:.6}.lead-mail[open] summary::after{content:' −'}
.lead-mail-body{margin-top:10px;padding:14px 16px;border-radius:14px;background:color-mix(in srgb,var(--ink) 4%,transparent);max-width:64ch}.lead-mail-body strong{display:block;color:var(--ink);font-weight:600}
.lead-mail-body p{margin:8px 0 0;line-height:1.55;color:var(--ink);opacity:.86;overflow-wrap:anywhere}

/* ——— Pricing page (8 Oct 2026). Motion recreated in our own CSS from ideas on transitions.dev: staggered text rise,
   spinning counters, a sliding pill, a spring badge, check marks that draw, an accordion that eases open. ——— */
.prerender{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.pr{interpolate-size:allow-keywords}
.pr-hero{max-width:780px;margin-left:auto;margin-right:auto}
.pr-hero .pr-form{margin:34px auto 0}
.pr-free{margin-top:16px!important;font-size:13.5px!important;color:var(--mute)}
.pr .plans{margin-top:clamp(60px,7vw,90px)}
.ck{width:17px;height:17px;flex:none;margin-top:1px;overflow:visible}
.ck path{fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset .75s var(--ease);transition-delay:calc(var(--i,0)*70ms + .4s)}
.landing [data-reveal]:not(.in) .ck path{stroke-dashoffset:1;transition:none}
@keyframes badge-drop{0%{opacity:0;transform:translateY(-16px) rotate(-10deg) scale(.6)}100%{opacity:1;transform:none}}
.landing .pv-best.in .pv-badge{animation:badge-drop 1s var(--spring-pop) .55s backwards}
.pv-badge::after{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.95) 50%,transparent 65%) 0 0/250% 100%;mix-blend-mode:soft-light;animation:shimmer 3.2s linear 1.6s infinite;pointer-events:none}
.pv-badge{overflow:hidden}

/* Questions: the answer eases open (where the browser can animate details), the plus turns into a minus. */
.pf::details-content{block-size:0;overflow:hidden;transition:block-size .5s var(--ease),content-visibility .5s allow-discrete}
.pf[open]::details-content{block-size:auto}
.pf-sign{position:relative;flex:none;width:18px;height:18px}
.pf-sign::before,.pf-sign::after{content:'';position:absolute;left:50%;top:50%;width:14px;height:1.75px;border-radius:2px;background:currentColor;translate:-50% -50%;transition:rotate .5s var(--ease)}
.pf-sign::after{rotate:90deg}
.pf[open] .pf-sign::after{rotate:180deg}
.pf[open] .pf-sign::before{rotate:180deg}
.pf summary:hover .pf-sign{opacity:.7}
.pf-a p{margin:0 0 20px;max-width:62ch;color:var(--mute);line-height:1.55}

@media (prefers-reduced-motion:reduce){.pv-badge::after{animation:none!important;display:none}}

/* ——— Your first month (8 Oct 2026): the finished pieces of a month on Starter, for each kind of business. ——— */
.pr-first{max-width:1180px;margin:clamp(110px,13vw,170px) auto 0;padding:clamp(36px,5.5vw,72px) clamp(20px,4.5vw,60px);border-radius:40px;background:var(--dark-bg);color:#fff;box-shadow:var(--dark-shadow);overflow:hidden}
.pr-first .eyebrow{color:var(--fog-2)}
.pr-first-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:24px 40px}
.pr-first-head>div{max-width:560px}
.pr-first-head p{margin-top:16px;font-size:16.5px;line-height:1.55;color:var(--fog)}
.pr-first-head .seg{max-width:100%}
.fm-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:44px}
.fm-card{position:relative;display:grid;align-content:start;gap:16px;padding:12px;border-radius:26px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025));box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 0 0 1px rgba(255,255,255,.07);--sheen:rgba(255,255,255,.08);transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .8s var(--ease),opacity .26s var(--ease-in),filter .26s var(--ease-in)}
.fm-art{position:relative;height:172px;padding:16px;border-radius:18px;overflow:hidden;background:radial-gradient(120% 90% at 0% 0%,rgba(255,255,255,.07),rgba(255,255,255,.02) 60%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.fm-copy{display:grid;gap:7px;padding:0 8px 10px}
.fm-ch{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--fog-2)}
.fm-ch svg{width:15px;height:15px;color:#fff;opacity:.85}
.fm-copy h3{font-size:18.5px;font-weight:600;letter-spacing:-.025em;line-height:1.2}
.fm-copy p{font-size:14px;line-height:1.5;color:var(--fog)}
.fm-foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px 28px;margin-top:30px;padding-top:24px;border-top:1px solid var(--nline)}
.fm-starts{display:inline-flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:14px;color:var(--fog)}
.fm-starts b{display:inline-flex;align-items:center;gap:7px;padding:6px 13px 6px 10px;border-radius:999px;font-weight:500;color:#fff;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.fm-starts b svg{width:15px;height:15px}
.fm-starts i{font-style:normal;color:var(--fog-2)}
.fm-note{max-width:440px;font-size:13px;line-height:1.5;color:var(--fog-2)}

/* The previews: lines, chips and rows drawn in CSS, monochrome. */
.fa{height:100%;font-size:12px;color:rgba(255,255,255,.88)}
.fl{display:block;width:var(--w);height:7px;margin:7px 0;border-radius:4px;background:rgba(255,255,255,.17);transform-origin:left center}
.fa-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:500;white-space:nowrap;color:rgba(255,255,255,.9);background:rgba(255,255,255,.09);box-shadow:inset 0 0 0 1px rgba(255,255,255,.13)}
.fa-tags{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 6px}
.fa-row{display:flex;align-items:center;gap:10px;margin-bottom:7px;padding:7px 9px;border-radius:12px;background:rgba(255,255,255,.05)}
.fa-row>div{flex:1;min-width:0}.fa-row>div .fl{margin:4px 0}
.fa-av,.fa-mark{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;font-size:11px;font-weight:600;background:rgba(255,255,255,.14)}
.fa-mark{border-radius:8px;background:#fff;color:var(--ink)}
.fa-row b{flex:1;font-size:12.5px;font-weight:500}
.fa-ok{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#fff;color:var(--ink)}
.fa-ok .ck{width:13px;height:13px;margin:0}
.fa-ready{background:#fff;color:var(--ink);box-shadow:none}
.fa-photo{position:relative;height:62px;margin-bottom:6px;border-radius:12px;overflow:hidden;background:linear-gradient(135deg,rgba(255,255,255,.2),rgba(255,255,255,.04))}
.fa-photo::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.22) 50%,transparent 70%) 0 0/250% 100%;animation:shimmer 3.4s linear infinite}
.fa-photo span{position:absolute;top:12px;right:14px;width:14px;height:14px;border-radius:50%;background:rgba(255,255,255,.55)}
.fa-post .fa-chip{margin-top:4px;background:#fff;color:var(--ink);box-shadow:none}
.fa-logo,.fa-icon{flex:none;width:34px;height:34px;border-radius:10px;background:linear-gradient(140deg,#fff,rgba(255,255,255,.45))}
.fa-icon{width:42px;height:42px;border-radius:12px}
.fa-profile>.fa-row,.fa-social>.fa-row,.fa-store>.fa-row{background:none;padding:0;margin-bottom:10px}
.fa-to{display:flex;align-items:center;gap:8px}.fa-to span{font-size:10.5px;color:var(--fog-2)}.fa-to .fl{flex:none}
.fa-subj .fl{height:9px;background:rgba(255,255,255,.4)}
.fa-mail{position:relative}
.fa-send{position:absolute;right:0;bottom:0;display:inline-flex;align-items:center;gap:4px;padding:6px 12px;border-radius:999px;font-size:11px;font-weight:600;background:#fff;color:var(--ink)}
.fa-send .icon{width:11px;height:11px}
.fa-react{display:flex;gap:6px;margin-top:10px}.fa-react span{width:34px;height:14px;border-radius:999px;background:rgba(255,255,255,.1)}
.fa-hot{background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.fa-badge{flex:none;padding:4px 9px;border-radius:999px;font-size:10.5px;font-weight:600;background:#fff;color:var(--ink);animation:hot-glow 2.6s ease-in-out 1.4s infinite}
@keyframes hot-glow{50%{box-shadow:0 0 0 5px rgba(255,255,255,.07),0 0 18px rgba(255,255,255,.4)}}
.fa-dim{flex:none;width:44px}.fa-dim .fl{width:100%;opacity:.5}
.fa-field{margin-bottom:9px}.fa-field small{display:block;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--fog-2)}.fa-field .fl{margin:5px 0}.fa-field .fa-tags{margin:6px 0 0}
.fa-h .fl{height:11px;background:rgba(255,255,255,.42)}.fa-h2 .fl{height:8px;margin-top:12px;background:rgba(255,255,255,.3)}
.fa-q{display:flex;flex-wrap:wrap;align-content:center;gap:8px;height:100%}.fa-q .fa-chip{font-size:12px;padding:6px 12px}
.fa-get{flex:none;padding:5px 14px;border-radius:999px;font-size:11px;font-weight:600;background:#fff;color:var(--ink)}
.fa-screens{display:flex;gap:10px;justify-content:center;height:100%}
.fa-phone{position:relative;width:30%;max-width:74px;height:100%;padding:9px 8px;border-radius:14px;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.22);background:rgba(255,255,255,.03)}
.fa-phone .fl{height:5px;margin:4px 0}.fa-phone span{position:absolute;left:8px;right:8px;bottom:9px;top:38px;border-radius:7px;background:linear-gradient(160deg,rgba(255,255,255,.18),rgba(255,255,255,.04))}
.fa-chart{display:flex;align-items:flex-end;gap:7px;height:100%;padding-top:6px}
.fa-chart span{flex:1;height:var(--h);border-radius:7px 7px 3px 3px;background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,.1));transform-origin:bottom}
.fa-day{flex:none;width:30px;font-family:var(--mono);font-size:10.5px;color:var(--fog-2)}
.fa-dot{flex:none;width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 10px rgba(255,255,255,.6)}

/* Motion: each card rises out of a blur, then its preview draws itself. Switching kinds blurs the set away first. */
@keyframes fm-in{from{opacity:0;transform:perspective(1100px) translateY(28px) scale(.95);filter:blur(10px)}}
@keyframes fl-grow{from{transform:scaleX(0);opacity:0}}
@keyframes fa-pop{from{opacity:0;transform:scale(.55)}}
@keyframes fa-bar{from{transform:scaleY(0)}}
@keyframes fa-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.landing .fm-grid:not(.in) .fm-card{opacity:0}
.landing .fm-grid.in .fm-card{animation:fm-in .95s var(--ease) backwards;animation-delay:calc(var(--i)*85ms)}
.landing .fm-grid.in .fl{animation:fl-grow .8s var(--ease) backwards;animation-delay:calc(var(--i)*85ms + .3s + var(--k,0)*70ms)}
.landing .fm-grid.in :is(.fa-chip,.fa-send,.fa-get,.fa-badge,.fa-mark,.fa-av,.fa-icon,.fa-logo){animation-name:fa-pop;animation-duration:.7s;animation-timing-function:var(--spring-pop);animation-fill-mode:backwards;animation-delay:calc(var(--i)*85ms + .45s + var(--k,0)*80ms)}
.landing .fm-grid.in .fa-badge{animation:fa-pop .7s var(--spring-pop) calc(var(--i)*85ms + .7s) backwards,hot-glow 2.6s ease-in-out 2s infinite}
.landing .fm-grid.in .fa-row{animation:fl-grow .7s var(--ease) backwards;transform-origin:left;animation-delay:calc(var(--i)*85ms + .2s + var(--k,0)*90ms)}
.landing .fm-grid.in .fa-chart span{animation:fa-bar 1s var(--spring) backwards;animation-delay:calc(var(--i)*85ms + .3s + var(--k)*60ms)}
.landing .fm-grid.in .fa-phone{animation:fm-in .8s var(--ease) backwards;animation-delay:calc(var(--i)*85ms + .25s + var(--k)*110ms)}
.fa-ok .ck path{transition:none}
.landing .fm-grid.in .fa-ok .ck path{animation:fa-draw .6s var(--ease) backwards;animation-delay:calc(var(--i)*85ms + .8s + var(--k,0)*90ms)}
.fm-grid.fm-out .fm-card{opacity:0;filter:blur(8px);transform:perspective(1100px) translateY(-10px) scale(.97)}
@media (max-width:1000px){.fm-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){
 .pr-first{border-radius:30px}
 .fm-grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:84%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:36px -20px 0;padding:4px 20px 8px;scroll-padding:0 20px}
 .fm-grid::-webkit-scrollbar{display:none}
 .fm-card{scroll-snap-align:start}
}
@media (prefers-reduced-motion:reduce){.fa-photo::after,.fa-badge{animation:none!important}}
@media (max-width:620px){.kind-seg{display:grid;grid-template-columns:1fr 1fr;width:100%;border-radius:24px}.kind-seg button{width:100%;padding:0 8px;text-align:center}}
@media (max-width:620px){.pr-first .seg{display:grid;grid-template-columns:1fr 1fr;width:100%;border-radius:22px}.pr-first .seg button{width:100%}}

/* ——— Starter and Growth side by side (8 Oct 2026): bars to their real ratio, channels that light up, what both include. ——— */
.pr-compare .section-head p{margin-top:14px}
.cm-card{max-width:940px;margin:40px auto 0;padding:clamp(20px,3vw,34px) clamp(18px,3.4vw,40px) clamp(22px,3vw,34px);border-radius:34px;background:var(--card-bg);box-shadow:var(--card-shadow),0 40px 80px -50px rgba(0,0,0,.32)}
.cm-legend{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px 22px;padding-bottom:16px;font-size:14px;font-weight:600}
.cm-legend span{display:inline-flex;align-items:center;gap:8px}
.cm-legend small{font-weight:400;color:var(--mute)}
.cm-key{width:22px;height:10px;border-radius:999px}
.cm-key-s{background:linear-gradient(90deg,#fff,#e9e9e6);box-shadow:inset 0 0 0 1px var(--line-2)}
.cm-key-g{background:linear-gradient(90deg,#2a2a2e,#0c0c0d)}
.cm-row{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:center;gap:14px 34px;padding:20px 0;border-top:1px solid var(--line)}
.cm-label{display:grid;gap:5px}
.cm-label strong{font-size:16px;font-weight:600;letter-spacing:-.015em}
.cm-label small{font-size:13px;color:var(--mute)}
.cm-bars{display:grid;gap:8px}
.cm-bar{height:34px;border-radius:12px;background:rgba(12,12,13,.045);box-shadow:inset 0 1px 2px rgba(0,0,0,.05);overflow:hidden}
.cm-fill{position:relative;display:flex;align-items:center;justify-content:flex-end;width:var(--w);min-width:64px;height:100%;padding:0 12px;border-radius:12px;overflow:hidden;transition:width 1.3s var(--spring),min-width 1.3s var(--spring)}
.cm-fill b{font-size:14.5px;font-weight:600;letter-spacing:-.01em}
.cm-s{background:linear-gradient(90deg,#fff,#f1f1ee);box-shadow:inset 0 0 0 1px var(--line-2),0 2px 6px -3px rgba(0,0,0,.14);color:var(--ink)}
.cm-g{background:linear-gradient(90deg,#2a2a2e,#0c0c0d);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 8px 18px -10px rgba(0,0,0,.6);color:#fff}
.cm-g::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%) 0 0/250% 100%;background-position:120% 0;opacity:0}
.cm-marks{display:flex;align-items:center;gap:12px;min-height:34px}
.cm-set{display:flex;flex-wrap:wrap;gap:6px}
.cm-tag{flex:none;min-width:82px;padding:5px 10px;border-radius:999px;font-size:12px;font-weight:600;text-align:center;background:#fff;box-shadow:inset 0 0 0 1px var(--line-2)}
.cm-tag-g{background:var(--ink);color:#fff;box-shadow:none}
.cm-mark{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;color:var(--ink);background:rgba(12,12,13,.05);opacity:.28;transition:opacity .5s var(--ease),background .5s var(--ease),color .5s,scale .6s var(--spring-pop)}
.cm-mark svg{width:15px;height:15px}
.cm-mark.on{opacity:1;background:#fff;box-shadow:inset 0 0 0 1px var(--line-2)}
.cm-all .cm-mark.on{background:var(--ink);color:#fff;box-shadow:none}
.cm-pair{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.cm-no{padding:7px 12px;border-radius:999px;font-size:13px;color:var(--faint);box-shadow:inset 0 0 0 1px var(--line)}
.cm-yes{display:inline-flex;align-items:center;gap:7px;padding:7px 14px 7px 10px;border-radius:999px;font-size:13px;font-weight:600;background:var(--ink);color:#fff}
.cm-yes .ck{width:15px;height:15px;margin:0}
.cm-both{display:grid;gap:14px;padding-top:22px;border-top:1px solid var(--line)}
.cm-chips{display:flex;flex-wrap:wrap;gap:8px}
.cm-chip{display:inline-flex;align-items:center;gap:7px;padding:8px 14px 8px 10px;border-radius:999px;font-size:13.5px;background:var(--paper-hi);box-shadow:inset 0 0 0 1px var(--line-2)}
.cm-chip .ck{width:14px;height:14px;margin:0}

/* Motion: rows rise, bars grow to their ratio (Growth just after Starter, then a light passes over it), channels light up one by one, chips pop. */
@keyframes cm-sheen{0%{opacity:1;background-position:120% 0}100%{opacity:1;background-position:-30% 0}}
@keyframes cm-light{0%{opacity:.28;scale:.8}60%{scale:1.12}100%{opacity:1;scale:1}}
.landing .cm-card:not(.in) .cm-fill{width:0;min-width:0}
.landing .cm-card:not(.in) .cm-fill b{opacity:0}
.cm-fill b{transition:opacity .5s var(--ease) .5s}
.landing .cm-card.in .cm-row{animation:rise .8s var(--ease) backwards;animation-delay:calc(var(--i)*90ms + .1s)}
.landing .cm-card.in .cm-s{transition-delay:calc(var(--i)*120ms + .35s)}
.landing .cm-card.in .cm-g{transition-delay:calc(var(--i)*120ms + .55s)}
.landing .cm-card.in .cm-g::after{animation:cm-sheen 1.2s var(--ease) backwards;animation-delay:calc(var(--i)*120ms + 1.5s)}
.landing .cm-card.in .cm-mark.on{animation:cm-light .7s var(--ease) backwards;animation-delay:calc(var(--k)*70ms + .9s)}
.landing .cm-card:not(.in) .cm-mark.on{opacity:.28}
.landing .cm-card.in .cm-chip{animation:fa-pop .6s var(--spring-pop) backwards;animation-delay:calc(var(--k)*60ms + 1.1s)}
.landing .cm-card.in .cm-yes{animation:fa-pop .6s var(--spring-pop) 1s backwards}
.cm-card .ck path{transition-delay:calc(var(--k,0)*60ms + 1.3s)}
.cm-row:hover .cm-label strong{text-decoration:underline;text-decoration-color:var(--line-3);text-underline-offset:4px}
@media (max-width:760px){.cm-row{grid-template-columns:1fr;gap:12px;padding:18px 0}.cm-legend{justify-content:flex-start}.cm-tag{min-width:72px}}
@media (max-width:420px){.cm-mark{width:24px;height:24px;border-radius:8px}.cm-set{gap:4px}.cm-marks{gap:8px}}
.pilot-card{display:grid;gap:12px;margin-bottom:18px}.pilot-card h2{margin:0}.pilot-card textarea{width:100%;min-height:96px;font-family:var(--mono);font-size:14px}

/* Mailbox status (owner, 8 Oct 2026): the one deliberate colour in the interface, a green dot for “connected”. */
.mb-status{display:flex;align-items:center;gap:14px;margin-top:4px;padding:14px 18px;border-radius:18px;background:linear-gradient(180deg,#fbfbf9,#f4f4f1);box-shadow:inset 0 0 0 1px var(--line-2),0 6px 16px -12px rgba(0,0,0,.2)}
.mb-on{box-shadow:inset 0 0 0 1px rgba(22,163,74,.22),0 8px 22px -14px rgba(22,163,74,.45)}
.mb-dot{position:relative;flex:none;width:11px;height:11px;border-radius:50%;background:var(--faint)}
.mb-dot i{position:absolute;inset:0;border-radius:50%}
.mb-on .mb-dot{background:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.16),0 0 14px 1px rgba(34,197,94,.55)}
.mb-on .mb-dot i{background:#22c55e;animation:mb-ping 2.6s cubic-bezier(.16,1,.3,1) infinite}
@keyframes mb-ping{0%{transform:scale(1);opacity:.55}75%,100%{transform:scale(2.8);opacity:0}}
.mb-off .mb-dot{background:var(--ink);box-shadow:0 0 0 4px rgba(12,12,13,.08)}
.mb-text{display:grid;gap:2px;min-width:0}
.mb-text strong{font-size:15px;font-weight:600;letter-spacing:-.01em}
.mb-text span{font-size:13.5px;color:var(--mute);overflow-wrap:anywhere}
.mb-meta{margin-left:auto;flex:none;font-family:var(--mono);font-size:11.5px;color:var(--mute)}
@media (max-width:520px){.mb-status{flex-wrap:wrap}.mb-meta{margin-left:25px}}
@media (prefers-reduced-motion:reduce){.mb-on .mb-dot i{animation:none}}

/* ——— Sending from your mailbox, live (8 Oct 2026). Motion ideas from transitions.dev recreated in our own CSS: a live dot,
   a progress bar with a light running through it, a spinner that becomes a drawn check, text that swaps through a blur. ——— */
.send-live{display:grid;gap:16px;padding:20px 22px;border-radius:24px;background:var(--card-bg);box-shadow:var(--card-shadow),0 18px 40px -30px rgba(0,0,0,.3)}
.sl-live,.sl-on{box-shadow:inset 0 0 0 1px rgba(22,163,74,.2),var(--card-shadow),0 18px 40px -28px rgba(22,163,74,.35)}
.sl-head{display:flex;align-items:center;gap:14px}
.sl-dot{position:relative;flex:none;width:12px;height:12px;border-radius:50%;background:var(--faint)}
.sl-dot i{position:absolute;inset:0;border-radius:50%}
.sl-live .sl-dot,.sl-on .sl-dot{background:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.15),0 0 14px 1px rgba(34,197,94,.55)}
.sl-live .sl-dot i{background:#22c55e;animation:mb-ping 1.8s cubic-bezier(.16,1,.3,1) infinite}
.sl-off .sl-dot{background:var(--ink);box-shadow:0 0 0 4px rgba(12,12,13,.08)}
.sl-title{display:grid;gap:3px;flex:1;min-width:0}
.sl-title .eyebrow{font-size:11px}
.sl-title strong{font-size:18px;font-weight:600;letter-spacing:-.02em}
.sl-sub{font-size:14px;line-height:1.45;color:var(--mute)}
.sl-count{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.sl-head .btn{flex:none}
.sl-progress{position:relative;height:8px;border-radius:999px;background:rgba(12,12,13,.06);overflow:hidden}
.sl-progress i{position:absolute;inset:0 auto 0 0;width:var(--w);min-width:8px;border-radius:inherit;background:linear-gradient(90deg,#2a2a2e,#0c0c0d);transition:width 1.2s var(--spring)}
.sl-live .sl-progress i::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%) 0 0/250% 100%;animation:shimmer 1.8s linear infinite}
.sl-meta{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px 16px;margin-top:-6px;font-size:12.5px;color:var(--mute)}
.sl-meta b{color:var(--ink);font-variant-numeric:tabular-nums}
.sl-list{list-style:none;display:grid;margin:0;padding:0;border-top:1px solid var(--line)}
.sl-row{display:grid;grid-template-columns:24px minmax(0,1fr) auto;align-items:center;gap:12px;padding:11px 2px;border-bottom:1px solid var(--line);font-size:14px}
.sl-row:last-child{border-bottom:0}
.sl-mark{display:grid;place-items:center;width:22px;height:22px;border-radius:50%}
.sl-mark i{display:block;width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line-3)}
.is-sent .sl-mark{background:var(--ink);color:#fff}
.is-sent .sl-mark .ck{width:13px;height:13px;margin:0}
.sl-spin{width:18px!important;height:18px!important;box-shadow:none!important;border:2px solid rgba(12,12,13,.12);border-top-color:var(--ink);animation:sl-turn .9s linear infinite}
@keyframes sl-turn{to{rotate:360deg}}
.sl-who{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sl-who small{color:var(--mute)}
.is-next .sl-who{font-weight:600}
.is-wait .sl-who,.is-wait .sl-when{color:var(--mute)}
.sl-when{font-size:12.5px;color:var(--mute);font-variant-numeric:tabular-nums;white-space:nowrap}
.is-next .sl-when b{color:var(--ink)}
.sl-more{padding:10px 2px 2px;font-size:12.5px;color:var(--mute)}
/* The moment an email leaves: the spinner becomes a check that draws itself, the row glows once, the time blurs in. */
@keyframes sl-pop{0%{scale:.4;opacity:0}60%{scale:1.15}100%{scale:1;opacity:1}}
@keyframes sl-glow{0%{background:rgba(34,197,94,.14)}100%{background:transparent}}
@keyframes sl-swap{from{opacity:0;filter:blur(6px);translate:0 4px}}
.just{animation:sl-glow 1.6s var(--ease)}
.just .sl-mark{animation:sl-pop .6s var(--spring-pop)}
.just .sl-mark .ck path{animation:fa-draw .55s var(--ease) .25s backwards}
.just .sl-when{animation:sl-swap .6s var(--ease) .15s backwards}
@media (max-width:620px){.sl-head{flex-wrap:wrap}.sl-head .btn{width:100%}.sl-row{grid-template-columns:24px minmax(0,1fr)}.sl-when{grid-column:2}}
@media (prefers-reduced-motion:reduce){.sl-live .sl-dot i,.sl-live .sl-progress i::after,.sl-spin{animation:none!important}}

/* ——— This week: Needs you, and How it runs (8 Oct 2026). Rows rise in turn, the flow's line draws itself, the live dot
   breathes. Motion ideas from transitions.dev recreated in our own CSS. ——— */
.tw-grid{align-items:stretch}
.nv-card,.hr-card{display:grid;align-content:start;gap:14px;padding:20px 22px}
.nv-head,.hr-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.nv-count{display:grid;place-items:center;min-width:22px;height:22px;padding:0 7px;border-radius:999px;font-size:12px;font-weight:600;background:var(--ink);color:#fff}
.nv-list{list-style:none;display:grid;gap:8px;margin:0;padding:0}
.nv-row{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:12px;padding:11px 12px;border-radius:16px;background:var(--paper-hi);box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .3s,translate .3s var(--ease)}
.nv-row:hover{box-shadow:inset 0 0 0 1px var(--line-2),0 8px 18px -14px rgba(0,0,0,.35);translate:0 -1px}
.nv-ico{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:rgba(12,12,13,.06);color:var(--ink)}
.nv-ico .icon{width:17px;height:17px}
.nv-text{display:grid;gap:2px;min-width:0}
.nv-text strong{font-size:14.5px;font-weight:600;letter-spacing:-.01em}
.nv-text small{font-size:13px;line-height:1.4;color:var(--mute)}
.nv-hot{background:linear-gradient(180deg,#1d1d20,#0c0c0d);box-shadow:0 12px 26px -16px rgba(0,0,0,.6)}
.nv-hot .nv-ico{background:rgba(255,255,255,.12);color:#fff}
.nv-hot .nv-text strong{color:#fff}.nv-hot .nv-text small{color:var(--fog)}
.nv-hot .btn-ink{background:#fff;color:var(--ink)}
.nv-hot:hover{box-shadow:0 16px 30px -16px rgba(0,0,0,.7)}
.nv-check{grid-template-columns:34px minmax(0,1fr)}
.nv-check .nv-actions{grid-column:2;display:flex;flex-wrap:wrap;gap:8px}
.nv-clear{display:flex;align-items:center;gap:14px;padding:14px;border-radius:16px;background:var(--paper-hi);box-shadow:inset 0 0 0 1px var(--line)}
.nv-clear span:last-child{display:grid;gap:3px}
.nv-clear strong{font-size:15px;font-weight:600}.nv-clear small{font-size:13px;line-height:1.45;color:var(--mute)}
.nv-tick{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--ink);color:#fff}
.nv-tick .ck{width:17px;height:17px;margin:0}
.hr-state{display:inline-flex;align-items:center;gap:8px;padding:5px 11px;border-radius:999px;font-size:12.5px;font-weight:600;background:var(--paper-hi);box-shadow:inset 0 0 0 1px var(--line-2)}
.hr-state i{position:relative;width:8px;height:8px;border-radius:50%;background:var(--faint)}
.hr-state.is-on i{background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.16),0 0 10px rgba(34,197,94,.55)}
.hr-state.is-on i::after{content:'';position:absolute;inset:0;border-radius:50%;background:#22c55e;animation:mb-ping 2.6s cubic-bezier(.16,1,.3,1) infinite}
.hr-flow{position:relative;list-style:none;display:grid;gap:4px;margin:0;padding:0}
.hr-flow::before{content:'';position:absolute;left:16px;top:18px;bottom:18px;width:1.5px;background:linear-gradient(var(--ink),var(--line-3));transform-origin:top}
.hr-flow li{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr);align-items:center;gap:12px;padding:6px 0}
.hr-ico{position:relative;z-index:1;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--card);box-shadow:inset 0 0 0 1.5px var(--line-2),0 0 0 4px var(--card)}
.hr-ico .icon{width:16px;height:16px}
.hr-flow li:first-child .hr-ico{background:var(--ink);color:#fff;box-shadow:0 0 0 4px var(--card)}
.hr-flow strong{display:block;font-size:14.5px;font-weight:600;letter-spacing:-.01em}
.hr-flow small{display:block;margin-top:2px;font-size:12.5px;line-height:1.4;color:var(--mute)}
.hr-warn{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:11px 12px;border-radius:14px;background:rgba(12,12,13,.04);box-shadow:inset 0 0 0 1px var(--line-2)}
.hr-warn>.icon{width:18px;height:18px}
.hr-warn span{display:grid;gap:2px}.hr-warn strong{font-size:13.5px;font-weight:600}.hr-warn small{font-size:12.5px;color:var(--mute)}
.hr-actions{display:flex;flex-wrap:wrap;gap:8px}
.hr-actions .icon{width:14px;height:14px}
@keyframes hr-line{from{transform:scaleY(0)}}
:is(.is-entering,.is-swapping) .tw-grid.in .nv-row{animation:rise .7s var(--ease) backwards;animation-delay:calc(var(--i,0)*80ms + .1s)}
:is(.is-entering,.is-swapping) .tw-grid.in .hr-flow::before{animation:hr-line 1.1s var(--ease) .25s backwards}
:is(.is-entering,.is-swapping) .tw-grid.in .hr-flow li{animation:rise .7s var(--ease) backwards;animation-delay:calc(var(--i,0)*110ms + .2s)}
:is(.is-entering,.is-swapping) .tw-grid.in .hr-flow .hr-ico{animation:fa-pop .6s var(--spring-pop) backwards;animation-delay:calc(var(--i,0)*110ms + .3s)}
:is(.is-entering,.is-swapping) .tw-grid.in .nv-tick .ck path{animation:fa-draw .6s var(--ease) .35s backwards}
.pilot-batch p{max-width:62ch}
@media (max-width:900px){.tw-grid{grid-template-columns:1fr}}
@media (max-width:520px){.nv-row{grid-template-columns:34px minmax(0,1fr)}.nv-row>.btn{grid-column:2;justify-self:start}.hr-warn{grid-template-columns:auto minmax(0,1fr)}.hr-warn .btn{grid-column:2;justify-self:start}}
@media (prefers-reduced-motion:reduce){.hr-state.is-on i::after{animation:none}}

/* Send reply (8 Oct 2026) */
.mr-said{display:grid;gap:8px;margin:4px 0 16px;padding:14px 16px;border-radius:16px;background:linear-gradient(180deg,#1d1d20,#0c0c0d);color:#fff}
.mr-said .eyebrow{display:inline-flex;align-items:center;gap:6px;color:var(--fog)}
.mr-said .eyebrow .icon{width:13px;height:13px}
.mr-said p{margin:0;font-size:14.5px;line-height:1.5;white-space:pre-line}
#mail-reply-form textarea{font:inherit;line-height:1.55}
.mr-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:6px}
.lead-answered{color:var(--ink)}
.lead-answered .icon{width:14px;height:14px}

/* ——— Your people (8 Oct 2026, Phase B part 1) ——— */
.pp-glyph{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:12px;background:var(--dark-bg);color:#fff;box-shadow:var(--dark-shadow)}
.pp-glyph .icon{width:18px;height:18px}.pp-glyph.big{width:56px;height:56px;border-radius:18px}.pp-glyph.big .icon{width:24px;height:24px}
.pp-strip{display:flex;align-items:center;gap:14px;width:100%;margin-top:18px;padding:14px 16px;border-radius:18px;background:var(--paper-hi);box-shadow:inset 0 0 0 1px var(--line)}
.pp-strip-text{display:grid;gap:2px;flex:1;min-width:0}.pp-strip-text strong{font-size:15px;font-weight:600}.pp-strip-text small{font-size:13px;color:var(--mute)}
.pp-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.pp-bar .seg small{margin-left:5px;font-size:11.5px;opacity:.6;font-variant-numeric:tabular-nums}
.pp-search{display:flex;align-items:center;gap:8px;flex:1;min-width:220px;max-width:340px;height:42px;padding:0 14px;border-radius:999px;background:var(--paper-hi);box-shadow:inset 0 0 0 1px var(--line-2)}
.pp-search .icon{width:16px;height:16px;color:var(--mute)}.pp-search input{flex:1;min-width:0;height:100%;padding:0;border:0;background:none;box-shadow:none;font-size:14.5px}
.pp-list-card{padding:6px 8px}
.pp-list{list-style:none;margin:0;padding:0}
.pp-row{display:grid;grid-template-columns:36px minmax(0,1.6fr) auto minmax(0,1fr) auto;align-items:center;gap:14px;padding:11px 12px;border-radius:14px;transition:background .25s}
.pp-row+.pp-row{box-shadow:inset 0 1px 0 var(--line)}
.pp-row:hover{background:rgba(12,12,13,.03)}
.pp-av{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;font-size:14px;font-weight:600;background:linear-gradient(140deg,#e9e9e6,#d9d9d5);color:var(--ink-2)}
.pp-who{display:grid;gap:2px;min-width:0}.pp-who strong{font-size:14.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pp-who small{font-size:12.5px;color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pp-kind{padding:3px 10px;border-radius:999px;font-size:11.5px;font-weight:600;background:var(--paper-hi);box-shadow:inset 0 0 0 1px var(--line-2)}
.pp-when{font-size:12.5px;color:var(--mute);font-variant-numeric:tabular-nums}
.pp-acts{display:flex;gap:4px}
.pp-heart,.pp-x{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;color:var(--faint);transition:color .2s,background .2s,scale .4s var(--spring-pop)}
.pp-heart .icon,.pp-x .icon{width:16px;height:16px}
.pp-heart:hover,.pp-x:hover{background:rgba(12,12,13,.06);color:var(--ink)}
.pp-heart.on{color:var(--ink)}.pp-heart.on .icon{fill:currentColor}.pp-heart:active{scale:.85}
.pp-x{opacity:0}.pp-row:hover .pp-x,.pp-x:focus-visible{opacity:1}
.pp-skel i{display:block;height:10px;border-radius:5px;background:linear-gradient(100deg,rgba(12,12,13,.06) 30%,rgba(12,12,13,.12) 50%,rgba(12,12,13,.06) 70%) 0 0/250% 100%;animation:shimmer 1.4s linear infinite}
.pp-skel i+i{width:60%;margin-top:6px}
.pp-none{padding:22px 12px;color:var(--mute);font-size:14px}
#people-more{display:flex;justify-content:center;padding:10px 0 8px}#people-more:empty{display:none}
:is(.is-entering,.is-swapping) .pp-row{animation:rise .6s var(--ease) backwards;animation-delay:calc(var(--i,0)*35ms)}
.pp-empty{display:grid;justify-items:start;gap:14px;padding:clamp(24px,4vw,40px)}
.pp-empty h2{font-size:clamp(1.5rem,2.6vw,2rem);letter-spacing:-.035em;line-height:1.1}
.pp-empty p{max-width:62ch;color:var(--mute);line-height:1.55}
.pp-uses{list-style:none;display:grid;gap:10px;margin:0;padding:0}
.pp-uses li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;line-height:1.45}.pp-uses .icon{flex:none;width:17px;height:17px;margin-top:2px}.pp-uses small{color:var(--mute)}
.pp-dne{margin-top:14px;padding:16px 20px}
.pp-dne summary{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;list-style:none}.pp-dne summary::-webkit-details-marker{display:none}
.pp-dne summary span{display:grid;gap:2px}.pp-dne summary strong{font-size:15px}.pp-dne summary small{font-size:13px;color:var(--mute)}
.pp-dne summary>.icon{width:18px;height:18px;transition:rotate .35s var(--ease)}.pp-dne[open] summary>.icon{rotate:45deg}
#dne-body{display:grid;gap:12px;margin-top:14px}
.dne-add{display:flex;gap:8px}.dne-add input{flex:1}
.dne-list{list-style:none;display:grid;margin:0;padding:0}.dne-list li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:9px 0;border-top:1px solid var(--line);font-size:14px}.dne-list small{color:var(--mute)}
/* Add people */
.pp-src{width:max-content;margin-bottom:12px}
#pp-text{width:100%;min-height:120px;font-family:var(--mono);font-size:13.5px;line-height:1.55}
.pp-drop{position:relative;display:flex;align-items:center;gap:14px;padding:22px;border-radius:18px;border:1.5px dashed var(--line-3);background:var(--paper-hi);cursor:pointer;transition:border-color .2s,background .2s}
.pp-drop:hover{border-color:var(--ink);background:#fff}.pp-drop>.icon{width:22px;height:22px}.pp-drop span{display:grid;gap:3px}.pp-drop small{font-size:12.5px;color:var(--mute)}
.pp-drop input{position:absolute;inset:0;opacity:0;cursor:pointer}
.pp-preview:not(:empty){display:grid;gap:12px;margin:14px 0 4px;padding:14px;border-radius:16px;background:var(--paper-hi);box-shadow:inset 0 0 0 1px var(--line);animation:swap-in .4s var(--ease)}
.pp-stats{display:flex;flex-wrap:wrap;gap:8px}
.pp-stat{padding:5px 11px;border-radius:999px;font-size:12.5px;color:var(--mute);box-shadow:inset 0 0 0 1px var(--line-2)}.pp-stat b{color:var(--ink);font-variant-numeric:tabular-nums}
.pp-stat.ok{background:var(--ink);color:#fff;box-shadow:none}.pp-stat.ok b{color:#fff}
.pp-cols{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.pp-col{display:grid;gap:4px;flex:none;min-width:130px;padding:8px 10px;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);opacity:.6}
.pp-col.on{opacity:1;box-shadow:inset 0 0 0 1.5px var(--ink)}
.pp-col small{font-size:11px;color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pp-col select{height:30px;padding:0 6px;font-size:13px}
.pp-sample{list-style:none;display:grid;gap:6px;margin:0;padding:0}
.pp-sample li{display:flex;align-items:center;gap:10px;font-size:13.5px}.pp-sample .pp-av{width:28px;height:28px;font-size:12px}
.pp-sample span{display:grid;min-width:0}.pp-sample small{font-size:12px;color:var(--mute)}.pp-more{color:var(--mute);font-size:12.5px;padding-left:38px}
.pp-kinds{display:grid;gap:8px;margin:14px 0 12px}.pp-kinds .seg{width:max-content;max-width:100%}
.pp-confirm{display:flex;gap:10px;align-items:flex-start;margin:4px 0 16px;font-size:13.5px;line-height:1.45;color:var(--ink-2)}
.pp-confirm input{flex:none;width:18px;height:18px;margin-top:1px;accent-color:var(--ink)}
@media (max-width:760px){.pp-row{grid-template-columns:36px minmax(0,1fr) auto}.pp-kind,.pp-when{display:none}.pp-x{opacity:1}.pp-search{max-width:none}.pp-strip{flex-wrap:wrap}}
@media (prefers-reduced-motion:reduce){.pp-skel i{animation:none}}
.identity .pp-strip{grid-column:1/-1;margin-top:4px}

/* ——— Landing in the inbox, the daily pace, one approval for every channel (docs/SPEC-phase-b.md, part 2) ——— */
.mb-sum{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 12px;margin:10px 0 2px;padding:9px 14px;border-radius:12px;font-size:13px;color:var(--ink-2);background:var(--paper-hi);box-shadow:inset 0 0 0 1px var(--line)}
.mb-sum span{color:var(--mute)}
.mb-sum.is-warn{box-shadow:inset 0 0 0 1px var(--line-3)}
.mb-sum.is-blocked{background:var(--ink);color:#fff;box-shadow:none}.mb-sum.is-blocked span{color:rgba(255,255,255,.7)}
.mc-block{margin:14px 0 0;padding:16px 18px;border-radius:18px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line-2);animation:mc-in .55s var(--ease) backwards}
.mc-block+.mc-block{animation-delay:.08s}
.mc-block.is-blocked{box-shadow:inset 0 0 0 1.5px var(--ink)}
.mc-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.mc-head>span{display:grid;gap:2px}.mc-head strong{font-size:16px;letter-spacing:-.01em}
.mc-head .btn.is-busy .icon{animation:mc-spin .9s linear infinite}
.mc-why{margin:0 0 10px;font-size:13.5px;color:var(--ink-2)}
.mc-list{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.mc-row{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--line);animation:mc-in .5s var(--ease) backwards;animation-delay:calc(var(--i,0)*70ms + .12s)}
.mc-row:first-child{border-top:0}
.mc-mark{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font:700 13px/1 var(--sans,inherit);margin-top:1px}
.mc-pass .mc-mark{background:var(--ink);color:#fff}.mc-pass .mc-mark .ck{width:13px;height:13px;margin:0}
.mc-pass .mc-mark .ck path{animation:fa-draw .6s var(--ease) backwards;animation-delay:calc(var(--i,0)*90ms + .35s);transition:none}
.mc-warn .mc-mark{box-shadow:inset 0 0 0 1.5px var(--ink);color:var(--ink)}
.mc-missing .mc-mark{box-shadow:inset 0 0 0 1.5px var(--line-3)}.mc-missing .mc-mark i{width:8px;height:1.5px;border-radius:2px;background:var(--ink-3)}
.mc-text{display:grid;gap:3px;min-width:0;flex:1}
.mc-text strong{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;font-size:14.5px}
.mc-state{font-size:12px;font-weight:500;color:var(--mute);padding:2px 8px;border-radius:99px;background:var(--paper-hi)}
.mc-pass .mc-state{color:var(--ink-2)}.mc-missing .mc-state,.mc-warn .mc-state{background:var(--ink);color:#fff}
.mc-text>small{color:var(--mute);font-size:13px}
.mc-fix{display:grid;gap:6px;margin-top:4px;padding:10px 12px;border-radius:12px;background:var(--paper-hi);font-size:13px;color:var(--ink-2)}
.mc-rec{display:grid;gap:4px;min-width:0}.mc-rec small{color:var(--mute);font-size:12px}
.mc-rec .mail-copy{justify-content:space-between;max-width:100%;text-align:left;white-space:normal;word-break:break-all}
.mc-when{display:block;margin-top:10px;color:var(--mute);font-size:12.5px}
.mc-block .seg{margin:2px 0 0}
.mc-note{display:flex;gap:10px;align-items:flex-start;margin:14px 0 0;padding:12px 14px;border-radius:14px;background:var(--paper-hi);font-size:13.5px;color:var(--ink-2);animation:mc-in .5s var(--ease) .2s backwards}
.mc-note .icon{flex:none;width:16px;height:16px;margin-top:2px}
.ap-groups{display:grid;gap:12px;max-height:52vh;overflow:auto;margin:0 0 16px;padding:2px}
.ap-groups .approve-list{max-height:none;overflow:visible;margin:0}
.ap-group{padding:12px;border-radius:18px;background:var(--paper-hi);box-shadow:inset 0 0 0 1px var(--line);animation:mc-in .55s var(--ease) backwards;animation-delay:calc(var(--g,0)*90ms + .1s)}
.ap-head{display:flex;align-items:center;gap:12px;padding:2px 2px 10px}
.ap-head>span:nth-child(2){display:grid;gap:1px;flex:1;min-width:0}.ap-head small{color:var(--mute);font-size:12.5px}
.ap-head .ico-tile{width:34px;height:34px;border-radius:11px}
.ap-count{min-width:30px;height:30px;padding:0 9px;border-radius:99px;display:grid;place-items:center;background:var(--ink);color:#fff;font:600 13px/1 var(--mono,ui-monospace,monospace)}
.ap-count.bump{animation:ap-bump .4s var(--ease)}
.ap-group .approve-list li{background:var(--card)}
#mail-approve-form .approve-list li{animation:mc-in .45s var(--ease) backwards;animation-delay:calc(var(--i,0)*40ms + var(--g,0)*90ms + .15s)}
@keyframes mc-in{from{opacity:0;transform:translateY(8px)}}
@keyframes mc-spin{to{transform:rotate(360deg)}}
@keyframes ap-bump{40%{transform:scale(1.18)}}
@media (max-width:520px){.mc-head{flex-wrap:wrap}.mc-block{padding:14px}.ap-group{padding:10px}}
@media (prefers-reduced-motion:reduce){.mc-block,.mc-row,.mc-note,.ap-group,#mail-approve-form .approve-list li,.ap-count.bump,.mc-pass .mc-mark .ck path{animation:none}}

/* ——— Your customers: this week's mix and the channel's settings (docs/SPEC-phase-b.md, part 3) ——— */
.cu-card{align-items:flex-end}
.cu-body{flex:1;min-width:min(100%,320px);display:grid;gap:10px}
.cu-body h2{margin:2px 0 4px}
.cu-mix{display:flex;gap:4px;height:12px;border-radius:99px;overflow:hidden;max-width:520px}
.cu-mix i{display:block;flex:0 0 var(--w);height:100%;border-radius:99px;transform-origin:left center}
.cu-review{--cu:var(--ink)}.cu-referral{--cu:var(--ink-3)}.cu-winback{--cu:var(--faint)}
.cu-mix i{background:var(--cu)}
.cu-mix .cu-winback{background:repeating-linear-gradient(135deg,var(--ink-3) 0 2px,var(--faint) 2px 6px)}
:is(.is-entering,.is-swapping) .cu-mix i{animation:cu-grow .9s var(--ease) backwards;animation-delay:calc(var(--i)*120ms + .3s)}
.cu-legend{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13.5px;color:var(--ink-2)}
.cu-legend li{display:flex;align-items:center;gap:7px}
.cu-legend span{width:10px;height:10px;border-radius:3px;background:var(--cu)}
.cu-legend .cu-winback span{background:repeating-linear-gradient(135deg,var(--ink-3) 0 2px,var(--faint) 2px 5px)}
.cu-legend strong{font-weight:600;color:var(--ink)}
.cu-legend .is-zero{opacity:.45}
:is(.is-entering,.is-swapping) .cu-legend li{animation:mc-in .5s var(--ease) backwards;animation-delay:calc(var(--i)*80ms + .5s)}
.cu-settings{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;font-size:12.5px;color:var(--mute)}
.cu-settings>span{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:99px;background:var(--paper-hi);box-shadow:inset 0 0 0 1px var(--line)}
.cu-settings .icon{width:13px;height:13px}.cu-settings b{color:var(--ink);font-weight:600}
.cu-settings .text-btn{display:inline-flex;align-items:center;gap:5px;font-size:12.5px}
.cu-card .hr-warn{max-width:560px}
.cu-form{display:grid;gap:14px}
.cu-form label{display:grid;gap:6px}.cu-form label .field-note,.cu-field .field-note{margin:0}
.cu-field{display:grid;gap:8px}.cu-field>span{font-weight:500}
/* Every choice in view, sharing the row equally: on a phone the five “come back after” options fit without scrolling. */
.cu-field .seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;max-width:100%}.cu-field .seg button{display:flex;align-items:center;justify-content:center;text-align:center;padding:0 6px}
@media (max-width:420px){.cu-field .seg button{padding:0 2px;font-size:13px}}
@keyframes cu-grow{from{transform:scaleX(0)}}
@media (max-width:520px){.cu-card .btn-ink{width:100%;justify-content:center}}
@media (prefers-reduced-motion:reduce){.cu-mix i,.cu-legend li{animation:none!important}}
@container (min-width:521px){.lead-funnel:has(>li:nth-child(4):last-child){grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ——— The website rail: a guide previewed as it will look on the founder's site (docs/SPEC-website-rail.md) ——— */
.gk-preview{position:relative;margin:4px 0 14px;padding:22px 24px 0;border-radius:18px;background:#fff;box-shadow:inset 0 0 0 1px var(--line-2),0 18px 40px -28px rgba(0,0,0,.35);max-height:42vh;overflow:hidden;animation:mc-in .55s var(--ease) backwards}
.gk-preview::after{content:'';position:absolute;inset:auto 0 0;height:90px;background:linear-gradient(transparent,#fff);pointer-events:none}
.gk-preview .eyebrow{display:inline-flex;align-items:center;gap:6px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--mono,ui-monospace,monospace);text-transform:none;letter-spacing:0}
.gk-preview .eyebrow .icon{width:13px;height:13px;flex:none}
.gk-preview h3{margin:10px 0 6px;font-size:22px;line-height:1.2;letter-spacing:-.02em}
.gk-summary{margin:0 0 12px;color:var(--ink-3);font-size:14.5px}
.gk-body{font-size:14px;line-height:1.6;color:var(--ink-2)}
.gk-body h2{font-size:16px;margin:16px 0 6px}.gk-body h3{font-size:14.5px;margin:12px 0 4px}
.gk-body p{margin:0 0 10px}.gk-body ul,.gk-body ol{margin:0 0 10px;padding-left:20px}
.gk-body a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.gk-state{display:flex;align-items:center;gap:10px;margin:0 0 12px;padding:12px 14px;border-radius:14px;background:var(--paper-hi);box-shadow:inset 0 0 0 1px var(--line-2);animation:mc-in .5s var(--ease) .1s backwards}
.gk-state>span{display:grid;gap:2px}.gk-state a{font-size:13px;color:var(--ink-2);display:inline-flex;align-items:center;gap:4px}
.gk-state .icon,.gk-state .ck{width:18px;height:18px;flex:none}
.gk-state.is-live{background:var(--ink);color:#fff;box-shadow:none}.gk-state.is-live a{color:rgba(255,255,255,.8)}
.gk-state.is-live .ck path{animation:fa-draw .6s var(--ease) .35s backwards;transition:none}
.ws-status{margin-bottom:10px}
@media (max-width:520px){.gk-preview{padding:18px 16px 0}.gk-preview h3{font-size:19px}}
@media (prefers-reduced-motion:reduce){.gk-preview,.gk-state,.gk-state.is-live .ck path{animation:none}}
.backup-card strong{display:inline-flex;align-items:center;gap:7px}.backup-card strong .icon{width:16px;height:16px}
.backup-card.is-late{box-shadow:inset 0 0 0 1.5px var(--ink)}

/* ——— Hero: “apps, software, agencies and local services”, each with an animated card (owner, 10 Oct 2026) ——— */
.hero-under{position:relative}
.hero-under>span{position:relative}
.hw{position:relative;display:inline;padding:0;margin:0;border:0;background:none;font:inherit;color:var(--ink);cursor:default;-webkit-tap-highlight-color:transparent}
.hw-text{position:relative;white-space:nowrap;background:linear-gradient(currentColor,currentColor) left 100%/0 1px no-repeat;transition:background-size .5s var(--ease)}
.hw:is(:hover,:focus-visible,.is-open) .hw-text{background-size:100% 1px}
.hw:focus-visible{outline:none}.hw:focus-visible .hw-text{outline:2px solid var(--ink);outline-offset:3px;border-radius:3px}
.hw-card{position:absolute;z-index:20;left:50%;top:calc(100% + 12px);width:92px;padding:8px;border-radius:18px;display:grid;place-items:center;pointer-events:none;
 background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(246,246,244,.86));-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),0 0 0 1px var(--line-2),0 24px 50px -22px rgba(0,0,0,.35),0 8px 18px -10px rgba(0,0,0,.18);
 opacity:0;transform:translate(-50%,-10px) scale(.9);transform-origin:50% 0;transition:opacity .28s var(--ease),transform .55s cubic-bezier(.2,1.25,.32,1);will-change:transform,opacity}
.hw-card::after{content:'';position:absolute;left:50%;top:-6px;width:12px;height:12px;background:#fff;box-shadow:-1px -1px 0 var(--line-2);transform:translateX(-50%) rotate(45deg);border-radius:3px 0 0 0}
.hw:is(:hover,:focus-visible,.is-open) .hw-card{opacity:1;transform:translate(-50%,0) scale(1)}
.hw-art{display:block;width:76px;height:76px}
.hw-art svg{width:100%;height:100%;overflow:visible}
.hw-frame{fill:#fff;stroke:var(--ink);stroke-width:1.6}
.hw-notch,.hw-dock,.hw-side{fill:var(--line-2)}
.hw-rule,.hw-street{stroke:var(--line-3);stroke-width:1.2}
.hw-dot{fill:var(--faint)}
.hw-icon{fill:var(--ink);transform-box:fill-box;transform-origin:center;transform:scale(0)}
.hw-line{fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.hw-peak{fill:var(--ink);transform-box:fill-box;transform-origin:center;transform:scale(0)}
.hw-shape{fill:var(--paper-lo);stroke:var(--ink-3);stroke-width:1.2;transform-box:fill-box;transform-origin:center;transform:scale(.6);opacity:0}
.hw-cursor{fill:var(--ink);stroke:#fff;stroke-width:1;transform:translate(90px,26px)}
.hw-badge circle{fill:var(--ink)}.hw-badge path{fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.hw-badge{transform-box:fill-box;transform-origin:center;transform:scale(0)}
.hw-pin path{fill:var(--ink)}.hw-pin circle{fill:#fff}
.hw-pin{transform:translateY(-34px);opacity:0}
.hw-ripple{fill:none;stroke:var(--ink);stroke-width:1.4;transform-box:fill-box;transform-origin:center;opacity:0}
/* The illustration plays each time the card opens. */
.hw:is(:hover,:focus-visible,.is-open) .hw-icon{animation:hw-pop .5s cubic-bezier(.2,1.4,.35,1) forwards;animation-delay:calc(.12s + var(--i)*55ms)}
.hw:is(:hover,:focus-visible,.is-open) .hw-line{animation:hw-draw 1s var(--ease) .25s forwards}
.hw:is(:hover,:focus-visible,.is-open) .hw-peak{animation:hw-pop .45s cubic-bezier(.2,1.4,.35,1) 1.15s forwards,hw-pulse 1.8s ease-in-out 1.6s infinite}
.hw:is(:hover,:focus-visible,.is-open) .hw-shape{animation:hw-shape .5s cubic-bezier(.2,1.3,.35,1) forwards;animation-delay:calc(.12s + var(--i)*110ms)}
.hw:is(:hover,:focus-visible,.is-open) .hw-cursor{animation:hw-cursor 1.25s cubic-bezier(.65,0,.25,1) .3s forwards}
.hw:is(:hover,:focus-visible,.is-open) .hw-badge{animation:hw-pop .5s cubic-bezier(.2,1.5,.35,1) 1.35s forwards}
.hw:is(:hover,:focus-visible,.is-open) .hw-badge path{animation:hw-draw .45s var(--ease) 1.6s forwards}
.hw:is(:hover,:focus-visible,.is-open) .hw-pin{animation:hw-drop .7s cubic-bezier(.3,1.5,.4,1) .2s forwards}
.hw:is(:hover,:focus-visible,.is-open) .hw-ripple{animation:hw-ripple 1.8s cubic-bezier(.2,.7,.3,1) .75s infinite}
.hw:is(:hover,:focus-visible,.is-open) .hw-ripple.r2{animation-delay:1.65s}
@keyframes hw-pop{to{transform:scale(1)}}
@keyframes hw-draw{to{stroke-dashoffset:0}}
@keyframes hw-pulse{50%{transform:scale(1.35)}}
@keyframes hw-shape{to{transform:scale(1);opacity:1}}
@keyframes hw-cursor{55%{transform:translate(52px,46px)}100%{transform:translate(70px,54px)}}
@keyframes hw-drop{to{transform:none;opacity:1}}
@keyframes hw-ripple{0%{transform:scale(.4);opacity:.7}100%{transform:scale(2.4);opacity:0}}
/* On phones the line wraps: the card centres on the line instead of the word, so it never leaves the screen. */
/* On phones the line wraps: the card opens below the whole line, centred, so it never leaves the screen. */
@media (max-width:600px){.hero-under>span{position:static}.hw{position:static}.hw-card::after{display:none}}
@media (hover:none){.hw{cursor:pointer}}
@media (prefers-reduced-motion:reduce){.hw-card{transition:opacity .2s}.hw:is(:hover,:focus-visible,.is-open) :is(.hw-icon,.hw-line,.hw-peak,.hw-shape,.hw-cursor,.hw-badge,.hw-badge path,.hw-pin,.hw-ripple){animation:none}
 .hw-icon,.hw-peak,.hw-badge{transform:none}.hw-line,.hw-badge path{stroke-dashoffset:0}.hw-shape,.hw-pin{transform:none;opacity:1}.hw-cursor{transform:translate(70px,54px)}}

/* The menu item a step's place or a place in the guide points at glows while it is pointed at. */
.is-spot{position:relative;z-index:1;box-shadow:0 0 0 2px var(--ink),0 0 0 7px rgba(12,12,13,.08)!important;border-radius:12px;animation:su-spot 1.4s ease-in-out infinite}
.ws-dock .is-spot{border-radius:22px}
@keyframes su-spot{50%{box-shadow:0 0 0 2px var(--ink),0 0 0 11px rgba(12,12,13,0)}}
@media (prefers-reduced-motion:reduce){.is-spot{animation:none}}

/* ——— Get set up: a small guide in the corner (owner, 10 Oct 2026; Stripe's setup guide as the model) ——— */
.sg{position:fixed;right:22px;bottom:22px;z-index:44;width:320px;font-size:14px}
.sg-panel{display:grid;border-radius:20px;background:rgba(252,252,251,.94);-webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);box-shadow:inset 0 0 0 1px rgba(255,255,255,.8),0 0 0 1px var(--line-2),0 28px 60px -24px rgba(0,0,0,.32),0 10px 22px -14px rgba(0,0,0,.18);overflow:hidden;transform-origin:100% 100%;transition:opacity .3s var(--ease),transform .55s cubic-bezier(.2,1.15,.32,1)}
.sg-head{display:flex;align-items:center;gap:8px;padding:14px 10px 10px 18px}
.sg-head strong{font-size:15px;font-weight:600;letter-spacing:-.01em}
.sg-count{margin-right:auto;font:500 12px/1 var(--mono,ui-monospace,monospace);color:var(--mute)}
.sg-icon{width:30px;height:30px;display:grid;place-items:center;border-radius:10px;border:0;background:none;color:var(--ink-3);cursor:pointer;transition:background .2s,color .2s}
.sg-icon:hover,.sg-icon:focus-visible{background:var(--paper-lo);color:var(--ink);outline:none}.sg-icon .icon{width:16px;height:16px}
.sg-bar{height:4px;margin:0 18px 6px;border-radius:99px;background:var(--line-2);overflow:hidden}
.sg-bar i{display:block;height:100%;width:100%;border-radius:inherit;background:var(--ink);transform-origin:left;transform:scaleX(var(--p));transition:transform .8s var(--ease)}
.sg-enter .sg-bar i{animation:sg-bar 1s var(--ease) .45s backwards}
.sg-list{list-style:none;margin:0;padding:4px 8px 8px;display:grid;gap:2px;max-height:min(60vh,520px);overflow:auto}
.sg-item{border-radius:14px;transition:background .3s var(--ease)}
.sg-item.is-open{background:var(--paper-hi);box-shadow:inset 0 0 0 1px var(--line)}
.sg-enter .sg-item{animation:mc-in .45s var(--ease) backwards;animation-delay:calc(var(--i)*55ms + .3s)}
.sg-row{display:flex;align-items:center;gap:11px;width:100%;padding:11px 10px;border:0;background:none;font:inherit;color:var(--ink);text-align:left;cursor:pointer;border-radius:14px}
.sg-row:hover .sg-name{color:var(--ink)}.sg-row:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.sg-name{flex:1;min-width:0;font-weight:500;color:var(--ink-2);transition:color .2s}
.sg-item.is-open .sg-name{color:var(--ink);font-weight:600}
.sg-item.is-done .sg-name{color:var(--mute);text-decoration:line-through;text-decoration-color:var(--line-3)}
.sg-dot{flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1.5px var(--line-3);transition:background .3s,box-shadow .3s}
.sg-item.is-open:not(.is-done) .sg-dot{box-shadow:inset 0 0 0 1.5px var(--ink)}
.sg-item.is-done .sg-dot{background:var(--ink);box-shadow:none;color:#fff}.sg-dot .ck{width:12px;height:12px;margin:0}
.sg-dot-map{box-shadow:none}.sg-dot-map .icon{width:16px;height:16px;color:var(--ink-3)}
.sg-chev{width:16px;height:16px;color:var(--faint);transition:transform .4s var(--ease)}
.sg-item.is-open .sg-chev{transform:rotate(180deg);color:var(--ink-3)}
/* Opens smoothly to its natural height. */
.sg-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.sg-item.is-open .sg-body{grid-template-rows:1fr}
.sg-inner{overflow:hidden;min-height:0;opacity:0;transform:translateY(-4px);transition:opacity .3s var(--ease),transform .4s var(--ease)}
.sg-item.is-open .sg-inner{opacity:1;transform:none;transition-delay:.08s}
.sg-inner p{margin:0;padding:0 12px 10px 41px;color:var(--ink-3);font-size:13px;line-height:1.45}
.sg-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding:0 10px 12px 41px}
.sg-where{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;padding:3px 9px 3px 7px;border-radius:99px;font-size:12px;color:var(--ink-2);background:#fff;box-shadow:inset 0 0 0 1px var(--line);cursor:default;transition:box-shadow .25s}
.sg-where:hover{box-shadow:inset 0 0 0 1px var(--ink)}.sg-where .icon{width:12px;height:12px}
.sg-ok{font-size:12.5px;color:var(--mute)}
.sg-places{display:grid;gap:2px;padding:0 6px 8px}
.sg-place{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;color:var(--ink);text-decoration:none;transition:background .2s,transform .35s cubic-bezier(.2,1.3,.35,1)}
.sg-place:hover,.sg-place:focus-visible{background:#fff;box-shadow:inset 0 0 0 1px var(--line-2);transform:translateX(3px);outline:none}
.sg-place .icon{flex:none;width:16px;height:16px;color:var(--ink-3)}
.sg-place>span{display:grid;gap:1px;min-width:0}.sg-place strong{font-size:13px;font-weight:600}.sg-place small{font-size:12px;color:var(--mute)}
.sg-all{display:flex;gap:9px;align-items:flex-start;margin:4px 18px 8px;font-size:13px;color:var(--ink-2)}.sg-all .ck{flex:none;width:16px;height:16px;margin-top:1px}
/* Minimised: a small pill with the progress ring; the panel folds into it. */
.sg-pill{position:absolute;right:0;bottom:0;display:inline-flex;align-items:center;gap:9px;padding:9px 14px 9px 10px;border:0;border-radius:99px;font:500 13.5px/1 var(--sans,inherit);color:#fff;background:var(--ink);box-shadow:0 14px 30px -14px rgba(0,0,0,.55);cursor:pointer;opacity:0;transform:scale(.6);pointer-events:none;transition:opacity .25s var(--ease),transform .5s cubic-bezier(.2,1.3,.35,1)}
.sg-pill b{font:600 12px/1 var(--mono,ui-monospace,monospace);color:rgba(255,255,255,.7)}
.sg-mini{width:20px;height:20px}.sg-mini svg{width:100%;height:100%;transform:rotate(-90deg)}
.sg-track{fill:none;stroke:rgba(255,255,255,.25);stroke-width:3}.sg-arc{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-dasharray:var(--c);stroke-dashoffset:calc(var(--c)*(1 - var(--p)))}
.sg.is-min .sg-panel{opacity:0;transform:scale(.4);pointer-events:none}
.sg.is-min .sg-pill{opacity:1;transform:none;pointer-events:auto}
.sg.is-min{width:auto}
.sg-enter:not(.is-min) .sg-panel{animation:sg-in .7s cubic-bezier(.2,1.15,.32,1) .2s backwards}
.sg-enter.is-min .sg-pill{animation:sg-in .6s cubic-bezier(.2,1.3,.35,1) .4s backwards}
@keyframes sg-in{from{opacity:0;transform:translateY(18px) scale(.94)}}
@keyframes sg-bar{from{transform:scaleX(0)}}
/* Phones: above the bottom bar; the pill sits on the right. */
@media (max-width:899px){.sg{right:12px;bottom:calc(92px + env(safe-area-inset-bottom))}}
@media (max-width:600px){.sg{left:12px;width:auto}.sg.is-min{left:auto}.sg-list{max-height:48vh}}
@media (prefers-reduced-motion:reduce){.sg-panel,.sg-pill,.sg-body,.sg-inner,.sg-bar i{transition:none}.sg-enter .sg-item,.sg-enter .sg-panel,.sg-enter .sg-pill,.sg-enter .sg-bar i{animation:none}}

/* ——— Welcome: a new account's first screen ——— */
/* One entrance, in order: the disc and its rings, the check, the greeting word by word, the steps joining up, the website box. */
.welcome{position:relative;min-height:100svh;display:grid;grid-template-rows:auto 1fr auto;padding:24px var(--gutter) 26px;overflow:hidden;isolation:isolate;background:radial-gradient(70% 55% at 50% 34%,var(--paper-hi) 0%,var(--paper) 62%,var(--paper-lo) 100%)}
.wl-nav{display:flex;align-items:center;justify-content:space-between;gap:16px}
.wl-who{display:flex;align-items:center;gap:12px;padding:6px 16px 6px 6px;border-radius:999px;background:rgba(255,255,255,.55);box-shadow:inset 0 1px 0 #fff,0 0 0 1px var(--line)}
.wl-avatar{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--dark-bg);color:#fff;font:italic 17px/1 var(--serif)}
.wl-id{display:grid;line-height:1.25}.wl-id strong{font-size:14px;font-weight:500}.wl-id small{font-size:12.5px;color:var(--mute)}
.wl-who .text-btn{font-size:13.5px;color:var(--mute)}
.wl-main{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px 0 30px}
.wl-mark{position:relative;display:grid;place-items:center;width:84px;height:84px;margin-bottom:26px}
.wl-ring{position:absolute;left:50%;top:50%;width:var(--s);height:var(--s);margin:calc(var(--s)/-2) 0 0 calc(var(--s)/-2);border-radius:50%;border:1px solid var(--line);pointer-events:none;z-index:-1;animation:wl-ring 1.6s var(--ease) backwards,wl-breathe 9s var(--ease-io) 2s infinite alternate;animation-delay:var(--d),calc(var(--d) + 1.6s)}
.wl-ring:nth-child(odd){border-style:dashed;border-color:var(--line-2);opacity:.55}
.wl-disc{position:relative;display:grid;place-items:center;width:84px;height:84px;border-radius:50%;background:var(--dark-bg);box-shadow:var(--dark-shadow);animation:wl-pop .9s var(--spring-pop) .12s backwards}
.wl-disc::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 1px rgba(12,12,13,.35);opacity:0;animation:halo 1.4s var(--ease) .62s}
.wl-disc svg{width:38px;height:38px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.wl-disc path{stroke-dasharray:1;stroke-dashoffset:0;animation:wl-check .55s var(--ease-io) .5s backwards}
.wl-title{margin:14px 0 0;max-width:12ch}
.welcome .sw-i{animation:wl-word 1.1s var(--ease) backwards;animation-delay:calc(.48s + var(--i)*80ms)}
.wl-lead{max-width:520px;margin:20px auto 0;text-wrap:balance;font-size:17px;line-height:1.55;color:var(--ink-3)}
.wl-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;width:min(640px,100%);margin:32px auto 0;padding:0;list-style:none}
.wl-steps li{position:relative;display:grid;justify-items:center;align-content:start;gap:4px;padding:0 10px}
.wl-steps li:not(:last-child)::after{content:"";position:absolute;top:15px;left:calc(50% + 24px);right:calc(-50% + 24px);height:1px;background:var(--line-3);transform-origin:left;animation:wl-join .7s var(--ease) backwards;animation-delay:calc(var(--d) + .18s)}
.wl-n{display:grid;place-items:center;width:30px;height:30px;margin-bottom:8px;border-radius:50%;background:var(--card);box-shadow:0 0 0 1px var(--line-2);font:500 13px/1 var(--sans);color:var(--mute)}
.wl-steps .now .wl-n{background:var(--ink);color:#fff;box-shadow:none;animation:wl-live 2.4s var(--ease) 1.7s infinite}
/* A workspace under repair (repairView): the welcome shell, with a sign for each fact and a slow turn on the mark. */
.wl-n .icon{width:15px;height:15px}
.is-repair .wl-title{max-width:14ch}
.is-repair .wl-disc svg{animation:repair-turn 5s var(--ease-io) 1.4s infinite}
@keyframes repair-turn{0%,20%{transform:none}70%,100%{transform:rotate(360deg)}}
.wl-steps strong{font-size:14.5px;font-weight:600;letter-spacing:-.01em}
.wl-steps small{max-width:190px;font-size:13px;line-height:1.4;color:var(--mute)}
.wl-steps li:not(.now) strong{color:var(--ink-3)}
.wl-form{margin:30px auto 0;width:min(600px,100%)}
.wl-alt{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 26px;margin-top:20px}
.wl-foot{max-width:560px;margin:0 auto;text-align:center;font-size:12.5px;line-height:1.5;color:var(--mute)}
.wl-foot a{color:var(--ink-3);text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--line-3)}
.wl-a{animation:reveal-in 1s var(--ease) backwards;animation-delay:var(--d,0s)}
@keyframes wl-pop{from{transform:scale(.35);opacity:0;filter:blur(10px)}}
@keyframes wl-check{from{stroke-dashoffset:1}}
@keyframes wl-ring{from{transform:scale(.55);opacity:0}}
@keyframes wl-breathe{to{transform:scale(1.035)}}
@keyframes wl-word{from{transform:translateY(112%) rotate(3deg);opacity:0}}
@keyframes wl-join{from{transform:scaleX(0)}}
@keyframes wl-live{0%{box-shadow:0 0 0 0 rgba(12,12,13,.3)}70%,100%{box-shadow:0 0 0 10px rgba(12,12,13,0)}}
.auth-new{margin-top:16px;text-align:center}
@media (max-width:640px){
 .welcome{padding:16px 16px 22px}
 .wl-id{display:none}.wl-who{padding:4px 12px 4px 4px;gap:10px}
 .wl-main{padding:34px 0 28px}
 .wl-mark,.wl-disc{width:70px;height:70px}.wl-disc svg{width:32px;height:32px}
 .wl-lead{font-size:16px}
 .wl-steps{grid-template-columns:1fr;gap:14px;width:auto;margin-top:30px;text-align:left}
 .wl-steps li{grid-template-columns:30px 1fr;grid-template-rows:auto auto;justify-items:start;column-gap:14px;row-gap:2px;padding:0}
 .wl-steps .wl-n{grid-row:span 2;margin:0}
 .wl-steps small{max-width:none}
 .wl-steps li:not(:last-child)::after{top:34px;bottom:-12px;left:15px;right:auto;width:1px;height:auto;transform-origin:top;animation-name:wl-join-y}
 .wl-form{margin-top:28px}
 .wl-alt{flex-direction:column;gap:12px}
}
@keyframes wl-join-y{from{transform:scaleY(0)}}
@media (prefers-reduced-motion:reduce){.welcome *,.welcome *::before,.welcome *::after{animation:none!important}}
/* Your business: the website Distrove works from, first, with its two actions (read it again, use another website). */
.site-card{margin:2px 0 18px;padding:14px 14px 14px 16px;border-radius:20px;background:var(--card-bg);box-shadow:var(--card-shadow)}
.sc-row{display:flex;align-items:center;gap:14px}
.sc-ico{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:var(--dark-bg);color:#fff;box-shadow:var(--dark-shadow)}
.sc-ico .icon{width:18px;height:18px}
.sc-text{flex:1;min-width:0;display:grid;line-height:1.3}
.sc-text small{font-size:12px;color:var(--mute)}
.sc-text strong{font-size:16px;font-weight:600;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc-acts{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
.sc-switch{margin-top:14px;animation:swap-in .5s var(--ease)}
.sc-switch .url-field{height:58px;margin-top:0;padding-left:18px}
.sc-switch .field-note{margin:10px 4px 0}
@media (max-width:640px){.sc-row{flex-wrap:wrap}.sc-acts{width:100%}.sc-acts .btn{flex:1}.sc-switch .url-field{height:auto}}
@media (prefers-reduced-motion:reduce){.sc-switch{animation:none}}

/* ——— Account notices (audit 2, batch 2): what stopped, until when, and the one thing that restarts it ——— */
.notices{display:grid;gap:12px;margin:0 0 20px}
.notice{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:18px;padding:20px 22px;border-radius:22px;background:var(--card-bg);box-shadow:var(--card-shadow);isolation:isolate;overflow:hidden}
.notice::before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(120% 140% at 0% 0%,rgba(12,12,13,.045),transparent 55%);pointer-events:none}
.notice.urgent{box-shadow:inset 0 0 0 1.5px var(--ink),0 22px 44px -30px rgba(0,0,0,.5)}
.notice-mark{position:relative;display:grid;place-items:center;width:48px;height:48px;border-radius:16px;background:var(--paper-lo);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2)}
.notice.urgent .notice-mark{background:var(--ink);color:#fff;box-shadow:0 10px 22px -12px rgba(0,0,0,.6)}
.notice-mark .icon{width:21px;height:21px}
.notice.urgent .notice-mark::after{content:'';position:absolute;inset:-6px;border-radius:21px;border:1.5px solid var(--ink);opacity:0;animation:notice-ring 2.8s var(--ease) infinite}
.notice.in .notice-mark{animation:notice-pop .8s var(--spring-pop) calc(var(--d,0s) + .18s) backwards}
.notice-text{display:grid;gap:4px;min-width:0}
.notice-text .eyebrow{margin:0}
.notice-text h2{margin:0;font-size:clamp(19px,2.2vw,24px);line-height:1.18;letter-spacing:-.015em}
.notice-text p{margin:0;max-width:64ch;font-size:14.5px;line-height:1.5;color:var(--ink-3)}
.notice-note{font-size:12.5px;color:var(--mute)}
.notice-act{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.notice-act .btn{white-space:nowrap}
@keyframes notice-ring{0%{opacity:.5;transform:scale(.9)}70%,100%{opacity:0;transform:scale(1.22)}}
@keyframes notice-pop{0%{transform:scale(.6) rotate(-8deg);opacity:0}100%{transform:none;opacity:1}}
@media (max-width:640px){.notice{grid-template-columns:auto minmax(0,1fr);gap:14px;padding:18px}.notice-mark{width:42px;height:42px;border-radius:14px}.notice-act{grid-column:1/-1;flex-direction:row;align-items:center;flex-wrap:wrap}}
@media (prefers-reduced-motion:reduce){.notice.urgent .notice-mark::after,.notice.in .notice-mark{animation:none}}
.plan-meter.ai{grid-column:1/-1}
.plan-meter small{font-size:12.5px;color:var(--mute)}

/* Reconnecting a mailbox, and confirming a disconnect (audit 2, B3) */
.reconnect-who{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:14px 16px;margin:0 0 14px;border-radius:16px;background:var(--paper-hi);box-shadow:inset 0 0 0 1px var(--line-2)}
.reconnect-who strong{display:block;font-weight:600;overflow-wrap:anywhere}
.reconnect-who small{font-size:12.5px;color:var(--mute)}
.reconnect-state{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--ink-2);white-space:nowrap}
.reconnect-state i{position:relative;width:8px;height:8px;border-radius:50%;background:var(--ink)}
.reconnect-state i::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:1.5px solid var(--ink);opacity:0;animation:notice-ring 2.4s var(--ease) infinite}
.disconnect-confirm{display:grid;gap:12px;margin-top:6px;padding:16px;border-radius:16px;box-shadow:inset 0 0 0 1.5px var(--ink);animation:dc-in .45s var(--spring) both}
.disconnect-confirm p{margin:0;font-size:14.5px;line-height:1.5;color:var(--ink-3)}
.disconnect-confirm strong{color:var(--ink)}
.dc-actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
@keyframes dc-in{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}
@media (max-width:640px){.reconnect-who{grid-template-columns:auto minmax(0,1fr)}.reconnect-state{grid-column:1/-1}}
@media (prefers-reduced-motion:reduce){.reconnect-state i::after,.disconnect-confirm{animation:none}}

/* The weekly people search stopped (audit 2, B4) */
.batch-card.stopped{box-shadow:inset 0 0 0 1.5px var(--line-3)}
.batch-card.stopped .eyebrow{display:inline-flex;align-items:center;gap:6px}
.batch-card.stopped .eyebrow .icon{width:13px;height:13px}
.batch-card.stopped small{display:block;margin-top:6px}

/* Your emails, in Settings (audit 2, C41) */
.email-rows{display:grid;gap:10px;margin-top:14px}
.email-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;padding:14px 16px;border-radius:16px;background:var(--paper-hi);box-shadow:inset 0 0 0 1px var(--line-2);transition:opacity .3s var(--ease)}
.email-row.off{opacity:.72}
.er-ico{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line-2)}
.er-ico .icon{width:18px;height:18px}
.er-text{display:grid;gap:2px;min-width:0}
.er-text strong{font-weight:600}
.er-text small{font-size:13px;line-height:1.45;color:var(--mute)}
.er-act{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:640px){.email-row{grid-template-columns:auto minmax(0,1fr)}.er-act{grid-column:1/-1;justify-content:flex-start}}

/* What Distrove did, on Results (audit 2, C39): a quiet timeline, newest first */
.work-log{list-style:none;margin:0 0 24px;padding:8px 22px}
.work-log li{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:14px;padding:14px 0;border-top:1px solid var(--line)}
.work-log li:first-child{border-top:0}
.work-log li::before{content:'';position:absolute;left:4px;top:0;bottom:0;width:1px;background:var(--line-2)}
.work-log li:first-child::before{top:22px}.work-log li:last-child::before{bottom:calc(100% - 22px)}
.wl-dot{position:relative;z-index:1;width:9px;height:9px;margin-top:6px;border-radius:50%;background:var(--card);box-shadow:inset 0 0 0 1.5px var(--ink)}
.work-log li:first-child .wl-dot{background:var(--ink)}
.wl-text{display:grid;gap:2px;min-width:0}
.wl-text strong{font-weight:600}
.wl-text small{font-size:13px;line-height:1.45;color:var(--mute)}
.work-log time{font:500 12px/1.6 var(--mono);color:var(--faint);white-space:nowrap}
.work-log.in li{animation:wl-in .6s var(--ease) backwards;animation-delay:calc(var(--i,0) * 40ms)}
@keyframes wl-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.work-log.in li{animation:none}}
@media (max-width:640px){.work-log{padding:4px 16px}.work-log li{grid-template-columns:auto minmax(0,1fr)}.work-log time{grid-column:2}}

/* A busy day: the free previews are full (audit 2, B13) */
.pw-full{display:grid;justify-items:start;gap:12px;max-width:680px;margin:clamp(24px,8vh,80px) auto;padding:clamp(28px,5vw,48px);border-radius:28px;background:var(--card-bg);box-shadow:var(--card-shadow)}
.pw-full h1{margin:0;font-size:clamp(32px,5vw,52px);line-height:1.04;letter-spacing:-.03em}
.pw-full p{margin:0;color:var(--ink-3);font-size:16px;line-height:1.55;max-width:56ch}
.pw-full-mark{display:flex;gap:6px;margin-bottom:6px}
.pw-full-mark i{width:9px;height:9px;border-radius:50%;background:var(--ink);opacity:.25;animation:pw-full-dot 1.6s var(--ease-io) infinite}
.pw-full-mark i:nth-child(2){animation-delay:.2s}.pw-full-mark i:nth-child(3){animation-delay:.4s}
@keyframes pw-full-dot{0%,100%{opacity:.2;transform:translateY(0)}40%{opacity:1;transform:translateY(-4px)}}
.pw-full-form{display:flex;gap:8px;width:100%;margin-top:8px}
.pw-full-form input{flex:1;min-width:0}
.pw-full-done{display:flex;align-items:center;gap:12px;margin-top:8px;padding:14px 16px;border-radius:16px;background:var(--paper-hi);box-shadow:inset 0 0 0 1px var(--line-2);animation:dc-in .5s var(--spring) both}
.pw-full-done span{display:grid;gap:2px}.pw-full-done small{color:var(--mute);font-size:13px}
.pw-full-or{font-size:14px!important}
@media (max-width:640px){.pw-full-form{flex-direction:column}}
@media (prefers-reduced-motion:reduce){.pw-full-mark i,.pw-full-done{animation:none}}

/* Switching websites: the old channels, archived by default (audit 2, B9) */
.sc-archive{display:flex;align-items:flex-start;gap:10px;margin-top:12px;padding:12px 14px;border-radius:14px;background:var(--paper-hi);box-shadow:inset 0 0 0 1px var(--line-2);cursor:pointer}
.sc-archive input{width:18px;height:18px;min-height:0;margin:2px 0 0;padding:0;flex:none;border-radius:4px;box-shadow:none;accent-color:var(--ink);cursor:pointer}.sc-archive input:focus{box-shadow:none}
.sc-archive span{display:grid;gap:2px}.sc-archive small{color:var(--mute);font-size:12.5px}

/* An email that could not be sent (audit 2, C28, C29): a calm block across the person's row, with the choice right there. */
.send-fail{grid-column:1/-1;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:4px 14px;margin-top:4px;padding:12px 14px;border-radius:16px;background:var(--paper-lo);box-shadow:inset 0 0 0 1px var(--line-2);animation:swap-in .55s var(--ease) both}
.sf-mark{position:relative;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;font:600 15px/1 var(--sans);animation:notice-pop .8s var(--spring-pop) .15s backwards}
.sf-mark::after{content:'';position:absolute;inset:-5px;border-radius:50%;border:1.5px solid var(--ink);opacity:0;animation:notice-ring 2.8s var(--ease) .9s 2}
.send-fail.unsure .sf-mark{background:var(--card-bg);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.sf-copy{min-width:0}.sf-copy strong{display:block;font-size:14px;font-weight:600;color:var(--ink)}
.sf-copy p{margin:2px 0 0;font-size:13px;line-height:1.45;color:var(--ink-2)}
.sf-detail{margin-top:4px}.sf-detail summary{font-size:12px;color:var(--mute);cursor:pointer;list-style:none;width:max-content}.sf-detail summary::-webkit-details-marker{display:none}
.sf-detail summary::after{content:'›';display:inline-block;margin-left:6px;transition:transform .25s var(--ease)}.sf-detail[open] summary::after{transform:rotate(90deg)}
.sf-detail code{display:block;margin-top:6px;padding:8px 10px;border-radius:10px;background:var(--card-bg);font:12px/1.45 var(--mono);color:var(--ink-2);overflow-wrap:anywhere;animation:fade-in .3s var(--ease)}
.sf-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px}
.lead-list.compact .send-fail{grid-row:auto}
@media (max-width:640px){.send-fail{grid-template-columns:auto minmax(0,1fr)}.sf-actions{grid-column:1/-1;justify-content:flex-start}}
@media (prefers-reduced-motion:reduce){.send-fail,.sf-mark,.sf-mark::after{animation:none}}

/* A follow-up held for an edit (audit 2, C27): a small outlined chip, so it never reads as sent. */
.held-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:12.5px;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-3);animation:swap-in .45s var(--ease) both}
.held-chip::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--ink);animation:live 2.4s var(--ease) 3}
@media (prefers-reduced-motion:reduce){.held-chip,.held-chip::before{animation:none}}

/* An email in a channel's sequence (audit 2, C26): the parts filled for each person are marked, then the three steps. */
.sq-preview strong{display:block;margin-bottom:8px;font-size:15px}
.sq-part{padding:1px 6px;border-radius:6px;background:var(--paper-lo);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2);font-weight:500;white-space:nowrap}
.sq-how{list-style:none;margin:18px 0 22px;padding:0;display:grid;gap:10px}
.sq-how li{display:flex;align-items:center;gap:12px;font-size:14px;line-height:1.5;color:var(--ink-2);flex-wrap:wrap;animation:swap-in .5s var(--ease) both}
.sq-how li:nth-child(2){animation-delay:.08s}.sq-how li:nth-child(3){animation-delay:.16s}
.sq-how li>span{display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;background:var(--ink);color:#fff;font:600 12px/1 var(--sans)}
@media (prefers-reduced-motion:reduce){.sq-how li{animation:none}}

/* An expired confirmation or reset link (audit 2, D1): said plainly, with the new link right below. */
.confirm-expired{margin:0 0 14px;font-size:15px;line-height:1.5;color:var(--ink-2);animation:swap-in .45s var(--ease) both}
@media (prefers-reduced-motion:reduce){.confirm-expired{animation:none}}
.preview-actions .field-note{flex-basis:100%;margin:2px 0 0}
/* Homepage step 1 on phones: the site and the profile stack and overlap; the seal stays on the corner. */
.step-art .scene-1{position:relative;inset:auto;display:block;padding:20px 16px 26px;perspective:none}
.step-art .s1-site{position:relative;left:auto;top:auto;width:92%;transform:rotate(-1.5deg)}
.step-art .s1-card{position:relative;right:auto;bottom:auto;width:90%;margin:-18px 0 0 auto;transform:rotate(1deg)}
.step-art .s1-seal{width:64px;height:64px;right:-10px;top:-26px}
.step-art .s1-val{white-space:normal}
/* Event mode (owner dashboard): a live pill while the raised limits are on. */
.event-card strong{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px}
.event-live{display:inline-flex;align-items:center;gap:7px;padding:4px 10px;border-radius:999px;background:var(--ink);color:#fff;font:500 11.5px/1.1 var(--sans)}
.event-live .live-dot{width:6px;height:6px}
/* The Builder Sundays pass (lib/pass.mjs, 25 Oct 2026). A ticket you are handed for coming: it rises and settles, the seal
   stamps onto its stub, and a light passes over it once. The slim version sits on Home. No count is ever shown. */
.pass-pill{color:var(--ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 0 0 1px rgba(12,12,13,.12),0 10px 26px -14px rgba(0,0,0,.4)}
.pass-pill::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.9) 50%,transparent 65%) no-repeat;background-size:240% 100%;background-position:120% 0;animation:pass-shine 1.6s var(--ease-io) 1.1s both}
@keyframes pass-shine{to{background-position:-120% 0}}
.pass-ticket{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 118px;margin:24px 0 22px;border-radius:22px;overflow:hidden;color:#fff;background:radial-gradient(120% 140% at 0% 0%,#2e2e33,#0b0b0c 62%);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(255,255,255,.05),0 34px 60px -30px rgba(0,0,0,.7);animation:pt-in 1s var(--spring) .1s backwards}
@keyframes pt-in{from{opacity:0;transform:translateY(46px) rotate(-3deg) scale(.94)}}
.pt-main{display:grid;align-content:start;gap:8px;padding:22px 20px 24px 24px;min-width:0}
.pt-k{font:500 10.5px/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.58)}
.pt-name{margin-top:14px;font-size:clamp(22px,5vw,28px);font-weight:600;letter-spacing:-.04em;line-height:1.05;overflow-wrap:anywhere}
.pt-what{font-size:14px;line-height:1.4;color:rgba(255,255,255,.78)}.pt-what em{font-family:var(--serif);font-style:italic;color:#fff}
.pt-stub{position:relative;display:grid;place-items:center;border-left:1.5px dashed rgba(255,255,255,.2)}
.pt-stub::before,.pt-stub::after{content:'';position:absolute;left:-11px;width:20px;height:20px;border-radius:50%;background:#f5f5f2}
.pt-stub::before{top:-10px}.pt-stub::after{bottom:-10px}
.pt-sheen{position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.16) 48%,transparent 62%) no-repeat;background-size:260% 100%;background-position:130% 0;animation:pass-shine 1.4s var(--ease-io) 1.15s both}
.pt-seal{display:block;width:84px;height:84px}
.pt-seal svg{width:100%;height:100%;overflow:visible}
.pt-seal .ring-o{fill:#fff;stroke:#fff;stroke-width:1.4}.pt-seal .ring-l{fill:none;stroke:rgba(12,12,13,.18);stroke-width:.8}
.pt-seal text{font:600 7.6px var(--mono);letter-spacing:.04em;fill:var(--ink)}
.pt-seal .spin{transform-origin:50px 50px;animation:s1-spin 28s linear infinite}
.pt-seal .ring-i{fill:var(--ink)}
.pt-seal .mark{fill:none;stroke:#fff;stroke-width:4.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
.pass-ticket .pt-seal{transform:rotate(-12deg);filter:drop-shadow(0 10px 14px rgba(0,0,0,.45));animation:pt-stamp .55s var(--spring-pop) .75s backwards}
.pass-ticket .pt-seal .mark{animation:pt-draw .5s var(--ease) 1.15s backwards}
@keyframes pt-stamp{from{opacity:0;transform:rotate(-30deg) scale(1.9)}}
@keyframes pt-draw{from{stroke-dashoffset:1}}
.pass-go{animation:fade-in .5s var(--ease) 1s backwards}
.pass-home{display:flex;align-items:center;gap:18px;padding:16px 20px 16px 16px;margin-bottom:18px;background:radial-gradient(120% 160% at 0% 0%,#2c2c31,#0b0b0c 64%);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 24px 44px -28px rgba(0,0,0,.6)}
.pass-home .pt-seal{flex:none;width:58px;height:58px;transform:rotate(-12deg)}
.ph-copy{flex:1;min-width:0;display:grid;gap:3px}.ph-copy strong{font-size:17px;font-weight:600;letter-spacing:-.025em}.ph-copy small{font-size:13.5px;line-height:1.45;color:rgba(255,255,255,.72)}
.pass-home .btn-paper{flex:none}
@media (max-width:560px){.pass-ticket{grid-template-columns:minmax(0,1fr) 96px}.pt-seal{width:70px;height:70px}.pt-main{padding:20px 16px 22px 20px}.pass-home{display:grid;grid-template-columns:52px minmax(0,1fr);gap:12px 14px;padding:16px}.pass-home .pt-seal{width:52px;height:52px}.pass-home .btn-paper{grid-column:2;justify-self:start}}
/* The Builder Sundays page (#/mtl, 25 Oct 2026, after oevra.com): dark and cinematic. A light field drifts slowly behind
   everything (three soft blobs, a halo that follows the scroll, moving grain); huge staggered lines rise in; the pass is
   silver, punched like a real ticket, and catches the light; the sentence lights up word by word as you scroll. Motion
   is slow and continuous; reduced motion shows everything at rest. Monochrome: the only light is white. */
html[data-kind="mtl"],html[data-kind="mtl"] body{background:#0a0a0b}
.bs{position:relative;isolation:isolate;overflow:hidden;color:#fff;background:#0a0a0b;--s:0}
.bs-field{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.bs-blob{position:absolute;border-radius:50%;will-change:transform}
.bs-blob.b1{left:-38vmax;top:-48vmax;width:120vmax;height:120vmax;background:radial-gradient(closest-side,rgba(255,255,255,.17),rgba(255,255,255,0));animation:bs-drift1 22s var(--ease-io) infinite alternate}
.bs-blob.b2{right:-42vmax;top:28vh;width:92vmax;height:92vmax;background:radial-gradient(closest-side,rgba(196,196,188,.15),rgba(196,196,188,0));animation:bs-drift2 27s var(--ease-io) infinite alternate}
.bs-blob.b3{left:-30vmax;bottom:-52vmax;width:110vmax;height:110vmax;background:radial-gradient(closest-side,rgba(255,255,255,.09),rgba(255,255,255,0));animation:bs-drift3 31s var(--ease-io) infinite alternate}
@keyframes bs-drift1{to{transform:translate(18vmax,10vmax) scale(1.08)}}
@keyframes bs-drift2{to{transform:translate(-14vmax,-12vmax) scale(.92)}}
@keyframes bs-drift3{to{transform:translate(12vmax,-9vmax) scale(1.1)}}
.bs-halo{position:absolute;left:50%;top:0;width:76vmin;height:76vmin;margin-left:-38vmin;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.42),rgba(255,255,255,.1) 46%,rgba(255,255,255,0));mix-blend-mode:plus-lighter;will-change:transform;transform:translate3d(calc(var(--s)*-16vw),calc(34vh + var(--s)*150vh),0);animation:bs-breathe 9s var(--ease-io) infinite alternate}
@keyframes bs-breathe{to{opacity:.72;scale:1.16}}
.bs-grain{position:absolute;inset:-60%;opacity:.13;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:bs-grain 1s steps(4) infinite}
@keyframes bs-grain{25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-1%)}}
.bs-hero{position:relative;min-height:100svh;display:grid;align-content:center;padding-top:118px;padding-bottom:120px}
.bs-label{display:flex;justify-content:space-between;gap:16px;font:500 11px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.bs-hero>.bs-label{animation:fade-in 1.2s var(--ease) .1s backwards}
.bs-title{margin:26px 0 0;font-size:clamp(3.5rem,15.5vw,9.6rem);font-weight:400;line-height:.92;letter-spacing:-.065em}
.bs-line{display:block;overflow:hidden;padding-bottom:.07em}
.bs-line>span{display:block;animation:bs-rise 1.3s var(--ease) both;animation-delay:calc(.25s + var(--i)*.14s)}
.bs-line.r{text-align:right}
@keyframes bs-rise{from{transform:translateY(110%)}}
.bs-title .dim{color:rgba(255,255,255,.42)}
.bs-title em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.03em;color:#fff}
.bs-pass{position:relative;width:min(100%,520px);margin:clamp(44px,7vw,76px) auto 0;padding-bottom:40px}
.bs-ticket{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 128px;min-height:212px;border-radius:22px;color:var(--ink);background:linear-gradient(125deg,#f8f8f6 0%,#d8d8d3 30%,#fcfcfa 47%,#c6c6c0 70%,#efefec 100%);box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(0,0,0,.14);--cut:calc(100% - 128px);-webkit-mask:radial-gradient(circle 11px at var(--cut) 0,#0000 98%,#000) top/100% 51% no-repeat,radial-gradient(circle 11px at var(--cut) 100%,#0000 98%,#000) bottom/100% 51% no-repeat;mask:radial-gradient(circle 11px at var(--cut) 0,#0000 98%,#000) top/100% 51% no-repeat,radial-gradient(circle 11px at var(--cut) 100%,#0000 98%,#000) bottom/100% 51% no-repeat;transform:rotate(-6deg);animation:bs-ticket-in 1.3s var(--spring) .75s backwards,bs-float 8s var(--ease-io) 2.05s infinite alternate}
@keyframes bs-ticket-in{from{opacity:0;transform:translateY(70px) rotate(-16deg) scale(.88)}}
@keyframes bs-float{from{transform:rotate(-6deg)}to{transform:rotate(-3.5deg) translateY(-14px)}}
.bt-main{display:grid;align-content:space-between;gap:12px;min-width:0;padding:24px 20px 24px 26px}
.bt-k{font:500 10.5px/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:rgba(12,12,13,.55)}
.bt-name{font-size:clamp(24px,6.4vw,34px);font-weight:600;letter-spacing:-.045em;line-height:1.02;overflow-wrap:anywhere}
.bt-name.blank{color:rgba(12,12,13,.26)}
.bt-what{font-size:14px;line-height:1.35;color:rgba(12,12,13,.7)}.bt-what em{font-family:var(--serif);font-style:italic;color:var(--ink)}
.bt-stub{position:relative;display:grid;place-items:center;border-left:1.5px dashed rgba(12,12,13,.22)}
.bt-stub .pt-seal{width:92px;height:92px;transform:rotate(-12deg);filter:drop-shadow(0 8px 12px rgba(0,0,0,.25));animation:pt-stamp .6s var(--spring-pop) 1.8s backwards}
.bt-stub .pt-seal .ring-o{fill:var(--ink);stroke:var(--ink)}.bt-stub .pt-seal .ring-l{stroke:rgba(255,255,255,.24)}.bt-stub .pt-seal text{fill:#fff}.bt-stub .pt-seal .ring-i{fill:#fff}
.bt-stub .pt-seal .mark{stroke:var(--ink);animation:pt-draw .5s var(--ease) 2.25s backwards}
.bt-sheen{position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,rgba(255,255,255,0) 36%,rgba(255,255,255,.95) 48%,rgba(255,255,255,0) 60%) no-repeat;background-size:260% 100%;background-position:140% 0;mix-blend-mode:soft-light;animation:bs-sheen 6.5s var(--ease-io) 2.3s infinite}
@keyframes bs-sheen{0%{background-position:140% 0}34%,100%{background-position:-40% 0}}
.bs-shadow{position:absolute;left:14%;right:14%;bottom:0;height:30px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.8),rgba(0,0,0,0));filter:blur(8px);will-change:transform;animation:fade-in 1s var(--ease) 1s backwards,bs-shadow 8s var(--ease-io) 2.05s infinite alternate}
@keyframes bs-shadow{to{transform:scale(.84);opacity:.6}}
.bs-cta{display:grid;justify-items:center;gap:14px;margin-top:30px;animation:fade-in 1.1s var(--ease) 1.5s backwards}
.bs-join{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:16px;height:58px;padding:0 26px 0 30px;border:0;border-radius:999px;background:#fff;color:var(--ink);font:500 16px/1 var(--sans);letter-spacing:-.01em;cursor:pointer;box-shadow:0 0 0 1px rgba(255,255,255,.55),0 18px 44px -16px rgba(255,255,255,.4);transition:transform .5s var(--spring),box-shadow .4s var(--ease)}
.bs-join:hover{transform:translateY(-2px);box-shadow:0 0 0 1px #fff,0 26px 54px -16px rgba(255,255,255,.55)}
.bs-join:active{transform:scale(.98)}
.bs-join:focus-visible{outline:2px solid #fff;outline-offset:4px}
.bs-arrow{position:relative;flex:none;width:30px;height:2px;background:repeating-linear-gradient(90deg,currentColor 0 5px,transparent 5px 9px);animation:bs-march 1.1s linear infinite}
.bs-arrow::after{content:'';position:absolute;right:0;top:50%;width:7px;height:7px;border:solid currentColor;border-width:2px 2px 0 0;transform:translateY(-50%) rotate(45deg)}
@keyframes bs-march{to{background-position:9px 0}}
.bs-cta small,.bs-more{font:500 10.5px/1.3 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.bs-scroll{position:absolute;left:50%;bottom:26px;display:grid;justify-items:center;gap:10px;translate:-50% 0;font:500 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.42);animation:fade-in 1s var(--ease) 2.2s backwards}
.bs-scroll i{width:1px;height:34px;background:linear-gradient(#fff,rgba(255,255,255,0));transform-origin:top;animation:bs-cue 2.2s var(--ease-io) infinite}
@keyframes bs-cue{0%{transform:scaleY(0)}50%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}
.bs-story{padding-top:clamp(96px,14vw,180px);padding-bottom:clamp(56px,8vw,96px)}
.bs-say{margin:30px 0 0;font-size:clamp(1.95rem,5.8vw,4.3rem);font-weight:400;line-height:1.08;letter-spacing:-.045em}
.bs-w{color:rgba(255,255,255,.15);transition:color .55s var(--ease)}.bs-w.on{color:#fff}
.bs-steps{margin-top:0;margin-bottom:0;list-style:none}
.bs-steps li{display:grid;grid-template-columns:minmax(58px,.22fr) minmax(0,1fr);gap:16px;padding:30px 0;border-top:1px solid rgba(255,255,255,.12)}
.bs-steps li:last-child{border-bottom:1px solid rgba(255,255,255,.12)}
.bs-n{font:500 12px/2 var(--mono);letter-spacing:.08em;color:rgba(255,255,255,.5)}
.bs-steps strong{display:block;font-size:clamp(1.55rem,4.6vw,2.7rem);font-weight:400;line-height:1.05;letter-spacing:-.045em}
.bs-steps small{display:block;max-width:470px;margin-top:10px;font-size:15px;line-height:1.55;color:rgba(255,255,255,.62)}
.bs-end{display:grid;justify-items:center;gap:22px;text-align:center;padding-top:clamp(110px,16vw,200px);padding-bottom:clamp(96px,12vw,150px)}
.bs-title.sm{margin:0 0 8px;font-size:clamp(3.6rem,15vw,8.4rem)}
.bs-join.big{height:64px;font-size:17px}
.bs-end small{max-width:330px;font-size:13px;line-height:1.5;color:rgba(255,255,255,.55)}
.bs-more{transition:color .3s}.bs-more:hover{color:#fff}
@media (max-width:560px){
 .bs-hero{padding-top:104px;padding-bottom:104px}
 .bs-ticket{grid-template-columns:minmax(0,1fr) 104px;min-height:184px;--cut:calc(100% - 104px)}
 .bt-main{padding:20px 14px 20px 20px}.bt-stub .pt-seal{width:76px;height:76px}
 .bs-cta,.bs-end{justify-items:stretch}.bs-join{width:100%}
 .bs-cta small,.bs-end small,.bs-more{justify-self:center}
}
/* The opening screen, after Cosmos (owner, 25 Oct 2026): a calm centred headline, kicker and button, alone on the
   drifting light field. No floating tiles (owner). */
.bs-hero{display:block;min-height:0;padding-top:0;padding-bottom:clamp(60px,8vw,100px)}
.bs-hero .bs-pass{width:min(92%,520px)}
.bs-center{position:relative;z-index:2;display:grid;justify-items:center;align-content:center;min-height:100svh;padding:110px 0 90px;text-align:center}
.bs-kicker{font:600 12px/1.2 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.82);animation:fade-in 1.2s var(--ease) .15s backwards}
.bs-head{margin:18px 0 0;font-size:clamp(2.7rem,10.6vw,5.6rem);font-weight:500;line-height:1.02;letter-spacing:-.05em}
.bs-head .bs-line>span{animation-delay:calc(.3s + var(--i)*.12s)}
.bs-head em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.03em}
.bs-center .bs-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 22px;margin-top:34px;animation:fade-in 1.1s var(--ease) .9s backwards}
.bs-how{font:500 15px/1 var(--sans);color:rgba(255,255,255,.82);padding:14px 6px}.bs-how:hover{color:#fff}
.bs-fine{margin-top:16px;font:500 10.5px/1.3 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.45);animation:fade-in 1.1s var(--ease) 1.1s backwards}
.bs-hero .bs-pass{margin-top:0}
@media (max-width:760px){
 .bs-center{padding:96px 0 80px}
 .bs-center .bs-cta{flex-direction:column;align-items:stretch;width:100%}
 .bs-how{text-align:center}
}
/* The EN · FR switch on the Builder Sundays page (25 Oct 2026): a small pill under the bar, the chosen language in white. */
.bs-lang{position:absolute;z-index:3;top:100px;right:var(--gutter);display:inline-flex;padding:3px;border-radius:999px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:fade-in 1s var(--ease) .4s backwards}
.bs-lang button{min-width:44px;height:30px;padding:0 12px;border:0;border-radius:999px;background:transparent;color:rgba(255,255,255,.62);font:500 11px/1 var(--mono);letter-spacing:.12em;cursor:pointer;transition:background .3s var(--ease),color .3s var(--ease)}
.bs-lang button:hover{color:#fff}
.bs-lang button.on{background:#fff;color:var(--ink)}
.bs-lang button:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media (max-width:560px){.bs-lang{top:92px}}
/* The plan page (owner, 26 Oct 2026): a free account's one page until a plan starts. */
.room{min-height:100vh;display:flex;flex-direction:column}
.room-top{position:sticky;top:0;z-index:20;transition:background .35s var(--ease),box-shadow .35s var(--ease)}
.room-top.scrolled{background:rgba(237,237,235,.78);-webkit-backdrop-filter:blur(16px) saturate(1.6);backdrop-filter:blur(16px) saturate(1.6);box-shadow:0 1px 0 var(--line)}
.room-top-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:1120px;margin:0 auto;padding:14px clamp(16px,4vw,40px)}
.room-actions{display:flex;align-items:center;gap:16px}
.room-actions .text-btn .icon{width:15px;height:15px}
.room-main{flex:1;width:100%;max-width:1120px;margin:0 auto;padding:10px clamp(16px,4vw,40px) clamp(64px,9vw,110px);display:grid;gap:clamp(64px,9vw,112px);align-content:start}
.room-settings{display:block}
.room-foot{max-width:1120px}
.room-head{display:grid;gap:10px;justify-items:start;margin-bottom:clamp(22px,3vw,32px)}
.room-head h2{text-wrap:balance;margin:0;font-size:clamp(30px,4.4vw,50px);line-height:1.02;letter-spacing:-.04em;font-weight:600}
/* The opening: their plan, what was found, and the way in, all on the first screen of a phone. */
.room-hero{position:relative;isolation:isolate;overflow:hidden;display:grid;justify-items:center;gap:18px;padding:clamp(44px,7vw,88px) clamp(20px,5vw,72px) clamp(34px,5vw,58px);border-radius:clamp(26px,3vw,36px);text-align:center;color:#fff;background:radial-gradient(130% 100% at 50% 0%,#2b2b2f,#0b0b0c 66%);box-shadow:0 50px 90px -56px rgba(0,0,0,.6)}
.room-hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 0 0 1px rgba(255,255,255,.06)}
.room-glow{position:absolute;inset:0;z-index:-1;pointer-events:none}
.room-glow i{position:absolute;aspect-ratio:1;border-radius:50%}
.room-glow i:first-child{left:-22%;top:-70%;width:82%;background:radial-gradient(closest-side,rgba(255,255,255,.15),rgba(255,255,255,0))}
.room-glow i:last-child{right:-26%;bottom:-78%;width:92%;background:radial-gradient(closest-side,rgba(205,205,196,.11),rgba(205,205,196,0))}
.room-hero .eyebrow{display:inline-flex;align-items:center;gap:10px;color:rgba(255,255,255,.62)}
.room-live i{width:7px;height:7px;border-radius:50%;background:#fff}
.room-hero h1{margin:0;font-size:clamp(42px,7.4vw,84px);line-height:.98;letter-spacing:-.05em;font-weight:600}
.room-lead{margin:0;max-width:42ch;font-size:clamp(16px,1.8vw,19px);line-height:1.5;color:rgba(255,255,255,.7)}
.room-found{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:4px 0}
.room-chip{display:inline-flex;align-items:center;gap:10px;padding:6px 15px 6px 6px;border-radius:999px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);text-align:left;font-size:13.5px;font-weight:500;line-height:1.2}
.room-chip>i{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.1);font:600 11px var(--sans);font-style:normal;letter-spacing:.02em}
.room-chip svg{width:15px;height:15px}
.room-chip small{display:block;margin-bottom:1px;font:500 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.48)}
.room-go{display:grid;justify-items:center;gap:14px;width:100%;margin-top:12px}
/* The competitor check's link opens the report here, with room above it. */
#pw-competition{scroll-margin-top:28px}
.room-more{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 22px;margin-top:-2px}
.room-more .text-btn{font-size:13.5px;color:rgba(255,255,255,.66)}.room-more .text-btn:hover{color:#fff}
/* The film: Distrove at work, one example week, framed like a screen; it plays while in view. */
.room-sub{margin:0;max-width:62ch;color:var(--ink-3);line-height:1.6}
.film{position:relative;margin:0;aspect-ratio:1;width:min(100%,760px);justify-self:center;border-radius:clamp(22px,3vw,34px);overflow:hidden;background:#f4f4f1;box-shadow:inset 0 0 0 1px var(--line),0 40px 80px -46px rgba(0,0,0,.45),0 2px 6px -2px rgba(0,0,0,.08)}
.room-film{display:grid;gap:14px}
.film-track{position:relative}
.film-stage{position:relative;display:grid;gap:18px;justify-items:center}
.film-title{margin:0 0 4px;justify-self:start;text-wrap:balance;font-size:clamp(30px,4.4vw,50px);line-height:1.02;letter-spacing:-.04em;font-weight:600}
.ft{display:inline-block}
.film{transform-origin:50% 50%;will-change:transform}
.film video{transition:none}
/* A wide screen: the film is held while it plays, its title opened to either side of it. */
@media (min-width:1100px) and (prefers-reduced-motion:no-preference){
 .film-track{height:200vh;margin-top:-6vh}
 .film-stage{--s:min(70vh,640px);position:sticky;top:0;height:100vh;display:grid;place-items:center;gap:0}
 .film-stage .film{width:var(--s)}
 .film-title{position:absolute;inset:0;justify-self:stretch;align-self:stretch;margin:0;pointer-events:none;font-size:clamp(34px,3vw,42px)}
 .ft{position:absolute;top:50%;width:min(270px,calc((100vw - var(--s)) / 2 - 60px));translate:0 -50%;opacity:0}
 .ft-l{right:calc(50% + var(--s) / 2 + 36px);text-align:right}
 .ft-r{left:calc(50% + var(--s) / 2 + 36px)}
}
.film video{display:block;width:100%;height:100%;object-fit:cover;cursor:pointer}
.film-play{position:absolute;inset:0;margin:auto;display:grid;place-items:center;width:84px;height:84px;border:0;border-radius:50%;color:#fff;background:radial-gradient(120% 120% at 30% 20%,#3a3a40,#0c0c0d 70%);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 20px 40px -16px rgba(0,0,0,.6);cursor:pointer;transition:opacity .4s var(--ease),transform .5s var(--spring-pop)}
.film-play .icon{width:30px;height:30px;margin-left:4px;fill:currentColor}
.film-play:hover{transform:scale(1.06)}.film-play:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.film.is-playing .film-play{opacity:0;transform:scale(.8);pointer-events:none}
.film-bar{position:absolute;left:18px;right:18px;bottom:14px;height:3px;border-radius:3px;background:rgba(12,12,13,.12);overflow:hidden;opacity:0;transition:opacity .4s var(--ease)}
.film-bar i{display:block;height:100%;background:var(--ink);transform-origin:left;transform:scaleX(0)}
.film.is-playing .film-bar,.film:hover .film-bar{opacity:1}
.room-paying{display:flex;align-items:center;gap:14px;padding:16px 20px;border-radius:18px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);text-align:left}
.room-paying strong{display:block}.room-paying small{color:rgba(255,255,255,.6);font-size:13px}
.room-spin{flex:none;width:20px;height:20px;border-radius:50%;border:2px solid rgba(255,255,255,.2);border-top-color:#fff}
/* No business yet: the website box, light on the dark opening, and the way to describe it instead. */
.room-start .hero-form{margin:4px 0 0;color:var(--ink);background:linear-gradient(180deg,#fff,#f1f1ee);box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(255,255,255,.22),0 30px 60px -30px rgba(0,0,0,.9);transition:box-shadow .4s var(--ease),transform .4s var(--ease)}
.room-start .hero-form:focus-within{box-shadow:inset 0 1px 0 #fff,0 0 0 4px rgba(255,255,255,.22),0 30px 60px -30px rgba(0,0,0,.9)}
.room-start .hero-form input{color:var(--ink)}.room-start .hero-form input::placeholder{color:var(--mute)}
.room-start .text-btn{color:rgba(255,255,255,.72)}.room-start .text-btn:hover{color:#fff}
.room-plans .plan-pick{margin:0 0 12px}
@media (max-width:640px){
 .room-top-inner{padding:12px 16px}.room-ex-link{display:none}
 .room-hero{padding:38px 18px 28px;gap:14px}.room-hero h1{font-size:clamp(38px,11vw,48px)}.room-lead{font-size:15.5px}
 .room-chip{font-size:12.5px;padding-right:12px}.room-chip>i{width:26px;height:26px}
 .room-go .pw-flow{display:none}
 .room-foot{flex-wrap:wrap}
}
@media (prefers-reduced-motion:no-preference){
 .room-glow i:first-child{animation:room-drift1 19s var(--ease-io) infinite alternate}
 .room-glow i:last-child{animation:room-drift2 24s var(--ease-io) infinite alternate}
 .room-live i{animation:room-pulse 2.6s var(--ease-io) infinite}
 .room-spin{animation:pw-spin .9s linear infinite}
 .room .room-hero:not(.in) :is(.room-chip,.room-lead,.room-go){opacity:0}
 .room .room-hero.in .room-lead{animation:reveal-in 1s var(--ease) .35s backwards}
 .room .room-hero.in .room-chip{animation:room-chip .8s var(--spring) backwards;animation-delay:calc(.6s + var(--i) * .1s)}
 .room .room-hero.in .room-go{animation:reveal-in 1s var(--ease) .85s backwards}
}
@keyframes room-drift1{to{transform:translate(24%,20%) scale(1.12)}}
@keyframes room-drift2{to{transform:translate(-20%,-16%) scale(.9)}}
@keyframes room-pulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.5)}70%,100%{box-shadow:0 0 0 10px rgba(255,255,255,0)}}
@keyframes room-chip{from{opacity:0;transform:translateY(10px) scale(.92)}}

/* Who got the follow-up (owner dashboard) */
.offer-admin .admin-accounts-head .btn{flex:none}
.offer-admin .offer-note{margin:0 0 12px;font-size:13.5px}
.offer-admin .offer-note a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line-3);text-underline-offset:3px}
.offer-admin .offer-note a:hover{text-decoration-color:var(--ink)}
.offer-admin td .status{height:28px;font-size:12.5px}
.offer-admin td .status .icon{width:13px;height:13px}

/* Near you on Google Maps (market research, local businesses) */
.local-list{display:grid;gap:10px}
.local{display:grid;grid-template-columns:32px minmax(0,1fr) auto 168px;gap:16px;align-items:center;padding:16px 20px}
.lc-rank{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--paper-hi);box-shadow:inset 0 0 0 1px var(--line-2);font-size:12px;color:var(--ink-2)}
.local:first-child .lc-rank{background:var(--ink);color:#fff;box-shadow:none}
.lc-text{min-width:0}.lc-text strong{display:block;font-weight:600}.lc-text small{display:block;margin-top:2px;font-size:13px;color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lc-rate{display:grid;justify-items:end;gap:2px;white-space:nowrap}.lc-stars{font-weight:600;font-size:14.5px;letter-spacing:-.01em}.lc-rate small{font-size:12px;color:var(--mute)}
.lc-links{display:flex;justify-content:flex-end;gap:14px;white-space:nowrap}
@media (max-width:640px){.local{grid-template-columns:32px minmax(0,1fr) auto;gap:12px;padding:14px 16px}.lc-links{grid-column:2/-1;justify-content:flex-start}.lc-text small{white-space:normal}}

/* Competitors' ads as a wall (owner, 26 Oct 2026): proven, being tested, stopped quickly; who advertises most; each ad
   in its own setting with when it ran. */
.ad-signals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:14px}
.ad-signal{position:relative;display:grid;align-content:start;gap:5px;padding:18px 18px 20px;border:0;border-radius:22px;text-align:left;background:var(--card-bg);box-shadow:var(--card-shadow);color:var(--ink);font:inherit;cursor:pointer;transition:background .4s var(--ease),color .4s var(--ease),transform .4s var(--ease),box-shadow .4s var(--ease)}
.ad-signal:hover{transform:translateY(-2px)}
.ad-signal:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.ad-signal[aria-pressed="true"]{background:var(--dark-bg);color:#fff;box-shadow:0 26px 46px -28px rgba(0,0,0,.62)}
.as-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.as-n{font-size:38px;font-weight:600;letter-spacing:-.055em;line-height:.9}
.as-dot{width:10px;height:10px;border-radius:50%;background:currentColor}
.ad-signal.stopped .as-dot{background:none;box-shadow:inset 0 0 0 1.6px currentColor}
.ad-signal strong{font-size:15.5px;font-weight:600;letter-spacing:-.01em}
.ad-signal small{font:500 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute);transition:color .4s}
.ad-signal p{margin:6px 0 0;font-size:13.5px;line-height:1.45;color:var(--ink-3);transition:color .4s}
.ad-signal[aria-pressed="true"] small{color:rgba(255,255,255,.55)}.ad-signal[aria-pressed="true"] p{color:rgba(255,255,255,.78)}
.ad-volume{display:grid;gap:11px;margin-bottom:18px;padding:18px 20px}
.av-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:2px}.av-head h3{margin:0;font-size:17px;letter-spacing:-.02em}.av-head small{color:var(--mute);font-size:12.5px}
.av-row{display:grid;grid-template-columns:minmax(0,140px) minmax(0,1fr) auto;gap:14px;align-items:center;font-size:14px}
.av-name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.av-bar{height:8px;border-radius:4px;background:var(--line)}.av-bar i{display:block;width:var(--w);height:100%;border-radius:inherit;background:var(--ink);transform-origin:left}
.av-row:not(:first-of-type) .av-bar i{background:var(--ink-3)}
.av-n{font-size:12.5px;color:var(--mute);white-space:nowrap}.av-n b{color:var(--ink);font-weight:600}
.ad-wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:18px;align-items:start;margin-bottom:12px}
.ad-wall[data-show="proven"] .wall-ad:not([data-group="proven"]),.ad-wall[data-show="testing"] .wall-ad:not([data-group="testing"]),.ad-wall[data-show="stopped"] .wall-ad:not([data-group="stopped"]){display:none}
.wall-ad{display:grid;border-radius:22px;background:var(--card-bg);box-shadow:var(--card-shadow);overflow:hidden}
.wa-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 15px 11px}
.wa-on{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--ink-2)}.wa-on svg{width:14px;height:14px}
.wa-state{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:11.5px;font-weight:600;color:var(--ink-2);background:var(--paper-hi);box-shadow:inset 0 0 0 1px var(--line-2)}
.wa-state::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.wa-state.proven{background:var(--ink);color:#fff;box-shadow:none}
.wa-state.stopped{color:var(--mute)}.wa-state.stopped::before{background:none;box-shadow:inset 0 0 0 1.5px currentColor}
.wa-frame{margin:0 12px;border-radius:14px}
.wall-ad[data-group="stopped"] .wa-frame{filter:grayscale(1) contrast(.9);opacity:.74}
.fa-media .fa-play{position:absolute;left:50%;top:50%;translate:-50% -50%;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:rgba(12,12,13,.55);color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 10px 24px -10px rgba(0,0,0,.6)}
.fa-play svg{width:20px;height:20px;margin-left:2px}
/* Google: a search result, or a banner on a page */
.g-serp{display:grid;gap:14px;padding:14px;background:#fff}
.g-search{display:flex;align-items:center;gap:10px;padding:10px 15px;border-radius:999px;background:#fff;box-shadow:0 1px 6px rgba(32,33,36,.2);font-size:13px;color:#202124}.g-search svg{width:14px;height:14px;color:#9aa0a6}.g-search i{flex:1;max-width:55%;height:7px;border-radius:4px;background:#e8eaed}
.g-result{display:grid;gap:6px;padding:0 4px 4px}
.g-sponsored{font-size:12px;font-weight:700;color:#202124}
.g-site{display:flex;align-items:center;gap:10px}.g-site i{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#f1f3f4;box-shadow:0 0 0 1px #e8eaed;font:600 11px var(--sans);font-style:normal;color:#202124}.g-site b{display:block;font-size:13.5px;font-weight:500;color:#202124}.g-site small{display:block;font-size:12px;color:#4d5156}
.g-result strong{font-size:19px;font-weight:500;line-height:1.3;letter-spacing:-.01em;color:#111}
.g-result p{margin:0;font-size:13.5px;line-height:1.55;color:#4d5156}
.g-display{display:grid;gap:9px;padding:13px;background:#f8f9fa}
.g-page{display:grid;gap:6px}.g-page i{display:block;height:7px;border-radius:4px;background:#e8eaed}.g-page i:nth-child(2){width:84%}.g-page i:nth-child(3){width:60%}
.g-banner{position:relative;margin:0;border-radius:8px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px #e3e5e8,0 8px 18px -12px rgba(0,0,0,.3)}.g-banner img{display:block;width:100%;height:auto;max-height:280px;object-fit:contain;background:#fff}
.g-banner figcaption{display:flex;align-items:center;gap:6px;padding:6px 10px;font-size:11px;color:#5f6368;border-top:1px solid #eceef0}.g-banner figcaption span{font-weight:700;color:#202124}
/* When it ran: the last twelve months, now at the right */
.wa-time{display:grid;gap:7px;padding:16px 16px 8px}
.wt-track{position:relative;height:10px;border-radius:5px;background:var(--line)}
.wt-tick{position:absolute;left:var(--x);top:-3px;bottom:-3px;width:1px;background:var(--line-2)}
.wt-run{position:absolute;top:0;bottom:0;left:var(--l);width:var(--w);border-radius:5px;background:var(--ink);transform-origin:left}
.wt-run.earlier{border-top-left-radius:0;border-bottom-left-radius:0}
.wt-run.ended{background:var(--faint)}
.wt-run.live::after{content:"";position:absolute;right:-6px;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 4px var(--card,#fafaf8)}
.wt-axis{display:flex;justify-content:space-between;font:500 9.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.wa-time small{font-size:12.5px;line-height:1.4;color:var(--ink-3)}
.wall-ad .comp-ad-foot{padding-top:6px}
.ad-honest{margin-top:2px}
@media (max-width:760px){.ad-signals{grid-template-columns:1fr;gap:8px}.ad-signal{grid-template-columns:auto 1fr;column-gap:14px;padding:14px 16px}.ad-signal .as-top{grid-row:1/span 4;flex-direction:column;align-items:flex-start;gap:8px;margin:0}.as-n{font-size:30px}.av-row{grid-template-columns:minmax(0,92px) minmax(0,1fr);row-gap:4px}.av-n{grid-column:2}.ad-signal .as-dot{display:none}}
@media (prefers-reduced-motion:no-preference){
 .wall-ad.in .wt-run{animation:wt-grow 1.2s var(--ease) calc(var(--d,0s) + .25s) both}
 .wall-ad.in .wt-run.live::after{animation:wt-pulse 2.6s var(--ease-io) 1.4s infinite}
 .ad-volume.in .av-bar i{animation:wt-grow 1.1s var(--ease) calc(.25s + var(--i) * .12s) both}
 .ad-signal.testing .as-dot,.wa-state.testing::before{animation:as-blink 1.8s var(--ease-io) infinite}
}
@keyframes wt-grow{from{transform:scaleX(0)}}
@keyframes wt-pulse{0%{box-shadow:0 0 0 4px var(--card,#fafaf8),0 0 0 4px rgba(12,12,13,.3)}70%,100%{box-shadow:0 0 0 4px var(--card,#fafaf8),0 0 0 11px rgba(12,12,13,0)}}
@keyframes as-blink{0%,100%{opacity:1}50%{opacity:.25}}

/* Near you on Google Maps, as a map (owner, 26 Oct 2026): the search and results on the left, a drawn map with each
   business at its real position on the right. Black and white, like the rest of Distrove. */
.lmap{display:grid;grid-template-columns:minmax(0,370px) minmax(0,1fr);height:580px;margin-bottom:18px;border-radius:28px;overflow:hidden;background:var(--card-bg);box-shadow:var(--card-shadow)}
.lm-panel{position:relative;z-index:1;display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--card,#fafaf8);box-shadow:1px 0 0 var(--line),12px 0 30px -24px rgba(0,0,0,.35)}
.lm-search{display:flex;align-items:center;gap:10px;margin:16px 16px 6px;padding:12px 16px;border-radius:999px;background:#fff;box-shadow:0 2px 10px -2px rgba(12,12,13,.18),0 0 0 1px var(--line);font-size:14px}
.lm-search .icon{flex:none;width:15px;height:15px;color:var(--mute)}
.lm-q{flex:1;min-width:0;display:flex;align-items:center}.lm-q span{display:inline-block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lm-caret{flex:none;width:1.5px;height:1.05em;margin-left:1px;background:var(--ink);opacity:0}
.lm-list{list-style:none;margin:0;padding:6px 8px 12px;display:grid;align-content:start;overflow:auto}
.lm-item{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;padding:12px 10px;border-radius:16px;transition:background .3s var(--ease)}
.lm-item+.lm-item{box-shadow:0 -1px 0 var(--line)}
.lm-item:hover{background:var(--paper-hi)}
.lm-n{display:grid;place-items:center;width:28px;height:28px;margin-top:1px;border-radius:50%;background:var(--paper-hi);box-shadow:inset 0 0 0 1px var(--line-2);font:600 12px var(--sans);color:var(--ink-2)}
.lm-item:first-child .lm-n{background:var(--ink);color:#fff;box-shadow:none}
.lm-text{display:grid;gap:3px;min-width:0}
.lm-text strong{font-size:15px;font-weight:600;letter-spacing:-.01em;line-height:1.25}
.lm-rate{display:flex;align-items:baseline;gap:5px}.lm-rate .lc-stars{font-size:13.5px}.lm-rate small{font-size:12.5px;color:var(--mute)}
.lm-text>small{font-size:12.5px;line-height:1.4;color:var(--mute)}
.lm-links{display:flex;gap:14px;margin-top:4px}.lm-links .text-btn{font-size:12.5px}
.lm-map{position:relative;min-height:0;overflow:hidden;background:#e9e8e3}
.lm-map svg{position:absolute;inset:0;width:100%;height:100%}
.lm-land{fill:#ecebe6}.lm-st{stroke:#fbfbf9;stroke-width:4}.lm-road{stroke:#fff;stroke-width:11;stroke-linecap:round;filter:drop-shadow(0 0 1px rgba(12,12,13,.12))}
.lm-park{fill:#dcdcd4}.lm-water{fill:#d3d4d6}
.lm-pin{position:absolute;left:var(--x);top:var(--y);z-index:2;display:grid;justify-items:center;translate:-50% -100%;pointer-events:auto;cursor:default}
.lm-pin b{position:relative;display:grid;place-items:center;width:30px;height:30px;border-radius:50% 50% 50% 4px;rotate:-45deg;background:#fff;box-shadow:0 0 0 1.5px var(--ink),0 8px 16px -6px rgba(0,0,0,.45);font:700 12px var(--sans);color:var(--ink);transition:transform .35s var(--spring),background .3s,color .3s}
.lm-pin b>span{rotate:45deg}
.lm-pin.top b{width:38px;height:38px;background:var(--ink);color:#fff;box-shadow:0 10px 22px -8px rgba(0,0,0,.6);font-size:14px}
.lm-pin::after{content:"";width:12px;height:5px;margin-top:3px;border-radius:50%;background:rgba(12,12,13,.22);filter:blur(1px)}
.lm-pin em{position:absolute;bottom:calc(100% + 8px);left:50%;translate:-50% 4px;padding:6px 11px;border-radius:10px;background:var(--ink);color:#fff;font:600 12px var(--sans);font-style:normal;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .25s var(--ease),translate .35s var(--ease);box-shadow:0 10px 24px -12px rgba(0,0,0,.6)}
.lm-pin:hover{z-index:3}.lm-pin:hover b{transform:scale(1.14)}.lm-pin:hover em{opacity:1;translate:-50% 0}
.lm-note{position:absolute;right:12px;bottom:10px;z-index:2;padding:4px 9px;border-radius:999px;background:rgba(250,250,248,.82);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font:500 10px var(--mono);letter-spacing:.06em;color:var(--mute)}
.lmap:has(.lm-item[data-i="1"]:hover) .lm-pin[data-i="1"],.lmap:has(.lm-item[data-i="2"]:hover) .lm-pin[data-i="2"],.lmap:has(.lm-item[data-i="3"]:hover) .lm-pin[data-i="3"],.lmap:has(.lm-item[data-i="4"]:hover) .lm-pin[data-i="4"],.lmap:has(.lm-item[data-i="5"]:hover) .lm-pin[data-i="5"],.lmap:has(.lm-item[data-i="6"]:hover) .lm-pin[data-i="6"]{z-index:3}
.lmap:has(.lm-item[data-i="1"]:hover) .lm-pin[data-i="1"] :is(b,em),.lmap:has(.lm-item[data-i="2"]:hover) .lm-pin[data-i="2"] :is(b,em),.lmap:has(.lm-item[data-i="3"]:hover) .lm-pin[data-i="3"] :is(b,em),.lmap:has(.lm-item[data-i="4"]:hover) .lm-pin[data-i="4"] :is(b,em),.lmap:has(.lm-item[data-i="5"]:hover) .lm-pin[data-i="5"] :is(b,em),.lmap:has(.lm-item[data-i="6"]:hover) .lm-pin[data-i="6"] :is(b,em){opacity:1;translate:-50% 0;transform:scale(1.14)}
.lmap:has(.lm-pin[data-i="1"]:hover) .lm-item[data-i="1"],.lmap:has(.lm-pin[data-i="2"]:hover) .lm-item[data-i="2"],.lmap:has(.lm-pin[data-i="3"]:hover) .lm-item[data-i="3"],.lmap:has(.lm-pin[data-i="4"]:hover) .lm-item[data-i="4"],.lmap:has(.lm-pin[data-i="5"]:hover) .lm-item[data-i="5"],.lmap:has(.lm-pin[data-i="6"]:hover) .lm-item[data-i="6"]{background:var(--paper-hi)}
@media (max-width:860px){.lmap{grid-template-columns:1fr;height:auto}.lm-map{order:-1;min-height:280px}.lm-pin b{width:24px;height:24px;font-size:10.5px}.lm-pin.top b{width:30px;height:30px;font-size:12px}.lm-note{left:10px;right:auto;bottom:8px;font-size:8.5px;white-space:nowrap}.lm-panel{box-shadow:0 -1px 0 var(--line)}.lm-list{overflow:visible}}
@media (prefers-reduced-motion:no-preference){
 .lmap.in .lm-q span{animation:lm-type 1.2s steps(26,end) .35s both}
 .lmap.in .lm-caret{animation:lm-caret 1s step-end 3 .35s both}
 .lmap.in .lm-item{animation:lm-in .7s var(--ease) calc(1.3s + var(--i) * .09s) both}
 .lmap.in .lm-pin{animation:lm-drop .75s var(--spring) calc(1.45s + var(--i) * .12s) both}
 .lmap.in .lm-pin.top b{animation:lm-ring 2.6s var(--ease-io) 2.6s infinite}
}
@keyframes lm-type{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes lm-caret{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes lm-in{from{opacity:0;transform:translateY(10px)}}
@keyframes lm-drop{0%{opacity:0;transform:translateY(-46px)}60%{opacity:1}100%{transform:none}}
@keyframes lm-ring{0%{box-shadow:0 10px 22px -8px rgba(0,0,0,.6),0 0 0 0 rgba(12,12,13,.35)}70%,100%{box-shadow:0 10px 22px -8px rgba(0,0,0,.6),0 0 0 14px rgba(12,12,13,0)}}
/* From preview to paying (owner dashboard, 27 Oct 2026): five columns rise in turn, the rate between each pops in, the
   biggest drop is outlined and labelled, and the places people stop fill like gauges; pressing one lists its accounts. */
.funnel-card{padding:clamp(20px,2.8vw,32px)}
.fn-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 20px;margin-bottom:28px}
.fn-head h2{margin:8px 0 0;font-size:clamp(22px,2.6vw,30px)}
.fn-since{font-size:12px;color:var(--mute)}
.fn-steps{--gap:clamp(10px,1.8vw,20px);list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--gap);margin:0;padding:0}
.fn-step{position:relative;display:grid;align-content:start;gap:5px}
.fn-bar{display:flex;align-items:flex-end;height:156px;margin-bottom:12px;border-radius:16px;background:rgba(12,12,13,.035);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.fn-bar i{display:block;width:100%;height:var(--h);border-radius:14px 14px 5px 5px;background:linear-gradient(180deg,#3b3b40,var(--ink) 55%);box-shadow:inset 0 1px 0 rgba(255,255,255,.24)}
.funnel-card:not(.in) .fn-bar i{height:0}
.funnel-card.in .fn-bar i{animation:fn-rise 1.15s var(--spring) calc(.12s + var(--i) * .13s) backwards}
.fn-step.is-zero .fn-bar i{height:2px;border-radius:2px;background:var(--line-3);box-shadow:none}
.fn-step.is-drop .fn-bar{box-shadow:inset 0 0 0 1.5px var(--ink)}
.fn-step strong{font-size:clamp(1.7rem,2.8vw,2.4rem);font-weight:600;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
.fn-label{font-size:13px;font-weight:500;line-height:1.3;color:var(--ink-2)}
.fn-step small{font-size:12px;line-height:1.35;color:var(--mute)}
.fn-rate{position:absolute;top:12px;left:calc(var(--gap) / -2);z-index:2;padding:4px 8px;border-radius:999px;background:var(--card);box-shadow:0 0 0 1px var(--line-2),0 6px 14px -8px rgba(0,0,0,.35);font:500 11px/1 var(--mono);color:var(--ink-2);transform:translateX(-50%)}
.funnel-card.in .fn-rate{animation:fn-pop .6s var(--spring-pop) calc(.55s + var(--i) * .13s) backwards}
.fn-step.is-drop .fn-rate{background:var(--ink);color:#fff;box-shadow:0 6px 14px -6px rgba(0,0,0,.5)}
.fn-drop{justify-self:start;margin-top:4px;padding:4px 9px;border-radius:999px;background:var(--ink);color:#fff;font:500 10px/1.2 var(--mono);font-style:normal;letter-spacing:.06em;text-transform:uppercase}
.funnel-card.in .fn-drop{animation:fn-tag .6s var(--spring-pop) 1.2s backwards}
.fn-empty{margin:18px 0 0;font-size:13.5px;color:var(--mute)}
.fn-stops{display:grid;gap:6px;margin-top:30px;padding-top:22px;border-top:1px solid var(--line)}
.fn-stops .eyebrow{margin-bottom:6px}
.fn-stop{position:relative;isolation:isolate;display:flex;align-items:center;gap:14px;width:100%;padding:13px 16px;border-radius:16px;text-align:left;color:var(--ink);overflow:hidden;transition:background .3s,color .3s,box-shadow .3s,transform .45s var(--spring)}
.fn-stop::before{content:"";position:absolute;inset:0 auto 0 0;z-index:-1;width:max(var(--w),16px);border-radius:16px;background:rgba(12,12,13,.055);transform-origin:left}
.funnel-card:not(.in) .fn-stop::before{transform:scaleX(0)}
.funnel-card.in .fn-stop::before{animation:fn-fill 1s var(--ease) calc(.75s + var(--i) * .09s) backwards}
.fn-stop-text{flex:1;min-width:0;display:grid;gap:2px}
.fn-stop-text strong{font-size:14.5px;font-weight:600}
.fn-stop-text small{font-size:12.5px;color:var(--mute);transition:color .3s}
.fn-stop-n{font-size:21px;font-weight:600;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.fn-stop .icon{width:14px;height:14px;color:var(--mute);transition:transform .4s var(--spring),color .3s}
button.fn-stop:hover{box-shadow:inset 0 0 0 1px var(--line-2);transform:translateX(3px)}
button.fn-stop:hover .icon{transform:rotate(90deg);color:var(--ink)}
.fn-stop.is-on{background:var(--ink);color:#fff;box-shadow:0 14px 28px -18px rgba(0,0,0,.6)}
.fn-stop.is-on::before{opacity:0}
.fn-stop.is-on small,.fn-stop.is-on .icon{color:rgba(255,255,255,.7)}
.fn-stop.is-on .icon{transform:rotate(90deg)}
.fn-stop.is-zero{color:var(--mute)}
.fn-stop.is-zero .fn-stop-n{color:var(--faint)}
.fn-note{margin-top:18px}
.fn-filter{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px 0 14px;border-radius:999px;background:var(--ink);color:#fff;font-size:13px;font-weight:500;animation:fn-tag .5s var(--spring-pop) both;transition:transform .35s var(--spring)}
.fn-filter[hidden]{display:none}
.fn-filter .icon{width:13px;height:13px}
.fn-filter:hover{transform:scale(1.04)}
.admin-accounts-head h2+.fn-filter{margin-right:auto}
.admin-accounts td.fn-cell{white-space:normal;min-width:170px}
.fn-meter{display:flex;gap:3px;margin-bottom:7px}
.fn-meter i{width:15px;height:4px;border-radius:2px;background:var(--line-2)}
.fn-meter i.on{background:var(--ink)}
@keyframes fn-rise{from{height:0}}
@keyframes fn-pop{from{opacity:0;transform:translateX(-50%) scale(.6)}}
@keyframes fn-tag{from{opacity:0;transform:scale(.6)}}
@keyframes fn-fill{from{transform:scaleX(0)}}
@media (max-width:560px){
 .fn-steps{--gap:8px}
 .fn-bar{height:112px;border-radius:12px;margin-bottom:9px}
 .fn-bar i{border-radius:10px 10px 4px 4px}
 .fn-label{font-size:11.5px}
 .fn-step small{display:none}
 .fn-rate{top:8px;padding:3px 6px;font-size:10px}
 .fn-drop{font-size:9px;padding:3px 7px}
 .fn-stop{padding:12px 13px;gap:10px}
}
@media (prefers-reduced-motion:reduce){
 .funnel-card .fn-bar i,.funnel-card .fn-rate,.funnel-card .fn-drop,.funnel-card .fn-stop::before{animation:none!important}
 .funnel-card:not(.in) .fn-bar i{height:var(--h)}
 .funnel-card:not(.in) .fn-stop::before{transform:none}
 .fn-stop,.fn-stop .icon{transition:none}
}
/* Who arrives (owner dashboard, 9 Nov 2026): the funnel's accounts by source and by kind of business. One switch, two
   tables; the rows rise in turn, each fills like a gauge with its share of accounts, and whoever paid carries a dark mark. */
.arrive-card .fn-head{align-items:center;margin-bottom:22px}
.ar-table{display:grid;gap:4px}
.ar-table[hidden]{display:none}
.ar-head,.ar-row{display:grid;grid-template-columns:minmax(0,1.7fr) repeat(var(--cols),minmax(0,1fr));align-items:center;gap:8px;padding:0 16px}
.ar-head{padding-bottom:6px;font:500 10px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.ar-head span+span,.ar-n{text-align:right}
.ar-row{position:relative;isolation:isolate;min-height:54px;border-radius:16px;overflow:hidden}
.ar-row::before{content:"";position:absolute;inset:0 auto 0 0;z-index:-1;width:var(--w);border-radius:16px;background:rgba(12,12,13,.055);transform-origin:left}
.ar-row.is-total{margin-bottom:4px;box-shadow:inset 0 0 0 1px var(--line-2)}
.ar-row.is-quiet{margin-top:4px;box-shadow:inset 0 0 0 1px var(--line)}
.ar-row.is-quiet .ar-name strong{font-weight:500;color:var(--ink-3)}
.ar-name{display:grid;gap:2px;min-width:0;padding:9px 0}
.ar-name strong{overflow:hidden;font-size:14.5px;font-weight:600;text-overflow:ellipsis;white-space:nowrap}
.ar-name small{font-size:12.5px;line-height:1.3;color:var(--mute)}
.ar-n{font-size:16px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ar-n.is-zero{font-weight:500;color:var(--faint)}
.ar-n.is-paid b{display:inline-block;min-width:30px;padding:5px 10px;border-radius:999px;background:var(--ink);color:#fff;font-weight:600;line-height:1;text-align:center;box-shadow:0 8px 16px -10px rgba(0,0,0,.6)}
.arrive-card.in .ar-row{animation:admin-in .6s var(--ease) calc(.1s + var(--i) * .05s) backwards}
.arrive-card:not(.in) .ar-row::before{transform:scaleX(0)}
.arrive-card.in .ar-row::before{animation:fn-fill .9s var(--ease) calc(.3s + var(--i) * .05s) backwards}
.arrive-card.in .ar-n.is-paid b{animation:fn-tag .5s var(--spring-pop) calc(.55s + var(--i) * .05s) backwards}
@media (max-width:640px){
 .arrive-card .fn-head{align-items:flex-start}
 .ar-head{display:none}
 .ar-table{gap:6px}
 /* On a phone each row is a small card: its numbers in a grid under its name, its share as a line along the bottom. */
 .ar-row{grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;gap:10px 8px;padding:13px 14px 16px;background:rgba(12,12,13,.035)}
 .ar-row.is-total,.ar-row.is-quiet{background:none}
 .ar-row::before{inset:auto auto 0 0;height:3px;border-radius:0 3px 3px 0;background:var(--ink)}
 .ar-table.is-kinds .ar-row{grid-template-columns:repeat(4,minmax(0,1fr))}
 .ar-name{grid-column:1/-1;padding:0}
 .ar-n{display:grid;justify-items:start;gap:4px;font-size:15px;line-height:23px;text-align:left}
 .ar-n::before{content:attr(data-label);font:500 9.5px/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
 .ar-n.is-paid b{padding:4px 9px}
}
@media (prefers-reduced-motion:reduce){
 .arrive-card .ar-row,.arrive-card .ar-row::before,.arrive-card .ar-n.is-paid b{animation:none!important}
 .arrive-card:not(.in) .ar-row::before{transform:none}
}
/* The owner dashboard in tabs (owner, 27 Oct 2026: “there’s a lot of cards”): Overview, Accounts, Follow-up (its switch
   and who got it, together: “I don’t see it anymore”) and System switch in place; the pill slides, the panel's cards rise in one after another, Accounts shows its count, and a dot on System
   with one dark line on Overview say when something there needs the owner. */
.admin-tabs-bar{margin:4px 0 -4px}
/* Four tabs do not fit one line on a phone: two by two, the pill moving between rows. */
@media (max-width:620px){#admin-tabs{display:grid;grid-template-columns:1fr 1fr;width:100%;border-radius:22px}#admin-tabs button{width:100%;justify-content:center;text-align:center}}
.admin-panel{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
.admin-panel[hidden]{display:none}
.admin-panel.is-in>*{animation:admin-in .7s var(--ease) both}
.admin-panel.is-in>:nth-child(2){animation-delay:.05s}.admin-panel.is-in>:nth-child(3){animation-delay:.1s}.admin-panel.is-in>:nth-child(4){animation-delay:.15s}.admin-panel.is-in>:nth-child(5){animation-delay:.2s}.admin-panel.is-in>:nth-child(n+6){animation-delay:.25s}
.admin-panel .admin-switch{margin-top:0}
/* ChatGPT and Claude (lib/assistants.mjs): the day against the cap, as a bar that fills when the card comes into view. */
.admin-assistants{display:grid;gap:14px;padding:20px 22px}
.aa-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
.aa-head strong{display:flex;align-items:center;gap:8px;font-size:15px}.aa-head strong .icon{width:16px;height:16px}
.aa-head small{display:block;margin-top:4px;max-width:62ch;font-size:13px;line-height:1.5;color:var(--mute)}
.aa-count{display:grid;justify-items:end;flex:none;line-height:1}.aa-count b{font-size:34px;font-weight:600;letter-spacing:-.04em}.aa-count>span{margin-top:6px;font-size:12px;color:var(--mute)}
.aa-bar{display:block;height:6px;border-radius:6px;background:var(--line);overflow:hidden}
.aa-bar i{display:block;height:100%;width:var(--w);border-radius:inherit;background:var(--ink);transform-origin:left}
.admin-assistants:not(.in) .aa-bar i{transform:scaleX(0)}
.aa-facts{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:13.5px;color:var(--ink-3)}.aa-facts b{color:var(--ink);font-weight:600}
.aa-week{display:flex;flex-wrap:wrap;gap:6px}.aa-week .chip{font-size:12.5px;padding:4px 11px;border-radius:999px;background:var(--line);color:var(--ink-2)}.aa-none{margin:0;font-size:13.5px;color:var(--mute)}
.aa-cap{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding-top:12px;border-top:1px solid var(--line)}
.aa-cap label{display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:500}.aa-cap input{width:110px;height:36px}
.aa-cap small{font-size:12.5px;color:var(--mute)}
@media (prefers-reduced-motion:no-preference){.admin-assistants .aa-bar i{transition:transform 1.1s var(--ease) .25s}}
@media (max-width:620px){.aa-head{flex-direction:column}.aa-count{justify-items:start}}
@keyframes admin-in{from{opacity:0;transform:translateY(12px)}}
.seg-n{display:inline-block;margin-left:7px;padding:2px 7px;border-radius:999px;background:rgba(12,12,13,.08);font:500 11px/1.3 var(--mono);letter-spacing:0;color:inherit;transition:background .35s}
.seg button.active .seg-n{background:rgba(255,255,255,.2)}
.seg button.active .seg-dot{background:#fff}
.seg-dot{position:relative;display:inline-block;width:7px;height:7px;margin-left:8px;border-radius:50%;background:var(--ink);vertical-align:1px}
.seg-dot::after{content:"";position:absolute;inset:0;border-radius:50%;animation:admin-ping 2.2s ease-out infinite}
@keyframes admin-ping{0%{box-shadow:0 0 0 0 rgba(12,12,13,.35)}75%,100%{box-shadow:0 0 0 7px rgba(12,12,13,0)}}
.admin-alert{display:flex;align-items:center;gap:14px;width:100%;padding:14px 20px 14px 14px;border-radius:22px;background:var(--dark-bg,var(--ink));color:#fff;text-align:left;box-shadow:0 18px 34px -24px rgba(0,0,0,.7);transition:transform .45s var(--spring),box-shadow .35s}
.admin-alert:hover{transform:translateY(-2px);box-shadow:0 22px 40px -22px rgba(0,0,0,.75)}
.admin-alert .aa-text{flex:1;min-width:0;display:grid;gap:2px}
.admin-alert strong{font-size:14.5px;font-weight:600}
.admin-alert small{font-size:13px;color:rgba(255,255,255,.72)}
.aa-ico{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.12)}
.aa-ico .icon{width:17px;height:17px}
.admin-alert .i-swap{flex:none}
@media (prefers-reduced-motion:reduce){.admin-panel.is-in>*,.seg-dot::after{animation:none!important}.admin-alert{transition:none}}
/* Owner dashboard: whether an account opens and uses Distrove (lib/activity.mjs). The dot is filled when active, half after
   7 days unopened or 14 with nothing done, empty after 14 unopened; tapping it opens the week in numbers. */
.seen-btn{display:flex;align-items:center;gap:11px;margin:-7px -10px;padding:7px 10px;border-radius:14px;color:inherit;text-align:left;transition:background .25s var(--ease)}
.seen-btn:hover,.seen-btn:focus-visible{background:var(--line)}
.seen-text{display:grid;gap:1px}
.seen-text strong{font-weight:600}
.seen-dot{flex:none;width:10px;height:10px;border-radius:50%;border:1.5px solid var(--ink);transition:transform .35s var(--spring,var(--ease))}
.seen-btn:hover .seen-dot{transform:scale(1.25)}
.seen-dot.is-active{background:var(--ink)}
.seen-dot.is-quiet,.seen-dot.is-idle{background:linear-gradient(90deg,var(--ink) 50%,transparent 50%)}
.seen-dot.is-none{border-color:var(--line-3)}
.act-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin-top:20px;border-radius:22px;overflow:hidden;background:var(--line-2)}
.act-stat{display:grid;align-content:start;gap:8px;padding:18px 20px;background:var(--card)}
.act-stat:first-child{grid-column:1/-1}
.act-stat>span{font-size:12.5px;font-weight:500;color:var(--mute)}
.act-stat strong{font-size:clamp(1.7rem,3vw,2.1rem);font-weight:600;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums}
.act-stat strong small{font-size:.42em;font-weight:500;letter-spacing:0;color:var(--mute)}
.act-stat>small{font-size:12.5px;color:var(--mute)}
.modal-body .act-grid+.field-note{margin-top:14px}
@media (prefers-reduced-motion:reduce){.seen-btn,.seen-dot{transition:none}.seen-btn:hover .seen-dot{transform:none}}
/* Owner dashboard (owner, 1 Nov 2026: “my paid users are lost in all the accounts”, and “is there any way to see more of
   the activity of my users?”): paying customers pinned above All accounts, ringed in ink; on Overview, what founders use
   of each kind of channel and where the month's spending goes. Rows rise in turn and their fills grow into view. */
.metric-go{color:inherit;transition:background .3s var(--ease)}
.metric-go .metric-label .icon{width:13px;height:13px;opacity:.4;transition:opacity .3s,transform .45s var(--spring)}
.metric-go:hover,.metric-go:focus-visible{background:rgba(12,12,13,.03)}
.metric-go:hover .metric-label .icon{opacity:1;transform:translate(2px,-2px)}
.paying-card{box-shadow:inset 0 0 0 1.5px var(--ink),0 18px 34px -28px rgba(0,0,0,.45)}
.paying-card[hidden]{display:none}
.paying-card th{white-space:nowrap}
.pay-sum{font-size:13.5px;color:var(--mute)}
.pay-sum b{margin-right:3px;font-size:22px;font-weight:600;letter-spacing:-.04em;color:var(--ink);font-variant-numeric:tabular-nums}
.pay-chs{display:flex;flex-wrap:wrap;gap:5px}
.pay-ch{padding:4px 10px;border-radius:999px;background:var(--line);font-size:12.5px;color:var(--ink-2);white-space:nowrap}
.pay-ch.more{background:none;box-shadow:inset 0 0 0 1px var(--line-2);color:var(--mute)}
.admin-accounts td.pay-ch-cell{white-space:normal;min-width:150px}
.paying-card td .status{height:26px;margin-top:6px;padding:0 10px;font-size:12px}
.paying-card td .status .icon{width:13px;height:13px}
.pay-none{margin:6px 0 0;font-size:13.5px}
.admin-panel.is-in .paying-card tbody tr{animation:admin-in .6s var(--ease) calc(.12s + var(--i) * .05s) both}
.use-card,.spend-card{padding:clamp(20px,2.8vw,32px)}
.use-sum{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;margin:-12px 0 22px;font-size:14px;color:var(--ink-3)}
.use-sum strong{font-size:clamp(1.9rem,3vw,2.5rem);font-weight:600;letter-spacing:-.05em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.use-rows,.spend-rows{list-style:none;display:grid;gap:6px;margin:0;padding:0}
.use-row{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.3fr) 64px;align-items:center;gap:6px 18px;padding:14px 18px;border-radius:16px;overflow:hidden}
.use-row::before{content:"";position:absolute;inset:0 auto 0 0;z-index:-1;width:var(--w);border-radius:16px;background:rgba(12,12,13,.06);transform-origin:left}
.use-row::after{content:"";position:absolute;inset:0;z-index:-2;border-radius:16px;box-shadow:inset 0 0 0 1px var(--line)}
.use-card:not(.in) .use-row::before{transform:scaleX(0)}
.use-card.in .use-row::before{animation:fn-fill 1s var(--ease) calc(.2s + var(--i) * .08s) backwards}
.use-card.in .use-row,.spend-card.in .spend-row{animation:admin-in .6s var(--ease) calc(var(--i) * .06s) backwards}
.use-name{display:grid;gap:2px;min-width:0}
.use-name strong,.spend-name strong{font-size:14.5px;font-weight:600}
.use-name small,.spend-name small,.spend-n small{font-size:12.5px;line-height:1.4;color:var(--mute)}
.use-flow{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;font-size:13.5px;color:var(--ink-3)}
.use-flow b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.use-to::before{content:"→";margin-right:10px;color:var(--faint)}
.use-rate{justify-self:end;font-size:22px;font-weight:600;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.use-rate small{font-size:.6em;font-weight:500;color:var(--mute)}
.use-row.is-zero{color:var(--mute)}.use-row.is-zero .use-rate{color:var(--faint)}
.use-card .field-note,.spend-card .field-note{margin-top:18px}
.spend-row{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) 180px;align-items:center;gap:6px 22px;padding:12px 4px;border-top:1px solid var(--line)}
.spend-row:first-child{border-top:0}
.spend-name{display:grid;gap:2px;min-width:0}
.spend-bar{display:block;height:8px;border-radius:8px;background:var(--line);overflow:hidden}
.spend-bar i{display:block;width:var(--w);height:100%;border-radius:inherit;background:var(--ink);transform-origin:left}
.spend-card:not(.in) .spend-bar i{transform:scaleX(0)}
.spend-card.in .spend-bar i{animation:fn-fill 1s var(--ease) calc(.2s + var(--i) * .08s) backwards}
.spend-n{display:grid;justify-items:end;gap:2px;text-align:right}
.spend-n strong{font-size:17px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
@media (max-width:640px){
 .admin-accounts td.pay-ch-cell{grid-column:1/-1}
 .paying-card tbody tr{grid-auto-flow:dense}
 .use-row{grid-template-columns:minmax(0,1fr) auto;padding:13px 14px}
 .use-flow{grid-column:1/-1;grid-row:2}
 .use-rate{grid-row:1;grid-column:2}
 .spend-row{grid-template-columns:minmax(0,1fr);gap:8px}
 .spend-n{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;justify-items:start;text-align:left}
}
@media (prefers-reduced-motion:reduce){
 .admin-panel.is-in .paying-card tbody tr,.use-card .use-row,.use-card .use-row::before,.spend-card .spend-row,.spend-card .spend-bar i{animation:none!important}
 .use-card:not(.in) .use-row::before,.spend-card:not(.in) .spend-bar i{transform:none}
 .metric-go,.metric-go .metric-label .icon{transition:none}
}

/* Distrove in Claude (distrove.app/claude): a question asked in Claude with Distrove's card (an example), four steps, the
   two tools, the data, the questions. Monochrome, one serif accent per heading; the card's rows rise in turn. */
.gd-hero{padding:clamp(130px,15vw,180px) 0 clamp(40px,6vw,80px)}
.gd-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:clamp(36px,6vw,90px);align-items:center}
.gd-hero-copy .eyebrow{margin-bottom:22px}
.gd-hero-copy>p{margin:24px 0 30px;max-width:520px;font-size:1.1rem;line-height:1.6;color:var(--ink-3)}
.gd-chat{display:grid;gap:14px;margin:0;padding:clamp(14px,2.2vw,22px);border-radius:32px}
.gd-ask{justify-self:end;max-width:86%;margin:0;padding:12px 16px;border-radius:20px 20px 6px 20px;background:var(--ink);color:#fff;font-size:15px;line-height:1.45}
.gd-card{display:grid;gap:10px;padding:18px;border-radius:22px;background:var(--card);box-shadow:var(--card-shadow)}
.gd-top{display:flex;align-items:center;gap:8px;font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--mute)}
.gd-top b{font-size:14px;font-weight:650;letter-spacing:-.01em;text-transform:none;color:var(--ink)}
.gd-top b+span::before{content:'·';margin-right:8px}
.gd-mark .mark{display:block;width:20px;height:20px}
.gd-example{margin-left:auto;padding:3px 9px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line-2);font:500 10px/1.3 var(--mono);letter-spacing:.1em}
.gd-card h3{margin:4px 0 0;font-size:21px;font-weight:650;letter-spacing:-.025em}
.gd-lead{margin:0 0 4px;color:var(--ink-3);font-size:14.5px;line-height:1.5}
.gd-rows{display:grid;gap:8px}
.gd-row{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:12px;align-items:center;padding:11px 12px;border-radius:15px;background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.gd-row.best{box-shadow:inset 0 0 0 1.5px var(--ink)}
.gd-ico{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--paper-lo)}
.gd-ico svg{width:19px;height:19px}.gd-ico em{font-style:normal;font-weight:650;font-size:13px}
.gd-txt{min-width:0}.gd-txt small{display:block;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--mute)}
.gd-txt b{display:block;font-size:15px;font-weight:600}.gd-txt span{display:block;color:var(--ink-3);font-size:13px;line-height:1.45}
.gd-pill{padding:4px 10px;border-radius:999px;background:var(--ink);color:#fff;font-size:12px;font-weight:600;white-space:nowrap}
.gd-go{display:flex;align-items:center;justify-content:space-between;margin-top:4px;padding:12px 16px;border-radius:999px;background:var(--ink);color:#fff;font-size:14.5px;font-weight:600}
.gd-go svg{width:16px;height:16px}
@media (prefers-reduced-motion:no-preference){
 .gd-chat .gd-ask,.gd-chat .gd-row,.gd-chat .gd-go{transition:opacity .6s var(--ease),transform .7s var(--ease)}
 .gd-chat:not(.in) .gd-ask,.gd-chat:not(.in) .gd-row,.gd-chat:not(.in) .gd-go{opacity:0;transform:translateY(12px)}
 .gd-chat .gd-ask{transition-delay:.35s}.gd-chat .gd-row{transition-delay:calc(.8s + var(--i)*.13s)}.gd-chat .gd-go{transition-delay:1.45s}
}
.gd-sec{padding:clamp(60px,8vw,110px) 0}
.gd-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px}
.gd-how{padding:12px 2px;color:var(--ink-3);font-size:15px;font-weight:500;text-decoration:none;transition:color .2s}.gd-how:hover{color:var(--ink)}
.gd-quick{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:clamp(26px,4vw,64px);align-items:center;margin:0 0 clamp(38px,5vw,58px);padding:clamp(26px,3.6vw,46px);border-radius:28px;background:var(--dark-bg);box-shadow:var(--dark-shadow);color:#fff}
.gd-quick .eyebrow{color:var(--fog-2)}
.gd-quick h3{margin:14px 0 18px;font-size:clamp(27px,2.9vw,38px);font-weight:600;letter-spacing:-.035em;line-height:1.08}
.gd-quick p{max-width:440px;margin:0 0 26px;color:var(--fog);font-size:15.5px;line-height:1.55}
.gd-form{display:grid;gap:12px;margin:0;padding:clamp(18px,2.2vw,24px);border-radius:22px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.gd-form b{margin-bottom:2px;font-size:15px;font-weight:600;letter-spacing:-.01em}
.gd-field{display:grid;gap:6px}.gd-field small{color:var(--fog-2);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase}
.gd-field i{display:block;overflow:hidden;padding:11px 13px;border-radius:12px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);font-style:normal;font-size:14.5px;white-space:nowrap;text-overflow:ellipsis}
.gd-field .gd-mono{font:500 13px/1.5 var(--mono)}
.gd-add{justify-self:end;margin-top:2px;padding:8px 20px;border-radius:999px;background:#fff;color:var(--ink);font-size:13.5px;font-weight:600}
.gd-hand{margin:0 0 16px}
@media (prefers-reduced-motion:no-preference){.gd-quick .gd-field i{clip-path:inset(0 100% 0 0)}.gd-quick.in .gd-field i{animation:gd-type .8s steps(16,end) .55s forwards}.gd-quick.in .gd-field+.gd-field i{animation-duration:1.1s;animation-delay:1.45s}.gd-quick.in .gd-add{animation:gd-press .55s var(--ease) 2.8s}}
@keyframes gd-type{to{clip-path:inset(0 0 0 0)}}@keyframes gd-press{45%{transform:scale(.93);box-shadow:0 0 0 6px rgba(255,255,255,.14)}}
.gd-last{padding-bottom:clamp(90px,11vw,150px)}
.gd-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0;padding:0;list-style:none}
.gd-step{display:grid;align-content:start;gap:8px;padding:24px}
.gd-n{display:grid;place-items:center;width:34px;height:34px;margin-bottom:8px;border-radius:50%;background:var(--ink);color:#fff;font:600 14px/1 var(--sans)}
.gd-step h3{margin:0;font-size:17px;font-weight:600;letter-spacing:-.02em}
.gd-step p{margin:0;color:var(--ink-3);font-size:14.5px;line-height:1.5}
.gd-url{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 10px;width:100%;margin-top:8px;padding:11px 13px;border:0;border-radius:12px;background:var(--ink);color:#fff;text-align:left;cursor:pointer;transition:transform .2s var(--ease)}
.gd-url:hover{transform:translateY(-1px)}.gd-url:active{transform:scale(.98)}
.gd-url code{min-width:0;font:500 12.5px/1.35 var(--mono);white-space:nowrap}
.gd-url span{display:inline-flex;flex:none;align-items:center;gap:5px;color:var(--fog);font-size:12.5px}.gd-url:hover span{color:#fff}
.gd-url .icon{width:14px;height:14px}
.gd-tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.gd-tool{display:grid;align-content:start;gap:18px;padding:30px}
.gd-q{justify-self:start;max-width:100%;margin:0;padding:14px 18px;border-radius:20px 20px 20px 6px;background:var(--ink);color:#fff;font-size:16px;line-height:1.45}
.gd-q small{display:block;margin-bottom:4px;color:var(--fog-2);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase}
.gd-tool ul,.gd-data ul{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.gd-tool li,.gd-data li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;align-items:start;color:var(--ink-2);font-size:15px;line-height:1.5}
.gd-tool .ck,.gd-data .ck{width:18px;height:18px;margin-top:2px}
.gd-tip{margin:24px auto 0;color:var(--mute);font-size:14.5px;text-align:center}
.gd-data-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(30px,5vw,70px);align-items:center}
.gd-data-grid .section-head{margin-bottom:0}
.gd-data{display:grid;gap:24px;padding:clamp(26px,3.4vw,40px);border-radius:28px;background:var(--dark-bg);box-shadow:var(--dark-shadow);color:#fff}
.gd-data li{color:var(--fog);font-size:16px}.gd-data .ck{color:#fff}
.gd-more{display:inline-flex;align-items:center;gap:8px;justify-self:start;padding-bottom:2px;border-bottom:1px solid var(--fog-2);color:#fff;font-size:14.5px;font-weight:600;text-decoration:none}
.gd-more svg{width:15px;height:15px}
.gd-faq{margin-top:0}.gd-faq a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
@media (max-width:1180px){.gd-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.gd-hero-grid,.gd-data-grid,.gd-quick{grid-template-columns:1fr}.gd-tools{grid-template-columns:1fr}}
@media (max-width:620px){.gd-ctas .btn,.gd-quick .btn{width:100%}.gd-how{width:100%;text-align:center}.gd-quick{padding:24px 22px;border-radius:24px}.gd-steps{grid-template-columns:1fr}.gd-row{grid-template-columns:40px minmax(0,1fr);row-gap:8px}.gd-row .gd-pill{grid-column:2;justify-self:start}.gd-tool{padding:22px}.gd-ask{max-width:94%}}

/* ——— Content: one piece up next, the rest by what you do with them (owner, 30 Oct 2026) ———
   One loud thing (the Up next card and its black button); everything below is quiet. Moving through the queue is one
   view transition: the cards glide, the finished piece lifts away, the next rises. */
.ct-next{display:grid;gap:18px;padding:26px 28px 26px;overflow:hidden}
.un-top{display:flex;align-items:center;justify-content:space-between;gap:16px;min-width:0}
.un-top .eyebrow{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-3)}
.un-top .eyebrow .icon{width:16px;height:16px;flex:none;color:var(--ink)}
.un-count{flex:none;color:var(--mute)}
.un-sheet{display:flex;gap:16px;padding:20px 22px;border-radius:20px;background:#fff;box-shadow:0 0 0 1px var(--line),0 1px 2px rgba(0,0,0,.04),0 18px 34px -26px rgba(0,0,0,.34)}
.un-copy{flex:1;min-width:0;display:grid;gap:4px;align-content:start}
.un-copy>strong{font-size:16.5px;font-weight:600;letter-spacing:-.02em;line-height:1.3}
.un-logo{width:56px;height:56px;flex:none;border-radius:16px;display:grid;place-items:center;background:var(--dark-bg);box-shadow:var(--dark-shadow);color:#fff;font:italic 400 27px/1 var(--serif)}
.un-tag{font-size:14.5px;color:var(--ink-3)}
.un-body{margin-top:6px;font-size:14.5px;line-height:1.6;color:var(--ink-2);white-space:pre-line;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.un-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.un-chips i{font-style:normal;font-size:12px;line-height:1;padding:6px 10px;border-radius:99px;color:var(--ink-3);box-shadow:inset 0 0 0 1px var(--line-2)}
.un-meta{font:500 11px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin-bottom:4px}
.un-author{display:flex;align-items:center;gap:10px;margin-bottom:8px}.un-author strong{display:block;font-size:13.5px;line-height:1.2}.un-author small{font-size:12px;color:var(--mute)}
.un-av{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:50%;background:var(--dark-bg);color:#fff;font:italic 400 16px/1 var(--serif)}
.un-title{font-size:17px;font-weight:600;letter-spacing:-.025em;line-height:1.3}
.un-serif{font:400 22px/1.2 var(--serif)!important;letter-spacing:-.02em!important}
.un-sheet.is-ad{align-items:center}.un-art{width:132px;aspect-ratio:1;flex:none;border-radius:16px;overflow:hidden;background:var(--night);box-shadow:0 0 0 1px var(--line)}.un-art img{width:100%;height:100%;object-fit:cover}.un-art .type-art{padding:12px}.un-art .type-art strong{font-size:19px}.un-art .type-art span{font-size:7px}
/* Why this piece (1 Nov 2026): one quiet line under it, its source a link; a short line on the waiting cards. */
.un-why{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;min-width:0;max-width:720px;margin-top:-4px;font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.why-k{flex:none;font:500 10.5px/1.5 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.un-why>span:last-child,.un-why>a{flex:1 1 280px;min-width:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.un-why>a{color:inherit;text-decoration:none}.un-why>a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.un-why>a .icon{width:13px;height:13px;vertical-align:-2px;opacity:.55}
.ct-why{display:block;min-width:0;font-size:12.5px;line-height:1.45;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.modal-why{margin:-6px 0 18px}
.un-how{max-width:640px;font-size:14.5px;color:var(--ink-3)}
.un-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.un-later{margin-left:8px;color:var(--ink-3)}
/* A reply (1 Nov 2026): the question as it was asked, and the answer Distrove wrote under it, editable in place. */
.un-sheet.is-reply .un-copy{gap:6px}
.un-thread{color:var(--ink);text-decoration:none;text-wrap:balance}.un-thread:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.un-reply{margin-top:12px;padding:14px 16px 10px;border-radius:16px;background:var(--paper-hi);box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .35s var(--ease)}
.un-reply:focus-within{box-shadow:inset 0 0 0 1.5px var(--ink)}
.un-reply .un-author{margin-bottom:4px}
.un-reply-text,.un-reply-text:hover,.un-reply-text:focus{display:block;field-sizing:content;min-height:132px;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;resize:vertical;font-size:14.5px;line-height:1.6;color:var(--ink-2)}
.un-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--line)}.un-bar i{display:block;height:100%;width:var(--to);background:var(--ink);animation:un-grow 1s var(--ease) .15s both}
@keyframes un-grow{from{width:var(--from)}}
.ct-next.is-clear{justify-items:start;gap:12px;padding:34px 32px}
.ct-next.is-clear h3{font-size:clamp(1.5rem,2.4vw,2rem);letter-spacing:-.045em;line-height:1.05}
.ct-next.is-clear p{max-width:520px;color:var(--ink-3)}
.un-clear{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--dark-bg);box-shadow:var(--dark-shadow);color:#fff}
.un-clear .icon{width:22px;height:22px}
.ct-next.is-later .btn{margin-top:4px}
.un-clear .ck{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.un-clear .ck path{stroke-dasharray:1;stroke-dashoffset:1;animation:un-check .8s var(--ease) .3s forwards}
@keyframes un-check{to{stroke-dashoffset:0}}

.ct-shelves{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:38px 22px;margin-top:46px}
.ct-shelf{grid-column:1/-1;min-width:0}.ct-shelf.is-half{grid-column:auto}
.ct-label-row{display:flex;align-items:baseline;gap:14px;margin-bottom:12px}
.ct-label{display:flex;align-items:baseline;gap:7px;font-size:15px;font-weight:500;letter-spacing:-.01em;color:var(--ink-3)}
.ct-label em{color:var(--ink);font-size:1.14em}
.ct-label .mono{margin-left:3px;color:var(--faint)}
.ct-more{margin-left:auto;font-size:13.5px}
.ct-grid{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:12px}
.ct-card{display:grid;gap:7px;align-content:start;min-width:0;min-height:92px;padding:16px 18px;border-radius:20px;text-align:left;background:var(--card-bg);box-shadow:var(--card-shadow);transition:box-shadow .3s,transform .55s var(--spring)}
.ct-card:hover{box-shadow:var(--card-shadow-hover);transform:translateY(-2px)}
.ct-dest{display:flex;align-items:center;gap:8px;min-width:0;font-size:12.5px;color:var(--ink-3)}
.ct-dest>span,.ct-dest strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ct-dest strong{font-size:14px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.ct-dest .icon{width:16px;height:16px;color:var(--ink)}
.ct-line{font-size:13.5px;line-height:1.45;color:var(--mute);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ct-title{font-size:15px;font-weight:500;letter-spacing:-.015em;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ct-flag{flex:none;margin-left:auto;padding:3px 9px;border-radius:99px;font-size:11px;font-weight:500;background:var(--ink);color:#fff}
.ct-rows{padding:6px 0;border-radius:22px;overflow:hidden}
.ct-row{display:flex;align-items:center;gap:14px;width:100%;padding:12px 20px;text-align:left;box-shadow:inset 0 1px 0 var(--line);transition:background .2s}.ct-row:first-child{box-shadow:none}.ct-row:hover{background:var(--paper-hi)}
.ct-mark{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:11px;background:#fff;box-shadow:0 0 0 1px var(--line)}.ct-mark .icon{width:16px;height:16px}
.ct-row-text{flex:1;min-width:0;display:grid;gap:1px}
.ct-row-text strong{font-size:14.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ct-row-text span{font-size:13px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ct-row>small{flex:none;font-size:12.5px;color:var(--faint)}
.ct-ad-tile{display:grid;gap:8px;min-width:0;text-align:left}
.ct-ad-art{display:block;aspect-ratio:1;border-radius:18px;overflow:hidden;background:var(--night);box-shadow:var(--card-shadow);transition:transform .55s var(--spring),box-shadow .3s}
.ct-ad-tile:hover .ct-ad-art{transform:translateY(-2px);box-shadow:var(--card-shadow-hover)}
.ct-ad-art img{width:100%;height:100%;object-fit:cover}.ct-ad-art .type-art{padding:12px}.ct-ad-art .type-art strong{font-size:18px}.ct-ad-art .type-art span{font-size:7px}
.ct-ad-cap{font-size:13px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shelf-ad .ct-grid:has(.ct-ad-wide){grid-template-columns:minmax(0,1fr)}
.ct-ad-wide{display:flex;align-items:center;gap:20px;padding:14px;min-height:0}.ct-ad-wide .ct-ad-art{width:148px;flex:none;border-radius:14px;box-shadow:0 0 0 1px var(--line)}
.ct-ad-words{display:grid;gap:6px;min-width:0;max-width:560px}.ct-ad-words .un-chips{margin-top:4px}

.ct-world{margin-top:46px;padding:0;border-radius:22px}
.ct-world>summary{display:flex;align-items:center;gap:16px;padding:17px 22px;cursor:pointer;list-style:none;border-radius:22px;transition:background .2s}
.ct-world>summary::-webkit-details-marker{display:none}
.ct-world>summary:hover{background:var(--paper-hi)}
.ct-world-text{flex:1;min-width:0;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.ct-world-text strong{font-size:15px;font-weight:500;letter-spacing:-.01em}.ct-world-text small{font-size:13.5px;color:var(--mute)}
.ct-world-see{display:inline-flex;align-items:center;gap:6px;flex:none;font-size:13.5px;font-weight:500}
.ct-world-see .icon{width:16px;height:16px;transition:transform .5s var(--spring)}
.ct-world[open] .ct-world-see .icon{transform:rotate(180deg)}
.ct-world-list{list-style:none;margin:0;padding:0 0 6px;box-shadow:inset 0 1px 0 var(--line)}
.ct-world[open] .ct-world-list{animation:ct-open .55s var(--ease) both}
@keyframes ct-open{from{opacity:0;transform:translateY(-6px)}}
.ct-world-row{display:flex;align-items:center;gap:14px;width:100%;padding:11px 22px;text-align:left;transition:background .2s}.ct-world-row:hover{background:var(--paper-hi)}
.ct-world-name{flex:1;min-width:0;display:grid;gap:1px}
.ct-world-name strong{font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ct-world-name small{font-size:12.5px;color:var(--mute)}
.ct-world-out{flex:none;font-size:13px;font-weight:500}

html[data-vt="content"] :is(.ws-main,.ws-top,.ws-dock){view-transition-name:none}
html[data-vt="content"]::view-transition-old(root),html[data-vt="content"]::view-transition-new(root){animation:none}
html[data-vt="content"]::view-transition-group(*){animation-duration:.72s;animation-timing-function:var(--ease)}
html[data-vt="content"]::view-transition-old(ct-leaving){animation:.5s var(--ease-in) both ct-leave}
@keyframes ct-leave{to{opacity:0;transform:translateY(-22px) scale(.96);filter:blur(3px)}}

@media (max-width:900px){.shelf-listing .ct-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.shelf-ad .ct-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){
 .ct-next{gap:16px;padding:20px 18px 22px}
 .un-sheet{padding:16px;gap:12px;border-radius:18px}
 .un-reply{padding:12px 14px 8px}
 .un-logo{width:46px;height:46px;border-radius:13px;font-size:22px}
 .un-art{width:96px}
 .un-actions .btn-ink{width:100%}
 .un-later{margin-left:4px}
 .ct-shelves{grid-template-columns:minmax(0,1fr);gap:32px;margin-top:38px}.ct-shelf.is-half{grid-column:1/-1}
 .shelf-listing .ct-grid,.shelf-post .ct-grid{grid-template-columns:minmax(0,1fr)}
 .shelf-ad .ct-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .ct-card{min-height:0}
 .ct-row,.ct-world-row{padding:12px 16px}.ct-world>summary{padding:16px 18px}
 .ct-row>small{display:none}
 .un-body{-webkit-line-clamp:3}.ct-next .un-chips{display:none}
 .un-top{align-items:flex-start}.un-top .eyebrow{white-space:normal;line-height:1.5}
 .ct-ad-wide{gap:14px;padding:12px}.ct-ad-wide .ct-ad-art{width:96px}
 .ct-world-out{font-size:12.5px}
}
@media (prefers-reduced-motion:reduce){.un-bar i,.un-clear .ck path,.ct-world[open] .ct-world-list{animation:none}.un-clear .ck path{stroke-dashoffset:0}.ct-card,.ct-ad-art,.ct-world-see .icon{transition:none}.ct-card:hover,.ct-ad-tile:hover .ct-ad-art{transform:none}}
/* Your month (docs/SPEC-month-recap.md): the month day by day, then the story left to right, the outcome in ink. */
.month-card{display:grid;gap:18px;padding:26px 28px;margin-bottom:22px}
.mc-head{display:flex;justify-content:space-between;align-items:flex-end;gap:14px 24px;flex-wrap:wrap}
.mc-head .eyebrow .icon{width:13px;height:13px}
.mc-head h2{margin:8px 0 0;font-size:clamp(24px,2.6vw,30px);letter-spacing:-.035em}
.mc-dayof{display:grid;gap:7px;justify-items:end;font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.mc-dayof i{position:relative;display:block;width:132px;height:4px;border-radius:4px;background:var(--line-2);overflow:hidden}
.mc-dayof i::after{content:'';position:absolute;inset:0;border-radius:inherit;background:var(--ink);transform-origin:0 50%;transform:scaleX(var(--p))}
/* The month, day by day. */
.mc-pulse{display:grid;grid-template-columns:minmax(150px,210px) minmax(0,1fr);gap:26px;align-items:end;padding:20px 22px 16px;border-radius:22px;background:var(--paper-hi);box-shadow:inset 0 0 0 1px var(--line)}
.mc-stat{display:grid;gap:3px;margin:0 0 22px}
.mc-stat strong{font-size:58px;line-height:.95;font-weight:600;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.mc-stat>span{font-size:15px;font-weight:500;color:var(--ink);line-height:1.3}
.mc-stat>small{color:var(--mute);font-size:12.5px;line-height:1.45}
.mc-strip{margin:0;display:grid;gap:12px;min-width:0}
.mc-strip ol{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:clamp(2px,.45vw,5px);align-items:end;height:92px;margin:0;padding:12px 0 0;list-style:none}
.mc-strip li{position:relative;height:100%;display:flex;align-items:flex-end}
.mc-strip li i{display:flex;flex-direction:column;width:100%;height:var(--h);border-radius:5px;overflow:hidden;background:var(--paper-lo);transform-origin:50% 100%}
.mc-strip li.on i{background:linear-gradient(180deg,#d3d3cf,#c4c4c0)}
.mc-strip li i b{display:block;flex:none;height:calc(var(--c) * 100%);min-height:4px;background:linear-gradient(180deg,#3a3a3f,var(--ink))}
.mc-strip li.hit::before{content:'';position:absolute;left:50%;bottom:calc(var(--h) + 6px);width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 3px var(--paper-hi)}
.mc-strip li.later i{background:transparent;box-shadow:inset 0 0 0 1px var(--line-2)}
.mc-strip li.today::after{content:'';position:absolute;left:50%;bottom:-10px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--ink)}
.mc-strip figcaption{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:4px;font-size:11.5px;color:var(--mute)}
.mc-legend{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center}
.mc-legend i{display:inline-block;width:9px;height:9px;border-radius:3px;background:var(--ink)}
.mc-legend i.run{margin-left:10px;background:#c9c9c5}
.mc-legend i.hit{margin-left:10px;border-radius:50%;background:var(--ink)}
/* The story: what Distrove did → what went out → what came back. */
.mc-flow{display:grid;grid-template-columns:minmax(0,1fr) 30px minmax(0,1fr) 30px minmax(0,1fr);align-items:stretch}
.mc-stage{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;gap:12px;padding:18px 18px 16px;border-radius:22px;background:var(--paper-hi);box-shadow:inset 0 0 0 1px var(--line)}
.mc-k{display:flex;align-items:center;gap:8px;font:500 10.5px/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.mc-k b{display:grid;place-items:center;width:22px;height:22px;border-radius:7px;font-weight:600;letter-spacing:0;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2)}
.mc-lead{display:grid;gap:4px;margin:2px 0 0}
.mc-lead strong{font-size:44px;line-height:1;font-weight:600;letter-spacing:-.045em;font-variant-numeric:tabular-nums}
.mc-lead>span{font-size:14.5px;line-height:1.35;color:var(--ink-2)}
.mc-stage ul{display:grid;gap:0;margin:0;padding:0;list-style:none}
.mc-stage li{display:flex;gap:10px;align-items:baseline;padding:7px 0;border-top:1px solid var(--line);font-size:13.5px;color:var(--ink-2)}
.mc-stage li b{min-width:3ch;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.mc-none{margin:6px 0 0;font-size:15px;color:var(--mute)}
.mc-back{color:#fff;background:radial-gradient(140% 120% at 0% 0%,#34343a,#0c0c0d 64%);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 24px 44px -30px rgba(0,0,0,.7)}
.mc-back .mc-k{color:rgba(255,255,255,.6)}
.mc-back .mc-k b{color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.mc-back .mc-lead>span,.mc-back li{color:rgba(255,255,255,.78)}
.mc-back li{border-top-color:rgba(255,255,255,.12)}
.mc-back li b{color:#fff}
.mc-back .mc-none{color:rgba(255,255,255,.55)}
.mc-sheen{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(110deg,transparent 32%,rgba(255,255,255,.14) 48%,transparent 62%) no-repeat;background-size:260% 100%;background-position:130% 0}
.mc-link{position:relative;align-self:center;height:1.5px;margin:0 3px}
.mc-link i{position:absolute;inset:0;overflow:hidden;border-radius:2px;background:var(--line-3)}
.mc-link i::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,var(--ink),transparent);transform:translateX(-100%)}
.mc-link::after{content:'';position:absolute;right:0;top:50%;width:6px;height:6px;border-top:1.5px solid var(--ink-3);border-right:1.5px solid var(--ink-3);transform:translateY(-50%) rotate(45deg)}
.mc-hours{display:flex;gap:12px;align-items:center;margin:0;padding:14px 18px;border-radius:18px;background:var(--paper)}
.mc-hours .icon{width:18px;height:18px;flex-shrink:0}
.mc-hours span{display:grid;gap:1px}
.mc-hours strong{font-size:16px;font-weight:600;letter-spacing:-.01em}
.mc-hours small{color:var(--mute);font-size:12.5px}
.mc-waiting{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:14px 16px;border-radius:18px;box-shadow:inset 0 0 0 1.5px var(--ink)}
.mc-waiting>span{display:grid;gap:2px;min-width:0;flex:1 1 240px}
.mc-waiting strong{font-weight:500}
.mc-waiting small{color:var(--ink-3);font-size:13px}
@media (prefers-reduced-motion:no-preference){
 .month-card.in .mc-strip li i{animation:mc-grow .9s var(--spring) calc(.2s + var(--i)*24ms) both}
 .month-card.in .mc-strip li.hit::before{animation:mc-pop .5s var(--spring-pop) calc(.75s + var(--i)*24ms) both}
 .month-card.in .mc-dayof i::after{animation:mc-fill 1.2s var(--ease) .25s both}
 .month-card.in .mc-link i::after{animation:mc-travel 1.1s var(--ease-io) both}
 .month-card.in .mc-link:nth-of-type(1) i::after{animation-delay:1s}
 .month-card.in .mc-link:nth-of-type(2) i::after{animation-delay:1.45s}
 .month-card.in .mc-sheen{animation:offer-shine 1.4s var(--ease-io) 1.9s both}
}
@keyframes mc-grow{from{transform:scaleY(0)}}
@keyframes mc-pop{from{transform:scale(0)}}
@keyframes mc-fill{from{transform:scaleX(0)}}
@keyframes mc-travel{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
@media (max-width:760px){
 .month-card{padding:20px 18px;gap:16px}
 .mc-dayof{justify-items:start}
 .mc-pulse{grid-template-columns:1fr;gap:6px;padding:18px 16px 14px}
 .mc-stat{margin:0}.mc-stat strong{font-size:50px}
 .mc-strip ol{height:76px}
 .mc-legend{display:none}
 .mc-flow{grid-template-columns:1fr}
 .mc-link{justify-self:center;width:1.5px;height:22px;margin:3px 0}
 .mc-link::after{right:auto;left:50%;top:auto;bottom:0;transform:translateX(-50%) rotate(135deg)}
 .mc-link i::after{display:none}
}
/* The ready work closes its tile with the button that opens it; a ready line sits at the foot of What went out. */
.mc-go{margin-top:auto;align-self:flex-start}
.mc-next{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:auto 0 0;padding-top:10px;border-top:1px solid var(--line);font-size:13.5px;color:var(--ink-2)}
.mc-next b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.results-pair.solo{grid-template-columns:1fr}
.mc-next .text-btn{flex:none;white-space:nowrap}
/* As many tiles as have something to say. */
.mc-flow.n2{grid-template-columns:minmax(0,1fr) 30px minmax(0,1fr)}
.mc-flow.n1{grid-template-columns:minmax(0,1fr)}
/* Watching for replies: a softly pulsing dot, the facts that say how, and one specific question. */
.mc-live{position:relative;width:7px;height:7px;margin-left:2px;border-radius:50%;background:var(--ink);color:var(--ink)}
.mc-facts{display:grid;gap:8px;margin:auto 0 0;padding:12px 0 0;list-style:none;border-top:1px solid var(--line)}
.mc-facts li{display:flex;gap:9px;align-items:flex-start;padding:0;border:0;font-size:13px;line-height:1.45;color:var(--ink-3)}
.mc-facts .icon{width:15px;height:15px;flex-shrink:0;margin-top:1px;color:var(--ink)}
.mc-ask{display:grid;gap:8px;margin-top:auto;padding:14px;border-radius:16px;background:var(--paper)}
.mc-facts+.mc-ask{margin-top:4px}
.mc-ask-k{font:500 10.5px/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.mc-ask p{margin:0;font-size:14px;line-height:1.4;color:var(--ink)}
.mc-ask .checkin-taps{gap:6px}
.mc-ask .checkin-taps .btn{min-width:0;min-height:34px;padding:0 14px;font-size:13.5px}
.mc-back .mc-ask{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.mc-back .mc-ask-k{color:rgba(255,255,255,.55)}
.mc-back .mc-ask p{color:#fff}
@media (prefers-reduced-motion:no-preference){.mc-live{animation:live 2.4s var(--ease) infinite}}
/* Your channels: a step not reached yet is the road ahead, an outline, never a zero. */
.funnel-steps li.ahead .fs-bar{background:transparent;box-shadow:inset 0 0 0 1px var(--line-2)}
.funnel-steps li.ahead small{color:var(--faint)}
.records-log{margin:0}
.records-log .text-btn .icon{width:14px;height:14px}

/* The Content page, third pass (owner, 6 Nov 2026: “you blended some things that do not need to be blended… copy their
   layout, add some images, for example… then a clever, also minimalistic tab… to overview his other kind of content”).
   Two tabs, underlined, as on ElevenLabs. Explore is their layout as it is: two cards whose pictures run off the edge,
   one search, small chips, a wall of example pictures 8 px apart with nothing around them, a light composer, and full
   size a slim panel beside the picture with every example along the bottom. Your content is a quiet list beside the
   piece itself. */
@keyframes cg-rise{from{opacity:0;transform:translateY(8px)}}
@keyframes cg-in{from{opacity:0;transform:translateY(16px)}}
@keyframes cg-shim{to{background-position:-200% 0}}
@keyframes cg-turn{to{transform:rotate(360deg)}}
@keyframes cg-develop{from{opacity:.3;filter:blur(10px)}}
@keyframes cg-pulse{30%{transform:translateY(-6px)}}

/* The tabs. */
.cg-tabs{display:flex;gap:24px;margin:0 0 18px;border-bottom:1px solid var(--line-2)}
.cg-tabs button{position:relative;display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 2px;font-size:14.5px;font-weight:500;color:var(--mute);transition:color .25s}
.cg-tabs button:hover,.cg-tabs button.on{color:var(--ink)}
.cg-tabs button::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;border-radius:2px;background:var(--ink);transform:scaleX(0);transition:transform .5s var(--ease)}
.cg-tabs button.on::after{transform:scaleX(1)}
.cg-tab-n{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;font:500 11px/1 var(--mono);color:#fff;background:var(--ink)}

/* The two cards: words on the left, pictures running off the right edge. */
.cg-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:10px}
.cg-card{position:relative;display:flex;height:150px;border-radius:18px;background:var(--card-bg);box-shadow:var(--card-shadow);overflow:hidden;isolation:isolate}
.cg-card-copy{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;flex:0 0 44%;min-width:0;padding:20px 6px 18px 22px}
.cg-card h2{margin:0 0 5px;font-size:16px;font-weight:600;letter-spacing:-.02em;line-height:1.2}
.cg-card h2 em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.005em}
.cg-card p{margin:0;font-size:13px;line-height:1.45;color:var(--mute);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cg-card .btn{--h:32px;margin-top:auto;padding:0 12px;font-size:13px;gap:6px}
.cg-card .btn .icon{width:14px;height:14px}
.cg-strip{flex:1;min-width:0;display:flex;align-items:center;gap:8px;padding-left:2px;overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 76%,transparent);mask-image:linear-gradient(90deg,#000 76%,transparent)}
.cg-strip::-webkit-scrollbar{display:none}
.cg-sq{position:relative;flex:0 0 112px;height:112px;border-radius:13px;display:grid;place-items:center;padding-bottom:16px;color:var(--ink);background:linear-gradient(180deg,#fff,#f5f5f2);box-shadow:inset 0 1px 0 #fff,0 0 0 1px var(--line),0 8px 16px -14px rgba(0,0,0,.4);animation:cg-rise .7s var(--ease) both;animation-delay:calc(.12s + var(--i) * .05s)}
.cg-sq:last-child{margin-right:44px}
.cg-sq-mark :is(svg,.icon){width:28px;height:28px}
.cg-sq-mark b{font-size:30px;font-weight:600;letter-spacing:-.06em;line-height:1}
.cg-sq-name{position:absolute;left:11px;right:10px;bottom:9px;font-size:12px;font-weight:500;line-height:1.2;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cg-collage{position:relative;flex:1;min-width:0}
.cg-co{position:absolute;border-radius:12px;overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.06),0 14px 28px -18px rgba(0,0,0,.45);transition:transform 1.1s var(--ease);animation:cg-rise .8s var(--ease) both}
.cg-co img{display:block;width:100%;height:100%;object-fit:cover}
.co-a{left:2px;top:20px;width:92px;height:68px;display:grid;place-items:center;color:#f4f3ef;background:#0f0f10;animation-delay:.1s}
.co-a b{font-size:15px;font-weight:600;letter-spacing:-.035em}
.co-b{left:102px;top:30px;width:128px;height:100px;animation-delay:.16s}
.co-c{left:238px;top:-16px;width:124px;height:166px;animation-delay:.22s}
.co-d{left:2px;top:96px;width:92px;height:84px;animation-delay:.28s}
.cg-co.is-words{display:flex;align-items:flex-end;padding:11px 12px;color:var(--ink-2);background:#fbfaf7;font:italic 400 13.5px/1.3 var(--serif)}
.cg-card:hover .co-a{transform:translate(-2px,-3px)}
.cg-card:hover .co-b{transform:translateY(-4px)}
.cg-card:hover .co-c{transform:translate(4px,3px)}
.cg-card:hover .co-d{transform:translate(-3px,3px)}

/* One search, and small chips under it. */
.cg-tools,.cg-ytools{display:grid;gap:10px;margin:0 0 12px}
.cg-search{display:flex;align-items:center;gap:10px;height:42px;padding:0 14px;border-radius:12px;color:var(--mute);background:rgba(255,255,255,.62);box-shadow:inset 0 0 0 1px var(--line-2);transition:box-shadow .25s,background .25s}
.cg-search:focus-within{background:#fff;box-shadow:inset 0 0 0 1px var(--line-3),0 0 0 4px rgba(12,12,13,.05)}
.cg-search .icon{width:16px;height:16px;flex:none}
.cg-search input,.cg-search input:focus{flex:1;min-width:0;height:100%;min-height:0;padding:0;border:0;background:none;box-shadow:none;font:inherit;font-size:14px;color:var(--ink);outline:0}
.cg-search input::placeholder{color:var(--faint)}
.cg-kinds{display:flex;gap:6px;padding:1px;overflow-x:auto;scrollbar-width:none}
.cg-kinds::-webkit-scrollbar{display:none}
.cg-kind{flex:none;height:28px;padding:0 11px;border-radius:9px;font-size:13px;font-weight:500;color:var(--ink-3);background:rgba(255,255,255,.55);box-shadow:inset 0 0 0 1px var(--line-2);transition:background .2s,color .2s,box-shadow .2s}
.cg-kind:hover{color:var(--ink);background:#fff}
.cg-kind.on{color:#fff;background:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}

/* Explore's wall: pictures 8 px apart, 1 px rows so each takes exactly its height, columns packed in reading order. */
.cg-wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(236px,1fr));grid-auto-rows:1px;column-gap:8px;align-items:start;padding-bottom:300px}
.cg-tile{position:relative;border-radius:10px;overflow:hidden;background:rgba(12,12,13,.05);isolation:isolate;animation:cg-in .9s var(--ease) both;animation-delay:calc(var(--i,0) * 40ms)}
.cg-tile[hidden]{display:none}
.cg-hit{position:absolute;inset:0;z-index:3;border-radius:inherit;cursor:zoom-in}
.cg-hit:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.cg-ph{position:relative;margin:0;width:100%;overflow:hidden;background:#cfcec9}
.cg-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease),filter .6s}
.cg-tile:hover .cg-ph img{transform:scale(1.035)}
.cg-acts{position:absolute;right:8px;top:8px;z-index:4;display:flex;gap:6px;opacity:0;transform:translateY(-3px);transition:opacity .35s,transform .6s var(--ease)}
.cg-tile:hover .cg-acts,.cg-tile:focus-within .cg-acts{opacity:1;transform:none}
.cg-act{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;color:var(--ink);background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(14px) saturate(1.5);backdrop-filter:blur(14px) saturate(1.5);box-shadow:0 0 0 1px rgba(0,0,0,.05),0 6px 16px -8px rgba(0,0,0,.4);transition:transform .45s var(--spring),background .2s}
.cg-act .icon{width:15px;height:15px}
.cg-act:hover{transform:scale(1.08)}
@media (hover:none){.cg-acts{display:none}}

/* Your content: one line per piece, grouped by what you do with it, beside the piece itself. */
.cg-yrow{display:flex;align-items:center;gap:10px;min-width:0}
.cg-yrow .seg{flex:none}
.cg-yrow .seg button{height:32px;padding:0 13px;font-size:13px}
.cg-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,460px);gap:18px;align-items:start;padding-bottom:280px}
.cg-list{display:grid;gap:22px;min-width:0}
.cg-group{display:grid;gap:2px;animation:cg-rise .6s var(--ease) both}
.cg-group[hidden]{display:none}
/* Nothing matches the search or the kind: one quiet line and the way back, in place of the list. */
.cg-none{display:grid;justify-items:start;gap:8px;padding:26px 22px;border-radius:20px;background:var(--paper-hi);box-shadow:inset 0 0 0 1px var(--line)}.cg-none strong{font-weight:500;font-size:15px}.cg-none .text-btn{font-size:13.5px}
.cg-gh{display:flex;align-items:baseline;gap:7px;margin:0 0 6px 12px;font-size:13px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.cg-gh em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--ink-3)}
.cg-gh .mono{font-size:11px;font-weight:500;color:var(--faint)}
.cg-row{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:12px;width:100%;padding:9px 12px;border-radius:14px;text-align:left;color:var(--ink);transition:background .25s,box-shadow .25s}
.cg-row[hidden]{display:none}
.cg-row:hover{background:rgba(255,255,255,.6)}
.cg-row.on{background:var(--card-bg);box-shadow:var(--card-shadow)}
.cg-row-mark{display:grid;place-items:center;width:40px;height:40px;border-radius:11px;overflow:hidden;color:var(--ink);background:linear-gradient(180deg,#fff,#f3f3f0);box-shadow:inset 0 1px 0 #fff,0 0 0 1px var(--line)}
.cg-row-mark :is(svg,.icon){width:18px;height:18px}
.cg-row-mark img{width:100%;height:100%;object-fit:cover}
.cg-row-body{display:grid;gap:2px;min-width:0}
.cg-row-t{font-size:14.5px;font-weight:500;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cg-row-s{font-size:12.5px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cg-row-st{display:inline-flex;align-items:center;gap:7px;font:500 11px/1 var(--mono);letter-spacing:.02em;color:var(--mute);white-space:nowrap}
.cg-row.is-next .cg-row-st{color:var(--ink)}
.cg-dot{width:6px;height:6px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 3px rgba(12,12,13,.1)}
.cg-row.is-fresh{animation:cg-develop 1.2s var(--ease) both}
.cg-row.is-developing{background:var(--card-bg);box-shadow:var(--card-shadow);animation:cg-rise .5s var(--ease) both}
.cg-spin{width:16px;height:16px;border-radius:50%;border:2px solid rgba(12,12,13,.14);border-top-color:var(--ink);animation:cg-turn .8s linear infinite}
/* The piece beside the list scrolls on its own, so its buttons stay above the composer. */
.cg-preview{position:sticky;top:76px;min-width:0;max-height:calc(100vh - 96px - var(--cg-dock,60px) - 24px);overflow:auto;overscroll-behavior:contain;border-radius:24px;scrollbar-width:thin}
/* On Your content the composer rests as one line and the arrow; touched, the ideas and the types come up. */
.cg-dock.is-quiet .cg-composer{transition:border-radius .45s var(--ease)}
.cg-dock.is-quiet .cg-composer:not(.is-open){display:flex;align-items:center;gap:8px;width:min(520px,100%);padding:6px 6px 6px 16px;border-radius:999px}
.cg-dock.is-quiet .cg-composer:not(.is-open) :is(.cg-c-top,.cg-c-ideas,.cg-c-left,.cg-c-refs){display:none}
.cg-dock.is-quiet .cg-composer:not(.is-open) textarea{flex:1;min-width:0;margin:0;padding:4px 0}
.cg-dock.is-quiet .cg-composer:not(.is-open) .cg-send{margin-left:auto}
.cg-dock.is-quiet .cg-composer.is-open :is(.cg-c-top,.cg-c-ideas){animation:cg-rise .45s var(--ease) both}
.cg-preview .ct-next{gap:16px}
.cg-dev-card{display:grid;gap:12px;padding:26px 28px;border-radius:24px;background:var(--card-bg);box-shadow:var(--card-shadow)}
.cg-skel{display:block;height:12px;border-radius:6px;background:linear-gradient(90deg,rgba(12,12,13,.06),rgba(12,12,13,.13),rgba(12,12,13,.06)) 0 0/200% 100%;animation:cg-shim 1.4s linear infinite}
.cg-skel.w40{width:40%}.cg-skel.w70{width:70%}.cg-skel.tall{height:140px;border-radius:16px}
dialog#modal.cg-piece-modal .ct-next{margin:0;padding:0;background:none;box-shadow:none}
/* A piece's picture in its card: whole, as large as the card, a quiet sign that it opens full size. */
.un-sheet.has-pic{flex-direction:column;align-items:stretch;gap:14px}
.un-pic{position:relative;display:block;width:100%;padding:0;border-radius:14px;overflow:hidden;cursor:zoom-in;background:var(--paper-lo);box-shadow:0 0 0 1px var(--line)}
.un-sheet.is-post .un-pic{margin-top:12px}
.un-pic img{display:block;width:100%;height:auto;max-height:420px;object-fit:cover;transition:transform 1s var(--ease)}
.un-pic:hover img{transform:scale(1.025)}
.un-pic-zoom{position:absolute;right:10px;top:10px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;color:var(--ink);background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 0 0 1px rgba(0,0,0,.05),0 6px 16px -8px rgba(0,0,0,.4);opacity:.92;transition:transform .45s var(--spring),opacity .2s}
.un-pic-zoom .icon{width:14px;height:14px}
.un-pic:hover .un-pic-zoom{transform:scale(1.08);opacity:1}
.un-pic:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
/* A single picture full size has no strip below it. */
.cg-view.is-single{--cg-film:22px}
/* On Your content the composer keeps to the list's column, so it never covers the piece beside it. */
@media (min-width:1000px){.cg-dock.is-quiet{justify-content:flex-start}.cg-dock.is-quiet .cg-composer{width:min(680px,calc(100% - 478px))}.cg-dock.is-quiet .cg-composer:not(.is-open){width:min(520px,calc(100% - 478px))}}
/* Beside the list and opened on a phone, the whole piece: no clamp, and the count clears the close button. */
:is(.cg-preview,dialog#modal.cg-piece-modal) .un-body{display:block;-webkit-line-clamp:unset;overflow:visible}
dialog#modal.cg-piece-modal .un-top{padding-right:40px}

/* The composer, as on the reference: light, at the foot of the screen while the page runs under it. */
html:has(.cg-dock) #toast{bottom:calc(var(--cg-dock,150px) + 36px + env(safe-area-inset-bottom))}
@keyframes cg-dock-in{from{opacity:0;transform:translateY(24px) scale(.98)}}
.cg-dock{position:sticky;bottom:calc(18px + env(safe-area-inset-bottom));z-index:30;display:flex;justify-content:center;margin-top:-240px;pointer-events:none}
.cg-composer{position:relative;width:min(680px,100%);padding:10px;border-radius:20px;background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(14px) saturate(1.5);backdrop-filter:blur(14px) saturate(1.5);box-shadow:0 0 0 1px rgba(0,0,0,.06),0 1px 1px -.5px rgba(0,0,0,.06),0 3px 3px -1.5px rgba(0,0,0,.06),0 6px 6px -3px rgba(0,0,0,.06),0 12px 12px -6px rgba(0,0,0,.05),0 24px 24px -12px rgba(0,0,0,.05),0 48px 48px -24px rgba(0,0,0,.04),0 10px 20px 1px rgba(0,0,0,.04);pointer-events:auto;animation:cg-dock-in .9s var(--ease) .2s both}
.cg-composer.cg-pulse{animation:cg-pulse .7s var(--spring)}
.cg-c-ideas{display:flex;gap:6px;margin-right:-10px;padding:0 10px 8px 0;overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 86%,transparent);mask-image:linear-gradient(90deg,#000 86%,transparent)}
.cg-c-ideas::-webkit-scrollbar{display:none}
.cg-idea{flex:none;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px 0 9px;border-radius:12px;font-size:13px;font-weight:500;color:var(--ink-3);background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.04);transition:color .2s,background .2s,box-shadow .2s,transform .4s var(--spring)}
.cg-idea :is(svg,.icon){width:15px;height:15px;flex:none}
.cg-idea:hover{color:var(--ink);box-shadow:0 0 0 1px rgba(0,0,0,.14),0 2px 6px -2px rgba(0,0,0,.12)}
.cg-idea:active{transform:scale(.97)}
.cg-idea.on{color:#fff;background:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.cg-c-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
/* Small grey words that say what a row is: Ideas from your research, Make. */
.cg-c-k{flex:none;align-self:center;margin-right:2px;font-size:12px;font-weight:500;color:var(--mute);white-space:nowrap}
.cg-c-what{display:flex;align-items:center;gap:6px;min-width:0}
.cg-c-what .cg-c-k{margin:0 2px 0 4px}
.cg-idea b{font-weight:600;color:var(--ink)}
.cg-idea.on b{color:#fff}
/* An example's style rides along as a reference, as on the reference page: a thumbnail, its name, and a way out. */
.cg-c-refs{display:flex;margin-top:10px}
.cg-xref{display:inline-flex;align-items:center;gap:10px;max-width:100%;padding:5px 6px 5px 5px;border-radius:12px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.08),0 2px 6px -3px rgba(0,0,0,.15);animation:cg-rise .45s var(--ease) both}
.cg-xref img{width:38px;height:38px;flex:none;border-radius:8px;object-fit:cover}
.cg-xref>span{display:grid;gap:1px;min-width:0}
.cg-xref small{font-size:11px;font-weight:500;color:var(--mute)}
.cg-xref b{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cg-xref button{display:grid;place-items:center;width:26px;height:26px;flex:none;border-radius:50%;color:var(--mute);transition:background .2s,color .2s}
.cg-xref button:hover{color:var(--ink);background:rgba(12,12,13,.06)}
.cg-xref button .icon{width:13px;height:13px}
.cg-c-ideas+.cg-c-top{padding-top:8px;border-top:1px solid var(--line)}
.cg-composer .seg{padding:0;background:none;box-shadow:none}
.cg-composer .seg button{height:32px;padding:0 12px;border-radius:10px;font-size:14px;color:var(--ink-3)}
.cg-composer .seg button.active{color:var(--ink)}
.cg-composer .seg .ind{border-radius:10px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.07),0 1px 3px rgba(0,0,0,.1)}
.cg-c-for{display:flex;align-items:center;gap:6px;min-width:0;height:30px;padding:0 10px;border-radius:9px;font-size:12.5px;font-weight:500;color:var(--ink-2);background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.07)}
.cg-c-for .icon{width:14px;height:14px;flex:none}
.cg-c-for span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cg-composer textarea,.cg-composer textarea:focus{display:block;width:100%;min-height:30px;max-height:160px;margin:8px 0 6px;padding:4px 6px;border:0;background:none;box-shadow:none;resize:none;font:inherit;font-size:16px;line-height:1.45;color:var(--ink);outline:0}
.cg-composer textarea::placeholder{color:var(--faint)}
.cg-c-bot{display:flex;align-items:center;justify-content:flex-end;gap:12px}
.cg-c-left{font-size:12.5px;font-weight:500;color:var(--mute)}
.cg-send{display:grid;place-items:center;width:36px;height:36px;flex:none;border-radius:50%;color:#fff;background:#0f0f10;transition:transform .4s var(--spring),background .2s}
.cg-send .icon{width:17px;height:17px}
.cg-send:hover{background:#2a2a2d;transform:translateY(-1px)}
.cg-send:active{transform:scale(.92)}

/* An example full size, as on the reference: a slim panel, the picture large on its own light, every example below. */
dialog#modal.cg-modal.wide{position:fixed;inset:0;width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;border-radius:0;overflow:hidden;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
dialog#modal.cg-modal::backdrop{background:rgba(14,14,15,.62);-webkit-backdrop-filter:blur(10px) saturate(.9);backdrop-filter:blur(10px) saturate(.9)}
dialog#modal.cg-modal .modal-body{height:100%}
dialog#modal.cg-modal .sheet-grip{display:none}
.cg-view{--cg-mx:max(64px,calc((100vw - 1320px) / 2));--cg-top:22px;--cg-film:96px;position:absolute;inset:0}
dialog#modal.cg-modal .modal-close{position:fixed;z-index:5;top:36px;right:calc(max(64px,calc((100vw - 1320px) / 2)) + 14px);color:#fff;background:rgba(0,0,0,.3);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.cg-sheet{position:absolute;left:var(--cg-mx);right:var(--cg-mx);top:var(--cg-top);bottom:var(--cg-film);display:grid;grid-template-columns:minmax(280px,320px) minmax(0,1fr);border-radius:20px;overflow:hidden;background:#141415;box-shadow:0 40px 100px -30px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.06)}
.cg-side{position:relative;display:flex;flex-direction:column;min-height:0;overflow:auto;padding:22px 20px 18px;background:#fbfbf9;scrollbar-width:thin}
.cg-count{position:absolute;right:20px;top:25px;font-size:11px;color:var(--mute)}
.cg-x-k{padding-right:56px;font-size:12px;font-weight:500;color:var(--mute)}
.cg-x-title{margin:10px 0 20px;font-size:26px;font-weight:600;letter-spacing:-.035em;line-height:1.08}
.cg-x-title em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.015em}
.cg-x-dl{display:grid;gap:16px;margin:0}
.cg-x-dl dt{margin-bottom:4px;font-size:12px;font-weight:500;color:var(--mute)}
.cg-x-dl dd{margin:0;font-size:14px;line-height:1.55;color:var(--ink-2)}
.cg-x-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px}
.cg-x-chips i{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;font-size:12px;font-style:normal;font-weight:500;color:var(--ink-2);background:rgba(12,12,13,.05)}
.cg-x-actions{display:grid;gap:8px;margin-top:auto;padding-top:20px}
.cg-x-actions .btn{--h:42px;width:100%;border-radius:12px;font-size:14px}
.cg-stage{position:relative;margin:0;min-width:0;min-height:0;display:grid;place-items:center;overflow:hidden;background:radial-gradient(120% 90% at 50% 40%,#2b2b2d,#111112);container-type:size}
.cg-stage-bg{position:absolute;inset:-8%;width:116%;height:116%;object-fit:cover;filter:blur(48px) saturate(1.15) brightness(.6);transform:scale(1.1)}
.cg-stage-art{position:relative;z-index:1;width:min(88cqw,calc(86cqh * var(--r)));aspect-ratio:var(--r);border-radius:4px;overflow:hidden;box-shadow:0 30px 80px -30px rgba(0,0,0,.75);animation:cg-art .7s var(--ease) both}
@keyframes cg-art{from{opacity:0;transform:scale(.985);filter:blur(8px)}}
.cg-stage-art>.cg-ph{height:100%}
.cg-film{position:absolute;left:var(--cg-mx);right:var(--cg-mx);bottom:14px;height:68px;display:flex;align-items:center;justify-content:safe center;gap:8px;padding:0 4px;overflow-x:auto;scrollbar-width:none}
.cg-film::-webkit-scrollbar{display:none}
.cg-fi{position:relative;flex:none;width:52px;height:52px;border-radius:9px;overflow:hidden;opacity:.5;box-shadow:0 0 0 1px rgba(255,255,255,.1);transition:opacity .25s,width .45s var(--ease),height .45s var(--ease),box-shadow .3s}
.cg-fi img{display:block;width:100%;height:100%;object-fit:cover}
.cg-fi:hover{opacity:.9}
.cg-fi.on{width:64px;height:64px;opacity:1;box-shadow:0 0 0 2px #fff}
.cg-arrow{position:absolute;top:calc(var(--cg-top) + (100% - var(--cg-top) - var(--cg-film)) / 2 - 20px);z-index:4;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;color:#fff;background:rgba(255,255,255,.1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);transition:background .2s,transform .4s var(--spring)}
.cg-arrow:hover{background:rgba(255,255,255,.22)}
.cg-arrow:active{transform:scale(.92)}
.cg-arrow .icon{width:18px;height:18px}
.cg-arrow.is-prev{left:calc(var(--cg-mx) - 52px)}
.cg-arrow.is-next{right:calc(var(--cg-mx) - 52px)}

@media (max-width:999px){
 .cg-split{grid-template-columns:1fr}
 .cg-preview{display:none}
}
@media (max-width:899px){
 .cg-wall{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));column-gap:6px;padding-bottom:220px}
 .cg-split{padding-bottom:200px}
 .cg-dock{bottom:calc(92px + env(safe-area-inset-bottom));margin-top:-200px}
 html[data-kind="workspace"]:has(.cg-dock) #toast{bottom:calc(var(--cg-dock,150px) + 104px + env(safe-area-inset-bottom))}
 .cg-c-for,.cg-c-left{display:none}
 .cg-send{margin-left:auto}
 /* At rest on a phone: one line and the arrow. Touched: the ideas and the types come up. */
 .cg-composer{transition:border-radius .45s var(--ease)}
 .cg-composer:not(.is-open){display:flex;align-items:center;gap:8px;padding:6px 6px 6px 16px;border-radius:999px}
 .cg-composer:not(.is-open) :is(.cg-c-top,.cg-c-ideas,.cg-c-refs){display:none}
 .cg-c-what .cg-c-k{display:none}
 .cg-composer:not(.is-open) textarea{flex:1;min-width:0;margin:0;padding:4px 0}
 .cg-composer:not(.is-open) .cg-send{width:38px;height:38px}
 .cg-composer.is-open :is(.cg-c-top,.cg-c-ideas){animation:cg-rise .45s var(--ease) both}
 .cg-yrow{flex-wrap:wrap}
}
@media (max-width:760px){
 .cg-cards{display:none}
 .cg-view{--cg-mx:0px;--cg-top:0px;--cg-film:0px}
 .cg-sheet{grid-template-columns:1fr;grid-template-rows:56dvh auto;border-radius:0;overflow:auto}
 .cg-stage{order:-1}
 .cg-side{overflow:visible;padding-bottom:calc(24px + env(safe-area-inset-bottom))}
 .cg-film,.cg-arrow{display:none}
 dialog#modal.cg-modal .modal-close{top:12px;right:12px}
}
@media (max-width:600px){
 .cg-wall{grid-template-columns:repeat(2,minmax(0,1fr))}
 .cg-tile{border-radius:9px}
 .cg-tabs{gap:20px}
 .cg-row{grid-template-columns:36px minmax(0,1fr) auto;gap:10px;padding:8px 10px}
 .cg-row-mark{width:36px;height:36px;border-radius:10px}
}
@media (prefers-reduced-motion:reduce){
 .cg-tile,.cg-co,.cg-sq,.cg-composer,.cg-stage-art,.cg-group,.cg-row.is-fresh,.cg-row.is-developing,.cg-composer.is-open :is(.cg-c-top,.cg-c-ideas){animation:none}
 .cg-ph img,.cg-tile:hover .cg-ph img,.cg-co,.cg-card:hover .cg-co{transition:none;transform:none}
 .cg-skel,.cg-spin{animation-duration:4s}
}